/* Inca Counseling site styles. Colors, fonts and radii come from theme.css,
   which scripts/build.js generates from data/theme.json. Everything here is
   layout and the design system's fixed tokens (type scale, spacing, motion). */

/* ---------- fonts: self-hosted, SIL OFL (Marcellus, Figtree via Fontsource 5.3.0) ---------- */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/figtree-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/figtree-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/figtree-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/figtree-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/figtree-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/figtree-latin-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- fixed tokens (design system v2) ---------- */
:root{
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;
  --fs-h1:56px;--fs-h2:40px;--fs-h3:24px;--fs-lead:21px;--fs-body:18px;--fs-small:15px;
  --fs-eyebrow:13px;--fs-nav:14px;--fs-button:15px;--fs-quote:22px;
  --lh-heading:1.15;--lh-body:1.65;--ls-eyebrow:.12em;--max-measure:68ch;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --space-12:48px;--space-18:72px;--space-28:112px;
  --section-y:112px;--gutter:24px;--max-content:1160px;--max-card:640px;
  --header-h:80px;--hero-h:78vh;--hero-h-min:520px;--band-h:64vh;--band-min:520px;
  --woven-h:10px;
  --shadow-float:0 8px 24px rgba(34,50,65,.10);--shadow-header:0 2px 12px rgba(34,50,65,.08);
  --ease-calm:cubic-bezier(.22,1,.36,1);--dur-hover:200ms;--dur-header:300ms;
}
@media (max-width:768px){
  :root{
    --fs-h1:38px;--fs-h2:30px;--fs-h3:21px;--fs-lead:19px;--fs-body:17px;
    --section-y:72px;--gutter:20px;--header-h:64px;
    --hero-h:64vh;--hero-h-min:440px;--band-h:56vh;--band-min:420px;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--space-4))}
body{margin:0;background:var(--white);color:var(--ink-900);font:400 var(--fs-body)/var(--lh-body) var(--font-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--navy-800);line-height:var(--lh-heading);margin:0;text-wrap:pretty}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0;max-width:var(--max-measure);text-wrap:pretty}
img,video{display:block;max-width:100%}
a{color:var(--terracotta-600);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--terracotta-700)}
:focus-visible{outline:3px solid var(--terracotta-600);outline-offset:2px}
.on-dark :focus-visible,.hero :focus-visible,.crisis :focus-visible{outline-color:var(--white)}
button{font:inherit;color:inherit}
::selection{background:var(--wool-100);color:var(--ink-900)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max-content);margin-inline:auto}
.lead{font-size:var(--fs-lead)}
.small{font-size:var(--fs-small);color:var(--ink-600)}
.skip{position:absolute;left:var(--space-2);top:-100px;z-index:100;background:var(--navy-800);color:var(--cream-50);padding:10px var(--space-4);border-radius:var(--radius-button);font:600 var(--fs-small)/1.2 var(--font-ui);text-decoration:none}
.skip:focus{top:var(--space-2);color:var(--cream-50)}

