/* =====================================================================
   Raksha Kuthnikar, digital learning and capability design
   One stylesheet for the whole site. Editorial, restrained, static.
   ===================================================================== */

:root{
  /* surface and content. Every text colour below clears 4.5:1 on every surface above it.
     One warm neutral system, one deep brand colour, one restrained secondary accent */
  --paper:#FAF9F6;        /* page                                          */
  --paper-2:#FFFFFF;      /* raised surface                                */
  --ink:#14202E;          /* headings                                      */
  --body:#46515F;         /* body text                                     */
  --muted:#5F6B78;        /* secondary            5.2:1 on paper           */
  --line:#E6E2DB;
  --line-strong:#D3CCBE;
  /* every card/chip surface resolves to the same neutral, subject colour lives
     only in a thin marker or a label, never a full tinted background */
  --surface-blue:#FFFFFF;
  --surface-lilac:#FFFFFF;
  --surface-mint:#FFFFFF;
  --surface-sand:#FFFFFF;
  /* one deep brand colour, one warm secondary accent, nothing else */
  --accent:#244A61;
  --accent-deep:#193647;
  --accent-indigo:#244A61;
  --accent-teal:#836039;
  --accent-gold:#836039;
  --accent-soft:#EDF3F5;
  --accent-line:#C3D0D6;
  /* signals */
  --ok:#356B59;
  --ok-soft:#E9F1EE;
  --flag:#8C2F22;
  --flag-soft:#F8EDEB;
  --watch:#836039;
  --watch-soft:#F5F0E8;
  /* spacing scale, one ladder for the whole site */
  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:18px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:52px;
  --section-y:64px;
  --section-y-large:84px;
  --heading-gap:10px;
  --intro-gap:22px;
  --content-gap:18px;
  --card-gap:16px;
  --card-pad:26px;
  /* elevation kept to a hairline border first, shadow only as a faint lift */
  --lift:0 1px 2px rgba(20,32,46,.03);
  --lift-hi:0 4px 14px rgba(20,32,46,.07);
  /* motion: subtle only, nothing bounces */
  --e:cubic-bezier(.3,.86,.4,.98);      /* short ease-out, for things entering or leaving */
  --e-move:cubic-bezier(.4,0,.2,1);     /* short ease-in-out, for things moving on screen */
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;font-synthesis:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative
}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;font-size:15px}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* anchored sections clear the sticky header */
[id]{scroll-margin-top:90px}

/* ---------- rhythm ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.wrap-narrow{max-width:900px}
.section{padding-block:var(--section-y)}
/* adjacent sections share one gap instead of stacking two full paddings */
.section + .section,.section-tight + .section,.section + .section-tight{padding-top:0}
#about-preview:has(+ .band-deep){padding-bottom:0}
.section-lg{padding-block:var(--section-y-large)}
.subsection + .subsection{margin-top:var(--space-7)}
.section-tight{padding-block:calc(var(--section-y) * .75)}
.section-head{max-width:66ch;margin-bottom:var(--intro-gap)}
.section-head .lede{margin-top:var(--heading-gap)}
.section-head p{margin-top:var(--heading-gap)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.022em;line-height:1.14;font-weight:560}
.h-hero{font-size:clamp(40px,4.1vw,64px);line-height:1.06;letter-spacing:-.032em;font-weight:560;text-wrap:balance}
h1{font-size:clamp(32px,3.8vw,50px);letter-spacing:-.026em;text-wrap:balance}
h2{font-size:clamp(29px,3vw,44px);letter-spacing:-.025em;text-wrap:balance}
h3{font-size:clamp(20px,1.6vw,23px);letter-spacing:-.017em;line-height:1.26}
h4{font-size:17.5px;letter-spacing:-.012em}
h2.as-h3{font-size:clamp(20px,1.6vw,23px);letter-spacing:-.016em;line-height:1.26;font-weight:560}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.lede{font-size:clamp(17px,1.4vw,18.5px);line-height:1.55;color:var(--body);max-width:66ch}
.small{font-size:15px;line-height:1.55;color:var(--muted)}
.tiny{font-size:13.5px;line-height:1.5;color:var(--muted)}
strong,b{font-weight:600;color:var(--ink)}

/* paragraph rhythm */
p{margin:0}
p + p{margin-top:8px}
h1 + p,h2 + p,h3 + p,h4 + p{margin-top:10px}
ul + p,p + ul{margin-top:var(--space-3)}
.u-mt-xs{margin-top:var(--space-1)}
.u-mt-sm{margin-top:var(--space-2)}
.u-mt-md{margin-top:var(--space-4)}
.u-mt-lg{margin-top:var(--space-6)}
.section-intro{margin-bottom:var(--space-5)}

/* ---------- buttons, two styles only ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:550;letter-spacing:-.012em;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .25s var(--e),border-color .25s var(--e),color .25s var(--e),transform .25s var(--e),box-shadow .25s var(--e)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.08),0 1px 1px rgba(16,24,40,.06)}
.btn-primary:hover{background:#17273C;transform:translateY(-1px);box-shadow:0 10px 24px rgba(27,76,118,.22),0 2px 6px rgba(16,24,40,.1)}
.btn-primary:active{transform:scale(.98) translateY(0);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.btn-secondary{background:var(--paper-2);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:translateY(-1px);box-shadow:0 8px 20px rgba(27,76,118,.1)}
.btn-secondary:active{transform:scale(.98)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.link{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:550;color:var(--accent);text-decoration:none;
  padding-bottom:2px;transition:gap .25s var(--e),color .2s}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent-line);
  transform-origin:left;transition:background-color .25s var(--e)}
.link:hover{gap:10px}
.link:hover::after{background:var(--accent)}
.link svg{width:14px;height:14px;transition:transform .25s var(--e)}
.link:hover svg{transform:translateX(2px)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:70;background:rgba(247,249,252,.86);-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-head.stuck{border-bottom-color:var(--line)}
.head-in{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,40px);height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .2s}
.brand:hover{color:var(--accent)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:9px 13px;border-radius:8px;font-size:15.5px;font-weight:520;color:var(--body);text-decoration:none;white-space:nowrap;
  transition:background .25s var(--e),color .2s}
.nav a:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}
.nav a{transition:background .25s var(--e),color .2s,transform .25s var(--e)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;position:relative}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;
  border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.head-cta{min-height:42px;padding:0 18px;font-size:15px;border-radius:8px}
.burger{display:none;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-strong);background:var(--paper-2);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:19px;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .3s var(--e),opacity .3s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.4px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.4px) rotate(-45deg)}
.mobile-nav{display:none}
@media(max-width:1120px){
  .nav,.head-cta{display:none}
  .burger{display:flex}
  .mobile-nav{display:block;position:absolute;left:clamp(20px,4vw,40px);right:clamp(20px,4vw,40px);top:66px;
    background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border:1px solid rgba(255,255,255,.5);border-radius:16px;padding:10px;
    box-shadow:0 1px 1px rgba(16,24,40,.04),0 20px 44px rgba(16,24,40,.16);
    opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:opacity .25s var(--e),transform .25s var(--e),visibility .25s}
  .mobile-nav[data-open]{opacity:1;visibility:visible;transform:none}
  .mobile-nav a{display:block;padding:14px 14px;border-radius:10px;font-size:17px;font-weight:530;color:var(--ink);text-decoration:none}
  .mobile-nav a:hover{background:var(--accent-soft)}
  .mobile-nav a.is-cta{margin-top:6px;background:var(--ink);color:#fff;text-align:center}
}

/* nav tightening just above the collapse point */
@media(min-width:1121px) and (max-width:1260px){
  .nav a{padding:9px 10px;font-size:15px}
  .head-cta{padding:0 14px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,3.4vw,44px) 0 clamp(32px,3.6vw,48px);position:relative;background:#F8FAFC}
.hero .founder{font-size:15.5px;font-weight:600;letter-spacing:.01em;color:var(--accent);margin-bottom:18px}
.hero .support{font-size:clamp(17.5px,1.55vw,20px);line-height:1.5;color:var(--body);max-width:58ch;margin-top:16px;font-weight:420}
.hero .descriptor{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--muted);max-width:60ch}
.hero .descriptor span{white-space:normal}
.hero .descriptor i{font-style:normal;color:var(--accent-line);padding:0 8px}
.hero .audience{margin-top:18px;font-size:15px;color:var(--muted)}

