/* =========================================================================
   GOLDENTURAS - Custom Styles
   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:9.25rem; }
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; }

/* The compiled Tailwind build only ships classes that existed at compile
   time; this one is used by the crisis/988 links added later. */
.underline{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- 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%);
}

/* ---------- Homepage hero photograph ----------
   The forest sunrise sits under everything. Scoped to .hero-section, which is
   the homepage only: the interior .page-hero sections have no photograph and
   keep the opaque gradient above untouched. */
.hero-section .hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Biased up so the treeline and the light sit behind the copy, rather than
     centring on the empty sky. */
  object-position:center 42%;
}

/* The scrim over the photograph.
   MEASURED against the photo's own pixels, not chosen by eye. The body copy is
   white at 80% opacity, which needs the backdrop under about 0.12 relative
   luminance to clear 4.5:1. The sun in the upper left is the brightest thing in
   the picture at 0.99, and on mobile the copy spans the full width, so it can
   end up over any part of it.

   0.80 flat gives 6.9:1 against that worst pixel. Do not lighten it without
   re-measuring: at 0.65 the same pixel falls to 4.2:1 and fails. */
.hero-section .hero-gradient{
  background:
    linear-gradient(168deg,
      rgba(29,52,44,.80) 0%,
      rgba(23,43,37,.82) 52%,
      rgba(16,32,27,.88) 100%);
}

/* Desktop only: the copy is confined to the left column, so the right side can
   carry a lighter scrim and let the trees show behind the portrait. The badge
   and the name plate over there bring their own backgrounds, so nothing relies
   on the photo staying dark on that side.

   Measured: these stops leave the copy at 6.6:1 and drop the scrim to .54 on
   the right, which is roughly twice as much forest visible as a flat .80. */
@media (min-width:1024px){
  .hero-section .hero-gradient{
    background:
      linear-gradient(90deg,
        rgba(20,38,32,.88) 0%,
        rgba(20,38,32,.84) 34%,
        rgba(20,38,32,.52) 62%,
        rgba(20,38,32,.40) 100%),
      linear-gradient(168deg,
        rgba(29,52,44,.22) 0%,
        rgba(23,43,37,.18) 52%,
        rgba(16,32,27,.34) 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:10.5rem;   /* clears the fixed navbar + crisis strip */
}
.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:-6%; left:-4.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:12.5rem;
  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,
  html.js .faq-layout > .faq-side.reveal{
    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; }
}

/* ---------- Circle logo card ----------
   The Golden Healing Circle page shows the practice's own logo where a
   stock photo used to sit (client request). A padded cream panel, since
   the transparent artwork cannot be object-fit like a photograph. */
.circle-logo-card{
  display:grid;
  place-items:center;
  padding:clamp(2.5rem, 6vw, 4.5rem);
  border-radius:1.5rem;
  background:var(--sand);
  border:1px solid var(--line);
  box-shadow:0 24px 55px -26px rgba(23,43,37,.18);
}
.circle-logo-card img{
  width:100%;
  max-width:420px;
  height:auto;
}

/* ---------- 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:0% center;
  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:0.2rem;
  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;
}
/* ---------- Skip link ----------
   First focusable element on every page; visible only on focus. */
.skip-link{
  position:fixed;
  top:.5rem; left:.5rem;
  z-index:200;
  padding:.65rem 1.1rem;
  border-radius:.75rem;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  transform:translateY(-300%);
}
.skip-link:focus{ transform:none; }

/* ---------- Crisis strip ----------
   Sits inside the fixed header, above the nav bar, always solid so the
   crisis line stays readable over the dark hero. White on --clay-dark
   #9A6449 is 4.89:1, clear of AA at this size. */
.crisis-strip{
  background:var(--clay-dark);
  color:#fff;
  text-align:center;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.01em;
  padding:.45rem 1rem;
}
.crisis-strip a{
  color:#fff;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* 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); }

/* Desktop Book Now button, sized up from the utility defaults (owner). */
.site-nav__book{
  font-size:17px;
  padding:14px 30px;
}

.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); }

/* The drawer lives inside a fixed header, so if it is taller than the
   viewport (a phone in landscape) the page cannot scroll to reveal the
   rest. Cap it and let the drawer itself scroll. */