/* ---------- small parts ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;min-width:44px;padding:12px var(--space-6);border-radius:var(--radius-button);border:1.5px solid transparent;font:600 var(--fs-button)/1.2 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;transition:background-color var(--dur-hover) var(--ease-calm),color var(--dur-hover) var(--ease-calm),border-color var(--dur-hover) var(--ease-calm)}
.btn:active{opacity:.92}
.btn--primary{background:var(--terracotta-600);color:var(--white)}
.btn--primary:hover{background:var(--terracotta-700);color:var(--white)}
.btn--secondary{background:transparent;color:var(--navy-800);border-color:var(--navy-800)}
.btn--secondary:hover{background:rgba(34,50,65,.06);color:var(--navy-800)}
.btn--on-dark{background:transparent;color:var(--white);border-color:var(--white)}
.btn--on-dark:hover{background:rgba(255,255,255,.12);color:var(--white)}
.btn--sm{min-height:44px;padding-block:8px}
.btn--full{width:100%}
.btn svg{flex:none}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.actions--center{justify-content:center}

.link{display:inline-block;color:var(--terracotta-600);text-decoration:none;font:600 var(--fs-small)/1.4 var(--font-ui);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size var(--dur-hover) var(--ease-calm),color var(--dur-hover) var(--ease-calm)}
.link:hover,.link:focus-visible{background-size:100% 1px;color:var(--terracotta-700)}
.link--dark,.link--dark:hover,.link--dark:focus-visible{color:var(--cream-50)}

.eyebrow{display:flex;align-items:center;gap:var(--space-2);margin:0;font:600 var(--fs-eyebrow)/1.2 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--terracotta-600)}
.eyebrow__mark{flex:none;display:block;color:var(--terracotta-600)}
.eyebrow--dark{color:var(--cream-50)}

.chip{display:inline-block;max-width:100%;padding:6px var(--space-3);border:1.5px dashed var(--terracotta-600);border-radius:var(--radius-chip);background:var(--mist-100);color:var(--ink-900);font:500 var(--fs-small)/1.4 var(--font-ui);letter-spacing:0;text-transform:none;text-shadow:none;text-align:left}
.tag{display:inline-block;max-width:100%;margin:0;padding:8px var(--space-4);background:var(--cream-50);color:var(--moss-700);border-radius:var(--radius-chip);font:600 var(--fs-small)/1.4 var(--font-ui);letter-spacing:.04em}
.tag--ph{border:1.5px dashed var(--terracotta-600)}
.label{margin:0;font:600 var(--fs-eyebrow)/1.4 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-600)}

.tocapu{width:56px;height:56px;flex:none;display:grid;place-items:center;border:2px solid var(--navy-800);background:var(--cream-50);box-shadow:inset 0 0 0 3px var(--terracotta-600),inset 0 0 0 6px var(--cream-50);color:var(--navy-800)}
.tocapu svg{display:block}

.woven{height:var(--woven-h);background:url(../img/woven.svg) 0 0/20px 10px repeat-x}

/* Missing photo: labeled frame. */
.frame{width:100%;aspect-ratio:3/2;background:var(--mist-100);border:1.5px dashed var(--terracotta-600);display:grid;place-items:center;padding:var(--space-6)}
.frame span{font:400 var(--fs-small)/1.4 var(--font-ui);color:var(--ink-900);text-align:center}
.frame.card__img{display:grid;height:auto}

/* Inca doorway crop: the top edge is about 5 percent narrower than the bottom. */
.trap{position:relative;aspect-ratio:4/5}
.trap__img{display:block;position:relative;width:100%;height:100%;object-fit:cover;clip-path:polygon(2.5% 0,97.5% 0,100% 100%,0 100%)}
.trap .frame.trap__img{aspect-ratio:auto}
.trap__jamb{position:absolute;color:var(--stone-400);pointer-events:none;overflow:visible}
.trap__jamb--1{top:-12px;left:-12px;width:calc(100% + 24px);height:calc(100% + 24px)}
.trap__jamb--2{top:-26px;left:-26px;width:calc(100% + 52px);height:calc(100% + 52px)}

/* ---------- faint Inca patterns: a mask on a token-coloured layer ---------- */
.has-pattern{position:relative;overflow:hidden}
.pattern{position:absolute;left:0;right:0;top:-20%;height:140%;pointer-events:none;will-change:transform;background:var(--navy-800);opacity:var(--pattern-light);-webkit-mask-repeat:repeat;mask-repeat:repeat}
.pattern--dark{background:var(--cream-50);opacity:var(--pattern-dark)}
.pattern--diamond{-webkit-mask-image:url(../patterns/inca-pattern-diamond-lattice.svg);mask-image:url(../patterns/inca-pattern-diamond-lattice.svg);-webkit-mask-size:720px 720px;mask-size:720px 720px}
.pattern--tocapu{-webkit-mask-image:url(../patterns/inca-pattern-tocapu-field.svg);mask-image:url(../patterns/inca-pattern-tocapu-field.svg);-webkit-mask-size:672px 336px;mask-size:672px 336px}
.pattern--zigzag{-webkit-mask-image:url(../patterns/inca-pattern-zigzag-mountains.svg);mask-image:url(../patterns/inca-pattern-zigzag-mountains.svg);-webkit-mask-size:576px 360px;mask-size:576px 360px}
.pattern--stepfret{-webkit-mask-image:url(../patterns/inca-pattern-stepfret-field.svg);mask-image:url(../patterns/inca-pattern-stepfret-field.svg);-webkit-mask-size:640px 448px;mask-size:640px 448px}
@media (max-width:768px){
  .pattern--diamond{-webkit-mask-size:432px 432px;mask-size:432px 432px}
  .pattern--tocapu{-webkit-mask-size:403px 202px;mask-size:403px 202px}
  .pattern--zigzag{-webkit-mask-size:346px 216px;mask-size:346px 216px}
  .pattern--stepfret{-webkit-mask-size:384px 269px;mask-size:384px 269px}
}