/* ---------- editorial cards ---------- */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:var(--card-pad);
  box-shadow:var(--lift);transition:transform .2s var(--e),box-shadow .2s var(--e),border-color .2s var(--e)}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-1px);border-color:var(--hue-accent,var(--accent));box-shadow:var(--lift-hi)}
}
.card h3{margin-bottom:10px}
.card p{font-size:16px;line-height:1.55}
.grid{display:grid;gap:var(--card-gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
@media(max-width:720px){.card{padding:21px}}

.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:5px;background:var(--accent-soft);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tags{display:flex;flex-wrap:wrap;gap:7px}

/* list with rules, editorial rather than bullets */
.rows{border-top:1px solid var(--line)}
.rows > li,.rows > div{list-style:none;padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline;justify-content:space-between}
.rows b{font-weight:560;color:var(--ink)}
.cols{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));font-size:16px}
.cols li{list-style:none;padding:7px 0;border-bottom:1px solid var(--line);color:var(--body)}

/* flow diagram, used for proof strips */
.flow-legacy{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.flow-legacy span{padding:9px 15px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper-2);font-size:15px;font-weight:520;color:var(--ink)}
.flow-legacy i{font-style:normal;color:var(--accent-line)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:clamp(36px,4vw,56px) 0 40px;margin-top:clamp(40px,5vw,72px)}
.foot-in{display:grid;gap:28px;grid-template-columns:1.5fr 1fr 1fr}
@media(max-width:760px){.foot-in{grid-template-columns:1fr}}
.site-foot b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.site-foot .foot-line{margin-top:6px;font-size:15px;color:var(--muted)}
.site-foot .foot-h{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.site-foot a{display:block;font-size:15.5px;color:var(--body);text-decoration:none;padding:4px 0}
.site-foot a:hover{color:var(--accent)}
.foot-base{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.foot-base a{display:inline;padding:0}
.foot-philosophy{color:var(--muted)}

/* ---------- reveal, kept minimal ---------- */
.rise{opacity:0;transform:translateY(10px);transition:opacity .5s var(--e),transform .5s var(--e)}
.rise.in{opacity:1;transform:none}
/* mobile rhythm */
@media(max-width:720px){
  :root{--section-y:44px;--section-y-large:52px;--intro-gap:20px;--card-pad:21px}
  .hero{padding:clamp(28px,7vw,44px) 0 clamp(36px,8vw,48px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .btn,.link,.nav a{transition:none}
}
@media (prefers-contrast:more){
  body{color:#30394A}
  .card,.rows > li,.rows > div{border-color:var(--line-strong)}
}
@media (prefers-reduced-transparency:reduce){
  .mobile-nav,.connect-in{background:var(--paper-2) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .connect-x,.copy{background:var(--paper) !important}
  .site-head{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- motion layer ----------
   One easing family, three durations, everything reversible and everything
   answerable to prefers-reduced-motion */
:root{
  --e-out:var(--e);                   /* alias, same curve as entrances */
  --e-soft:cubic-bezier(.32,.72,0,1); /* height and panels, iOS drawer curve family */
  --t-quick:.18s;
  --t-base:.32s;
  --t-slow:.52s;
}

/* hero, composed on load rather than revealed on scroll.
   The headline travels but never starts invisible, because the largest paint on
   this page is the headline and hiding it would delay the page's own timing */
.hero .founder,.hero .h-hero,.hero .support,.hero .descriptor,.hero .btn-row,.hero .audience{
  transform:translateY(12px);animation:hero-in .68s var(--e-out) forwards}
.hero .founder,.hero .support,.hero .descriptor,.hero .btn-row,.hero .audience{opacity:0;animation-name:hero-in-fade}
.hero .h-hero{animation-delay:.05s}
.hero .support{animation-delay:.12s}
.hero .descriptor{animation-delay:.18s}
.hero .btn-row{animation-delay:.24s}
.hero .audience{animation-delay:.3s}
@keyframes hero-in{to{transform:none}}
@keyframes hero-in-fade{to{opacity:1;transform:none}}

/* a revealed group arrives in sequence, so the eye is led rather than flooded */
.rise{transition-duration:var(--t-slow);transition-delay:var(--stagger,0s)}

/* press feedback on everything that can be pressed */
.card-link:active,.j-row:active,.flagship a:active{transform:scale(.995)}
.nav a:active,.brand:active{opacity:.7}
.btn{will-change:transform}

/* a value that has just changed says so once, quietly */
@keyframes value-settle{
  0%{transform:translateY(-4px);opacity:.35}
  60%{transform:translateY(0);opacity:1}
  100%{transform:none;opacity:1}
}
.v-changed{animation:value-settle .34s var(--e-out)}

@media(prefers-reduced-motion:reduce){
  .hero .founder,.hero .h-hero,.hero .support,.hero .descriptor,.hero .btn-row,.hero .audience{
    opacity:1;transform:none;animation:none}
  .rise{transition-delay:0s}
  .v-changed{animation:none}
}


/* =====================================================================
   Subject surfaces
   Four tints, each tied to one subject and used consistently wherever
   that subject appears, so colour carries meaning rather than decoration
   ===================================================================== */
[data-hue="blue"]{--hue-surface:var(--surface-blue);--hue-accent:var(--accent)}
[data-hue="indigo"]{--hue-surface:var(--surface-lilac);--hue-accent:var(--accent-indigo)}
[data-hue="teal"]{--hue-surface:var(--surface-mint);--hue-accent:var(--accent-teal)}
[data-hue="sand"]{--hue-surface:var(--surface-sand);--hue-accent:var(--accent-gold)}

.card-tint{background:var(--hue-surface,var(--paper-2));border-color:rgba(16,24,40,.07)}
.card-fill{border-color:var(--line);border-top-width:4px;border-top-style:solid;border-top-color:var(--accent)}
.card-fill[data-hue="blue"]{background:var(--accent-soft);border-top-color:var(--accent)}
.card-fill[data-hue="teal"]{background:var(--watch-soft);border-top-color:var(--accent-gold)}
.card-fill[data-hue="sand"]{background:#EDF1EA;border-top-color:#4B6B4F}
.card-tint .k-mark{color:var(--hue-accent,var(--accent))}
/* a hairline of the subject's own colour, the one place each card is loud */
.card-accent{position:relative;overflow:hidden}
.card-accent::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--hue-accent,var(--accent));opacity:.9}

/* a small line mark, drawn in the subject's accent */
.k-mark{display:block;width:26px;height:26px;margin-bottom:var(--space-3);color:var(--hue-accent,var(--accent))}
.k-mark svg{width:100%;height:100%;display:block}

/* ---------- sections read as a continuous page ---------- */
.band-paper{background:var(--paper-2)}
.band-tint{background:var(--accent-soft)}
.band-deep{background:linear-gradient(155deg,var(--accent) 0%,var(--accent-deep) 100%);color:rgba(255,255,255,.88)}
.band-deep h2,.band-deep .cs-label{color:#fff}
.band-deep .cs-line{color:rgba(255,255,255,.82)}
.band-deep .btn-secondary{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.band-deep .btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.band-deep .btn-primary{background:#fff;color:var(--accent-deep)}
.band-deep .btn-primary:hover{background:#fff;opacity:.92}
.band-deep .contact-strip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.band-edge{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (prefers-contrast:more){.band-tint{background:var(--paper-2)}}

/* ---------- colour inside running text ----------
   A named instrument, a figure or a defined term carries a quiet tint so
   the eye can find it in a paragraph without the paragraph shouting */
.term{color:var(--accent);font-weight:560;white-space:nowrap}
.term-i{color:var(--accent-indigo);font-weight:560}
.term-t{color:var(--accent-teal);font-weight:560}
.figure{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);
  background:linear-gradient(180deg,transparent 62%,var(--accent-soft) 62%);padding:0 1px}
.lede .term,.lede .term-i,.lede .term-t{font-weight:530}

/* ---------- a compact editorial list, used instead of ruled rows ---------- */
.terms{display:grid;gap:var(--space-1) var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  font-size:16px;list-style:none}
.terms li{position:relative;padding:4px 0 4px 15px;color:var(--body)}
.terms li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;
  background:var(--hue-accent,var(--accent));opacity:.55}
.terms.hue-cycle li:nth-child(3n+1)::before{background:var(--accent)}
.terms.hue-cycle li:nth-child(3n+2)::before{background:var(--accent-gold)}
.terms.hue-cycle li:nth-child(3n+3)::before{background:var(--accent-deep)}

#experience:has(+ #about-preview){padding-bottom:0}

/* two big clickable jump cards at the top of Work: the site's actual proof */
.jump-card{position:relative;display:block;overflow:hidden;padding:var(--space-6) var(--space-6);
  border-radius:20px;background:var(--hue-surface);border:1px solid rgba(16,24,40,.07);
  text-decoration:none;box-shadow:var(--lift);
  transition:transform .24s var(--e),box-shadow .24s var(--e),border-color .24s var(--e)}
.jump-card::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:var(--hue-accent);opacity:.09;transition:opacity .24s var(--e),transform .24s var(--e)}
.jump-card .k-mark{color:var(--hue-accent);width:46px;height:46px;border-radius:12px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--lift)}
.jump-card .k-mark svg{width:24px;height:24px}
.jump-card h2{margin-top:var(--space-4)}
.jump-card .jump-go{display:inline-flex;align-items:center;gap:7px;margin-top:var(--space-5);font-size:15.5px;
  font-weight:600;color:var(--hue-accent)}
.jump-card .jump-go svg{width:14px;height:14px;transition:transform .2s var(--e)}
@media (hover:hover) and (pointer:fine){
  .jump-card:hover{transform:translateY(-1px);box-shadow:var(--lift-hi);border-color:var(--hue-accent)}
  .jump-card:hover::after{opacity:.13}
  .jump-card:hover .jump-go svg{transform:translateX(2px)}
}

/* the sellable product gets its own quiet surface, no gradient wash */
.journey-shelf{background:var(--paper-2)}

/* a row of named, clickable chips: every item named, none of them read as prose */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chip-row li{margin:0}
.chip-row .tag-pill{text-decoration:none}

/* ---------- colourful tag pills, used where a plain bulleted list reads flat ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.tag-row li{margin:0}
.tag-pill{display:inline-flex;align-items:center;padding:7px 15px;border-radius:8px;font-size:14.5px;
  font-weight:560;color:var(--ink);background:var(--hue-surface);border:1px solid var(--line);
  transition:border-color .2s var(--e),color .2s var(--e)}
.tag-pill:hover{border-color:var(--hue-accent,var(--accent));color:var(--hue-accent,var(--accent))}
.tag-row li:nth-child(9n+1) .tag-pill{--hue-surface:var(--surface-blue);--hue-accent:var(--accent)}
.tag-row li:nth-child(9n+2) .tag-pill{--hue-surface:var(--surface-lilac);--hue-accent:var(--accent-indigo)}
.tag-row li:nth-child(9n+3) .tag-pill{--hue-surface:var(--surface-mint);--hue-accent:var(--accent-teal)}
.tag-row li:nth-child(9n+4) .tag-pill{--hue-surface:var(--surface-sand);--hue-accent:var(--accent-gold)}
.tag-row li:nth-child(9n+5) .tag-pill{--hue-surface:var(--surface-blue);--hue-accent:var(--accent)}
.tag-row li:nth-child(9n+6) .tag-pill{--hue-surface:var(--surface-lilac);--hue-accent:var(--accent-indigo)}
.tag-row li:nth-child(9n+7) .tag-pill{--hue-surface:var(--surface-mint);--hue-accent:var(--accent-teal)}
.tag-row li:nth-child(9n+8) .tag-pill{--hue-surface:var(--surface-sand);--hue-accent:var(--accent-gold)}
.tag-row li:nth-child(9n+9) .tag-pill{--hue-surface:var(--surface-blue);--hue-accent:var(--accent)}

/* ---------- card details ---------- */
.k-note{margin-top:var(--space-3);font-size:13.5px;font-weight:550;letter-spacing:.01em;color:var(--hue-accent,var(--accent))}
.k-lead{margin-top:var(--space-1);font-size:15.5px;font-weight:550;color:var(--hue-accent,var(--accent))}
.kicker{font-size:13.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--accent);line-height:1.5}
.design-note{max-width:78ch;color:var(--muted)}
.panels .card{display:flex;flex-direction:column}

/* ---------- contact pairs ---------- */
.contact{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-5);align-items:baseline;font-size:16px}
.contact dt{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contact dd{margin:0}
.contact a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line);padding-bottom:1px}
.contact a:hover{border-bottom-color:var(--accent)}

/* ---------- footer contact ---------- */
.foot-contact a{display:block;color:var(--body);text-decoration:none;padding:3px 0}
.foot-contact a:hover{color:var(--accent)}

/* =====================================================================
   Disclosure: a clean face, with the detail one press away.
   The + sits top right and turns into a − when the panel is open
   ===================================================================== */
.disc > summary{list-style:none;cursor:pointer;position:relative;display:block;padding-right:var(--space-7)}
.disc > summary::-webkit-details-marker{display:none}
.disc > summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}
.disc-btn{position:absolute;top:0;right:0;width:30px;height:30px;border-radius:9px;
  border:1px solid rgba(16,24,40,.1);background:rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;color:var(--hue-accent,var(--accent));
  transition:background .2s,border-color .2s,transform .2s var(--e)}
.disc > summary:hover .disc-btn{background:#fff;border-color:rgba(16,24,40,.18)}
.disc > summary:active .disc-btn{transform:scale(.94)}
/* the plus is drawn, so it stays crisp and can become a minus */
.disc-btn i{position:relative;display:block;width:12px;height:12px}
.disc-btn i::before,.disc-btn i::after{content:"";position:absolute;background:currentColor;border-radius:1px;
  transition:transform .26s var(--e),opacity .26s var(--e)}
.disc-btn i::before{left:0;right:0;top:5.5px;height:1.6px}
.disc-btn i::after{top:0;bottom:0;left:5.2px;width:1.6px}
.disc[open] .disc-btn i::after{transform:rotate(90deg);opacity:0}
.disc .disc-body{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid rgba(16,24,40,.09)}
.disc .disc-body p{font-size:15.5px;line-height:1.55}
.disc .disc-body .terms{margin-top:var(--space-2)}
/* a card that is also a disclosure keeps the card's own padding */
details.card > summary{margin:0}
details.card .terms li{font-size:15.5px}

/* =====================================================================
   Split: two columns that read as two distinct panels, not one grid
   ===================================================================== */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--space-5);align-items:start}
.split-col{background:var(--paper-2);border:1px solid rgba(16,24,40,.07);border-radius:18px;
  padding:var(--card-pad);box-shadow:var(--lift)}
.split-col > .small{margin-top:var(--space-1);color:var(--muted)}
.col-kicker{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hue-accent,var(--accent));margin-bottom:var(--space-2)}
.split-col .principles{margin-top:var(--space-4)}

/* =====================================================================
   Ready-to-Deploy on the homepage: an asymmetrical editorial layout,
   copy and CTA on the left, the catalogue itself on the right
   ===================================================================== */
.rtd-split{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(32px,4vw,56px);align-items:start}
@media(max-width:860px){.rtd-split{grid-template-columns:1fr}}

/* concise homepage version: names only, no descriptions, no colour, no bullets */
.band-white{background:var(--paper-2)}
.rtd-lite{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.35fr);gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:860px){.rtd-lite{grid-template-columns:1fr}}
.rtd-lite-copy{max-width:420px}
.rtd-names{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;border-top:1px solid var(--line)}
.rtd-names li{margin:0}
.rtd-names a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:18px;font-weight:600;
  letter-spacing:-.008em;transition:color .2s}
