/* =========================================================================
   GOLDENTURAS — Custom Styles (v2)
   Works on top of Tailwind (CDN).

   BRAND SYSTEM (single source of truth = the :root vars below)
     Clay        #BA8368  → CTAs, highlights, badges, icons, active states
                            (sampled from the rising-sun logo mark)
     Forest      #172B25  → headings, dark sections, footer
     Backgrounds #FFFFFF / #FBF8F4   Text #172B25
   ========================================================================= */

:root{
  /* The dark surfaces are a deep green rather than a navy. Each value was
     picked to sit at the same luminance as the blue it replaced, so every
     contrast ratio the design relied on still holds: white on --navy is
     14.9:1, and white/60 body copy is 6.3:1, both clear of WCAG AA.
     The token names stay as they are, since they read as "the dark tone"
     throughout the stylesheet and renaming them would touch every rule. */
  --navy:#172B25;
  --navy-deep:#101F1B;
  --navy-light:#213B33;
  --clay:#BA8368;
  --clay-dark:#9A6449;
  --clay-light:#D6A88F;
  --clay-wash:#F5E9E1;
  --teal:#4E7C76;
  /* The footer reads as green rather than near-black: lifted and slightly
     more saturated than --navy, so it is clearly the same family but its
     own surface. White/60 body copy still clears AA at 5.8:1. */
  --forest:#17362A;
  --ink:#172B25;
  --ink-soft:#4C6058;
  --mist:#FDFBF9;
  --sand:#FAF6F1;
  /* Slightly stronger now that section tints are near-white — white
     cards need their edge to do the separating. */
  --line:rgba(23,43,37,.12);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:7rem; }
body{ overflow-x:hidden; }
img,svg,iframe{ max-width:100%; }
::selection{ background:var(--clay); color:#fff; }

/* keep content clear of the fixed mobile CTA bar */
@media (max-width:1023px){
  body{ padding-bottom:4.75rem; }
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid rgba(186,131,104,.55);
  outline-offset:2px;
  border-radius:8px;
}

.hide-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.hide-scrollbar::-webkit-scrollbar{ display:none; }

/* ---------- Reusable typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clay-dark);
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.55;
}
.eyebrow-center::before{ display:none; }
.eyebrow-light{ color:var(--clay-light); }

.section-title{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  letter-spacing:-.022em;
  color:var(--navy);
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.1;
  text-wrap:balance;
}
.section-title.title-light{ color:#fff; }
.title-accent{ font-style:italic; color:var(--clay-dark); }
.title-light .title-accent{ color:var(--clay-light); }

/* Written without a <br>, so it needs to clear its column on one line.
   At the base clamp it would still wrap, hence the slightly tighter cap. */
.section-title--oneline{
  font-size:clamp(1.75rem, 2.6vw, 2.35rem);
  text-wrap:nowrap;
}
@media (max-width:1023px){
  .section-title--oneline{ text-wrap:balance; }
}

/* A longer one-line title in a narrower column needs a smaller cap again:
   at 2.35rem "Turas is Gaelic for a pilgrimage" runs past its 1.15fr track. */
.section-title--oneline-sm{
  font-size:clamp(1.65rem, 2.35vw, 2.1rem);
}

/* A section title set larger than the shared clamp allows. A Tailwind
   lg:text-[4rem] cannot do this on its own: it has the same specificity
   as .section-title but ships in tailwind.css, which loads first, so the
   clamp above would win. Declaring it here, after that rule, is what
   makes it stick. */
@media (min-width:1024px){
  .section-title--xl{ font-size:4rem; }
  .section-title--55{ font-size:55px; }
}

/* ---------- Credential pills ----------
   The four pills need about 707px to sit on one line and the column is
   703px, so they wrapped by a hair. Widening the column would stretch
   the heading and paragraphs with it, so instead the row keeps its
   column and buys the few pixels back from its own padding and gap. */
@media (min-width:1024px){
  .credential-pills{
    flex-wrap:nowrap;
    gap:.5rem;                 /* from .625rem */
  }
  .credential-pills > span{
    padding-inline:.8rem;      /* from 1rem */
  }
}

/* ---------- Buttons ---------- */
.btn-accent{
  background:var(--clay);
  color:#fff;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, filter .25s ease;
  box-shadow:0 10px 30px -8px rgba(186,131,104,.55);
}
.btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 16px 40px -10px rgba(186,131,104,.65); }
.btn-accent:active{ transform:translateY(0); }

.btn-navy{
  background:var(--navy);
  color:#fff;
  transition:transform .35s cubic-bezier(.22,1,.36,1), filter .25s ease;
}
.btn-navy:hover{ transform:translateY(-2px); filter:brightness(1.25); }