#mobileMenu{
  max-height:calc(100dvh - 8.5rem);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* ---------- 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; }

  /* The licensing line opts out of the centring above. Centred prose at this
     width is harder to read than the tidier look is worth. */
  .foot-reg-line{ text-align:left; }
}

/* The header and footer are part of the served markup rather than being drawn
   by script, so the page never depends on JavaScript to become visible. */

/* ---------- 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 ----------
   The hidden state is opt-in: an inline <head> script swaps no-js for js,
   and only html.js hides anything. If JavaScript never runs, every block
   stays visible instead of the page rendering empty. */
.reveal{ transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1); }
html.js .reveal{ opacity:0; transform:translateY(24px); }
html.js .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;
  }
  /* html.js beats the plain selector on specificity, so match it. */
  html.js .reveal{ opacity:1; transform:none; }
}

.max-w-\[500px\] {
  max-width:500px;
}

.max-w-\[504px\] {
  max-width:504px;
}

.max-w-\[755px\] {
  max-width:755px;
}

.max-w-\[760px\] {
  max-width:760px;
}

.mr-\[-30px\] {
  margin-right: -30px;
}

@media (min-width: 1024px) {
    .lg\:grid-cols-\[1\.4fr_0\.9fr_0\.7fr_1\.2fr\] {
        grid-template-columns: 1.4fr 0.9fr 0.7fr 1.2fr;
    }

    .lg\:grid-cols-\[1fr_1\.1fr\] {
        grid-template-columns: 1fr 1.1fr;
    }
}

/* ==========================================================================
   LEGAL PAGES
   ==========================================================================
   Long-form documents: Notice of Privacy Practices, Good Faith Estimate,
   Privacy Policy, Terms of Use. There is no Tailwind typography plugin in the
   build, so the prose is styled here.

   Link colour is #774C36, the darkest clay step. The brand clay #BA8368
   measures 3.11:1 on this background and fails as body text; #774C36 measures
   7.08:1. Do not "correct" it back to the brand colour.
   ========================================================================== */