/* ---------- crisis strip ---------- */
.crisis{background:var(--navy-800);color:var(--cream-50);font:400 var(--fs-small)/1.5 var(--font-ui);padding:var(--space-3) var(--gutter);text-align:center}
.crisis p{max-width:var(--max-content);margin-inline:auto}

/* ---------- header: frosted over the hero, solid after 80px ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(247,243,236,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background-color var(--dur-header) var(--ease-calm),box-shadow var(--dur-header) var(--ease-calm)}
.hdr.is-solid{background:var(--cream-50);box-shadow:var(--shadow-header);-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr__row{height:var(--header-h);max-width:var(--max-content);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:var(--space-8)}
.hdr__logo{display:flex;align-items:center;flex:none}
.hdr__logo .logo{height:56px;width:auto}
.hdr__nav{display:flex;gap:var(--space-6);margin:0 auto}
.hdr__link{font:600 var(--fs-nav)/1.2 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--navy-800);text-decoration:none;padding:12px 0;white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size var(--dur-hover) var(--ease-calm)}
.hdr__link:hover,.hdr__link[aria-current="page"]{color:var(--navy-800);background-size:100% 1px}
.hdr__end{margin-left:auto;display:flex;align-items:center;gap:var(--space-6)}
.hdr__login,.hdr__cta{white-space:nowrap}
.hdr__menu,.menu__close{display:none;width:44px;height:44px;place-items:center;padding:0;background:transparent;border:1.5px solid var(--navy-800);border-radius:var(--radius-button);color:var(--navy-800);cursor:pointer}
.hdr__woven{position:absolute;left:0;right:0;bottom:calc(var(--woven-h) * -1);opacity:0;transition:opacity var(--dur-header) var(--ease-calm);pointer-events:none}
.hdr.is-solid .hdr__woven{opacity:1}
/* Language toggle: quiet, next to the client login, and boxed so it reads as a
   control rather than another nav link. It stays visible on phones. */
.hdr__lang{font:600 var(--fs-eyebrow)/1 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--navy-800);border:1.5px solid var(--stone-400);border-radius:var(--radius-button);padding:9px var(--space-4);white-space:nowrap}
.hdr__lang:hover{border-color:var(--navy-800);color:var(--navy-800)}
@media (max-width:1024px){
  .hdr__nav,.hdr__login,.hdr__cta{display:none}
  .hdr__end{gap:var(--space-4)}
  .hdr__menu{display:grid}
  .hdr__logo .logo{height:44px}
}

/* Phone menu: a real modal dialog (focus moves in, Escape closes, page is inert). */
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:var(--space-6);background:var(--cream-50);color:var(--ink-900);flex-direction:column;gap:var(--space-6);overflow:auto}
.menu[open]{display:flex}
.menu::backdrop{background:rgba(34,50,65,.4)}
.menu__top{display:flex;align-items:center;justify-content:space-between}
.menu__top .logo{height:44px;width:auto}
.menu__close{display:grid}
.menu__nav{display:flex;flex-direction:column;gap:var(--space-4)}
.menu__link{font:400 var(--fs-h3)/1.3 var(--font-display);color:var(--navy-800);text-decoration:none;padding:8px 0}
.menu__link[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.menu__meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);border-top:1px solid var(--stone-400);padding-top:var(--space-6)}
.menu__phone{color:var(--ink-900);text-decoration:none}
.menu__crisis{color:var(--ink-600);font-size:var(--fs-small)}

/* ---------- hero video ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-800);margin-top:calc(var(--header-h) * -1);min-height:max(var(--hero-h),var(--hero-h-min));display:grid}
.hero__poster,.hero__poster img,.hero__video{position:absolute;inset:0;width:100%;height:100%}
.hero__poster img,.hero__video{object-fit:cover}
.hero__video{opacity:0;transition:opacity 600ms var(--ease-calm)}
.hero__video.is-playing{opacity:1}
.hero__shade{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 55%,rgba(34,50,65,.34) 0%,rgba(34,50,65,0) 62%),var(--overlay-video)}
.hero__inner{position:relative;display:grid;place-items:center;padding:calc(var(--header-h) + var(--space-8)) var(--gutter) var(--space-18)}
.hero__copy{max-width:760px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.hero .eyebrow{color:var(--white);justify-content:center}
.hero__title{color:var(--white);text-shadow:0 2px 18px rgba(16,24,32,.45)}
.hero__format{margin-top:calc(var(--space-2) * -1)}
.hero__sub{color:var(--white);font-size:var(--fs-lead);max-width:46ch;text-shadow:0 1px 12px rgba(16,24,32,.45)}
/* Two CTA rows sit closer together than hero__copy's own gap, so the intake
   button reads as a third option under the pair rather than a separate block. */
