/* ============================================================
   Sim Dhaliwal — shared design system
   Fonts: Schibsted Grotesk (headings) / Hanken Grotesk (body)
   ============================================================ */

:root{
  --page-bg:#FCFAF8;
  --accent:#8A2E7F;
  --accent-deep:#6E2465;
  /* palette from the Canva reference */
  --eyebrow:#AF0C7F;
  --indigo:#6E5A7E;
  --btn-primary:#DB8034;
  --btn-primary-deep:#C36E27;
  --btn-primary-ink:#F8F6F3;
  --btn-ink:#6D4E32;
  --ink:#6D4E32;
  --ink-2:#6D4E32;
  --muted:#5E564D;
  --muted-2:#6B6259;
  --muted-3:#8B8177;
  --line:rgba(42,37,33,0.08);
  --line-2:rgba(42,37,33,0.12);
  --chip:#F2ECE4;
  --dark:#4A433D;
  --font-head:'Schibsted Grotesk';
  --font-body:'Hanken Grotesk';
  --maxw:1180px;
  /* strong custom easings — built-in CSS curves are too weak */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  /* calm, slow glide for scroll reveals — "floating on a cloud" */
  --ease-reveal:cubic-bezier(0.22,0.68,0.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page-bg);color:var(--ink);
  font-family:var(--font-body),system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head),system-ui,sans-serif;font-weight:600;letter-spacing:-0.02em;margin:0}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
