/* ==========================================================================
   Andy Porter, Psychic Surgeon
   Design system. Every layout primitive here maps to a native Elementor
   widget or a flex container. No CSS grid anywhere.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #0B0B10;   /* primary dark ground */
  --ink-2:      #14141C;   /* raised panels on dark */
  --ink-3:      #1D1D28;   /* cards, borders on dark */
  --ink-line:   #2B2B38;

  /* Brand colours, taken from the logo.
     GOLD is the accent on dark grounds. PURPLE is the accent on light grounds.
     They are not interchangeable - see the two rules below. */
  --gold:       #d7ae41;   /* logo gold. On ink: 9.3:1, safe for text */
  --gold-soft:  #e6cd8a;   /* headings + links on ink: 12.6:1 */
  --gold-deep:  #b8912f;   /* hover on dark */
  --purple:     #673c9c;   /* logo purple. On parchment: 6.9:1, safe for text */
  --purple-deep:#4E2E77;   /* hover on light: 9.5:1 */
  --teal:       #2e788d;   /* logo teal. On parchment: 4.5:1. NOT safe on ink (3.9:1) */

  /* RULE 1 - never gold text on parchment. #d7ae41 on #F5F2EA is 1.9:1,
     a bad WCAG failure. Use --purple on light grounds.
     RULE 2 - never purple text on ink. #673c9c on #0B0B10 is 2.6:1.
     Purple on dark is only ever a filled background with white text (7.7:1).
     RULE 3 - teal is a light-ground colour only. #2e788d on parchment is
     4.5:1 and fine; on ink it is 3.9:1 and fails. As a filled ground with
     white text it measures 5.1:1 and is safe anywhere. */

  --parchment:  #F5F2EA;   /* long-form reading ground */
  --parchment-2:#EBE6DA;   /* alternating band on light */
  --paper-line: #DCD5C4;

  --on-dark:      #C6C3BC; /* body copy on ink */
  --on-dark-head: #F2EFE8; /* headings on ink */
  --on-light:     #3A3730; /* body copy on parchment */
  --on-light-head:#1A1814; /* headings on parchment */

  --font-head: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 760px;   /* reading measure for long-form */
  --pad-y: 6.5rem;
  --radius: 10px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--on-dark-head);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .75rem;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.13rem; }
p  { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.lede { font-size: 1.18rem; line-height: 1.7; }
.muted { opacity: .82; }
.center { text-align: center; }
.center .row { justify-content: center; }
.mw { max-width: 720px; }
.center .mw { margin-left: auto; margin-right: auto; }

/* --- Sections and containers -------------------------------------------- */
/* Elementor: Container (boxed), padding 6.5rem top/bottom */
.section { padding: var(--pad-y) 0; position: relative; }
.section-sm { padding: 3.6rem 0; }
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--wrap-narrow); }

.sec-ink       { background: var(--ink); }
.sec-raised    { background: var(--ink-2); }
.sec-parchment { background: var(--parchment); color: var(--on-light); }
.sec-parchment h1, .sec-parchment h2, .sec-parchment h3,
.sec-parchment h4, .sec-parchment h5 { color: var(--on-light-head); }
.sec-parchment .eyebrow { color: var(--purple); }
.sec-parchment a { color: var(--purple); }
.sec-parchment a:hover { color: var(--purple-deep); }
.sec-parchment-2 { background: var(--parchment-2); color: var(--on-light); }
.sec-parchment-2 h1, .sec-parchment-2 h2, .sec-parchment-2 h3,
.sec-parchment-2 h4 { color: var(--on-light-head); }
.sec-parchment-2 .eyebrow { color: var(--purple); }
.sec-parchment-2 a { color: var(--purple); }

/* A hairline rule between two dark sections */
.sec-topline { border-top: 1px solid var(--ink-line); }