.rtd-names a svg{width:14px;height:14px;color:var(--muted);flex:0 0 auto;transition:transform .2s var(--e),color .2s}
.rtd-names a:hover{color:var(--accent)}
.rtd-names a:hover svg{color:var(--accent);transform:translateX(3px)}
.rtd-names li > span{display:block;padding:19px 0;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:560;color:var(--ink)}
@media(max-width:640px){.rtd-names{grid-template-columns:1fr}}

/* the homepage variant: each journey gets its own quiet colour fill */
.rtd-names-hue{border-top:0;gap:10px 14px}
.rtd-names-hue a{border-bottom:0;border-radius:11px;padding:17px 18px;background:var(--paper)}
.rtd-names-hue li:nth-child(7n+1) a{background:var(--accent-soft)}
.rtd-names-hue li:nth-child(7n+2) a{background:var(--watch-soft)}
.rtd-names-hue li:nth-child(7n+3) a{background:#EDF1EA}
.rtd-names-hue li:nth-child(7n+4) a{background:var(--accent-soft)}
.rtd-names-hue li:nth-child(7n+5) a{background:var(--watch-soft)}
.rtd-names-hue li:nth-child(7n+6) a{background:#EDF1EA}
.rtd-names-hue li:nth-child(7n+7) a{background:var(--accent-soft)}
.rtd-names-hue a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,32,46,.1)}
.rtd-names-hue a:hover svg{transform:translateX(3px)}