::selection{background:#E6D8EA;color:var(--ink)}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:32px;padding-right:32px}
.wrap-narrow{max-width:820px;margin:0 auto;padding-left:32px;padding-right:32px}
.section{padding-top:clamp(72px,10vw,148px);padding-bottom:clamp(72px,10vw,148px)}
.section-sm{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.bg-alt{background:#F6F2EB;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bg-alt+.site-footer{border-top:0}
.center{text-align:center}
.stack-lg{display:flex;flex-direction:column;gap:22px}

/* ---------- eyebrow / headings ---------- */
/* one eyebrow system site-wide: .eyebrow-line (editorial layer, below) */
.h-xl{font-size:clamp(38px,4.9vw,68px);line-height:1.03}
.h-lg{font-size:clamp(30px,3.8vw,48px);line-height:1.06}
.h-md{font-size:clamp(28px,3.4vw,42px);line-height:1.08}
.lead{font-size:clamp(17px,1.35vw,20px);color:var(--muted)}
.muted{color:var(--muted)}
.section-head{max-width:46ch;margin:0 auto clamp(40px,5vw,56px)}
.section-head .lead{margin-top:18px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:100px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid transparent;transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}
.btn-dark{background:var(--btn-primary);color:var(--btn-primary-ink);box-shadow:0 2px 6px rgba(139,79,26,0.18);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),background-color .22s var(--ease-out)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(139,79,26,0.26);background:var(--btn-primary-deep);color:var(--btn-primary-ink)}
.btn-light{background:#FFFDFB;color:var(--btn-ink);border-color:rgba(61,51,44,0.22)}
.btn-light:hover{transform:translateY(-2px);border-color:rgba(61,51,44,0.4);color:var(--btn-ink)}
.btn:active{transform:scale(0.97);transition-duration:.12s}
.btn-sm{padding:12px 24px;font-size:15px}

/* ---------- pills / chips / badges ---------- */
.chip{display:inline-flex;align-items:center;background:var(--chip);border:1px solid rgba(42,37,33,0.07);padding:9px 16px;border-radius:100px;font-size:13.5px;font-weight:600;color:#4A4239}
.pill{display:inline-flex;align-items:center;background:var(--chip);padding:9px 17px;border-radius:100px;font-size:14.5px;font-weight:500;color:#4A4239}
.tag{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(42,37,33,0.08);padding:8px 16px;border-radius:100px;font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#7A5C79;box-shadow:0 1px 3px rgba(42,37,33,0.05)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px}
.pill-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid rgba(42,37,33,0.07);border-radius:24px;padding:32px}
.card-hover{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 24px 50px -26px rgba(42,37,33,0.28)}
.card-hover .icon-tile{transition:transform .35s var(--ease-out)}
.card-hover:hover .icon-tile{transform:scale(1.06) rotate(-2deg)}
.card-outline{border:1px solid var(--line-2);border-radius:24px;padding:34px;background:#fff;box-shadow:0 10px 26px -20px rgba(42,37,33,0.22)}
.co-title{font-family:var(--font-head);font-weight:600;font-size:clamp(24px,2.2vw,27px);line-height:1.18;margin-top:6px}
@media(min-width:901px){.co-title{min-height:2.4em}}
.icon-tile{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px;color:var(--ink-2)}
.icon-tile svg{width:22px;height:22px}
.icon-plum{background:#EDE3F0}.icon-blue{background:#E1EAF6}.icon-sand{background:#F6E7DD}.icon-green{background:#E4EDE3}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card h3{font-size:21px}
.card p{margin-top:10px;font-size:15.5px;color:var(--muted-2)}

/* ---------- media / framed images ---------- */
.framed{border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(74,44,70,0.4)}
.framed img{width:100%;height:100%;object-fit:cover}
.blob{border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(74,44,70,0.4)}
.blob img{width:100%;height:100%;object-fit:cover}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(252,250,248,0.72);border-bottom:1px solid rgba(42,37,33,0.07);transition:box-shadow .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
.site-header.scrolled{background:rgba(252,250,248,0.86);border-bottom-color:rgba(42,37,33,0.1);box-shadow:0 10px 30px -22px rgba(42,37,33,0.4)}
.site-header .bar{max-width:var(--maxw);margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand img{height:40px;width:auto}
.brand .name{font-family:var(--font-head);font-weight:600;font-size:17px;letter-spacing:-0.02em}
.brand .role{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-3)}
.brand .stack{display:flex;flex-direction:column;line-height:1.1}
.nav{display:flex;align-items:center;gap:30px}
.nav a.link{color:#575047;font-size:15px;font-weight:500;transition:color .2s var(--ease-out)}
.nav a.link:hover{color:var(--accent)}
.nav a.link.active{color:var(--accent)}
.nav .cta{display:inline-flex;align-items:center;gap:8px;background:var(--btn-primary);color:var(--btn-primary-ink);padding:11px 22px;border-radius:100px;font-size:14px;font-weight:600;box-shadow:0 1px 2px rgba(139,79,26,0.16);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),background-color .22s var(--ease-out)}
.nav .cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(139,79,26,0.24);background:var(--btn-primary-deep);color:var(--btn-primary-ink)}
.nav .cta:active{transform:scale(0.97);transition-duration:.12s}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line)}
/* .footer-btm is the footer's only block, so the section rule above is the single
   divider. It carried its own border-top and a 32px margin to separate it from the
   badge row; with that gone both would have shown as a second line over a blank gap. */
.footer-btm{max-width:var(--maxw);margin:0 auto;padding:clamp(34px,3.6vw,46px) 32px 44px;display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
/* white tile for logos with baked-in white backgrounds — now used by the About
   hero's credential marks rather than the retired footer badge row */
.badge{height:74px;min-width:186px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(42,37,33,0.09);border-radius:16px;padding:0 26px;box-shadow:0 8px 22px -16px rgba(42,37,33,0.25)}
.footer-id{display:flex;align-items:center;gap:12px}
.footer-id img{height:34px;width:auto}
.footer-id .name{font-family:var(--font-head);font-weight:600;font-size:16px}
.footer-id .sub{font-size:12.5px;color:var(--muted-3)}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.footer-nav a{color:var(--muted-2)}
.footer-legal{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--muted-3);text-align:right;line-height:1.5}

/* ---------- reveal animation ---------- */
[data-reveal]{opacity:0;will-change:opacity,transform;transition:opacity 1250ms var(--ease-reveal),transform 1250ms var(--ease-reveal);transform:translate3d(0,24px,0)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal="left"]{transform:translate3d(-40px,0,0)}
[data-reveal="right"]{transform:translate3d(40px,0,0)}
[data-reveal="scale"]{transform:translate3d(0,20px,0) scale(0.95)}
[data-reveal="fade"]{transform:translate3d(0,10px,0)}
/* "mist" — content clears rather than slides, like fog lifting off it */
[data-reveal="mist"]{transform:translate3d(0,16px,0) scale(1.012);filter:blur(9px);
  transition:opacity 1450ms var(--ease-reveal),transform 1450ms var(--ease-reveal),filter 1450ms var(--ease-reveal)}
[data-reveal="mist"].is-visible{filter:blur(0)}

/* [data-stagger] on a revealed container drifts its children in one after another,
   so grids arrive as a soft cascade instead of a single block. Pair with data-reveal. */
[data-reveal][data-stagger]{opacity:1;transform:none}
[data-reveal][data-stagger] > *{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity 1100ms var(--ease-reveal),transform 1100ms var(--ease-reveal)}
[data-reveal][data-stagger].is-visible > *{opacity:1;transform:none}
[data-reveal][data-stagger].is-visible > *:nth-child(1){transition-delay:60ms}
[data-reveal][data-stagger].is-visible > *:nth-child(2){transition-delay:170ms}
[data-reveal][data-stagger].is-visible > *:nth-child(3){transition-delay:280ms}
[data-reveal][data-stagger].is-visible > *:nth-child(4){transition-delay:390ms}
[data-reveal][data-stagger].is-visible > *:nth-child(5){transition-delay:500ms}
[data-reveal][data-stagger].is-visible > *:nth-child(6){transition-delay:610ms}
[data-reveal][data-stagger].is-visible > *:nth-child(7){transition-delay:720ms}
[data-reveal][data-stagger].is-visible > *:nth-child(8){transition-delay:830ms}

/* weightless continuous float; the offsets stop grouped elements pulsing in unison */
.drift{animation:cloudDrift 11s ease-in-out infinite}
.drift-2{animation:cloudDrift 12.5s ease-in-out infinite .9s}
.drift-3{animation:cloudDrift 14s ease-in-out infinite 1.8s}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;filter:none}
  [data-reveal][data-stagger] > *{opacity:1;transform:none;transition:none}
  .drift,.drift-2,.drift-3{animation:none}
}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600;color:var(--muted-2);letter-spacing:0.02em}
.field input,.field select,.field textarea{font-family:inherit;font-size:15px;padding:13px 15px;border:1px solid rgba(42,37,33,0.14);border-radius:12px;background:var(--page-bg);color:var(--ink);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{resize:vertical}
/* custom select chevron so the control matches the other fields */
.field select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A2E7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;cursor:pointer}

/* ---------- FAQ ---------- */
.faq-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.faq-tab{background:#fff;border:1px solid var(--line-2);padding:11px 22px;border-radius:100px;font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--muted-2);cursor:pointer;transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out),transform .15s var(--ease-out)}
.faq-tab:hover{border-color:rgba(42,37,33,0.28)}
.faq-tab:active{transform:scale(0.97)}
.faq-tab.active{background:var(--btn-primary);color:var(--btn-primary-ink);border-color:var(--btn-primary)}
.faq-panel{display:none}
.faq-panel.active{display:block}
.faq-list{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-0.01em;transition:color .2s var(--ease-out)}
.faq-item.open .faq-q,.faq-q:hover{color:var(--accent)}
.faq-sign{flex:none;width:28px;height:28px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:var(--accent);font-family:var(--font-body);transition:transform .3s var(--ease-out),background-color .25s var(--ease-out)}
.faq-item.open .faq-sign{transform:rotate(135deg);background:#EBDCEC}
/* smooth height accordion — 0fr→1fr grid track, JS wraps content in .faq-a-inner */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-drawer)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;min-height:0}
.faq-a-body{padding:2px 28px 26px;font-size:16px;line-height:1.6;color:var(--muted);max-width:66ch;opacity:0;transition:opacity .28s var(--ease-out)}
.faq-item.open .faq-a-body{opacity:1}
.faq-a-body p+p{margin-top:12px}
/* crafted numbered list inside answers */
.faq-a-body ol{list-style:none;counter-reset:faq-ol;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.faq-a-body ol li{counter-increment:faq-ol;position:relative;padding-left:36px}
.faq-a-body ol li::before{content:counter(faq-ol);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;background:var(--chip);color:var(--accent);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---------- misc ---------- */
.stars{color:var(--accent);letter-spacing:3px}
.quote-band{font-family:var(--font-head);font-weight:500;letter-spacing:-0.02em;font-size:clamp(24px,3.3vw,40px);line-height:1.28;color:var(--ink-2)}
.tick{display:flex;gap:12px;align-items:flex-start}
.tick .m{color:var(--accent);font-size:18px;line-height:1.5}
.tick .m svg{display:block;width:16px;height:16px;margin-top:5px}
.tick .t{font-size:15.5px;color:#4A4239}
.tick .t strong{color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  /* Closed state is hidden via opacity/visibility, not an off-canvas transform/inset
     offset, because a position:fixed drawer whose containing block is the
     backdrop-filter'd sticky header still counts toward the document's scrollable
     area even when translated past the edge. That was inflating the mobile layout
     viewport (390px device width measuring as roughly 730px) and squashing every
     section below the header, including the about-hero grid. Keeping the box's
     geometry inside the viewport at all times avoids that without needing
     overflow:hidden on any ancestor of the sticky header. */
  .nav .links{position:fixed;inset:0 0 0 auto;top:73px;width:min(80vw,320px);height:calc(100vh - 73px);background:var(--page-bg);border-left:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:4px;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--ease-out),visibility 0s linear .26s;box-shadow:-20px 0 50px -30px rgba(42,37,33,0.4)}
  .nav .links.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .26s var(--ease-out)}
  .nav .links a.link{width:100%;padding:14px 6px;font-size:17px;border-bottom:1px solid var(--line)}
  .nav .links .cta{width:100%;justify-content:center;margin-top:14px;padding:14px 22px;font-size:16px}
  .nav-toggle{display:flex}
  .nav{gap:0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .footer-btm{flex-direction:column}
  .footer-legal{text-align:left}
}
/* keep the header brand to a tidy single line on small screens */
@media(max-width:520px){
  .brand .role{font-size:9px;letter-spacing:0.09em}
}
.nav .links{display:flex;align-items:center;gap:30px}
@media(min-width:901px){
  .nav-toggle{display:none}.nav .links{transform:none!important}
  /* animated underline that grows from the left on hover / active page */
  .nav a.link{position:relative}
  .nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out)}
  .nav a.link:hover::after,.nav a.link.active::after{transform:scaleX(1)}
}

/* ---------- keyboard focus polish ---------- */
:focus-visible{outline:none}
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav .cta:focus-visible,.faq-tab:focus-visible,.faq-q:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:1px}