/* --- Flower of life motif ------------------------------------------------ */
/* Elementor: Container background image, position centre, no-repeat */
.geo { position: relative; overflow: hidden; }
.geo::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(980px, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../images/flower-of-life.svg") center/contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
.geo > * { position: relative; z-index: 1; }
.geo-top::before { top: 8%; }

/* --- Rows and columns ---------------------------------------------------- */
/* Elementor: Container → Flex → Row → Wrap, children at 50 / 33 / 25% */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  align-items: stretch;
}
.row > * { flex: 1 1 100%; min-width: 0; }
.col-2 > * { flex-basis: calc(50% - 1.1rem); }
.col-3 > * { flex-basis: calc(33.333% - 1.47rem); }
.col-4 > * { flex-basis: calc(25% - 1.65rem); }
.row-tight { gap: 1.2rem; }
.row-tight.col-3 > * { flex-basis: calc(33.333% - .8rem); }
.row-middle { align-items: center; }

/* Elementor: two child containers at 56% / 38% */
.split { display: flex; flex-wrap: wrap; gap: 3.4rem; align-items: center; }
.split > * { flex: 1 1 100%; min-width: 0; }
.split-60 > *:first-child { flex-basis: 56%; }
.split-60 > *:last-child  { flex-basis: calc(44% - 3.4rem); }
.split-40 > *:first-child { flex-basis: calc(44% - 3.4rem); }
.split-40 > *:last-child  { flex-basis: 56%; }
.split-even > * { flex-basis: calc(50% - 1.7rem); }
.split-top { align-items: flex-start; }

/* --- Buttons ------------------------------------------------------------- */
/* Elementor: Button widget */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.9rem;
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--gold-soft); }
.btn-ghost:hover { background: rgba(215,174,65,.14); color: var(--gold-soft); }
.sec-parchment .btn-ghost, .sec-parchment-2 .btn-ghost { border-color: var(--purple); color: var(--purple); }
.sec-parchment .btn-ghost:hover, .sec-parchment-2 .btn-ghost:hover { background: rgba(103,60,156,.1); color: var(--purple-deep); }
.btn-lg { padding: 1.1rem 2.4rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: .9rem; }
.center .btn-group { justify-content: center; }

/* --- Cards --------------------------------------------------------------- */
/* Elementor: Container with border, radius 10px, padding 2.2rem */
.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card-pad-sm { padding: 1.6rem; }
.sec-parchment .card, .sec-parchment-2 .card {
  background: #FFFDF8;
  border-color: var(--paper-line);
}
.card-media { padding: 0; overflow: hidden; }
.card-media img { border-radius: var(--radius) var(--radius) 0 0; width: 100%; }
.card-media .card-body { padding: 1.7rem; }
.card-gold { border-color: var(--gold); }

/* --- Icon boxes ---------------------------------------------------------- */
/* Elementor: Icon Box widget */
.icon-box { display: flex; flex-direction: column; gap: .1rem; }
.icon-box .ico {
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  flex: 0 0 auto;
}
.icon-box .ico svg { width: 22px; height: 22px; }
.sec-parchment .icon-box .ico, .sec-parchment-2 .icon-box .ico { border-color: var(--purple); color: var(--purple); }
.icon-box h3, .icon-box h4 { margin-bottom: .35rem; }
.icon-box p { font-size: .97rem; margin-bottom: 0; }

/* Horizontal variant */
.icon-row { display: flex; gap: 1.1rem; align-items: flex-start; }
.icon-row .ico { margin-bottom: 0; }

/* --- Numbered steps ------------------------------------------------------ */
/* Elementor: Icon Box, or Heading + Text */
.step { display: flex; gap: 1.3rem; align-items: flex-start; }
.step-num {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
}
.step h3 { margin-bottom: .3rem; }
.step p { margin-bottom: 0; }