.btn-outline{
  border:1px solid var(--clay);
  color:var(--clay-dark);
  background:#fff;
  transition:background .25s ease, color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
/* Hover fills with the darker clay: white on --clay is only 3.2:1, which
   is below AA for the button's label, while --clay-dark clears it. */
.btn-outline:hover{ background:var(--clay-dark); color:#fff; transform:translateY(-2px); }

/* ---------- Hero ---------- */
.hero-gradient{
  background:
    radial-gradient(120% 90% at 78% 12%, #26413A 0%, transparent 55%),
    linear-gradient(168deg,#1D342C 0%, var(--navy) 52%, var(--navy-deep) 100%);
}
/* faint radiating lines echoing the logo's sunburst */
.hero-rays{
  background:repeating-conic-gradient(
    from 195deg at 50% 50%,
    rgba(214,168,143,.06) 0deg 1.1deg,
    transparent 1.1deg 9deg
  );
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 12%, transparent 66%);
          mask-image:radial-gradient(circle at 50% 50%, #000 12%, transparent 66%);
}
.hero-glow{ animation:drift 22s cubic-bezier(.4,0,.2,1) infinite alternate; }
@keyframes drift{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.85; }
  100%{ transform:translate3d(-5%,7%,0) scale(1.14); opacity:1; }
}

/* ---------- Hero: concentric rings behind the portrait ----------
   Echoes the arcs under the rising sun in the logo mark. */
.hero-rings{
  position:absolute; left:50%; top:52%;
  transform:translate(-50%,-50%);
  width:112%; aspect-ratio:1;
  display:grid; place-items:center;
  pointer-events:none;
}
.hero-rings span{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(214,168,143,.16);
}
.hero-rings span:nth-child(1){ width:58%; aspect-ratio:1; }
.hero-rings span:nth-child(2){ width:78%; aspect-ratio:1; border-color:rgba(214,168,143,.11); }
.hero-rings span:nth-child(3){ width:100%; aspect-ratio:1; border-color:rgba(214,168,143,.07); }

/* ---------- Home hero headline ----------
   At 6.5rem "Psychiatry that" needs about 49rem, but .hero-copy is capped
   at max-w-xl (36rem), so the heading is allowed to run past that cap and
   the grid column is widened to match. Below lg the Tailwind text-4xl /
   sm:text-5xl steps still apply, so the phone is untouched. */
@media (min-width:1024px){
  .hero-h1{
    font-size:6.5rem;
    max-width:none;
    width:max-content;
    letter-spacing:-.03em;
  }
}

/* ---------- Hero: trust row ---------- */
.hero-trust{
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:grid;
  grid-template-columns:repeat(2,auto);
  justify-content:start;
  gap:1.15rem clamp(1.5rem, 3vw, 2.75rem);
}
.hero-trust li{
  display:flex; align-items:center; gap:.6rem;
  font-size:.9rem;
  color:rgba(255,255,255,.72);
}
.hero-trust svg{ color:var(--clay-light); flex:none; }
@media (max-width:520px){
  .hero-trust{ grid-template-columns:1fr; }
}

/* ---------- Hero: section frame ----------
   Straight edge into the marquee below — no wave divider. */
.hero-section{
  min-height:clamp(660px, 100svh, 1000px);
  display:flex;
  align-items:center;
  padding-top:8.25rem;   /* clears the fixed navbar */
}
.hero-section > .relative{ width:100%; }

/* Drifting sunrise orb */
.hero-glow-orb{
  border-radius:50%;
  background:radial-gradient(circle, rgba(186,131,104,.34) 0%, rgba(186,131,104,.10) 42%, transparent 68%);
  filter:blur(30px);
  animation:drift 22s cubic-bezier(.4,0,.2,1) infinite alternate;
  pointer-events:none;
}

/* ---------- Hero: portrait ---------- */
.hero-portrait{
  position:relative;
  width:100%;
  max-width:34rem;
  margin-inline:auto;
  display:flex;
  justify-content:center;
}
@media (min-width:1024px){
  .hero-portrait{ justify-self:end; margin-inline:0; }
}

/* ---------- Mobile media-first order ----------
   The copy comes first in the DOM so screen readers and search engines
   meet the headline before the image. Visually, though, the image should
   lead on a narrow screen. Flex ordering flips only the paint order below
   lg, leaving the desktop grid (and any lg:order-* utilities) untouched.

   .media-first marks the grid; the child carrying .media-first__media is
   pulled to the top. Used by the homepage hero, the About hero, and the
   About story split. */
@media (max-width:1023px){
  .hero-grid,
  .media-first{ display:flex; flex-direction:column; }

  .hero-grid > .hero-portrait,
  .media-first > .media-first__media{ order:1; }

  .hero-grid > .hero-copy,
  .media-first > .media-first__copy{ order:2; }
}

/* Soft halo so the figure separates from the navy without a frame */
.hero-halo{
  position:absolute; z-index:0;
  left:50%; top:50%;
  width:108%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 46%, rgba(186,131,104,.34) 0%, rgba(186,131,104,.13) 42%, transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}

.hero-portrait__img{
  position:relative; z-index:1;
  width:100%;
  max-height:72svh;
  object-fit:contain;
  object-position:center;
  /* Head-and-shoulders crop: fade the cut base so the shoulders
     dissolve into the navy instead of ending on a hard straight edge. */
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 74%, rgba(0,0,0,.5) 90%, transparent 100%);
  /* No drop-shadow here: it would trace the mask's fading rectangle and
     draw a visible box under the shoulders. The halo does the lifting. */
  animation:cutoutIn 1.25s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes cutoutIn{
  from{ opacity:0; transform:translateY(30px) scale(.98); }
  to{ opacity:1; transform:none; }
}

/* Availability badge above the portrait */
.hero-badge{
  position:absolute; z-index:2;
  top:4%; left:-.5rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem 1.15rem;
  border-radius:200px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 14px 34px -14px rgba(7,13,11,.5);
  color:var(--ink);
  font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  animation:chipFloat 6s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes chipFloat{ to{ transform:translateY(-9px); } }

/* Name plate resting on the lower edge of the portrait */
/* Sits above the faded base of the portrait so it stays legible. */
.hero-plate{
  position:absolute; z-index:2;
  left:-1rem; bottom:3.5rem;
  padding:.85rem 1.35rem;
  border-radius:1rem;
  background:rgba(19,32,27,.62);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 34px -14px rgba(7,13,11,.5);
}
@media (max-width:1023px){
  .hero-badge{ left:.5rem; }
  .hero-plate{ left:.5rem; }
}

/* ---------- Hero: scroll cue ---------- */
.hero-cue{
  position:absolute; left:50%; bottom:2rem;
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  transition:color .3s ease;
}
.hero-cue:hover{ color:rgba(255,255,255,.85); }
.hero-cue__line{
  width:1px; height:42px;
  background:linear-gradient(to bottom, rgba(255,255,255,.45), transparent);
  position:relative; overflow:hidden;
}
.hero-cue__line::after{
  content:"";
  position:absolute; left:0; top:-42px;
  width:1px; height:42px;
  background:linear-gradient(to bottom, transparent, var(--clay-light));
  animation:cueRun 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes cueRun{ to{ transform:translateY(84px); } }
@media (max-width:1023px){ .hero-cue{ display:none; } }

/* ---------- Interior page hero ----------
   Shorter than the homepage hero — it introduces, it does not sell. */
.page-hero{
  padding-top:10.25rem;
  padding-bottom:clamp(3rem, 6vw, 5rem);
}
.page-hero .hero-portrait__img{ max-height:56svh; }
/* Text-only interior hero, with no portrait to fill the height. */
.page-hero--short{ padding-bottom:clamp(4rem, 7vw, 6rem); }

/* ---------- Single-line hero title ----------
   Written as one continuous line with no <br>, so the break point is the
   browser's rather than a hard-coded one. The size is fluid: at 1280px and
   up the whole line clears in a single row, and below that it wraps where
   it needs to. Forcing nowrap at every width would mean shrinking a
   42-character headline to about 2.8rem, smaller than the other pages. */
.hero-title-line{
  font-size:clamp(2.25rem, 3.15vw, 3.05rem);
  text-wrap:balance;
  max-width:22ch;
}
@media (min-width:1280px){
  .hero-title-line{ max-width:none; }
}

/* ---------- Circle: what it is not ----------
   Sits on the navy band, so it reads as a quiet aside rather than a
   competing card. */
.circle-not{
  padding:clamp(1.75rem, 3vw, 2.35rem);
  border-radius:1.5rem;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.circle-not__title{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.35rem; color:#fff; line-height:1.2;
}
.circle-not__list{
  margin-top:1.35rem;
  display:grid;
  border-top:1px solid rgba(255,255,255,.1);
}
.circle-not__list li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:.85rem;
  align-items:baseline;
  padding-block:.9rem;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.94rem; line-height:1.6;
  color:rgba(255,255,255,.68);
}
/* A short rule, not a cross: this is clarification, not rejection. */
.circle-not__mark{
  width:16px; height:2px;
  border-radius:2px;
  background:var(--clay);
  opacity:.75;
  transform:translateY(-3px);
}
.circle-not__note{
  margin-top:1.35rem;
  font-size:.88rem; line-height:1.65;
  color:rgba(255,255,255,.6);
}

/* ---------- FAQ accordion ---------- */
.faq-item{
  border:1px solid var(--line);
  border-radius:1rem;
  background:#fff;
  overflow:hidden;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.faq-item + .faq-item{ margin-top:.7rem; }
.faq-item[open]{
  border-color:var(--clay-light);
  box-shadow:0 14px 36px -22px rgba(23,43,37,.32);
}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.2rem 1.4rem;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.06rem; color:var(--ink);
  cursor:pointer; list-style:none;
  transition:color .25s ease;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:hover{ color:var(--clay-dark); }
.faq-icon{
  flex:none; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--clay-wash); color:var(--clay-dark);
  transition:transform .45s cubic-bezier(.22,1,.36,1), background .35s ease, color .35s ease;
}
.faq-item[open] .faq-icon{ transform:rotate(135deg); background:var(--clay); color:#fff; }
.faq-a{
  padding:0 1.4rem 1.35rem;
  font-size:.95rem; line-height:1.75; color:var(--ink-soft);
  max-width:64ch;
}

/* ---------- FAQ page: grouped questions ---------- */
.faq-groups{ display:grid; gap:clamp(2.5rem, 4vw, 3.5rem); }
.faq-group__title{
  display:flex; align-items:baseline; gap:.85rem;
  margin-bottom:1.2rem;
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:clamp(1.35rem, 1.15rem + .7vw, 1.7rem);
  color:var(--ink);
}
.faq-group__num{
  font-size:.78rem; letter-spacing:.18em;
  color:var(--clay); opacity:.65;
}

/* Sticky side rail with jump links */
.faq-side{ position:relative; }
@media (min-width:1024px){
  .faq-side{ position:sticky; top:7.5rem; }
}
.faq-jump{
  margin-top:1.35rem;
  display:grid;
  border-top:1px solid var(--line);
}
.faq-jump a{
  padding-block:.85rem;
  border-bottom:1px solid var(--line);
  font-size:.93rem; color:var(--ink-soft);
  transition:color .3s ease, padding-left .35s cubic-bezier(.22,1,.36,1);
}
.faq-jump a:hover{ color:var(--clay-dark); padding-left:.4rem; }

.faq-side__box{
  margin-top:2rem;
  padding:1.6rem 1.5rem;
  border-radius:1.25rem;
  background:var(--clay-wash);
}

/* ---------- FAQ layout on mobile ----------
   The sidebar sits above the answers in the DOM, which is right for the
   jump links but puts "Still not sure?" before the questions it is meant
   to follow. Below lg the grid becomes one flex column and the box is
   ordered last, so it lands under the answers. */
@media (max-width:1023px){
  .faq-layout{ display:flex; flex-direction:column; }
  /* display:contents lifts the children into the flex container so they
     can be ordered individually. It also drops the element's own box, so
     the .reveal fade on the aside can no longer paint: reset it here or
     the sidebar would stay stuck at opacity:0. */
  .faq-layout > .faq-side{
    display:contents;
    opacity:1;
    transform:none;
  }
  .faq-layout > .faq-side > .eyebrow,
  .faq-layout > .faq-side > .faq-jump{ order:1; }
  .faq-layout > .faq-groups{ order:2; }
  .faq-layout > .faq-side > .faq-side__box{ order:3; margin-top:2.5rem; }
}

/* ---------- Contact cards: centred, icon-led ---------- */
.ccard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.5rem;
  padding:2rem 1.6rem 1.6rem;
  text-align:center;
  box-shadow:0 14px 40px -26px rgba(23,43,37,.3);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease;
}
.ccard:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 55px -26px rgba(23,43,37,.34);
  border-color:transparent;
}
.ccard__ico{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:1rem;
  margin:0 auto 1.15rem;
  background:var(--clay); color:#fff;
  box-shadow:0 12px 26px -12px rgba(186,131,104,.75);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.ccard:hover .ccard__ico{ transform:translateY(-3px); }
.ccard__title{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.35rem; color:var(--ink); line-height:1.2;
}
.ccard__value{
  margin-top:.6rem;
  font-size:.95rem; color:var(--ink); font-weight:500;
  word-break:break-word;
}
.ccard__note{
  margin-top:.3rem;
  font-size:.82rem; line-height:1.55; color:var(--ink-soft);
}
.ccard__link{
  margin-top:1.15rem;
  padding-top:1.15rem;
  border-top:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  width:100%;
  font-size:.87rem; font-weight:600;
  color:var(--clay-dark);
  transition:color .3s ease;
}
.ccard__link svg{ transition:transform .4s cubic-bezier(.22,1,.36,1); }
.ccard:hover .ccard__link svg{ transform:translateX(4px); }
.ccard__link:hover{ color:var(--clay); }

/* Required / optional markers on form labels */
.req{ color:#C2504C; font-weight:700; }
.opt{
  font-size:.72rem; font-weight:400;
  color:var(--ink-soft); opacity:.8;
  letter-spacing:0; text-transform:none;
}

/* Crisis notice: given weight, not buried as fine print. */
/* Sits inside the contact-cards column, so the grid gap handles spacing. */
.contact-crisis{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:1.15rem 1.35rem;
  border-radius:1rem;
  background:var(--teal-wash);
  border-left:4px solid var(--teal);
  font-size:.9rem; line-height:1.65;
  color:var(--ink-soft);
}

/* ---------- Contact: form card ---------- */
.contact-card{
  padding:clamp(1.9rem, 3.4vw, 3rem);
  border-radius:1.5rem;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 22px 55px -26px rgba(23,43,37,.28);
}
/* Labels sit tight above their field in this denser two-column form. */
.contact-card .label{
  display:flex; align-items:baseline; gap:.4rem;
  margin-bottom:.4rem;
}

/* ---------- Story copy: a clear ladder into the text ----------
   Lede is larger and darker, body settles back, and the four
   starting points become a scannable list instead of a run-on. */
.story-copy{ max-width:38rem; }

.story-lede{
  margin-top:1.75rem;
  font-size:clamp(1.15rem, 1.02rem + .5vw, 1.32rem);
  line-height:1.65;
  color:var(--ink);
}
.story-body{
  margin-top:1.35rem;
  font-size:1.02rem;
  line-height:1.8;
  color:var(--ink-soft);
}

.story-list{
  margin-top:1.6rem;
  padding-left:1.4rem;
  border-left:2px solid var(--clay-wash);
  display:grid;
  gap:.7rem;
}
.story-list li{
  position:relative;
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
}
.story-list li::before{
  content:"";
  position:absolute;
  left:-1.4rem; top:.6em;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--clay);
}

/* ---------- Story figure (portrait beside the story) ---------- */
.story-figure{
  position:relative;
  margin:0;
  border-radius:1.75rem;
  overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(23,43,37,.4);
}
/* Offset away from the copy column, which now sits on the right. */
.story-figure::before{
  content:"";
  position:absolute; inset:-14px -14px 26px 22px;
  border-radius:1.75rem;
  background:linear-gradient(210deg, var(--clay-wash), var(--teal-wash));
  z-index:-1;
}
.story-figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}
/* Name plate resting on the base of the portrait */
.story-figure__plate{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:3.5rem 1.75rem 1.5rem;
  background:linear-gradient(to top, rgba(11,19,16,.9) 18%, transparent 100%);
  display:flex; flex-direction:column; gap:.15rem;
}
.story-figure__by{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.3rem;
  line-height:1.2;
  color:#fff;
}
.story-figure__role{
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--clay-light);
}

/* ---------- The Name: the mark, ringed like a rising sun ---------- */
.name-mark{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding-block:clamp(2rem, 4vw, 3rem);
}
.name-mark__ring,
.name-mark__ring--2{
  position:absolute;
  left:50%; top:44%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(214,168,143,.18);
  pointer-events:none;
}
.name-mark__ring{ width:min(20rem,78%); aspect-ratio:1; }
.name-mark__ring--2{ width:min(27rem,104%); aspect-ratio:1; border-color:rgba(214,168,143,.1); }

.name-mark__img{
  position:relative; z-index:1;
  width:min(12rem,50%);
  height:auto;
  filter:drop-shadow(0 18px 40px rgba(9,16,13,.5));
}

/* The word split, sitting under the mark */
.name-mark__split{
  position:relative; z-index:1;
  margin-top:clamp(1.75rem, 3vw, 2.5rem);
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(.9rem, 2.5vw, 1.6rem);
}
.name-mark__half{ display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.name-mark__word{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.5rem, 1rem + 1.9vw, 2.15rem);
  line-height:1;
  letter-spacing:-.025em;
  color:#fff;
}
.name-mark__word--accent{ font-style:italic; color:var(--clay-light); }
.name-mark__gloss{
  font-size:.6rem; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.name-mark__plus{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.1rem, .8rem + .9vw, 1.5rem);
  color:var(--clay);
  opacity:.55;
  padding-top:.15rem;
}

/* ---------- The Name: the inheritance, as a walked line ---------- */
.walk{
  margin-top:clamp(2.25rem, 4vw, 3rem);
  display:grid;
  gap:0;
  position:relative;
}
.walk__step{
  display:grid;
  grid-template-columns:15px 1fr;
  gap:1.15rem;
  align-items:start;
  padding-block:1.15rem;
  position:relative;
}
/* Vertical hairline joining the dots */
.walk__step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:7px; top:1.9rem; bottom:-.4rem;
  width:1px;
  background:rgba(255,255,255,.14);
}
.walk__dot{
  width:15px; height:15px;
  margin-top:.35rem;
  border-radius:50%;
  background:var(--navy);
  box-shadow:inset 0 0 0 1.5px rgba(214,168,143,.55);
  position:relative; z-index:1;
  transition:box-shadow .5s cubic-bezier(.22,1,.36,1), background .5s ease;
}
.walk__dot--gold{ background:var(--clay); box-shadow:inset 0 0 0 1.5px var(--clay); }
.walk__step:hover .walk__dot{
  background:var(--clay);
  box-shadow:inset 0 0 0 1.5px var(--clay), 0 0 0 6px rgba(186,131,104,.16);
}
.walk__title{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.12rem; color:#fff;
}
.walk__copy{
  margin-top:.35rem;
  font-size:.94rem; line-height:1.7;
  color:rgba(255,255,255,.6);
}

/* ---------- The Name: closing line ---------- */
.name-line{
  margin-top:clamp(2rem, 3.5vw, 2.75rem);
  padding-top:clamp(1.75rem, 3vw, 2.25rem);
  border-top:1px solid rgba(255,255,255,.1);
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
  line-height:1.35;
  color:var(--clay-light);
}

/* ---------- Value cards (how I practise) ----------
   Two columns rather than four, so each card has room to breathe and
   the copy is not squeezed into a narrow strip. */
.value-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.5rem;
  padding:2rem 1.6rem;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .5s ease;
}
/* Clay rail that draws across the top edge on hover */
.value-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:var(--clay);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.value-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 58px -26px rgba(23,43,37,.3);
  border-color:transparent;
}
.value-card:hover::before{ transform:scaleX(1); }