/* the hero's plain method line, text only, no badges */
.method-line{font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.01em;opacity:.85}

/* the final hero: two deliberate columns, no cards, no gradients */
.hero-grid-final{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,0.75fr);gap:56px;align-items:center}
@media(max-width:860px){.hero-grid-final{grid-template-columns:1fr;gap:32px}}
.h-hero-tight{font-size:clamp(34px,4vw,52px)}
.hero-avail{display:block;text-decoration:none;border-top:1px solid var(--line);padding-top:18px}
.hero-avail-label{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hero-avail-num{font-size:clamp(44px,4.6vw,60px);font-weight:650;letter-spacing:-.03em;line-height:1.05;
  color:var(--ink);margin-top:8px}
.hero-avail-sub{font-size:15px;color:var(--body);margin-top:4px;max-width:22ch}
.hero-avail-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14.5px;
  font-weight:600;color:var(--accent)}
.hero-avail-go svg{width:14px;height:14px;transition:transform .2s var(--e)}
.hero-avail:hover .hero-avail-go svg{transform:translateX(3px)}
@media(max-width:860px){.hero-avail{margin-top:8px}}
.rtd-list{border-top:1px solid var(--line)}
.rtd-list li{border-bottom:1px solid var(--line)}
.rtd-list a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 0;
  text-decoration:none;color:inherit}