/* --- Tick list ----------------------------------------------------------- */
/* Elementor: Icon List with a tick icon */
.check { list-style: none; margin: 0 0 1.15rem; padding: 0; }
.check li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .62rem;
}
.check li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.sec-parchment .check li::before, .sec-parchment-2 .check li::before { border-color: var(--purple); }
.check-lg li { margin-bottom: .95rem; }

/* --- Testimonials -------------------------------------------------------- */
/* Elementor: Testimonial widget */
.quote {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 2rem 2.1rem;
  display: flex;
  flex-direction: column;
}
.sec-parchment .quote, .sec-parchment-2 .quote {
  background: #FFFDF8;
  border-color: var(--paper-line);
  border-left-color: var(--purple);
}
.quote blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--font-head);
  font-size: 1.16rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--on-dark-head);
}
.sec-parchment .quote blockquote, .sec-parchment-2 .quote blockquote { color: var(--on-light-head); }
.quote cite {
  font-style: normal;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .04em;
  margin-top: auto;
}
.quote cite span { display: block; font-weight: 400; opacity: .75; letter-spacing: 0; }

/* Elementor: Star Rating widget */
.stars { display: flex; gap: .18rem; margin-bottom: .9rem; color: var(--gold); }
.sec-parchment .stars, .sec-parchment-2 .stars { color: var(--purple); }
.stars svg { width: 16px; height: 16px; }

/* --- Price tables -------------------------------------------------------- */
/* Elementor: Price Table widget */
.price {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 2.1rem;
  display: flex;
  flex-direction: column;
}
.price.featured { border-color: var(--gold); }
.price .price-tag {
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin: .5rem 0 .3rem;
}
.sec-parchment .price { background: #FFFDF8; border-color: var(--paper-line); }
.sec-parchment .price .price-tag { color: var(--purple); }
.price .price-note { font-size: .88rem; opacity: .75; margin-bottom: 1.3rem; }
.price .btn { margin-top: auto; }
.price .check { margin-bottom: 1.5rem; }
.badge {
  display: inline-block;
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  margin-bottom: .8rem;
}

/* --- Accordion ----------------------------------------------------------- */
/* Elementor: Accordion widget */
.accordion { border-top: 1px solid var(--ink-line); }
.sec-parchment .accordion, .sec-parchment-2 .accordion { border-color: var(--paper-line); }
.accordion details { border-bottom: 1px solid var(--ink-line); }
.sec-parchment .accordion details, .sec-parchment-2 .accordion details { border-color: var(--paper-line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--on-dark-head);
}
.sec-parchment .accordion summary, .sec-parchment-2 .accordion summary { color: var(--on-light-head); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "";
  position: absolute;
  right: .4rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.sec-parchment .accordion summary::after, .sec-parchment-2 .accordion summary::after { border-color: var(--purple); }
.accordion details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.accordion .acc-body { padding: 0 0 1.5rem; }
.accordion .acc-body p:last-child { margin-bottom: 0; }

/* --- Media --------------------------------------------------------------- */
.media img { border-radius: var(--radius); width: 100%; }
.media-round img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
/* Elementor: Image widget + box-shadow */
.media-offset img { border-radius: var(--radius); box-shadow: 16px 16px 0 rgba(215,174,65,.9); }
.media-frame img { border-radius: var(--radius); border: 1px solid var(--ink-3); }
.sec-parchment .media-frame img { border-color: var(--paper-line); }
.media-tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.media-wide img { aspect-ratio: 16 / 10; object-fit: cover; }
.figcap { font-size: .84rem; opacity: .7; margin-top: .6rem; }

/* Elementor: Image Gallery widget */
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; }
.gallery > * { flex: 1 1 calc(33.333% - .67rem); min-width: 0; }
.gallery img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; }

/* --- Stats --------------------------------------------------------------- */
/* Elementor: Counter widget */
.stat { text-align: center; }
.stat .stat-num {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}
.sec-parchment .stat .stat-num, .sec-parchment-2 .stat .stat-num { color: var(--purple); }
.stat .stat-label { font-size: .93rem; opacity: .85; }