.value-card__num{
  position:absolute;
  top:1.5rem; right:1.5rem;
  font-family:'Fraunces',Georgia,serif;
  font-size:.75rem; letter-spacing:.16em;
  color:var(--clay);
  opacity:.5;
}
/* Icon sits above the title, so each card reads top to bottom. */
.value-card__ico{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:200px;
  margin-bottom:1.4rem;
  background:var(--clay-wash); color:var(--clay-dark);
  transition:background .45s ease, color .45s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.value-card:hover .value-card__ico{
  background:var(--clay); color:#fff;
  transform:translateY(-3px);
}
.value-card__title{
  font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:1.28rem; color:var(--ink);
  line-height:1.22;
}
.value-card__copy{
  margin-top:.6rem;
  font-size:.93rem; line-height:1.7; color:var(--ink-soft);
}

/* ---------- Fact list ---------- */
.fact-list{ margin:0; border-top:1px solid var(--line); }
.fact-list > div{
  display:grid;
  grid-template-columns:9rem 1fr;
  gap:1.25rem;
  align-items:baseline;
  padding-block:1.05rem;
  border-bottom:1px solid var(--line);
}
.fact-list dt{
  font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft);
}
.fact-list dd{
  margin:0; font-size:1rem; font-weight:500; color:var(--ink);
}
@media (max-width:520px){
  .fact-list > div{ grid-template-columns:1fr; gap:.3rem; }
}