.rtd-list b{font-size:16px;font-weight:560;color:var(--ink);white-space:nowrap;transition:color .2s}
.rtd-list span{font-size:14.5px;color:var(--muted);text-align:right;line-height:1.45}
.rtd-list svg{flex:0 0 auto;width:14px;height:14px;color:var(--muted);align-self:center;transition:transform .2s var(--e),color .2s}
.rtd-list a:hover b{color:var(--accent)}
.rtd-list a:hover svg{transform:translateX(2px);color:var(--accent)}
@media(max-width:640px){
  .rtd-list a{flex-direction:column;align-items:flex-start;gap:4px}
  .rtd-list span{text-align:left}
}

/* ---------- journey rows: an editorial catalogue, not a card grid ---------- */
.jgrid{margin-top:var(--space-5)}
.jlist{display:block;border-top:1px solid var(--line)}
.jrow{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;transition:background .2s var(--e)}
.jrow[data-hue="blue"]{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.jrow[data-hue="teal"]{background:color-mix(in srgb,var(--watch-soft) 55%,transparent)}
.jrow[data-hue="indigo"]{background:color-mix(in srgb,var(--accent-soft) 40%,transparent)}
.jrow[data-hue="sand"]{background:color-mix(in srgb,#EDF1EA 70%,transparent)}
.jrow[data-hue] > summary{padding-left:var(--space-3);padding-right:calc(var(--space-3) + var(--space-7))}
.jrow[data-hue] .disc-body{padding-left:var(--space-3);padding-right:var(--space-3)}
.jrow > summary{padding:var(--space-4) 0;display:grid;gap:2px}
.jrow:hover .j-head b{color:var(--hue-accent,var(--accent))}
.j-head{display:grid;gap:1px}
.j-head b{font-size:16.5px;font-weight:560;color:var(--ink);letter-spacing:-.01em;transition:color .2s}
.j-focus{font-size:14.5px;color:var(--muted);line-height:1.45}
.j-audience{font-size:13px;color:var(--muted);margin-top:4px}
.j-audience b{font-weight:560;color:var(--body)}
.j-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2)}
.jrow .disc-btn{top:var(--space-4)}
.jrow .disc-body{margin-top:var(--space-3);padding-top:var(--space-3);padding-bottom:var(--space-3)}
.j-h{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:var(--space-3)}
.j-h:first-child{margin-top:0}
.j-for{font-size:15px;color:var(--body);margin-top:var(--space-1)}
.j-enquire{display:inline-flex;margin-top:var(--space-3);font-size:14.5px;font-weight:560;color:var(--hue-accent,var(--accent));text-decoration:none;border-bottom:1px solid var(--accent-line)}
.j-enquire:hover{border-bottom-color:var(--hue-accent,var(--accent))}


/* four-up cards read tighter than a full-width card */
.grid-4 .card{padding:var(--space-5)}
.grid-4 .card h3{font-size:18.5px;line-height:1.24;letter-spacing:-.014em}
.grid-4 .terms{grid-template-columns:1fr;gap:0}
.grid-4 .terms li{padding:3px 0 3px 15px;font-size:15px}
.grid-4 .terms li::before{top:12px}
.grid-4 .k-mark{width:22px;height:22px;margin-bottom:var(--space-2)}
.grid-4 .card h3 + .terms{margin-top:var(--space-3)}

/* badges stay quiet inside a row */
.jrow .tag{background:transparent;border:1px solid var(--accent-line);color:var(--accent);font-weight:550;font-size:12px;padding:3px 8px}
.jrow .tag-ok{border-color:rgba(15,106,85,.35);color:var(--ok);background:transparent}


/* a panel block and the block after it get their own air, so one section
   never runs straight into the next */
.split{margin-top:var(--space-7)}
.section-head + .split{margin-top:var(--space-6)}
.split + .proof{margin-top:var(--space-6)}
.subsection{margin-top:var(--space-8)}
.subsection > h3{margin-bottom:var(--space-5)}
.split-col + .split-col{margin-top:0}
@media(max-width:720px){
  .split{margin-top:var(--space-6);gap:var(--space-4)}
  .subsection{margin-top:var(--space-7)}
}


/* ---------- closing notice ---------- */
.foot-note{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);
  display:grid;gap:5px;max-width:104ch}
.foot-note p{font-size:12.5px;line-height:1.5;color:var(--muted)}
.foot-note b{display:inline;font-size:12.5px;font-weight:600;color:var(--body);margin-right:6px}

/* a card whose detail is one press away: the face is always readable, the
   toggle sits in the corner and the body opens underneath */
.disc-card{position:relative}
.disc-card > .disc{margin-top:0}
.disc-card > .disc > summary{padding:0;position:static}
.disc-card .disc-btn{top:var(--space-5);right:var(--space-5)}
.disc-card > .disc > summary:focus-visible .disc-btn{outline:2px solid var(--accent);outline-offset:3px}
.grid-4 .disc-card .disc-btn{top:var(--space-4);right:var(--space-4)}
.disc-card h2,.disc-card h3{padding-right:var(--space-7)}

/* a page title runs straight into the first section, rather than leaving a
   band of empty page between the two */
.section-tight{padding-block:var(--space-7) var(--space-5)}
.section-tight + .section,.section-tight + .section-tight{padding-top:var(--space-6)}

/* =====================================================================
   Connect panel: the contact details, shown here rather than handed to a
   mail client, so nothing leaves the page to read an address
   ===================================================================== */
.connect{border:0;padding:0;background:transparent;max-width:min(94vw,440px);width:100%;margin:auto;
  border-radius:20px;box-shadow:0 30px 80px rgba(16,24,40,.24)}