/* --- Long-form article --------------------------------------------------- */
.prose { max-width: var(--wrap-narrow); margin: 0 auto; }
.prose h2 { margin-top: 2.8rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.prose h3 { margin-top: 2rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose figure { margin: 2.2rem 0; }
.prose blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--purple);
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--on-light-head);
}

/* --- Notice / disclaimer ------------------------------------------------- */
.notice {
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  background: rgba(215,174,65,.05);
  font-size: .97rem;
}
.sec-parchment .notice, .sec-parchment-2 .notice {
  border-color: var(--paper-line);
  border-left-color: var(--purple);
  background: rgba(103,60,156,.05);
}
.notice strong { color: var(--on-dark-head); }
.sec-parchment .notice strong, .sec-parchment-2 .notice strong { color: var(--on-light-head); }

/* --- Header -------------------------------------------------------------- */
/* Elementor: Header template + Nav Menu widget */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11,11,16,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand img { width: 38px; height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--on-dark-head);
  letter-spacing: -0.01em;
}
.brand-tag {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  display: inline-block;
  padding: .55rem .72rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}
.nav a:hover { color: var(--gold-soft); background: rgba(215,174,65,.09); }
.nav a[aria-current="page"] { color: var(--gold); }
.header-cta { flex: 0 0 auto; }
.header-cta .btn { padding: .68rem 1.35rem; font-size: .88rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  color: var(--on-dark-head);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 76px 0 0;
  background: var(--ink);
  z-index: 99;
  overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: .95rem .2rem;
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--on-dark-head);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-line);
}
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--gold); }
.mobile-nav .btn { margin-top: 1.6rem; }
body.nav-open { overflow: hidden; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 6rem 0 5.5rem;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-position: center 22%;
  background-size: cover;
  opacity: .3;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,16,.72) 0%, rgba(11,11,16,.86) 55%, var(--ink) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 1.2rem; }
.hero .lede { max-width: 620px; }
.hero-credit {
  margin: 1.6rem 0 1.8rem;
  font-size: .92rem;
  opacity: .8;
  max-width: 620px;
}

/* Page header for inner pages */
.page-head { padding: 4.5rem 0 3.4rem; background: var(--ink-2); border-bottom: 1px solid var(--ink-line); }
.page-head h1 { margin-bottom: .9rem; }
.page-head .lede { max-width: 660px; }

/* --- Breadcrumb ---------------------------------------------------------- */
.crumb { font-size: .85rem; opacity: .75; margin-bottom: 1rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { padding: 0 .45rem; }

/* --- CTA band ------------------------------------------------------------ */
/* Elementor: save this as a global section: it repeats on every page */
.cta-band { background: var(--ink-2); border-top: 1px solid var(--ink-line); }
.cta-band h2 { margin-bottom: 1rem; }

/* --- Footer -------------------------------------------------------------- */
/* Elementor: Footer template */
.site-footer {
  background: #07070B;
  border-top: 1px solid var(--ink-line);
  padding: 4rem 0 2rem;
  font-size: .93rem;
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.footer-cols > * { flex: 1 1 100%; min-width: 0; }
.footer-brand { flex-basis: 30%; }
.footer-col { flex-basis: calc(23.333% - 2.5rem); }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold-soft); text-decoration: underline; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .85rem;
  opacity: .8;
}
.footer-legal { max-width: 680px; font-size: .82rem; opacity: .75; margin-top: 1.6rem; line-height: 1.65; }
.social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  color: var(--on-dark);
}
.social a:hover { border-color: var(--gold); color: var(--gold); }
.social svg { width: 17px; height: 17px; }

/* --- Forms --------------------------------------------------------------- */
/* Elementor: Form widget */
.form-card { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--radius); padding: 2.2rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .42rem; color: var(--on-dark-head); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem .95rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-dark-head);
  background: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 8px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.field textarea { min-height: 145px; resize: vertical; }