/* ---------- Booking CTA background ----------
   Deliberately warmer than the hero: this is the closing moment, so it
   leans into clay rather than repeating the hero's cool navy. */
.lead-bg{
  background:
    radial-gradient(90% 120% at 88% 6%, rgba(186,131,104,.42) 0%, transparent 58%),
    radial-gradient(70% 100% at 6% 96%, rgba(78,124,118,.24) 0%, transparent 62%),
    linear-gradient(155deg, #20382F 0%, #172B25 48%, #0E100D 100%);
}
/* Sunburst rising from the lower right, mirroring the logo */
.lead-rays{
  background:repeating-conic-gradient(
    from 200deg at 92% 92%,
    rgba(214,168,143,.09) 0deg 1.1deg,
    transparent 1.1deg 9deg
  );
  -webkit-mask-image:radial-gradient(circle at 92% 92%, #000 10%, transparent 68%);
          mask-image:radial-gradient(circle at 92% 92%, #000 10%, transparent 68%);
  pointer-events:none;
}
/* Settle the base back to near-black so the footer joins cleanly */
.lead-fade{
  background:linear-gradient(to bottom, transparent, rgba(16,31,27,.55));
  pointer-events:none;
}
/* Inside the card there is no footer to meet, so the darkening at the
   base would just look like a smudge. Lighten it to a gentle vignette. */
.lead-card .lead-fade{
  background:linear-gradient(to bottom, transparent, rgba(16,31,27,.28));
}

/* ---------- Closing CTA, as a raised card ----------
   The dark band is inset from the page rather than running edge to edge,
   so the section reads as one object sitting on the page instead of a
   full-width stripe. .lead-card wraps the existing .lead-bg content:
   the band keeps its gradients, the wrapper supplies the page padding,
   the rounding and the lift. */
.lead-card{
  padding-inline:clamp(1rem, 4vw, 2.5rem);
  padding-block:clamp(1.5rem, 4vw, 3rem);
  /* Sand would collide with the section above it on the home page, which
     is already sand. Mist is a shade lighter, so the card is framed on
     every page regardless of what precedes it. */
  background:var(--mist);
}
.lead-card > .lead-bg{
  position:relative;
  max-width:82rem;
  margin-inline:auto;
  border-radius:clamp(1.5rem, 2.4vw, 2.25rem);
  overflow:hidden;                       /* clips the rays to the corners */
  /* A deep, soft drop plus a hairline of warm light along the top edge,
     which keeps the card from reading as a flat rectangle. */
  box-shadow:
    0 34px 80px -34px rgba(9,16,13,.55),
    inset 0 1px 0 rgba(214,168,143,.16);
}

/* The inner padding that the full-width band used to get from .sec. */
.lead-card > .lead-bg{
  padding-block:clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width:1023px){
  .lead-card{ padding-inline:1rem; padding-block:1.5rem; }
  .lead-card > .lead-bg{ padding-block:2.25rem; }
}

/* ---------- The honest close ----------
   The paragraph that names who the practice is not for. Centred and set
   on a soft clay wash, so an admission against interest reads as a
   considered statement rather than a footnote. */
.honest-close{
  position:relative;
  max-width:1200px;
  margin-inline:auto;
  padding:clamp(2.25rem,4vw,3rem) clamp(1.5rem,4vw,3.25rem) clamp(2rem,3.5vw,2.75rem);
  border-radius:1.75rem;
  text-align:center;
  background:linear-gradient(180deg, var(--clay-wash) 0%, rgba(245,233,225,.45) 100%);
  border:1px solid rgba(214,168,143,.45);
}

/* The seal sits astride the top edge, tying the card to the border. */
.honest-close__mark{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  width:3rem; height:3rem;
  border-radius:999px;
  background:var(--clay);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(154,100,73,.6);
}
.honest-close__mark svg{ width:1.4rem; height:1.4rem; }

.honest-close__lede{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  font-size:clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  line-height:1.45;
  color:var(--ink);
  text-wrap:balance;
}

/* A short rule between the two halves, instead of a margin alone. */
.honest-close__body{
  position:relative;
  margin-top:1.5rem;
  padding-top:1.5rem;
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-soft);
  text-wrap:balance;
}
.honest-close__body::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:3rem; height:1px;
  background:rgba(154,100,73,.35);
}

/* The last line is the point of the whole card, so it is given weight.
   --clay-dark reaches only 4.1:1 on the clay wash, so this deeper shade
   is used to clear AA for body-size text. */
.honest-close__em{
  display:block;
  margin-top:.5rem;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:1.05rem;
  color:#7E5039;
}

@media (max-width:640px){
  .honest-close{ border-radius:1.35rem; }
}

/* ---------- Glass card ---------- */
.glass-card{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 24px 60px -22px rgba(9,16,13,.5);
}

/* ---------- Trust bar ---------- */
.trust-ico{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:200px;
  background:var(--clay-wash);
  color:var(--clay-dark);
  flex:none;
}

/* ---------- Scroll progress bar ---------- */
.progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(to right, var(--clay), #C9A227);
  z-index:101;
}

/* ---------- Back to top ----------
   Hidden until the reader is well down the page, so it never competes
   with the hero. Sits above the mobile CTA bar on narrow screens. */
.to-top{
  position:fixed;
  right:clamp(1rem, 2.5vw, 2rem);
  bottom:clamp(1rem, 2.5vw, 2rem);
  z-index:60;
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:var(--clay);
  color:#fff;
  box-shadow:0 12px 30px -8px rgba(186,131,104,.55);
  cursor:pointer;
  /* Hidden state: out of the layout for keyboard and screen readers too. */
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.9);
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1),
             visibility .35s, background-color .25s ease;
}
.to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.to-top:hover{ background:var(--clay-dark); }
.to-top:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.to-top svg{ width:1.25rem; height:1.25rem; }