.connect::backdrop{background:rgba(16,24,40,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.connect-in{position:relative;background:rgba(255,255,255,.74);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border-radius:20px;padding:var(--space-6);border:1px solid rgba(255,255,255,.55)}
.connect-x{position:absolute;top:var(--space-4);right:var(--space-4);width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(16,24,40,.1);background:rgba(255,255,255,.6);color:var(--ink);font-size:19px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s var(--e)}
.connect-x:hover{background:#fff;border-color:rgba(16,24,40,.2)}
.connect-x:active{transform:scale(.94)}
.connect h2{font-size:24px;letter-spacing:-.02em}
.connect-pairs{margin-top:var(--space-5);gap:var(--space-3) var(--space-5)}
.connect-pairs dd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.connect .cv{font-size:16.5px;font-weight:550;color:var(--ink);user-select:all}
.copy{font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--accent);
  background:rgba(234,240,247,.85);border:1px solid var(--accent-line);border-radius:7px;padding:4px 9px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--e)}
.copy:hover{background:#fff;border-color:var(--accent)}
.copy:active{transform:scale(.95)}
.copy.is-done{background:var(--ok-soft);border-color:rgba(15,106,85,.35);color:var(--ok)}
.connect-note{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--line);color:var(--muted)}
.connect[open]{animation:connect-in .3s var(--e)}
@keyframes connect-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.connect[open]{animation:none}}
/* the burger menu's own Connect is a button, so it keeps the link's look */
.mobile-nav button.is-cta{display:block;width:100%;font-family:inherit;font-size:17px;font-weight:530;
  border:0;cursor:pointer;padding:14px;border-radius:10px;margin-top:6px;background:var(--ink);color:#fff}

.science-note{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------- portrait ---------- */
.profile{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:var(--space-6);align-items:start}
.profile-copy{min-width:0}
.profile-lead{gap:clamp(28px,4vw,48px);align-items:center}
.profile-copy h1,.profile-copy h2{white-space:nowrap}
.profile-copy .lede{max-width:70ch}
.portrait{margin:0;max-width:360px;border-radius:17px;overflow:hidden;background:var(--surface-blue);
  border:1px solid rgba(16,24,40,.06);box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px rgba(16,24,40,.06)}
.portrait img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:4/5}
@media(max-width:820px){
  .profile{grid-template-columns:1fr;gap:var(--space-5)}
  .portrait{max-width:300px}
}

/* =====================================================================
   Touch targets: on a phone every link that acts as a control gets a
   comfortable hit area, whatever its text length
   ===================================================================== */
@media(max-width:900px){
  .site-foot a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  .foot-base a{min-height:0;padding:0;display:inline}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .link{min-height:44px;align-items:center}
  .contact a{display:inline-flex;align-items:center;min-height:44px}
  .jrow > summary,.principle > summary{min-height:56px;align-content:center}
  .copy{min-height:36px;padding:8px 12px}
  .connect-x{width:44px;height:44px}
  .fl-open{min-height:44px}
}


/* =====================================================================
   Colour in the rows: each principle and each journey carries the tint of
   its own subject, drawn only where it helps the eye separate one row
   from the next. Quiet by default, present when the row is open
   ===================================================================== */
.principles-grid{margin-top:var(--space-5)}
.principles-grid .principles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);border-top:0}
.principles-grid .principle{flex:1 1 300px;max-width:360px;border:1px solid rgba(16,24,40,.08);border-radius:14px;
  background:var(--paper-2);box-shadow:var(--lift);border-bottom:1px solid rgba(16,24,40,.08)}
.principles-grid .principle > summary{padding:var(--space-4)}
.principles-grid .principle .p-body{padding:0 var(--space-4) var(--space-4)}
@media(max-width:900px){.principles-grid .principle{flex-basis:100%;max-width:480px}}
.principle,.jrow{position:relative;transition:background .25s var(--e)}
.principle::before,.jrow::before{content:"";position:absolute;left:calc(var(--space-3) * -1);top:0;bottom:0;width:3px;
  background:var(--hue-accent,var(--accent));opacity:0;border-radius:2px;transition:opacity .25s var(--e)}
.principle::before{opacity:0}
.jrow::before{opacity:.55}
.principle:hover::before,.jrow:hover::before,.principle[open]::before,.jrow[open]::before{opacity:1}
.principle[open],.jrow[open]{background:var(--hue-surface,var(--accent-soft))}
.principle[open] .p-name,.jrow[open] .j-head b{color:var(--hue-accent,var(--accent))}
.principle .disc-btn,.jrow .disc-btn{color:var(--hue-accent,var(--accent))}
/* the open body sits on its own faint field, so the row reads as one block */
.principle .p-body,.jrow .disc-body{border-left:2px solid transparent}
.principle[open] .p-body{padding-left:var(--space-3);border-left-color:var(--hue-accent,var(--accent))}
.jrow[open] .disc-body{padding-left:var(--space-3);border-left-color:var(--hue-accent,var(--accent))}
/* the panel behind the rows picks up the faintest wash of its column hue */
.split-col{background:var(--paper-2)}
.split-col > .col-kicker{padding-left:0}
.split-col > .col-kicker{color:var(--hue-accent,var(--accent))}
@media (prefers-contrast:more){
  .principle[open],.jrow[open],.split-col{background:var(--paper-2)}
}


/* =====================================================================
   Hero
   Copy on the left, the work itself on the right: four stages joined by
   one connector, because the value is in the sequence, not the boxes
   ===================================================================== */

.hero > .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,38fr);gap:clamp(40px,4.4vw,64px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--space-6)}}

/* small colour badges under the hero support line, instead of another paragraph */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:var(--space-4) 0 0}
.badge-row li{padding:6px 13px;border-radius:8px;font-size:13.5px;font-weight:560;
  background:var(--hue-surface,var(--accent-soft));color:var(--hue-accent,var(--accent));
  border:1px solid color-mix(in srgb,var(--hue-accent,var(--accent)) 22%,transparent)}

/* the hero's one bold colour moment: a stat card where a portrait would sit */
.hero-stat{display:block;text-decoration:none;border-radius:18px;padding:clamp(28px,3vw,38px);
  background:linear-gradient(155deg,var(--accent) 0%,var(--accent-deep) 100%);color:#fff;
  box-shadow:0 18px 40px -14px rgba(20,54,71,.45);transition:transform .2s var(--e),box-shadow .2s var(--e)}
.hero-stat:hover{transform:translateY(-2px);box-shadow:0 22px 48px -14px rgba(20,54,71,.5)}
.hero-stat-tag{display:block;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:12px;transition:opacity .22s var(--e)}
.hero-stat-num{display:block;font-size:clamp(52px,5.6vw,72px);font-weight:650;letter-spacing:-.03em;line-height:1}
.hero-stat-label{display:block;margin-top:10px;font-size:15.5px;line-height:1.4;color:rgba(255,255,255,.88);max-width:26ch}
.hero-stat-dots{display:flex;gap:7px;list-style:none;padding:0;margin:20px 0 0}
.hero-stat-dots li{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.9)}
.hero-stat-dots li[data-hue="teal"],.hero-stat-dots li[data-hue="sand"]{background:rgba(255,255,255,.55)}
.hero-stat-go{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:14.5px;font-weight:600;color:#fff}
.hero-stat-go svg{width:14px;height:14px;transition:transform .2s var(--e)}
.hero-stat:hover .hero-stat-go svg{transform:translateX(3px)}
@media(max-width:900px){.hero-stat{margin-top:var(--space-2)}}
.hero-copy{min-width:0}
.hero .founder{font-size:15px;font-weight:600;letter-spacing:.012em;color:var(--accent);margin-bottom:var(--space-3)}
.hero .support{font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--body);max-width:52ch;margin-top:var(--space-4);font-weight:450}
.hero .support-2{font-size:16px;line-height:1.55;color:var(--muted);max-width:54ch;margin-top:var(--space-2)}
.hero .descriptor{margin-top:var(--space-4);font-size:14.5px;font-weight:550;letter-spacing:.005em;color:var(--ink)}
.hero .descriptor i{font-style:normal;color:var(--accent-line);padding:0 7px}
.hero .ready-line{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-3);
  font-size:13.5px;font-weight:600;letter-spacing:.005em;color:var(--ok);
  background:var(--ok-soft);border:1px solid rgba(15,106,85,.22);border-radius:999px;padding:5px 13px}