.field-hint { font-size: .84rem; opacity: .72; margin-top: .35rem; }

/* --- Utilities ----------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.divider { height: 1px; background: var(--ink-line); border: 0; margin: 3rem 0; }
.sec-parchment .divider { background: var(--paper-line); }
.skip-link {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--ink);
  padding: .8rem 1.2rem; font-weight: 700; z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Responsive ---------------------------------------------------------- */
/* Elementor: set tablet + mobile widths on every container */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
}
@media (max-width: 980px) {
  :root { --pad-y: 4.4rem; }
  .col-3 > *, .col-4 > * { flex-basis: calc(50% - 1.1rem); }
  .row-tight.col-3 > * { flex-basis: calc(50% - .6rem); }
  .split { gap: 2.4rem; }
  .split-60 > *:first-child, .split-60 > *:last-child,
  .split-40 > *:first-child, .split-40 > *:last-child,
  .split-even > * { flex-basis: 100%; }
  .split-40 > *:first-child { order: 2; }
  .split-40 > *:last-child { order: 1; }
  .footer-brand, .footer-col { flex-basis: calc(50% - 1.25rem); }
  .media-offset img { box-shadow: 12px 12px 0 rgba(215,174,65,.9); }
}
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  :root { --pad-y: 3.6rem; }
  .col-2 > *, .col-3 > *, .col-4 > * { flex-basis: 100%; }
  .row-tight.col-3 > * { flex-basis: 100%; }
  .gallery > * { flex-basis: calc(50% - .5rem); }
  .footer-brand, .footer-col { flex-basis: 100%; }
  .card, .price, .form-card, .quote { padding: 1.6rem; }
  .hero { padding: 4rem 0 3.6rem; }
  .btn-group .btn { width: 100%; }
  .media-offset img { box-shadow: 8px 8px 0 rgba(215,174,65,.9); }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Visually hidden, still read by screen readers and still a real heading for
   document outline purposes. Elementor: Heading widget + CSS class "sr-only". */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* Solid buttons inside light sections.
   `.sec-parchment a` (0,1,1) outranks `.btn` (0,1,0), so without this the
   solid button's label inherits the bronze link colour and renders bronze on
   gold at 2.99:1, a WCAG AA failure. `:not(.btn-ghost)` keeps ghost buttons
   bronze, which is correct on a light ground. */
.sec-parchment a.btn:not(.btn-ghost),
.sec-parchment-2 a.btn:not(.btn-ghost) { color: var(--ink); }
.sec-parchment a.btn:not(.btn-ghost):hover,
.sec-parchment-2 a.btn:not(.btn-ghost):hover { color: var(--ink); }