/* Clear the fixed mobile CTA bar (body padding is 4.75rem). */
@media (max-width:1023px){
  .to-top{
    bottom:calc(4.75rem + 1rem);
    width:2.75rem;
    height:2.75rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .to-top{ transition:opacity .01ms linear, visibility .01ms linear; transform:none; }
  .to-top.is-visible{ transform:none; }
}

/* ---------- Site nav: transparent over the hero, light once stuck ---------- */
/* Transparent until .is-stuck is applied. !important guards against the
   Tailwind CDN's utility layer, which loads after this file. */
.site-nav:not(.is-stuck){
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}
/* Fixed like index.html: the hero starts at the very top of the page
   and the bar floats over it, rather than being pushed down. */
.site-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .5s cubic-bezier(.22,1,.36,1),
             border-color .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s cubic-bezier(.22,1,.36,1);
}
/* Matches index.html: warm bone glass rather than plain white. */
.site-nav.is-stuck{
  background:rgba(251,248,244,.82);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px rgba(23,43,37,.05);
}

/* Contracts on scroll via padding, as index.html does. */
.site-nav__bar{
  padding-block:1.15rem;
  transition:padding .5s cubic-bezier(.22,1,.36,1);
}
.site-nav.is-stuck .site-nav__bar{ padding-block:.7rem; }

.site-nav__logo{
  height:clamp(52px, 4.6vw, 68px);
  transition:height .5s cubic-bezier(.22,1,.36,1);
}
.site-nav.is-stuck .site-nav__logo{ height:clamp(44px, 3.8vw, 56px); }