.hero__ctas{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.hero__intake{border-color:rgba(255,255,255,.55)}
.hero__toggle{position:absolute;right:var(--space-6);bottom:var(--space-6);width:44px;height:44px;display:grid;place-items:center;padding:0;background:rgba(34,50,65,.55);border:1.5px solid var(--white);border-radius:var(--radius-button);color:var(--white);cursor:pointer}
.hero__toggle[hidden]{display:none}
.hero__toggle .i-play,.hero__toggle.is-paused .i-pause{display:none}
.hero__toggle.is-paused .i-play{display:block}
@media (max-width:768px){.hero__inner{padding-bottom:112px}}

/* ---------- sections ---------- */
.sec{padding:var(--section-y) var(--gutter)}
.sec--cream{background:var(--cream-50)}
.sec--mist{background:var(--mist-100)}
.sec__head{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--max-measure);margin-bottom:var(--space-12)}
.has-pattern > .wrap{position:relative}

/* intro */
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-18);align-items:center}
.intro__text{display:flex;flex-direction:column;gap:var(--space-6)}
.intro__hours{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:var(--fs-small);color:var(--ink-600)}
@media (max-width:880px){.intro__grid{grid-template-columns:1fr;gap:var(--space-12)}}

/* Meet Tom: portrait beside the navy panel */
.meet__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-18);align-items:center}
.meet__photo{padding:var(--space-6)}
.meet__panel{position:relative;overflow:hidden;background:var(--navy-800);color:var(--cream-50);padding:var(--space-12)}
.meet__body{position:relative;display:flex;flex-direction:column;gap:var(--space-6)}
.meet__panel h2,.meet__panel .lead{color:var(--cream-50)}
@media (max-width:880px){.meet__grid{grid-template-columns:1fr}.meet__panel{padding:var(--space-8)}}

.creds{margin:0}
.creds__row{display:grid;grid-template-columns:minmax(120px,.5fr) 1fr;border-top:1px solid var(--stone-400)}
.creds dt{padding:var(--space-3) var(--space-4) var(--space-3) 0;font:600 var(--fs-eyebrow)/1.5 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-600)}
.creds dd{margin:0;padding:var(--space-3) 0;font-size:var(--fs-small);line-height:1.5;color:var(--ink-900);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.creds--dark .creds__row{border-color:rgba(247,243,236,.28)}
.creds--dark dt{color:rgba(247,243,236,.78)}
.creds--dark dd{color:var(--cream-50)}

/* How I can help */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-8)}
.card{background:var(--stone-100);border-radius:var(--radius-card);display:flex;flex-direction:column}
.card__media{position:relative}
.card__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-card) var(--radius-card) 0 0}
.card__icon{position:absolute;left:var(--space-6);bottom:-28px}
.card__body{padding:var(--space-12) var(--space-6) var(--space-6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);flex:1}
.card__text{color:var(--ink-600);font-size:var(--fs-small);flex:1}
.help__confirm{margin-top:var(--space-12)}
/* Terracotta 600 on Stone 100 is 4.49:1, a hair under AA, so card links use the hover shade (5.85:1). */
.card .link{color:var(--terracotta-700)}

/* Photo band: full-bleed photograph with a centered cream card. It grows with the
   card (min-height, never a fixed height), so nothing in the card is clipped. */