/* ---------- touch devices: no sticky hover lift ---------- */
@media(hover:none){
  .btn-dark:hover,.btn-light:hover,.nav .cta:hover,.card-hover:hover{transform:none;box-shadow:none}
  .btn-dark:hover{box-shadow:0 2px 6px rgba(139,79,26,0.18);background:var(--btn-primary)}
  .card-hover:hover .icon-tile{transform:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .faq-a-body{opacity:1}
  [data-parallax]{transform:none!important}
  [data-reveal="clip"]{clip-path:none!important}
}

/* ============================================================
   Editorial + effects layer (selected v14 upgrades on v13 base)
   Only the pieces used by the imported sections. Inert until used.
   ============================================================ */

/* ---- display helpers ---- */
.h-2xl{font-size:clamp(40px,5.6vw,80px);line-height:1.0;letter-spacing:-0.03em}
.display-accent{color:var(--accent)}
.balance{text-wrap:balance}

/* ---- eyebrow with a leading hairline rule (the single eyebrow style) ---- */
.eyebrow-line{display:inline-flex;align-items:center;gap:14px;font-size:12.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:16px}
.eyebrow-line::before{content:"";width:36px;height:1px;background:currentColor;opacity:.55}
.eyebrow-line.center{justify-content:center}
/* centered heads get a symmetric rule on both sides */
.eyebrow-line.center::after{content:"";width:36px;height:1px;background:currentColor;opacity:.55}
/* one eyebrow colour site-wide; modifiers kept so existing markup keeps working */
.eyebrow-line.plum,.eyebrow-line.indigo{color:var(--eyebrow)}

/* ---- "let's talk" closing band, shared by every page ---- */
/* yellow into orange into purple; no blue, so it sits with the warm palette
   and leaves the orange primary button room to read as the loudest thing */
.cta-band{background:linear-gradient(140deg,#FDF9F1 0%,#FBF4EC 38%,#F9F2F3 72%,#F7F0F6 100%);border:1px solid rgba(42,37,33,0.06);border-radius:32px}

/* ---- sticky process timeline ---- */
.timeline{position:relative;display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.timeline-aside{position:sticky;top:120px}
.timeline-rail{position:relative;display:flex;flex-direction:column;gap:0}
.timeline-line{position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--line-2);overflow:hidden}
.timeline-line span{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .2s linear}
.timeline-step{position:relative;padding:0 0 clamp(30px,4vw,48px) 62px;opacity:.5;transform:translateY(6px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.timeline-step:last-child{padding-bottom:0}
.timeline-step.is-active{opacity:1;transform:none}
.timeline-node{position:absolute;left:12px;top:2px;width:24px;height:24px;border-radius:50%;background:var(--page-bg);border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:border-color .4s var(--ease-out),background-color .4s var(--ease-out)}
.timeline-node::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background-color .4s var(--ease-out),transform .4s var(--ease-out)}
.timeline-step.is-active .timeline-node{border-color:var(--accent)}
.timeline-step.is-active .timeline-node::after{background:var(--accent);transform:scale(1.15)}
.timeline-step .s-kicker{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.timeline-step h3{font-size:clamp(22px,2.4vw,28px);margin-top:6px}
.timeline-step p{margin-top:10px;font-size:16px;color:var(--muted);max-width:46ch}

/* ---- soft animated mesh backdrop ---- */
.mesh{position:relative;overflow:hidden}
.mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none;opacity:.7}
.mesh::before{width:52vw;height:52vw;left:-14vw;top:-18vw;background:radial-gradient(circle,#F1E3F0,transparent 68%);animation:drift1 22s ease-in-out infinite}
.mesh::after{width:44vw;height:44vw;right:-12vw;bottom:-20vw;background:radial-gradient(circle,#FCF5EA,transparent 66%);animation:drift2 26s ease-in-out infinite}
.mesh>*{position:relative;z-index:1}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,4%) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-4%) scale(1.06)}}

/* ---- responsive collapse for the timeline ---- */
@media(max-width:900px){
  .timeline{grid-template-columns:1fr;gap:36px}
  .timeline-aside{position:static;top:auto}
}

/* ---- "how speech pathology supports..." statement band ---- */
.foundation{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.foundation-head{font-family:var(--font-head),system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.5vw,45px);line-height:1.1;letter-spacing:-0.005em;max-width:19ch;margin:0 auto}
.foundation-lede{font-size:clamp(19px,1.85vw,26px);line-height:1.5;color:var(--ink);max-width:40ch;margin:30px auto 0;text-wrap:balance}
/* hairline that draws itself in as the band reveals */
.draw-rule{display:block;width:0;height:2px;background:var(--eyebrow);opacity:.45;margin:34px auto 0;
  transition:width 1100ms var(--ease-reveal) 260ms}
.draw-rule.is-visible,[data-reveal].is-visible .draw-rule{width:64px}

/* ---- "areas i support" editorial list ---- */
.areas{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(36px,5vw,84px);align-items:start}
.areas-aside{position:sticky;top:120px}
.areas-list{list-style:none;margin:0;padding:0}
.area{display:grid;grid-template-columns:auto 1fr;column-gap:22px;padding:clamp(20px,2.2vw,26px) 0;
  border-top:1px solid var(--line-2)}
.area:last-child{border-bottom:1px solid var(--line-2)}
.area-idx{font-family:var(--font-head),system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:0.12em;
  color:var(--muted-3);padding-top:8px}
.area h3{font-size:clamp(21px,2.1vw,25px);font-weight:600;color:var(--btn-primary);letter-spacing:-0.015em}
.area p{margin-top:7px;font-size:16px;color:var(--muted);max-width:44ch}

/* ---- portrait credential card (home "Meet Sim" + about hero) ---- */
@keyframes cloudDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-11px,0)}}
.about-stat{bottom:-24px;left:-30px;border-radius:18px;padding:15px 22px;animation:cloudDrift 9.5s ease-in-out infinite .8s}
.about-stat-n{font-family:var(--font-head),system-ui,sans-serif;font-weight:600;font-size:22px;line-height:1.1;color:var(--accent)}
.about-stat-s{font-size:12.5px;color:var(--muted-3);margin-top:4px}

/* ---- centred "what to expect" band on the beige surface ---- */
.process-band{background:#F6F2EB;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* warm the drifting mesh so it reads as cloud over beige, not lilac over white */
.mesh-warm::before{background:radial-gradient(circle,#F1E4D5,transparent 68%);opacity:.85}
.mesh-warm::after{background:radial-gradient(circle,#EAE2D5,transparent 66%);opacity:.85}

@media(max-width:900px){
  .areas{grid-template-columns:1fr;gap:34px}
  .areas-aside{position:static;top:auto}
}