/* Links start white on the dark hero, then darken with the bar. */
.site-nav__link{
  position:relative;
  padding-block:.35rem;
  color:rgba(255,255,255,.8);
  transition:color .3s ease;
}
.site-nav__link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--clay);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.site-nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.site-nav__link:hover{ color:#fff; }
.site-nav__link.is-current{ color:#fff; font-weight:600; }

.site-nav.is-stuck .site-nav__link{ color:var(--ink-soft); }
.site-nav.is-stuck .site-nav__link:hover{ color:var(--navy); }
.site-nav.is-stuck .site-nav__link.is-current{ color:var(--navy); }

.site-nav__toggle{ color:#fff; }
.site-nav__toggle:hover{ background:rgba(255,255,255,.12); }
.site-nav.is-stuck .site-nav__toggle{ color:var(--navy); }
.site-nav.is-stuck .site-nav__toggle:hover{ background:var(--sand); }

/* The dropdown panel is always light, so its own text must not
   inherit the white link colour used over the hero. */
.site-nav [data-menu] a{ color:var(--ink-soft); }

/* ---------- Mobile nav links ---------- */
.mobile-link{
  display:block; padding:.75rem; border-radius:.75rem;
  font-weight:600; color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.mobile-link:hover, .mobile-link[aria-current="page"]{ background:var(--sand); color:var(--clay-dark); }

/* ---------- Service cards (image-topped) ---------- */
.svc-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.5rem;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:0 26px 60px -26px rgba(23,43,37,.34); }

.svc-media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.svc-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover .svc-media img{ transform:scale(1.05); }

/* Category badge floating on the image */
.svc-badge{
  position:absolute; top:1rem; left:1rem;
  padding:.45rem .95rem;
  border-radius:200px;
  background:rgba(23,43,37,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
}

.svc-body{ display:flex; flex-direction:column; flex:1; padding:1.6rem 1.5rem 1.5rem; }
.svc-kicker{
  font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal);
}
.svc-heading{
  margin-top:.6rem;
  font-family:'Fraunces',serif; font-weight:400;
  font-size:1.45rem; line-height:1.2; color:var(--navy);
}
.svc-copy{ margin-top:.7rem; margin-bottom:1.5rem; font-size:.94rem; line-height:1.65; color:var(--ink-soft); }

/* Footer row: text link left, solid button right, divided from the copy.
   margin-top:auto pins it to the base so buttons line up across cards
   even when the descriptions differ in length. */
.svc-foot{
  margin-top:auto; padding-top:1.3rem;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.svc-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.87rem; color:var(--navy);
  transition:color .3s ease;
}
.svc-link:hover{ color:var(--clay-dark); }
.svc-link svg{ transition:transform .4s cubic-bezier(.22,1,.36,1); }
.svc-card:hover .svc-link svg{ transform:translateX(4px); }

/* ---------- Journey timeline ----------
   Numbered dots joined by a hairline that fades at both ends. */
.journey-track{
  margin-top:clamp(3rem, 5vw, 4rem);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem, 2.5vw, 2rem);
  position:relative;
}
.journey-track::before{
  content:"";
  position:absolute;
  top:27px; left:8%; right:8%;
  height:1px;
  background:linear-gradient(to right, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.journey-step{ position:relative; text-align:center; }
.journey-dot{
  width:54px; height:54px;
  margin:0 auto 1.6rem;
  border-radius:50%;
  display:grid; place-items:center;
  /* Matches the section tint so the connecting line appears to pass
     behind each dot rather than through it. */
  background:var(--sand);
  border:1px solid var(--line);
  font-family:'Fraunces',serif;
  font-size:1.1rem;
  color:var(--clay-dark);
  position:relative; z-index:1;
  transition:background .5s cubic-bezier(.22,1,.36,1), color .5s ease,
             border-color .5s ease, transform .5s cubic-bezier(.22,1,.36,1),
             box-shadow .5s ease;
}
.journey-step:hover .journey-dot{
  background:var(--clay);
  border-color:var(--clay);
  color:#fff;
  transform:scale(1.1);
  box-shadow:0 12px 30px -8px rgba(186,131,104,.6);
}
.journey-title{
  font-family:'Fraunces',serif; font-weight:400;
  font-size:1.28rem; color:var(--ink);
  margin-bottom:.6rem;
}
.journey-desc{
  font-size:.96rem; line-height:1.65; color:var(--ink-soft);
  max-width:30ch; margin-inline:auto;
}

@media (max-width:1023px){
  .journey-track{ grid-template-columns:repeat(2,1fr); row-gap:3rem; }
  .journey-track::before{ display:none; }
}
@media (max-width:620px){
  .journey-track{ grid-template-columns:1fr; }
}

/* ---------- Review cards ---------- */
.review-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.5rem;
  padding:1.8rem;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.review-card:hover{ transform:translateY(-5px); box-shadow:0 22px 55px -24px rgba(23,43,37,.28); }
.rev-stars{ color:#E5A93C; letter-spacing:2px; font-size:1rem; }
.rev-text{ margin-top:.9rem; font-size:.97rem; line-height:1.68; color:var(--ink-soft); }
.rev-author{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; align-items:center; gap:.8rem; }
/* Works for both the <img> portraits and the lettered <span> fallback,
   so a failed image request still leaves a round, filled avatar. */
.rev-avatar{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--clay-wash); color:var(--clay-dark);
  font-family:'Fraunces',serif; font-size:1.05rem; flex:none;
  object-fit:cover;
  border:1px solid rgba(214,168,143,.5);
}
.rev-name{ display:block; font-weight:600; color:var(--ink); font-size:.94rem; }
.rev-loc{ display:block; font-size:.8rem; color:var(--ink-soft); }

/* ---------- Testimonial slider ----------
   Shows 3 cards at a time and advances one card per click. The track
   is translated by exactly one slide width, so nothing half-appears. */
.rev-slider{ --per:3; --gap:1.5rem; }
.rev-viewport{ overflow:hidden; }
.rev-track{
  display:flex;
  gap:var(--gap);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.rev-slide{
  flex:0 0 calc((100% - (var(--gap) * (var(--per) - 1))) / var(--per));
  display:flex;
}
.rev-slide > .review-card{ width:100%; }

.rev-controls{
  margin-top:2rem;
  display:flex; align-items:center; justify-content:center;
  gap:1.25rem;
}
.rev-btn{
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  color:var(--navy);
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.rev-btn:hover:not(:disabled){
  background:var(--clay); border-color:var(--clay); color:#fff;
  transform:translateY(-2px);
}
.rev-btn:disabled{ opacity:.35; cursor:not-allowed; }

.rev-dots{ display:flex; align-items:center; gap:.5rem; }
.rev-dot{
  width:8px; height:8px;
  border-radius:50%;
  border:0; padding:0;
  background:var(--line);
  cursor:pointer;
  transition:width .35s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.rev-dot[aria-selected="true"]{ width:26px; border-radius:200px; background:var(--clay); }

/* On a phone the slider shows one card at a time, so a dot per card would
   be a row of eight. The JS swaps them for a single "3 / 8" counter. */
.rev-count{
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

@media (max-width:1023px){ .rev-slider{ --per:2; } }
@media (max-width:640px){ .rev-slider{ --per:1; --gap:1rem; } }

/* ---------- Forms ---------- */
.label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.field{
  width:100%;
  padding:.85rem 1.1rem;
  border-radius:.85rem;
  border:1px solid var(--line);
  /* Slightly warmer than --mist so inputs stay visible on white cards
     now that the section tints have been lightened. */
  background:#F7F2EC;
  font-size:.95rem;
  color:var(--ink);
  transition:border-color .25s ease, background .25s ease;
}
.field::placeholder{ color:#8D9E96; }
.field:focus{ outline:none; border-color:var(--clay); background:#fff; }
.field.is-invalid{ border-color:#C2504C; background:#FDF6F5; }
.err{ min-height:0; font-size:.78rem; color:#C2504C; margin-top:.3rem; }

.check-ico{
  display:grid; place-items:center;
  width:64px; height:64px; border-radius:50%;
  background:rgba(78,124,118,.12); color:var(--teal);
  margin:0 auto;
}
.success-anim{ animation:popIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes popIn{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---------- Golden Healing Circle band ----------
   One wide gradient panel: copy left, single CTA right. */
.circle-band{
  position:relative;
  overflow:hidden;
  border-radius:2rem;
  background:linear-gradient(105deg, var(--clay-dark) 0%, var(--clay) 55%, #C9977C 100%);
  color:#fff;
  box-shadow:0 30px 70px -30px rgba(154,100,73,.65);
}
/* Faint sunburst motif echoing the logo mark */
.circle-band__pattern{
  position:absolute; inset:0;
  background:repeating-conic-gradient(
    from 195deg at 82% 50%,
    rgba(255,255,255,.10) 0deg 1.2deg,
    transparent 1.2deg 10deg
  );
  -webkit-mask-image:radial-gradient(circle at 82% 50%, #000 8%, transparent 62%);
          mask-image:radial-gradient(circle at 82% 50%, #000 8%, transparent 62%);
  pointer-events:none;
}
.circle-band__inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(2rem, 5vw, 4rem);
  padding:clamp(2.5rem, 5vw, 3.75rem) clamp(1.75rem, 4vw, 3.5rem);
}
.circle-band__copy{ max-width:62ch; }

.circle-band__tag{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem 1rem;
  border-radius:200px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.95);
}
.circle-band__title{
  margin-top:1.15rem;
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  /* calc() inside clamp() needs spaces around the operator: "1.2rem+2.2vw"
     is invalid, so the whole declaration was dropped and the Tailwind
     base reset (h2 { font-size: inherit }) left this at 16px. */
  font-size:clamp(1.85rem, 1.2rem + 2.2vw, 3rem);
  line-height:1.1;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.circle-band__lead{
  margin-top:1rem;
  font-size:1.1rem;
  line-height:1.60;
  color:rgba(255,255,255,.9);
}

.circle-band__cta{
  flex:none;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1.05rem 2.1rem;
  border-radius:200px;
  background:#fff;
  color:var(--clay-dark);
  font-weight:700; font-size:.95rem;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.circle-band__cta:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(0,0,0,.42); }
.circle-band__cta svg{ transition:transform .4s cubic-bezier(.22,1,.36,1); }
.circle-band__cta:hover svg{ transform:translateX(4px); }

@media (max-width:900px){
  .circle-band__inner{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Comparison ----------
   Hovering a row dims the others, so one comparison reads at a time. */
.cmp-table{ position:relative; }

/* The raised Goldenturas lane behind column 2 */
.cmp-lane{
  position:absolute; z-index:0;
  top:0; bottom:0; left:28%; width:24%;
  border-radius:1.5rem;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--clay-light), 0 22px 55px -24px rgba(23,43,37,.3);
  transition:box-shadow .5s ease;
}
.cmp-table:hover .cmp-lane{
  box-shadow:inset 0 0 0 1.5px var(--clay), 0 26px 65px -24px rgba(154,100,73,.42);
}

.cmp-row{
  display:grid; grid-template-columns:28% repeat(3,1fr);
  align-items:center;
  border-bottom:1px solid var(--line);
  transition:opacity .35s ease;
}
.cmp-row:last-child{ border-bottom:0; }

/* Dim every row except the hovered one. The header keeps full opacity
   so the column names stay readable while scanning. */
.cmp-table:hover .cmp-row:not(:hover):not(.cmp-row--head){ opacity:.45; }
.cmp-row:not(.cmp-row--head){ position:relative; }
.cmp-row:not(.cmp-row--head)::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:2px; border-radius:2px;
  background:var(--clay);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.cmp-row:not(.cmp-row--head):hover::before{ transform:scaleY(.72); }

.cmp-mark{ display:grid; place-items:center; width:18px; height:18px; flex:none; }
.cmp-mark-yes{
  border-radius:50%; background:var(--clay); color:#fff;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.cmp-row:hover .cmp-mark-yes{ transform:scale(1.15); }
.cmp-mark-no::before{ content:""; width:11px; height:2px; border-radius:2px; background:var(--line); }

/* ---------- Footer ---------- */
/* ---------- Section rhythm ----------
   Every section below the hero shares one vertical measure, so the page
   breathes consistently and a change happens in one place rather than in
   37 utility classes. Applied via .sec, which overrides the py-* utilities
   it sits alongside. */
.sec{
  padding-top:72px;
  padding-bottom:72px;
}
@media (max-width:1023px){
  .sec{
    padding-top:32px;
    padding-bottom:32px;
  }
}

/* ---------- Mobile typography ----------
   Headings and body copy are set a little tighter on a phone than the
   fluid desktop scale would give, so a long headline does not eat the
   first screen. Desktop is untouched. */
/* ---------- Mobile typography and rhythm ----------
   Modelled on sunforrent.com and solsticetherapy.org, both of which centre
   their section copy on a phone and set headings larger than a desktop
   scale would give when it simply shrinks. Their mobile headings run
   h1 40-50px and h2 28-40px; these sit between the two.

   Desktop is untouched: every rule here is inside the phone breakpoint. */
@media (max-width:767px){
  .hero-title-line,
  .page-hero h1,
  .hero-section h1{
    font-size:42px;
    line-height:1.12;
    letter-spacing:-.02em;
  }
  .section-title{
    font-size:34px;
    line-height:1.18;
  }
  /* The one-line variants must not stay larger than the base heading. */
  .section-title--oneline,
  .section-title--oneline-sm,
  .section-title--xl,
  .section-title--55{
    font-size:34px;
  }
  /* Tailwind pairs text-lg with a 1.75rem line-height, which is loose
     once the size drops, so both are set together. */
  .text-lg{ font-size:16.5px; line-height:1.65; }

  /* ---- Centre the page copy ----
     Both reference sites centre the great majority of their phone layout:
     sunforrent runs roughly 107 centred rules to 26 left, solstice about
     the same. So the default here is centred, and the exceptions below
     opt specific things back out. */
  .page-hero,
  .hero-section,
  .sec,
  .lead-card{
    text-align:center;
  }

  /* ---- What stays left ----
     Anything the eye has to scan down a shared left edge, or where a
     ragged left would break the pattern:
       - lists, where each item starts at a marker
       - form labels and fields, which sit above their inputs
       - FAQ questions and answers, read as a sequence
       - the numbered walk-through steps, aligned to their dots
       - table-like fact rows with a label and a value              */
  .sec .story-list,
  .sec .story-list li,
  .sec .circle-not__list,
  .sec .circle-not__list li,
  .sec .glance__facts,
  .sec .fact-list,
  .sec .fact-list dt,
  .sec .fact-list dd,
  .sec .walk,
  .sec .walk__step,
  .sec .walk__title,
  .sec .walk__copy,
  .sec .faq-group,
  .sec .faq-q,
  .sec .faq-a,
  .sec .label,
  .sec .field,
  .sec .err,
  .sec .lead-form,
  .sec .contact-card form,
  .lead-card .label,
  .lead-card .field,
  .lead-card .lead-form,
  .lead-card .glass-card form,
  .sec .contact-crisis,
  .sec .rev-author,
  .lead-card .rev-author{
    text-align:left;
  }

  /* The eyebrow's leading rule reads as a stray dash once centred. */
  .sec .eyebrow::before,
  .page-hero .eyebrow::before{ display:none; }

  /* Centred blocks need their measure capped, or the eye loses the start
     of each line. */
  .page-hero p,
  .hero-section .hero-copy p{
    margin-inline:auto;
  }

  /* Buttons and the trust row follow the text to the centre. A single
     column of full-width buttons is easier to hit than two half-width
     ones, and it is what both reference sites do on a phone. */
  .page-hero .flex.flex-col,
  .hero-section .hero-copy .flex.flex-col,
  .sec .flex.flex-col,
  .lead-card .flex.flex-col{
    align-items:center;
  }
  .page-hero .flex.flex-col > a,
  .hero-section .hero-copy .flex.flex-col > a,
  .sec .flex.flex-col > a,
  .lead-card .flex.flex-col > a{
    width:100%;
    max-width:22rem;
  }

  /* Buttons that sit on their own, outside a flex row. */
  .sec > div > .btn-accent,
  .sec > div > .btn-outline,
  .sec .reveal > .btn-accent,
  .sec .reveal > .btn-outline,
  .circle-band__cta{
    display:inline-flex;
    justify-content:center;
    width:100%;
    max-width:22rem;
  }
  .hero-trust{
    grid-template-columns:1fr;
    justify-items:center;
    justify-content:center;
  }
  .hero-trust li{ justify-content:center; }

  /* Breadcrumbs sit above a centred hero, so they centre too. */
  .page-hero nav[aria-label="Breadcrumb"]{ text-align:center; }

  /* Left-aligned blocks inside a centred column still need centring as
     blocks, or they sit hard against the left edge of a centred parent. */
  .sec .story-list,
  .sec .circle-not__list,
  .sec .fact-list,
  .sec .walk,
  .sec .contact-crisis{
    max-width:32rem;
    margin-inline:auto;
  }

  /* ---- FAQ jump links ----
     Centred with the rest of the page copy. The sidebar is only as wide
     as its content once the grid collapses, so it is stretched and capped
     instead, which puts the links on the page's centre line rather than
     the left. The hover nudge slides text left on desktop and would look
     lopsided when centred, so it is dropped. */
  /* .faq-side is display:contents below lg, so its own width means
     nothing; the nav becomes a direct child of the flex column and is
     sized here instead. Without an explicit width it shrinks to its
     longest link and sits against the left edge. */
  .faq-jump{
    text-align:center;
    width:100%;
    max-width:26rem;
    margin-inline:auto;
  }
  .faq-jump a{ text-align:center; }
  .faq-jump a:hover{ padding-left:0; }

  /* The circle band is a two-column row on desktop; on a phone it stacks,
     so the copy and its button both need centring. */
  .circle-band__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* Rows built with flex ignore text-align, so they are centred here. */
  .sec .rev-stars,
  .sec .rev-author,
  .lead-card .rev-author,
  .sec .ccard,
  .sec .value-card,
  .sec .svc-card{
    justify-content:center;
  }
  .sec .value-card__ico,
  .sec .ccard__ico{
    margin-inline:auto;
  }

  /* The author row keeps its avatar-then-name order, just centred. */
  .sec .rev-author,
  .lead-card .rev-author{ text-align:left; }

  /* A little more air between stacked blocks, matching the references. */
  .sec .section-title{ margin-top:1rem; }

  /* ---- Headline line breaks ----
     The <br> in these headings is placed for the desktop measure. At the
     phone size the same break lands mid-thought and leaves a short orphan
     line, so it is hidden and the browser rebalances the heading itself.
     The markup carries a space either side of each tag, so hiding it
     leaves the words correctly separated. */
  .section-title br,
  .hero-title-line br,
  .hero-section h1 br,
  .page-hero h1 br,
  .circle-band__title br{
    display:none;
  }
  .section-title,
  .hero-title-line,
  .hero-section h1,
  .page-hero h1{
    text-wrap:balance;
  }

  /* ---- Footer bottom bar ----
     Stacked on a phone with the legal links above the copyright line, and
     both centred. The copyright stays first in the DOM, where it belongs
     as the primary statement; only the paint order changes. */
  .foot-bottom{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1.25rem;
  }
  .foot-legal{
    order:1;
    justify-content:center;
    gap:1.25rem 1.5rem;
  }
  .foot-copy{ order:2; }
}

/* ---------- Shared header/footer placeholders ----------
   partials.js fetches the nav and footer, so for a moment the page has
   neither. Fading the body in over that moment avoids a visible jump
   from "no nav" to "nav". If JavaScript is off, .no-js keeps the page
   visible rather than leaving it permanently blank. */
html:not(.partials-in) body{ opacity:0; }
html.partials-in body{ opacity:1; transition:opacity .25s ease; }
html.no-js body{ opacity:1 !important; }

/* ---------- Footer ----------
   A deep green rather than the navy used elsewhere, so the foot of the
   page settles rather than repeating the hero. Dark enough that the
   white/60 body text still clears WCAG AA (6.3:1). */
.site-foot{ background:var(--forest); }

.foot-head{
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:1.35rem;
}
.foot-list{ display:grid; gap:.85rem; font-size:.9rem; }
.foot-list a{
  display:inline-flex; align-items:baseline; gap:.6rem;
  color:rgba(255,255,255,.62);
  transition:color .25s ease;
}
.foot-list a:hover{ color:var(--clay-light); }
.foot-arrow{
  color:var(--clay);
  font-size:.72rem;
  flex:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.foot-list a:hover .foot-arrow{ transform:translateX(3px); }

.foot-contact{ display:grid; gap:1.15rem; font-size:.9rem; }
.foot-contact li{
  display:grid; grid-template-columns:22px 1fr;
  gap:.75rem; align-items:start;
  color:rgba(255,255,255,.62);
  line-height:1.6;
}
.foot-contact a{ color:rgba(255,255,255,.62); transition:color .25s ease; }
.foot-contact a:hover{ color:var(--clay-light); }
.foot-ico{ color:var(--clay); margin-top:2px; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Assurance marquee ---------- */
.assurance{
  background:var(--navy-light);
  padding-block:1.4rem;
  overflow:hidden;
}
.assurance-track{
  display:flex;
  gap:3.5rem;
  width:max-content;
  animation:marquee 42s linear infinite;
}
.assurance:hover .assurance-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.assurance-item{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.875rem;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}
.assurance-dot{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--clay);
  flex-shrink:0;
}

/* ---------- Pulse dot ---------- */
.pulse-dot{ animation:dot 2.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes dot{
  70%{ box-shadow:0 0 0 9px rgba(78,124,118,0); }
  100%{ box-shadow:0 0 0 0 rgba(78,124,118,0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}