/* --- Shop -------------------------------------------------------------- */
/* Elementor: Image Box, or a container with an Image + Heading + Text */
.product {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sec-parchment .product, .sec-parchment-2 .product {
  background: #FFFDF8;
  border-color: var(--paper-line);
}
.product img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.product h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.product .product-price {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 .2rem;
}
.sec-parchment .product .product-price, .sec-parchment-2 .product .product-price { color: var(--purple); }
.product .product-stock {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .7rem;
}
.product p { font-size: .95rem; margin-bottom: 1rem; }
.product .btn { margin-top: auto; align-self: flex-start; }
.product.is-soldout img { filter: grayscale(1); opacity: .5; }
.product.is-soldout .product-price { color: inherit; opacity: .7; }

/* --- Booking rows -------------------------------------------------------- */
/* Mirrors the live site's stacked appointment blocks rather than a price grid.
   Elementor: Container > Flex > Row, two child containers at 30% / 70%,
   both set to 100% width on tablet and below. */
.booking-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.booking-row > * { flex: 1 1 100%; min-width: 0; }
.booking-meta   { flex-basis: 30%; }
.booking-detail { flex-basis: calc(70% - 2rem); }
.booking-item {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 2.2rem;
  margin-bottom: 1.4rem;
}
.booking-item.featured { border-color: var(--gold); }
.booking-item h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .6rem; }
.booking-item .price-tag {
  font-family: var(--font-head);
  font-size: 2.9rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin: 0 0 .3rem;
}
.booking-item .same-day {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.sec-parchment .booking-item { background: #FFFDF8; border-color: var(--paper-line); }
.sec-parchment .booking-item .price-tag { color: var(--purple); }
.sec-parchment .booking-item .same-day { color: var(--purple); }

@media (max-width: 980px) {
  .booking-meta, .booking-detail { flex-basis: 100%; }
  .booking-row { gap: 1.2rem; }
}
@media (max-width: 700px) {
  .booking-item { padding: 1.6rem; }
  .booking-item .price-tag { font-size: 2.4rem; }
}

/* --- Issue list ---------------------------------------------------------- */
/* Elementor: Icon Box in a 2-column row, or an Accordion if it feels long */
.issue { display: flex; gap: 1rem; align-items: flex-start; }
.issue .issue-mark {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: .62em;
  transform: rotate(45deg);
  background: var(--gold);
}
.sec-parchment .issue .issue-mark, .sec-parchment-2 .issue .issue-mark { background: var(--purple); }
.issue h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.issue p { font-size: .97rem; margin-bottom: 0; }

/* --- Quick select ------------------------------------------------------- */
/* Jump links to each appointment block, so nobody has to scroll the whole
   page to find the one they want.
   Elementor: a Container set to Flex > Row > Wrap, holding Button widgets
   with the link set to the matching section anchor. */
.quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}
.quick-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .72rem 1.05rem;   /* 44px tall - comfortable tap target */
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--on-dark);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.quick-nav a:hover,
.quick-nav a:focus-visible {
  border-color: var(--gold);
  background: rgba(215,174,65,.1);
  color: var(--on-dark-head);
}
.quick-nav .qn-price {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.quick-nav-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2rem 0 0;
}

/* The header is sticky at 76px, so anchored blocks need clearance or the
   heading lands underneath it. */
.booking-item { scroll-margin-top: 96px; }

@media (max-width: 700px) {
  .quick-nav { gap: .45rem; }
  /* 44px minimum tap target - these are the primary control on the page */
  .quick-nav a { padding: .75rem .95rem; font-size: .88rem; }
}

/* --- Shop category tiles ------------------------------------------------- */
/* The whole tile is one link. Elementor: Image Box widget with the link set on
   the box, or a Container with a link and Image + Heading + Text inside. */