.hero .ready-line .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.hero .audience{margin-top:var(--space-4);font-size:14.5px;color:var(--muted)}
.hero .btn-row{margin-top:var(--space-4)}
.hero .credibility{margin-top:var(--space-4);font-size:13.5px;color:var(--muted)}
.hero .credibility i{font-style:normal;color:var(--accent-line);padding:0 6px}

/* the four stages, joined */
.stages{list-style:none;position:relative;display:grid;gap:var(--space-3);padding-left:22px;margin:0}
.stages::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-indigo) 34%,var(--accent-teal) 68%,var(--accent-gold) 100%);
  opacity:.28}
.stage{position:relative;display:grid;gap:2px;padding:var(--space-3) var(--space-4);border-radius:12px;
  background:var(--hue-surface);
  border:1px solid rgba(16,24,40,.06);box-shadow:0 1px 2px rgba(16,24,40,.035),0 6px 18px rgba(16,24,40,.045)}
.stage::before{content:"";position:absolute;left:-22px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;
  background:var(--hue-accent);box-shadow:0 0 0 3px #F8FAFC}
.st-k{font-size:14px;font-weight:600;color:var(--hue-accent);letter-spacing:-.006em}
.st-v{font-size:13.5px;line-height:1.45;color:var(--body)}

/* the sequence builds once on load, about two seconds end to end */
.stages::before{transform-origin:top;animation:thread 1.9s var(--e) both}
.stage{opacity:0;transform:translateY(8px);animation:stage-in .5s var(--e) forwards}
.stage:nth-child(1){animation-delay:.15s}
.stage:nth-child(2){animation-delay:.6s}
.stage:nth-child(3){animation-delay:1.05s}
.stage:nth-child(4){animation-delay:1.5s}
@keyframes stage-in{to{opacity:1;transform:none}}
@keyframes thread{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .stage{padding:var(--space-3)}
  .stage:nth-child(1){animation-delay:.1s}
  .stage:nth-child(2){animation-delay:.32s}
  .stage:nth-child(3){animation-delay:.54s}
  .stage:nth-child(4){animation-delay:.76s}
  .stages::before{animation-duration:1s}
}
@media(prefers-reduced-motion:reduce){
  .stage{opacity:1;transform:none;animation:none}
  .stages::before{animation:none}
}
@media (prefers-contrast:more){
  .hero::before{display:none}
  .stage{background:var(--paper-2)}
}

/* =====================================================================
   Homepage LXD preview: three short lists, no repeated page content
   ===================================================================== */
.lxd-cols{margin-top:var(--space-5);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.lxd-col{padding:var(--space-5);border-radius:14px;background:var(--hue-surface);border:1px solid rgba(16,24,40,.06)}
.lxd-principles{grid-template-columns:1fr;gap:var(--space-2)}
.lxd-principles li{font-weight:530;color:var(--ink)}
@media(max-width:820px){.lxd-cols{grid-template-columns:1fr;gap:var(--space-5)}}

/* ---------- About: 2x2 credential grid, no bullet column ---------- */
.credentials-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-4)}
.credentials-grid div{padding:var(--space-3) var(--space-4);border-radius:11px;background:var(--paper-2);
  border:1px solid rgba(16,24,40,.07);border-left:3px solid var(--accent)}
.credentials-grid div:nth-child(2){border-left-color:var(--accent-gold)}
.credentials-grid div:nth-child(4){border-left-color:var(--accent-gold)}
.credentials-grid b{font-size:14.5px;font-weight:560;color:var(--ink);line-height:1.35}
@media(max-width:520px){.credentials-grid{grid-template-columns:1fr}}

/* ---------- Enquiries as a compact tinted strip, not a card ---------- */
.contact-strip{margin-top:var(--space-7);padding:var(--space-5) var(--card-pad);border-radius:16px;
  background:var(--surface-blue);border:1px solid rgba(16,24,40,.06);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}
/* a standalone bold-colour close, for a strip that isn't wrapped in its own section */
.contact-strip.deep{background:linear-gradient(155deg,var(--accent) 0%,var(--accent-deep) 100%);border-color:transparent}
.contact-strip.deep .cs-label{color:#fff}
.contact-strip.deep .cs-line{color:rgba(255,255,255,.82)}
.contact-strip.deep .btn-secondary{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.contact-strip.deep .btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.contact-strip.deep .btn-primary{background:#fff;color:var(--accent-deep)}
.contact-strip.deep .cs-row a.btn-primary,.contact-strip.deep .cs-row a.btn-primary:hover{color:var(--accent-deep)}
.cs-label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);flex:0 0 auto}
.cs-line{font-size:14.5px;color:var(--body);flex:1 1 320px}
.cs-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);flex:0 0 auto}
.cs-row a{font-size:15px;font-weight:550;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent-line);padding:9px 0;display:inline-flex;align-items:center;min-height:44px}
.cs-row a:hover{border-bottom-color:var(--accent);color:var(--accent)}
/* a plain-link anchor and a .btn anchor never share the same look: the button wins */
.cs-row a.btn,.cs-row a.btn:hover{border-bottom:0;padding:0 24px}
.cs-row a.btn-primary,.cs-row a.btn-primary:hover{color:#fff}
.cs-row a.btn-secondary,.cs-row a.btn-secondary:hover{color:var(--ink)}
.band-deep .cs-row a.btn-secondary,.band-deep .cs-row a.btn-secondary:hover{color:#fff}
.band-deep .cs-row a.btn-primary,.band-deep .cs-row a.btn-primary:hover{color:var(--accent-deep)}
@media(max-width:760px){.contact-strip{flex-direction:column;align-items:flex-start}.cs-row{width:100%;flex-direction:column;align-items:flex-start}.cs-row .btn{width:100%}}

/* current-law now closes with the subject-depth split block, whose own
   trailing content varies in height between columns, so the section's own
   bottom padding is dropped and the next section's top padding alone
   provides the gap */
#current-law{padding-bottom:0}


/* =====================================================================
   Hero signature: one phrase in the headline carries a marker stroke that
   draws in once, after the headline itself has settled. The one bold move
   the hero is allowed, and the only one it needs
   ===================================================================== */
.hero-mark{position:relative;color:inherit;white-space:nowrap}
.hero-mark::after{content:"";position:absolute;left:1px;right:1px;bottom:.08em;height:.24em;
  background:linear-gradient(90deg,var(--accent-indigo),var(--accent));border-radius:3px;opacity:.24;
  transform:scaleX(0);transform-origin:left;z-index:-1;
  animation:mark-sweep .68s var(--e) .6s forwards}
@keyframes mark-sweep{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hero-mark::after{animation:none;transform:scaleX(1)}}

/* a section's first content block never carries its own top margin — the
   section's own padding already provides the gap above it */
.section > .wrap > .adapt:first-child,
.section-lg > .wrap > .adapt:first-child{margin-top:0}

/* =====================================================================
   Skillset rows: tag pills grouped by subject, deliberately a different
   shape from the Learning Solutions cards so Capabilities reads as its
   own page rather than a repeat of one
   ===================================================================== */
.skillset{display:grid;gap:var(--space-4)}
.skillset-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--card-pad);border-radius:14px;background:var(--hue-surface);
  border:1px solid rgba(16,24,40,.06)}