.band{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);min-height:max(var(--band-h),var(--band-min));padding:var(--space-18) var(--gutter)}
.band__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.18);will-change:transform}
.band__shade{position:absolute;inset:0;z-index:-1;background:var(--overlay-band)}
.band__card{position:relative;width:100%;max-width:var(--max-card);background:var(--cream-50);border-radius:var(--radius-card);padding:var(--space-12);box-shadow:var(--shadow-float);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.band--steps .band__card{gap:var(--space-8)}
.band--final .band__card{align-items:center;text-align:center}
.band--final .band__card p{margin-inline:auto}
.band--tex{background:var(--navy-800)}
.band--ph{background:var(--mist-100)}
.band--ph .band__shade{display:none}
.band__ph{position:absolute;inset:var(--space-6);border:1.5px dashed var(--terracotta-600);z-index:-1}
.band__phlabel{position:relative}
@media (max-width:768px){
  .band{padding:var(--space-12) var(--gutter)}
  .band__card{padding:var(--space-6)}
  .band__ph{inset:var(--space-3)}
}

/* numbered steps joined by a thin stepped terrace line */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);width:100%}
.steps__item{position:relative;padding-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.steps__item:not(:last-child)::after{content:"";position:absolute;left:52%;top:14px;width:96%;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 8H34V5H66V2H100' fill='none' stroke='%23B7AFA3' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.steps__num{font:400 32px/1 var(--font-display);color:var(--terracotta-600)}
.steps__title{font-size:var(--fs-h3)}
.steps__body{color:var(--ink-600);font-size:var(--fs-small)}
@media (max-width:680px){.steps{grid-template-columns:1fr}.steps__item::after{display:none}.steps__item{padding-top:0}}

/* fees */
.fees__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-18);align-items:start}
.fees__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.fee{background:var(--stone-100);border-radius:var(--radius-card);padding:var(--space-8);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.fee__price{display:flex;align-items:baseline;gap:var(--space-2)}
.fee__amount{font:400 40px/1 var(--font-display);color:var(--navy-800)}
.fee__unit{font-size:var(--fs-small);color:var(--ink-600)}
.plans{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.plans li{border:1px solid var(--stone-400);border-radius:var(--radius-chip);background:var(--white);padding:6px var(--space-3);font:400 var(--fs-small)/1.4 var(--font-ui);color:var(--ink-900)}
.fee__note{align-self:stretch;max-width:none;font-size:var(--fs-small);color:var(--ink-600);border-top:1px solid var(--stone-400);padding-top:var(--space-4)}
@media (max-width:768px){.fees__grid{gap:var(--space-12)}.fee{padding:var(--space-6)}}

/* moss band: colleagues */
.moss{position:relative;overflow:hidden;background:var(--moss-700);color:var(--cream-50)}
.moss__inner{position:relative;padding:var(--section-y) var(--gutter)}
.moss__wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-12)}
.moss__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}
.moss h2{color:var(--cream-50)}
.quotes{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.quote{margin:0;background:rgba(247,243,236,.08);border:1px solid rgba(247,243,236,.28);border-radius:var(--radius-card);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-6)}
.quote blockquote{margin:0;font:400 var(--fs-quote)/1.45 var(--font-display);color:var(--cream-50)}
.quote figcaption{font-size:var(--fs-small);line-height:1.5;color:var(--cream-50)}
.quote__name{display:block;font-weight:600}
.quote__role{display:block;opacity:.92}
@media (max-width:880px){.quotes{grid-template-columns:1fr}}
@media (max-width:768px){.quote{padding:var(--space-6)}}

/* ---------- footer ---------- */
.ftr{background:var(--stone-100)}
.ftr__pad{padding:var(--space-18) var(--gutter) var(--space-12)}
.ftr__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--space-12);margin-bottom:var(--space-8)}
.ftr__col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);font-size:var(--fs-small);line-height:1.5}
.ftr__brand .logo{height:64px;width:auto}
.ftr__name{font-weight:600}
.ftr__muted{color:var(--ink-600)}
.ftr__h{font:600 var(--fs-eyebrow)/1.2 var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-600)}
.ftr__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.ftr__list a,.ftr__base a{color:var(--ink-900);text-decoration:none}
.ftr__list a:hover,.ftr__base a:hover{color:var(--ink-900);text-decoration:underline}
.ftr__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);border-top:1px solid var(--stone-400);padding-top:var(--space-4);font-size:var(--fs-small);color:var(--ink-600)}
.ftr__base a{color:var(--ink-600);text-decoration:underline}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .pattern,.band__img{will-change:auto}
}

/* ---------- inner page heading band (About, and the pages after it) ---------- */
.band--page{min-height:max(46vh,360px)}
.band--page .band__card{align-items:center;text-align:center}
.band--page .band__card p{margin-inline:auto}

/* ---------- plain tiles: the named methods on About ---------- */
.tiles{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media (min-width:760px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--stone-100);border-radius:var(--radius-card);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3)}
.tile p{color:var(--ink-600);font-size:var(--fs-small)}

/* ---------- credential list as its own section ---------- */
.credsec{max-width:760px}
.credsec .sec__head{margin-bottom:var(--space-8)}

/* ---------- page not found ---------- */
.nf__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6);padding-block:var(--space-12)}
.nf__inner p{margin-inline:auto}
.nf__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-6)}

/* ---------- Get started: facts list and the two column note block ---------- */
.facts{list-style:none;margin:var(--space-8) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.facts li{display:flex;align-items:center;gap:var(--space-4);font-size:var(--fs-small);color:var(--ink-900)}
.gs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-12) var(--space-18);align-items:start}
.gs__block{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.ftr__note{color:var(--ink-600);font-size:var(--fs-small)}