.legal-updated{
  margin:0 0 2.25rem;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
/* Reading column for the legal pages. This rule is what constrains their
   width; the markup carries `legal-wrap` and nothing else width-related.

   The width is a measure rather than a pixel count, so it tracks the font
   instead of a guess about it: 62ch of Inter works out around 73 characters a
   line, inside the 65 to 75 that long prose reads best at. The 4rem covers
   this element's own horizontal padding, since box-sizing is border-box
   throughout.

   Why a named class and not a width utility: the Tailwind file here is a
   prebuilt artifact, so a utility only exists in it if that exact string was
   in the markup when it was compiled. One added later matches no rule and
   silently does nothing, which is what had these pages running the full width
   of the screen. Anything added from here on belongs in this file. */
.legal-wrap{
  max-width:calc(100ch + 4rem);
  margin-inline:auto;
}

.legal{ color:var(--ink); font-size:1.02rem; line-height:1.75; }
.legal > * + *{ margin-top:1.15rem; }
.legal h2{
  margin-top:2.75rem;
  font-family:var(--font-display,"Fraunces",Georgia,serif);
  font-size:1.6rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
}
.legal h3{
  margin-top:2rem;
  font-size:1.12rem;
  font-weight:700;
  color:var(--ink);
}
.legal ul,
.legal ol{ padding-left:1.35rem; }
.legal li + li{ margin-top:.5rem; }
.legal ul{ list-style:disc; }
.legal ol{ list-style:decimal; }
.legal a{
  color:#774C36;
  text-decoration:underline;
  text-underline-offset:.15em;
}
.legal a:hover{ color:var(--navy); }
.legal strong{ font-weight:700; color:var(--ink); }

/* The Board of Registered Nursing notice.

   16 CCR 1487(a) prescribes both the wording and the size: the posted notice is
   set "in at least 48-point Arial font". That rule is written for a notice on
   the premises, so it does not literally govern a web page, and 48pt on screen
   (about 64px) would swamp everything around it. The compromise is to keep what
   the rule is actually protecting: Arial as specified, large enough to read
   from across a room, and set apart from the prose so it reads as a posted
   notice rather than as another paragraph.

   The wording inside it is the Board's, reproduced exactly. Do not reword it. */
.legal-board-notice{
  margin:2rem 0 2.5rem;
  padding:clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2rem);
  border:2px solid var(--ink);
  border-radius:.6rem;
  background:#fff;
  font-family:Arial, Helvetica, sans-serif;
  text-align:center;
}
.legal-board-notice__head{
  margin:0 0 .75rem;
  font-size:clamp(1.05rem, .9rem + .7vw, 1.35rem);
  font-weight:700;
  letter-spacing:.22em;
  color:var(--ink);
}
.legal-board-notice__body{
  margin:0;
  font-size:clamp(1.15rem, .95rem + 1.1vw, 1.7rem);
  font-weight:700;
  line-height:1.5;
  color:var(--ink);
}
.legal-board-notice a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.18em;
}
.legal-board-notice a:hover{ color:#774C36; }

/* The Spanish sentence is not a translation convenience. 16 CCR 1487(b) names
   the exact phrase to use with Spanish speakers, so it is set apart to be
   found rather than buried mid-paragraph. */
.legal-note-es{
  margin:1.1rem 0 1.5rem;
  padding-left:1rem;
  border-left:3px solid var(--clay, #BA8368);
  font-size:1.05rem;
  font-style:italic;
  color:var(--ink-soft);
}

/* The HIPAA notice has to open with a specific sentence, set prominently.
   45 CFR 164.520(b)(1)(ii) requires it in upper case and set apart. */
.legal-callout{
  margin:1.75rem 0;
  padding:1.25rem 1.4rem;
  border-left:4px solid #AC6D4E;
  border-radius:.5rem;
  background:var(--clay-wash);
  font-weight:600;
  line-height:1.6;
}

/* Used where a page needs to be explicit that something is NOT what it might
   be mistaken for, such as the estimate page not being an estimate. */
.legal-note{
  margin:1.75rem 0;
  padding:1.1rem 1.3rem;
  border:1px solid var(--line);
  border-radius:.5rem;
  background:#fff;
  font-size:.96rem;
  color:var(--ink-soft);
}

.legal table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.95rem; }
.legal th,
.legal td{ padding:.7rem .8rem; border:1px solid var(--line); text-align:left; vertical-align:top; }
.legal th{ background:var(--sand); font-weight:700; color:var(--ink); }

.legal-foot{
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.95rem;
  color:var(--ink-soft);
}
.legal-foot a{ color:#774C36; text-decoration:underline; }

@media (max-width:640px){
  .legal{ font-size:1rem; }
  .legal h2{ font-size:1.38rem; }
}

/* Legal notices row in the footer. Separated from the copyright line so the
   four documents read as a set and are easy to find, which is the point: two
   of them are required to be prominently posted. */
.foot-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  gap:.4rem 2.5rem;
  margin-bottom:1.8rem;
}
.foot-legal a{
  color:rgba(255,255,255,.62);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:1px;
  transition:color .25s ease, border-color .25s ease;
}
.foot-legal a:hover,
.foot-legal a:focus-visible{
  color:var(--clay-light);
  border-bottom-color:var(--clay-light);
}

/* Licensing line. Deliberately the most legible thing in the footer: the
   statute behind it (BPC 2837.104(f)) asks for a conspicuous notice, and the
   rest of the footer sits at rgba(255,255,255,.45), which measures 4.18:1 on
   the navy and does not clear AA for text this size.

   Measured on #172B25, the footer background:
     text   rgba(255,255,255,.70)  7.99:1  AAA
     links  var(--clay-light)      7.00:1  AAA

   One paragraph rather than a panel, because the full notice now has its own
   page and this is only the part that has to appear on every page. */
.foot-reg-line{
  padding-top:1.1rem;
  border-top:1px solid hsla(0,0%,100%,.1);
  font-size:.785rem;
  line-height:1.75;
  color:hsla(0,0%,100%,.7);
  margin: 0 auto;
  text-align: center;
  max-width: 112ch;
  padding-bottom: 1.1rem;
}
.foot-reg-line a{
  color:var(--clay-light);
  text-decoration:none;
  border-bottom:1px solid hsla(24,44%,70%,.35);
  padding-bottom:1px;
  transition:border-color .25s ease;
}
.foot-reg-line a:hover,
.foot-reg-line a:focus-visible{ border-bottom-color:var(--clay-light); }