.skillset-head{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;min-width:220px}
.skillset-head .k-mark{margin:0;color:var(--hue-accent,var(--accent))}
.skillset-head h2{margin:0}
.skillset-tags{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 320px}
.skillset-tags .tag{background:rgba(255,255,255,.72);border:1px solid rgba(16,24,40,.08);color:var(--body);
  font-weight:520}
@media(max-width:760px){.skillset-row{flex-direction:column;align-items:flex-start}}

/* =====================================================================
   Insights: a plain editorial grid, each card a short original piece
   behind a disclosure, not a blog-template thumbnail wall
   ===================================================================== */
.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-5)}
.insight-card{padding:var(--space-5) var(--card-pad);border-radius:16px;background:var(--paper-2);
  border:1px solid rgba(16,24,40,.07);box-shadow:var(--lift);position:relative}
.insight-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:16px 16px 0 0;
  background:var(--hue-accent,var(--accent));opacity:.85}
.insight-card .disc-body p{font-size:15.5px;line-height:1.6}

/* =====================================================================
   Hero portrait: Raksha, not a diagram, establishes the person behind
   the work immediately
   ===================================================================== */
.hero .founder-role{color:var(--body);font-weight:500}
.hero .credibility{font-size:14.5px;color:var(--muted);margin-top:var(--space-3)}
.hero-portrait{max-width:380px;margin:0;border-radius:18px;justify-self:end}
.hero-portrait img{aspect-ratio:4/5}
@media(max-width:900px){
  .hero-portrait{max-width:280px;margin:0 auto;justify-self:center}
}

/* an enquiry strip that opens its own section carries no extra top margin,
   since the section's own padding already provides the gap above it */
.section > .wrap > .contact-strip:first-child{margin-top:0}
@media(max-width:640px){
  .contact-strip{margin-top:var(--space-5)}
  #about-preview{padding-top:var(--space-5)}
}

/* insights-preview closes with a grid of short cards whose trailing space
   varies, so its own bottom padding is dropped in favour of the next
   section's top padding alone */
#insights-preview{padding-bottom:0}

/* the hero's compact flow, alone (no portrait), reads as a vertical strip */
.mini-flow-vert{flex-direction:column;align-items:stretch;max-width:280px;gap:10px}
.mini-flow-vert span{padding:12px 16px;font-size:15px;text-align:center}
.mini-flow-vert i{align-self:center;transform:rotate(90deg)}
@media(max-width:900px){.mini-flow-vert{flex-direction:row;flex-wrap:wrap;max-width:360px;justify-content:center}
  .mini-flow-vert i{transform:none}}

/* =====================================================================
   Hero support, shown visually: who it's for, arrow, what gets built.
   No paragraph, just the shape of the promise
   ===================================================================== */
.support-visual{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--space-4);max-width:56ch}
.support-visual .sv-for,.support-visual .sv-to{padding:7px 13px;border-radius:8px;font-size:14px;font-weight:600;
  border:1px solid rgba(16,24,40,.08)}
.support-visual .sv-for{background:var(--surface-blue);color:var(--accent)}
.support-visual .sv-to{background:var(--surface-mint);color:var(--accent-teal)}
.support-visual .sv-arrow{font-style:normal;color:var(--line-strong);font-size:18px;margin:0 2px}
@media(max-width:520px){.support-visual{gap:6px}.support-visual .sv-for,.support-visual .sv-to{font-size:13px;padding:6px 10px}}

/* =====================================================================
   Journey cards on the homepage: the actual sellable product gets its
   own visual treatment, hue-coded and distinct from the Work page's
   full disclosure rows, so nothing here duplicates that detail
   ===================================================================== */
.jcard{position:relative;overflow:hidden;display:block;padding:var(--space-4) var(--space-5);border-radius:14px;
  background:var(--hue-surface);border:1px solid rgba(16,24,40,.06);text-decoration:none;box-shadow:var(--lift);
  transition:transform .22s var(--e),box-shadow .22s var(--e),border-color .22s var(--e)}
.jcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--hue-accent);
  opacity:.7;transition:width .22s var(--e)}
.jcard b{display:block;font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.jcard span{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--body)}
@media (hover:hover) and (pointer:fine){
  .jcard:hover{transform:translateY(-1px);box-shadow:var(--lift-hi);border-color:var(--hue-accent)}
  .jcard:hover::before{width:6px}
  .jcard:hover b{color:var(--hue-accent)}
}

/* the expertise-to-capability flow, laid out as a horizontal strip when it
   is not sharing the hero column with anything else */
.stages-row{flex-direction:row;padding-left:0;max-width:none;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.stages-row::before{display:none}
.stages-row .stage{flex:1 1 180px}
.stages-row .stage::before{content:"";position:absolute;left:-11px;top:50%;width:8px;height:1px;background:var(--line-strong)}
.stages-row .stage:first-child::before{display:none}
@media(max-width:760px){.stages-row{flex-direction:column}.stages-row .stage::before{display:none}}

/* the "how it shapes the work" cards section and the speaking/mentoring
   split section both close with content whose trailing height varies, so
   their own bottom padding is dropped in favour of the next section's top */
.section.band-tint:has(.grid-4){padding-bottom:0}
.section:has(> .wrap > .split){padding-bottom:0}

/* the split section that follows the credential cards on About needs a
   touch more pull, since the card grid's own row height varies by content */
.section.band-tint:has(.grid-4) + .section:has(> .wrap > .split){margin-top:-16px}

/* plain hero: business-first statement, typography and composition only, no effects */
.hero-plain{padding-block:clamp(32px,4vw,48px) clamp(40px,5vw,56px);background:#FAF9F6}
.hero-plain{padding-bottom:0}
.hero-plain + .section,.hero-plain + .section-tight{padding-top:clamp(8px,1vw,14px)}
.hero-plain .h-hero{max-width:17ch;font-size:clamp(36px,4.6vw,60px)}
.hero-plain .support{max-width:62ch;margin-top:var(--space-4)}
.hero-plain .btn-row{margin-top:var(--space-6)}
.hero-plain .avail{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-5);font-size:14.5px;
  font-weight:560;color:var(--muted);text-decoration:none}
.hero-plain .avail b{color:var(--accent);font-weight:600}
.hero-plain .avail:hover b{text-decoration:underline}
.hero-plain .avail i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok)}