.cat-tile {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--on-dark);
  transition: border-color .18s ease, transform .18s ease;
}
.cat-tile:hover, .cat-tile:focus-visible { border-color: var(--gold); transform: translateY(-2px); color: var(--on-dark); }
.cat-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cat-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.cat-title {
  font-family: var(--font-head);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--on-dark-head);
  line-height: 1.2;
  margin-bottom: .4rem;
}
.cat-meta {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .75rem;
}
.cat-price { color: var(--gold); margin-left: .4rem; letter-spacing: 0; }
.cat-lede { font-size: .95rem; line-height: 1.6; margin-bottom: 1.1rem; }
.cat-go { margin-top: auto; font-weight: 700; font-size: .93rem; color: var(--gold-soft); }
.cat-tile:hover .cat-go { color: var(--gold); }
.sec-parchment .cat-tile, .sec-parchment-2 .cat-tile { background: #FFFDF8; border-color: var(--paper-line); color: var(--on-light); }
.sec-parchment .cat-title, .sec-parchment-2 .cat-title { color: var(--on-light-head); }
.sec-parchment .cat-price, .sec-parchment-2 .cat-price,
.sec-parchment .cat-go, .sec-parchment-2 .cat-go { color: var(--purple); }

/* Four-up product grid on category pages */
.row-tight.col-4 > * { flex-basis: calc(25% - .9rem); }
@media (max-width: 980px) { .row-tight.col-4 > * { flex-basis: calc(33.333% - .8rem); } }
@media (max-width: 760px)  { .row-tight.col-4 > * { flex-basis: calc(50% - .6rem); } }
@media (max-width: 430px)  { .row-tight.col-4 > * { flex-basis: 100%; } }

/* --- Product page -------------------------------------------------------- */
.product-hero { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.product-hero > * { flex: 1 1 100%; min-width: 0; }
.product-hero .product-gallery { flex-basis: 48%; }
.product-hero .product-info    { flex-basis: calc(52% - 3rem); }
.product-gallery img { width: 100%; border-radius: var(--radius); border: 1px solid var(--ink-3); }
.product-info .price-tag {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin: .4rem 0 .2rem;
}
.product-info .stock-line {
  font-size: .84rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.4rem;
}
@media (max-width: 900px) {
  .product-hero { gap: 2rem; }
  .product-hero .product-gallery, .product-hero .product-info { flex-basis: 100%; }
  .product-info .price-tag { font-size: 2.4rem; }
}

/* --- CTA band ------------------------------------------------------------ */
/* Two earlier attempts filled this band with a flat colour - first the brand
   purple, then the brand gold. Both looked wrong, and for the same reason: a
   large flat slab of saturated colour fights a site whose whole character is
   dark, quiet and typographic. The hue was never the problem.

   So this version stands out through LIGHT rather than paint: a soft purple
   glow rising out of the dark, the flower-of-life motif turned up so it reads
   as deliberate ornament, hairline gold rules top and bottom, and the gold
   button left as the single bright thing on the page. Both brand colours are
   present - as light, not as fill. */
.cta-band {
  background:
    radial-gradient(ellipse 90% 120% at 50% 55%, rgba(103,60,156,.30) 0%, rgba(103,60,156,.10) 45%, rgba(11,11,16,0) 72%),
    var(--ink);
  border-top: 1px solid rgba(215,174,65,.32);
  border-bottom: 1px solid rgba(215,174,65,.32);
  color: var(--on-dark);
  padding: 7.5rem 0;
}
.cta-band h2 {
  color: var(--on-dark-head);
  font-size: clamp(2rem, 4vw, 3rem);
}
.cta-band .eyebrow { color: var(--gold); }
.cta-band .lede { color: #D8D5CE; }

/* the motif is ornament here, not texture - bigger and brighter than elsewhere */
.cta-band.geo::before {
  background-image: url("../images/flower-of-life.svg");
  width: min(1100px, 150vw);
  opacity: .17;
}

/* the one bright element, so the eye goes to it */
.cta-band .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 34px rgba(215,174,65,.28);
}
.cta-band .btn:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--ink);
  box-shadow: 0 0 42px rgba(215,174,65,.42);
}
.cta-band .btn-ghost {
  background: transparent;
  border-color: rgba(230,205,138,.55);
  color: var(--gold-soft);
  box-shadow: none;
}
.cta-band .btn-ghost:hover {
  background: rgba(215,174,65,.12);
  border-color: var(--gold-soft);
  color: var(--gold-soft);
  box-shadow: none;
}

@media (max-width: 700px) {
  .cta-band { padding: 4.6rem 0; }
}

/* Purple keeps a quiet structural role: the rule under the sticky header. */
.site-header { border-bottom-color: var(--purple); }


/* --- Teal: informational callouts ---------------------------------------- */
/* The third logo colour. Gold means brand and action, purple is the secondary
   accent, teal marks information. Used only on light grounds, where it
   measures 4.5:1 - it is not safe as text on the ink ground. */
.sec-parchment .notice,
.sec-parchment-2 .notice {
  border-left-color: var(--teal);
  background: rgba(46,120,141,.07);
}
.sec-parchment .notice strong,
.sec-parchment-2 .notice strong { color: #235C6D; }