/* ============================================================
   GWS — Global Wealth Strategy
   Design tokens from Corporate Identity (Edition One) + DESIGN.md
   ============================================================ */
:root{
  --green:#112820;        /* primary dark ground */
  --green-deep:#0C1D17;   /* deepest band (footer) */
  --cream:#F3EFE5;        /* light reading ground */
  --ink:#292D2B;          /* text on cream */
  --sand:#D8D3C7;         /* hairline / secondary on cream */
  --warm-grey:#72786F;    /* secondary text */
  --signal:#9FC7E8;       /* powder blue — the only accent */
  --hairline-on-green:rgba(216,211,199,.16);
  --hairline-on-cream:#D8D3C7;

  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --band:clamp(72px,min(11vw,15vh),160px);   /* vertical section rhythm; short laptop screens get less */

  --f-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--green);color:var(--cream);
  font-family:var(--f-sans);font-weight:400;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}

/* ---- Grounds ---- */
.ground-green{background:var(--green);color:var(--cream)}
.ground-green-deep{background:var(--green-deep);color:var(--cream)}
.ground-cream{background:var(--cream);color:var(--ink)}

/* ---- Layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:var(--band);padding-bottom:var(--band)}
.measure{max-width:44ch}
.serif{font-family:var(--f-serif);font-weight:400}

/* ---- Typography ---- */
.display{
  font-family:var(--f-sans);font-weight:600;
  font-size:clamp(44px,min(7.2vw,11vh),104px);line-height:.98;letter-spacing:-.03em;
  margin:0;text-transform:uppercase;
}
.display .d-line{display:block}
.display .accent{color:var(--signal)}
.heading{
  font-family:var(--f-sans);font-weight:600;
  font-size:clamp(28px,min(3.6vw,5.8vh),50px);line-height:1.05;letter-spacing:-.02em;margin:0;
}
.ground-cream .heading{color:var(--ink)}
.ground-green .heading,.ground-green-deep .heading{color:var(--cream)}
.body{font-size:clamp(17px,1.4vw,20px);line-height:1.6}
.lead{font-size:clamp(18px,min(1.7vw,2.8vh),24px);line-height:1.45;color:var(--sand);margin:1.4rem 0 0;max-width:34ch}
.ground-cream .lead{color:var(--warm-grey)}
.lead-sub{font-size:clamp(15px,1.35vw,18px);line-height:1.5;color:var(--sand);margin:16px 0 0;max-width:42ch}
.ground-cream .lead-sub{color:var(--warm-grey)}
.kicker{font-weight:500;font-size:clamp(16px,1.3vw,19px);line-height:1.4;margin:1.6rem 0 0;max-width:34ch}
.solution{display:block;margin:30px 0 0;max-width:18ch;
  font-family:var(--f-sans);font-weight:600;font-size:clamp(25px,3vw,40px);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.solution::before{content:"";display:block;width:46px;height:2px;background:var(--ink);margin:0 0 22px}
.micro{
  font-family:var(--f-sans);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);
}
.ground-green .micro,.ground-green-deep .micro{color:var(--sand)}
/* Section eyebrow labels — stronger, legible, with an accent tick */
.eyebrow-k{display:inline-flex;align-items:center;gap:12px;font-weight:600;
  font-size:13px;letter-spacing:.13em;color:var(--ink)}
.eyebrow-k::before{content:"";width:26px;height:2px;background:var(--signal);flex:0 0 auto}
.ground-green .eyebrow-k,.ground-green-deep .eyebrow-k{color:var(--cream)}
/* Guard against the cream-on-cream cascade collision: a cream section nested
   inside any green ground must keep dark text. These come AFTER the green rules
   so they win when an element matches both (equal specificity → source order). */
.ground-cream .heading{color:var(--ink)}
.ground-cream .eyebrow-k{color:var(--ink)}
.ground-cream .micro{color:var(--warm-grey)}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:var(--green);
  border-bottom:1px solid var(--hairline-on-green);transition:transform .3s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand-logo{height:30px;width:auto}
.brand-icon{height:50px;width:auto}
.brand-logo-h{height:38px;width:auto;display:block}
@media (max-width:520px){.brand-logo-h{height:32px}}
.nav{display:flex;gap:30px;font-size:15px;color:var(--sand)}
.nav a{transition:color .2s ease}
.nav a:hover{color:var(--cream)}
.header-right{display:flex;align-items:center;gap:22px}
.lang{display:flex;align-items:center;gap:7px;font-size:13px;letter-spacing:.06em;color:var(--warm-grey)}
.lang .lang-on{color:var(--cream)}
.ground-cream .lang .lang-on{color:var(--ink)}
.lang a:hover{color:var(--cream)}

/* ---- Buttons (neutral / outlined; accent never fills) ---- */
.btn{display:inline-block;font-weight:500;font-size:15px;letter-spacing:.01em;
  padding:14px 22px;border:1px solid transparent;border-radius:0;cursor:pointer;
  transition:transform .12s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn-outline{background:transparent}
.btn-cream{border-color:var(--cream);color:var(--cream)}
.btn-cream:hover{background:var(--cream);color:var(--green)}
.ground-cream .btn-cream{border-color:var(--ink);color:var(--ink)}
.ground-cream .btn-cream:hover{background:var(--ink);color:var(--cream)}
.btn:active{transform:translateY(1px)}
/* Primary CTA — filled signal, deliberately attention-grabbing (contact-form buttons stay outlined) */
.btn-cta{background:var(--signal);border-color:var(--signal);color:var(--green-deep);
  font-weight:600;letter-spacing:.02em;padding:15px 28px;
  animation:ctaPulse 2.6s ease-out infinite}
.btn-cta::after{content:" \2192";font-weight:600;display:inline-block;transition:transform .2s ease}
.btn-cta:hover{background:#BBDBF3;border-color:#BBDBF3;color:var(--green-deep);
  transform:translateY(-2px);animation:none}
.btn-cta:hover::after{transform:translateX(4px)}
.ground-cream .btn-cta{background:var(--signal);border-color:var(--signal);color:var(--green-deep)}
.ground-cream .btn-cta:hover{background:#7FB2DE;border-color:#7FB2DE;color:var(--green-deep)}
.btn-cta-lg{padding:18px 34px;font-size:16.5px}
/* cream-filled CTA variant (same prominence, cream instead of signal) */
.btn-cta-cream{background:var(--cream);border-color:var(--cream);color:var(--green);animation-name:ctaPulseCream}
.btn-cta-cream:hover{background:#fff;border-color:#fff;color:var(--green)}
.ground-cream .btn-cta-cream{background:var(--green);border-color:var(--green);color:var(--cream)}
.ground-cream .btn-cta-cream:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--cream)}
@keyframes ctaPulseCream{
  0%{box-shadow:0 0 0 0 rgba(243,239,229,.5)}
  70%{box-shadow:0 0 0 14px rgba(243,239,229,0)}
  100%{box-shadow:0 0 0 0 rgba(243,239,229,0)}
}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(159,199,232,.55)}
  70%{box-shadow:0 0 0 14px rgba(159,199,232,0)}
  100%{box-shadow:0 0 0 0 rgba(159,199,232,0)}
}
@media (prefers-reduced-motion:reduce){.btn-cta{animation:none}}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding-top:clamp(48px,7vw,90px);padding-bottom:var(--band)}
.hero-bg{position:absolute;inset:0;background:var(--green);
  /* drop a photo here later: background-image:url(assets/img/hero.jpg);background-size:cover;background-position:center; */
  opacity:1;z-index:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:var(--green);opacity:.72}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
  min-height:min(78vh,760px)}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--f-sans);font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin:0 0 30px}
.eyebrow .dot{width:8px;height:8px;background:var(--signal);display:inline-block}
.hero-cta{margin-top:38px}

/* Single-column hero (logo on top of the headline) */
.hero-single{position:relative;z-index:1;max-width:940px}
.hero-logo{height:clamp(81px,9.72vw,143px);width:auto;max-width:100%;display:block;margin:0 auto clamp(24px,3.4vw,38px) 0}

/* Instrument panel */
.instrument{position:relative;margin:0;padding:30px 28px;border:1px solid var(--hairline-on-green)}
.inst-corner{position:absolute;width:12px;height:12px;border:1px solid var(--sand);opacity:.5}
.inst-corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.inst-corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.inst-corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.inst-corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel-logo{height:clamp(150px,18vw,260px);width:auto;max-width:100%;display:block;margin:0 0 30px}
.inst-head{padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--hairline-on-green)}
.inst-title{font-family:var(--f-sans);font-weight:600;font-size:clamp(15px,1.4vw,18px);
  line-height:1.25;letter-spacing:-.01em;color:var(--cream)}
.inst-rows{position:relative}
.inst-rows li{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--hairline-on-green)}
.inst-rows li:last-child{border-bottom:0}
.inst-rows .node{width:8px;height:8px;border:1px solid var(--sand);flex:0 0 auto;
  transition:background-color .3s ease,border-color .3s ease,transform .3s ease}
.inst-row.lit .node{background:var(--signal);border-color:var(--signal);transform:scale(1.25)}
.inst-key{font-size:14px;color:var(--cream);flex:1}
.inst-val{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);opacity:1;transition:opacity .3s ease,color .3s ease}
.has-js .inst-val{opacity:0;color:var(--warm-grey)}
.has-js .inst-row.seen .inst-val{opacity:1;color:var(--cream)}
.has-js .inst-row.lit .inst-val{opacity:1;color:var(--signal)}
.has-js .inst-crisis .inst-val{opacity:0}
.has-js .inst-crisis.revealed .inst-val{opacity:1;color:var(--cream)}
/* Crisis-proof row — revealed once the signal reaches the bottom */
.inst-crisis .node{background:var(--signal);border-color:var(--signal)}
.inst-crisis .inst-key{font-weight:600}
.has-js .inst-crisis{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;
  border-bottom:0;transition:max-height .5s ease,opacity .45s ease,padding .5s ease}
.has-js .inst-crisis.revealed{max-height:64px;opacity:1;padding:16px 0}

/* ---- Trust strip ---- */
.trust{padding:34px 0;border-top:1px solid var(--hairline-on-green);border-bottom:1px solid var(--hairline-on-green)}
.trust-inner{display:flex;align-items:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap}
.press{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap;color:var(--sand);font-size:15px}
.press li{opacity:.82}

/* ---- Splits ---- */
.split-5-7{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,90px)}
.col-arg .heading{margin-top:18px}

/* Problem notes */
.notes{margin-top:38px;border-top:1px solid var(--hairline-on-cream)}
.ground-green .notes{border-top-color:var(--hairline-on-green)}
.notes li{display:flex;flex-direction:column;gap:5px;padding:20px 0;border-bottom:1px solid var(--hairline-on-cream)}
.ground-green .notes li{border-bottom-color:var(--hairline-on-green)}
.note-k{font-weight:600;font-size:15px}
.note-v{color:var(--warm-grey);font-size:15px}

/* Logo hung in the problem section (dark wordmark on cream) */
.problem-logo{width:min(250px,60%);height:auto;display:block;margin:clamp(44px,6vw,80px) auto 0;opacity:.9}

/* Service diagram — individual domain boxes light up at random */
.svc-viz-wrap{margin-top:clamp(30px,4vw,56px)}
#serviceViz .viz-box rect{transition:stroke .45s ease,fill .45s ease,stroke-width .45s ease}
#serviceViz .viz-box.lit-box rect{stroke:var(--signal);stroke-width:2;fill:#33526B}
#serviceViz .viz-box text{transition:fill .45s ease}
#serviceViz .viz-box.lit-box .viz-s{fill:var(--signal)}

/* Adviser typewriter (Problem) */
.flip-line{position:relative;display:grid;font-family:var(--f-sans);font-weight:500;font-size:clamp(20px,2vw,28px);
  line-height:1.3;letter-spacing:-.01em;margin:0 0 24px;color:var(--ink)}
.flip-line>p{grid-area:1/1;margin:0}          /* the ghosts share one cell; the box is as tall as the tallest */
/* The typed line never sets the height: it lies over the ghosts, so a
   word that wraps mid-typing cannot push the page below it down. */
.flip-line>.flip-live{position:absolute;inset:0 0 auto}
.flip-ghost{visibility:hidden;pointer-events:none;user-select:none}
/* The typed words are inline, like the ghosts' <b>, so a phrase wraps
   exactly where its ghost does. The caret is the word's right border
   (a border on the element itself renders the same in every browser,
   empty or not — Safari misplaced a positioned caret on an empty word);
   the ghosts carry the same border, transparent, so widths still match. */
.flip-ghost b,.flip-word{font-weight:700;border-right:2px solid transparent;padding-right:2px}
.flip-word{display:inline;color:#750D37}
.flip-word.is-caret{animation:caret 1.05s steps(1) infinite}
@keyframes caret{0%,100%{border-right-color:#750D37}50%{border-right-color:transparent}}

/* ---- Section head ---- */
.section-head{max-width:60ch}
.section-head .heading{margin-top:16px}
.section-head .body{margin-top:20px}
.section-opener{padding-top:var(--band);padding-bottom:calc(var(--band) * .6)}

/* ---- Steps ---- */
.steps{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--hairline-on-cream)}
.step{display:grid;grid-template-columns:96px 1fr;gap:clamp(20px,4vw,56px);
  padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--hairline-on-cream);align-items:baseline}
.step-n{font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;color:var(--ink)}
.step-t{font-family:var(--f-sans);font-weight:600;font-size:clamp(18px,1.6vw,22px);margin:0 0 8px}
.step p{color:var(--warm-grey);margin:0;max-width:60ch}

/* ---- Services ---- */
.services-list .wrap{border-top:1px solid var(--hairline-on-cream)}
.domain{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);
  padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--hairline-on-cream)}
.domain:nth-child(even){grid-template-columns:7fr 5fr}
.domain:nth-child(even) .domain-k{order:2}
.domain:nth-child(even) .domain-v{order:1}
.domain-t{font-family:var(--f-sans);font-weight:600;font-size:clamp(22px,2.4vw,34px);
  letter-spacing:-.01em;margin:12px 0 0;line-height:1.05}
.domain-v .serif{font-size:clamp(17px,1.4vw,20px);margin:0 0 20px;max-width:52ch}
.bullets li{padding:11px 0;border-top:1px solid var(--hairline-on-cream);color:var(--warm-grey);font-size:15px}

/* ---- Domains: interactive index + detail panel ---- */
.domains-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);align-items:start}
.dom-hint{grid-column:1 / -1;margin:0 0 24px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-weight:600;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warm-grey)}
.dom-hint::before{content:"";width:26px;height:2px;background:var(--signal);flex:0 0 auto}
.dom-list{border-top:1px solid var(--hairline-on-cream)}
.dom-item{display:flex;align-items:center;gap:18px;padding:20px 4px;
  border-bottom:1px solid var(--hairline-on-cream);cursor:pointer;position:relative;
  transition:padding-left .25s ease}
.dom-item:focus{outline:none}
.dom-item:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.dom-n{font-family:var(--f-sans);font-weight:600;font-size:clamp(17px,1.7vw,23px);
  color:var(--warm-grey);min-width:2.4ch;transition:color .25s ease}
.dom-name{font-family:var(--f-sans);font-weight:500;font-size:clamp(18px,1.7vw,23px);
  letter-spacing:-.01em;color:var(--ink);flex:1;transition:color .2s ease}
.dom-node{width:9px;height:9px;border:1px solid var(--sand);flex:0 0 auto;transition:all .25s ease}
.dom-item:hover .dom-name{color:#000}
.dom-item.is-active{padding-left:16px}
.dom-item.is-active .dom-n{color:var(--ink)}
.dom-item.is-active .dom-name{font-weight:600}
.dom-item.is-active .dom-node{background:var(--signal);border-color:var(--green);width:11px;height:11px}
.dom-detail{position:relative;padding:clamp(28px,3vw,46px);border:1px solid var(--hairline-on-cream);min-height:300px}
.dom-detail .inst-corner{border-color:var(--warm-grey);opacity:.55}
.dom-kick{margin:0 0 16px}
.dom-title{font-family:var(--f-sans);font-weight:600;font-size:clamp(26px,3.1vw,42px);
  letter-spacing:-.02em;line-height:1.04;margin:0 0 18px}
.dom-promise{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink);margin:0 0 28px;max-width:44ch}
.dom-bullets{border-top:1px solid var(--hairline-on-cream)}
.dom-bullets li{padding:13px 0;border-bottom:1px solid var(--hairline-on-cream);color:var(--warm-grey);font-size:15px}
.dom-bullets li:last-child{border-bottom:0}
.dom-swap{animation:domfade .32s ease}
@keyframes domfade{from{opacity:.35}to{opacity:1}}

/* ---- Method: looping progress rail alongside the six steps ---- */
.steps{position:relative}
.steps-rail{display:none;position:absolute;left:76px;top:0;bottom:0;width:2px;
  background:var(--hairline-on-cream);pointer-events:none}
.has-js .steps-rail{display:block}
.steps-dot{position:absolute;left:50%;top:0;width:13px;height:13px;margin-left:-6.5px;margin-top:-6.5px;
  background:var(--signal);border:2px solid var(--cream);border-radius:50%;
  box-shadow:0 0 0 4px rgba(159,199,232,.18)}
.steps-fill{position:absolute;left:0;top:0;width:2px;height:0;background:var(--signal);opacity:.55}
.step-n{position:relative;z-index:1;transition:color .3s ease}
.step.at .step-n{color:var(--signal)}
@media (max-width:820px){.steps-rail{left:46px}}

/* ---- Domain detail panels (pre-rendered, one shown at a time) ---- */
.dom-panels{position:relative}
.dom-panel{position:relative;padding:clamp(28px,3vw,44px);border:1px solid var(--hairline-on-cream)}
.dom-panel + .dom-panel{margin-top:22px}
.has-js .dom-panel{display:none;margin-top:0}
.has-js .dom-panel.is-shown{display:block;animation:domfade .32s ease}
.dom-panel .inst-corner{border-color:var(--warm-grey);opacity:.55}
.dom-steps-label{margin:0 0 12px}
.dom-highlight{font-family:var(--f-serif);font-size:clamp(16px,1.4vw,19px);line-height:1.45;
  color:var(--ink);margin:22px 0 0;padding:16px 18px;border-left:2px solid var(--signal);
  background:rgba(159,199,232,.10)}

/* ---- Expert card (inside a domain panel / on competency page) ---- */
.expert{display:flex;gap:20px;align-items:center;margin-top:28px;padding-top:26px;
  border-top:1px solid var(--hairline-on-cream)}
.expert-photo{height:120px;width:auto;flex:0 0 auto;object-fit:contain;object-position:center bottom;
  border:0;background:transparent}
.expert-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.expert-kick{margin:0 0 4px}
.expert-name{font-family:var(--f-sans);font-weight:600;font-size:clamp(17px,1.5vw,20px);
  letter-spacing:-.01em;color:var(--ink);margin:0}
.expert-role{font-size:13.5px;line-height:1.4;color:var(--warm-grey);margin:0}
.expert .btn{margin-top:12px;padding:10px 16px;font-size:13.5px;align-self:flex-start}
.ground-green .expert{border-top-color:var(--hairline-on-green)}
.ground-green .expert-name{color:var(--cream)}
.ground-green .expert-role{color:var(--sand)}
.ground-green .expert-photo{border-color:var(--hairline-on-green)}

/* ---- Contact: interest chips + simplified fields ---- */
.qual-simple{display:flex;flex-direction:column;gap:26px;margin-top:8px;max-width:560px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;padding:10px 15px;border:1px solid var(--hairline-on-green);
  font-size:14px;color:var(--sand);cursor:pointer;transition:all .18s ease}
.chip span:hover{border-color:var(--sand);color:var(--cream)}
.chip input:checked + span{border-color:var(--signal);color:var(--green);background:var(--signal)}
.chip input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px}
.field textarea{background:transparent;border:0;border-bottom:1px solid var(--hairline-on-green);
  color:var(--cream);font-family:var(--f-sans);font-size:16px;line-height:1.5;padding:11px 0;
  border-radius:0;outline:none;resize:vertical;min-height:64px;transition:border-color .2s ease}
.field textarea::placeholder{color:var(--warm-grey)}
.field textarea:focus{border-bottom-color:var(--signal)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}

/* ---- Competency page ---- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,48px);
  margin-top:clamp(40px,5vw,64px)}
.member{position:relative;display:flex;flex-direction:column}
.member-photo{width:100%;height:320px;object-fit:contain;object-position:center bottom;
  border:0;background:transparent}
.member-name{font-family:var(--f-sans);font-weight:600;font-size:clamp(19px,1.8vw,24px);
  letter-spacing:-.01em;margin:18px 0 4px}
.member-title{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);margin:0 0 12px}
.member-desc{font-family:var(--f-serif);font-size:16px;line-height:1.5;color:var(--sand);margin:0}
.member-domains{margin-top:14px;font-size:13px;color:var(--warm-grey)}
@media (max-width:820px){.team-grid{grid-template-columns:1fr;gap:34px}
  .member{flex-direction:row;gap:22px;align-items:flex-end}
  .member-photo{width:150px;height:190px;flex:0 0 auto}}

/* ---- Proof / stats ---- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  margin:clamp(36px,5vw,60px) 0;border-top:1px solid var(--hairline-on-cream);padding-top:clamp(30px,4vw,50px)}
.stat-num{font-family:var(--f-sans);font-weight:600;font-size:clamp(48px,7vw,92px);
  letter-spacing:-.03em;line-height:1;margin:0}
.stat-unit{font-size:.4em;font-weight:500;color:var(--warm-grey);letter-spacing:0}
.stat-cap{color:var(--warm-grey);margin:16px 0 0;max-width:34ch;font-size:16px}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);
  border-top:1px solid var(--hairline-on-cream);padding-top:clamp(32px,4vw,52px)}
.quote{margin:0}
.quote blockquote{margin:0;font-size:clamp(18px,1.6vw,23px);line-height:1.45}
.quote figcaption{margin-top:22px;display:flex;flex-direction:column;gap:3px}
.q-name{font-weight:600;font-size:15px}
.q-role{color:var(--warm-grey);font-size:14px}

/* ---- Authority / monograph ---- */
.authority .body{margin:0 0 34px}
.monograph{position:relative;margin:0;padding:32px 30px;border:1px solid var(--hairline-on-green);max-width:520px}
.mono-title{font-size:clamp(21px,2.2vw,30px);line-height:1.15;margin:14px 0 6px;font-weight:400}
.mono-sub{color:var(--sand);font-size:16px;margin:0 0 20px}
.mono-meta{font-size:13px;letter-spacing:.04em;color:var(--warm-grey);margin:0 0 22px}
.libs{display:flex;gap:22px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--hairline-on-green)}
.libs li{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}

/* ---- CTA ---- */
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start}
.cta-display{font-size:clamp(40px,min(5.5vw,9vh),80px)}
.qual{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:9px}
.field-wide{grid-column:1 / -1}
.field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}
.field input,.field select{background:transparent;border:0;border-bottom:1px solid var(--hairline-on-green);
  color:var(--cream);font-family:var(--f-sans);font-size:16px;padding:11px 0;border-radius:0;outline:none;transition:border-color .2s ease}
.field input::placeholder{color:var(--warm-grey)}
.field select{color:var(--sand)}
.field input:focus,.field select:focus{border-bottom-color:var(--signal)}
.field select option{color:var(--ink)}
.field-submit{grid-column:1 / -1;flex-direction:row;align-items:center;gap:20px;margin-top:8px}
.trust-line{margin:0}

/* ---- Trust strip ("at a glance") — on the green ground ---- */
.trust{padding:0}
.trust-row{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--hairline-on-green);border-bottom:1px solid var(--hairline-on-green)}
.trust-cell{display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;padding:34px 22px;border-left:1px solid var(--hairline-on-green)}
.trust-cell:first-child{border-left:0}
.trust-dot{color:var(--signal);font-size:9px;line-height:1}
.trust-label{margin:0;font-weight:600;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cream)}
@media (max-width:860px){
  .trust-row{grid-template-columns:1fr 1fr}
  .trust-cell{padding:26px 16px}
  .trust-cell:nth-child(odd){border-left:0}
  .trust-cell:nth-child(n+3){border-top:1px solid var(--hairline-on-green)}
  .trust-cell:last-child{grid-column:1 / -1;border-left:0}
}

/* ---- Footer ---- */
.footer{padding:clamp(48px,7vw,88px) 0 clamp(32px,4vw,48px)}
.footer-inner{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr;gap:32px;align-items:start}
.footer-brand .brand-logo{height:28px;margin-bottom:18px}
.footer-brand .brand-logo-lg{height:clamp(52px,6vw,76px);margin-bottom:24px}
.footer-line{color:var(--sand);margin:0;max-width:34ch;font-size:18px;line-height:1.5}
.footer-nav{display:flex;flex-direction:column;gap:12px;color:var(--sand);font-size:15px}
.footer-nav a:hover{color:var(--cream)}
.footer-meta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
/* tablets: the mark and line take a row of their own above links, Tools and contact */
@media (min-width:821px) and (max-width:1100px){
  .footer-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}

/* ---- The whole picture (visualization) ---- */
.viz-head{max-width:none}
.viz-head .heading{max-width:22ch}
.viz-intro{margin-top:24px;display:flex;flex-direction:column;gap:15px;max-width:88ch}
.viz-intro .body{margin:0}
.viz-more{margin:28px 0 0}
.viz-more a{font-family:var(--f-sans);font-weight:600;font-size:16px;color:var(--cream);border-bottom:1px solid var(--signal);padding-bottom:3px;transition:color .2s ease}
.viz-more a:hover{color:var(--signal)}
/* Prominent inline link-button (secondary CTAs on green grounds) */
.btn-more{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-sans);
  font-weight:600;font-size:16px;letter-spacing:.01em;color:var(--signal);
  background:transparent;border:1.5px solid var(--signal);border-radius:0;
  padding:14px 26px;transition:background-color .2s ease,color .2s ease,transform .12s ease}
.btn-more::after{content:"\2192";font-weight:600;transition:transform .2s ease}
.btn-more:hover{background:var(--signal);color:var(--green-deep);transform:translateY(-2px)}
.btn-more:hover::after{transform:translateX(4px)}
.viz-wrap{margin-top:clamp(36px,5vw,64px);width:100%;overflow-x:auto}
.viz{width:100%;height:auto;max-width:980px;display:block;margin:0 auto}
.viz-box rect{fill:#193329;stroke:var(--sand);stroke-width:1}
.viz-t{fill:var(--cream);font-family:var(--f-sans);font-weight:600;font-size:19px}
.viz-s{fill:var(--warm-grey);font-family:var(--f-sans);font-weight:400;font-size:12.5px;letter-spacing:.03em}
.viz-hub rect{fill:var(--green);stroke:var(--signal);stroke-width:1.8}
.viz-hub-t{fill:var(--cream);font-family:var(--f-sans);font-weight:700;font-size:30px;letter-spacing:.02em}
/* non-standard mandates that pop in/out around the service diagram */
.svc-extra rect{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:4 5;rx:2}
.svc-extra text{fill:var(--cream);font-family:var(--f-sans);font-weight:500;font-size:18px;letter-spacing:.02em}
.viz-hub-s{fill:var(--signal);font-family:var(--f-sans);font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.viz-risk-label{fill:#C46E8A;font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:.04em}
.viz-coord-label{fill:var(--signal);font-family:var(--f-sans);font-weight:500;font-size:14px;letter-spacing:.04em}
.viz-cap{fill:var(--warm-grey);font-family:var(--f-serif);font-style:italic;font-size:13px}
/* at rest / no-JS: coordinated end-state visible */
.viz-spoke{stroke-dasharray:1;stroke-dashoffset:0}
.viz-risk{opacity:.2}
.viz-box,.viz-hub{opacity:1}
.viz-risk-label{opacity:0}
.viz-coord-label{opacity:1}
/* with JS: reset to the start of the story */
.has-js .viz-spoke{stroke-dashoffset:1}
.has-js .viz-risk{opacity:0}
.has-js .viz-box,.has-js .viz-hub{opacity:0}
.has-js .viz-coord-label{opacity:0}
/* reduced-motion / fallback: static coordinated end-state */
.viz--static .viz-spoke{stroke-dashoffset:0}
.viz--static .viz-risk{opacity:.2}
.viz--static .viz-box,.viz--static .viz-hub{opacity:1}
.viz--static .viz-risk-label{opacity:0}
.viz--static .viz-coord-label{opacity:1}

/* ---- Reveal (visible at rest; hidden only when JS is present) ----
   Bulletproof: a pure-CSS keyframe forces every reveal visible after a short
   delay, with NO dependency on JS. CSS animations override inline styles, so
   this wins even over gsap.set(opacity:0) and even if main.js never runs or
   the IntersectionObserver never fires inside an embedded iframe. When the
   scroll reveal does fire, .is-in cancels the fallback so nothing double-runs. */
.reveal{opacity:1;transform:none}
.has-js .reveal{opacity:0;transform:translateY(22px);will-change:opacity,transform;
  animation:revealSafety .6s ease 1.8s forwards}
.has-js .reveal.is-in{opacity:1;transform:none;animation:none}
@keyframes revealSafety{to{opacity:1;transform:none}}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:44px;min-height:0}
  .instrument{max-width:520px}
  .cta-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:820px){
  /* nav becomes a centered second row that auto-hides on scroll-down, returns on scroll-up */
  .header-inner{flex-wrap:wrap}
  .nav{display:flex;flex-wrap:wrap;order:3;flex-basis:100%;width:100%;justify-content:center;
    gap:9px 18px;font-size:12.5px;max-height:130px;opacity:1;overflow:hidden;
    padding:10px 0 2px;margin-top:8px;border-top:1px solid var(--hairline-on-green);
    transition:max-height .32s ease,opacity .24s ease,padding .32s ease,margin .32s ease,border-color .32s ease}
  .nav a{white-space:nowrap}
  .site-header.nav-tuck .nav{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-top:0;
    border-top-color:transparent;pointer-events:none}
  .split-5-7,.domain,.domain:nth-child(even),.stats,.quotes,.domains-grid{grid-template-columns:1fr;gap:28px}
  .domain:nth-child(even) .domain-k{order:0}
  .domain:nth-child(even) .domain-v{order:0}
  .steps .step{grid-template-columns:56px 1fr;gap:20px}
  .qual{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:34px}
  .header-right .btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.has-js .reveal{opacity:1;transform:none;animation:none}
  .flip-word.is-caret{animation:none;border-right-color:#750D37}
  .steps-rail{display:none}
  *{scroll-behavior:auto !important}
}

/* ============================================================
   COMPETENCY — verification dossier
   ============================================================ */
.page-intro{padding-bottom:clamp(28px,4vw,48px)}
.intro-lead{max-width:58ch;margin-top:24px}
.intro-lead p{font-family:var(--f-serif);font-size:clamp(19px,2vw,27px);line-height:1.42;color:var(--cream);margin:0 0 18px}
.intro-lead .intro-emph{font-family:var(--f-sans);font-weight:600;font-size:clamp(24px,3vw,40px);letter-spacing:-.01em;color:var(--signal);margin:6px 0 18px}
.intro-lead .intro-soft{color:var(--sand)}

/* dossier section shell */
.doss{border-top:1px solid var(--hairline-on-green)}
.doss-num{font-family:var(--f-sans);font-weight:600;font-size:13px;letter-spacing:.24em;color:var(--signal);margin:0 0 12px}
.doss-h{font-family:var(--f-sans);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.02em;color:var(--cream);margin:0 0 26px;max-width:20ch}
.doss-sub{font-family:var(--f-sans);font-weight:600;font-size:clamp(19px,1.8vw,25px);letter-spacing:-.01em;color:var(--cream);margin:48px 0 14px}
.doss-body{font-family:var(--f-serif);font-size:clamp(16px,1.2vw,19px);line-height:1.62;color:var(--sand);max-width:66ch;margin:0 0 16px}
.doss-body strong{color:var(--cream);font-weight:600}

/* verify / source block */
.verify{margin:22px 0 8px;padding:18px 22px 8px;border:1px solid var(--hairline-on-green);
  background:rgba(159,199,232,.05);max-width:66ch}
.verify-label{font-family:var(--f-sans);font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);margin:0 0 6px}
.src-link{display:block;padding:12px 0;border-top:1px solid var(--hairline-on-green);text-decoration:none}
.verify .src-link:first-of-type{border-top:0}
.src-k{display:block;font-family:var(--f-sans);font-weight:600;font-size:14.5px;line-height:1.35;color:var(--cream)}
.src-k::after{content:" \2197";color:var(--signal)}
.src-v{display:block;font-family:var(--f-sans);font-weight:400;font-size:12.5px;color:var(--warm-grey);
  margin-top:3px;word-break:break-word}
.src-link:hover .src-k{color:var(--signal)}

/* featured expert */
.feature{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:8px}
.feature-photo{width:100%;height:auto;object-fit:contain;object-position:center bottom;
  border-bottom:1px solid var(--hairline-on-green)}
.feature-name{font-family:var(--f-sans);font-weight:600;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.01em;color:var(--cream);margin:0}
.feature-role{font-family:var(--f-sans);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:8px 0 22px}

/* book spec card */
.book{margin:22px 0;padding:22px 24px;border:1px solid var(--hairline-on-green);max-width:66ch}
.book-kick{font-family:var(--f-sans);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin:0 0 10px}
.book-title{font-family:var(--f-serif);font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.2;color:var(--cream);margin:0}
.book-sub{font-family:var(--f-serif);font-size:15px;color:var(--sand);margin:6px 0 18px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 16px}
.spec dt{font-family:var(--f-sans);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--warm-grey)}
.spec dd{margin:0;font-family:var(--f-sans);font-size:14px;color:var(--cream)}

/* expert endorsements */
.endorse{display:grid;gap:20px;margin:20px 0;max-width:66ch}
.endorse figure{margin:0;padding-left:18px;border-left:2px solid var(--signal)}
.endorse blockquote{margin:0;font-family:var(--f-serif);font-size:clamp(17px,1.5vw,21px);line-height:1.4;color:var(--cream)}
.endorse figcaption{margin-top:10px;font-family:var(--f-sans);font-size:13px;line-height:1.4;color:var(--warm-grey)}
.endorse figcaption b{display:block;font-weight:600;color:var(--sand);font-size:14px}

/* framework highlight passage */
.framework-note{margin:26px 0;padding:24px 26px;border:1px solid var(--hairline-on-green);
  background:rgba(159,199,232,.04);max-width:70ch}
.framework-note .q{font-family:var(--f-serif);font-style:italic;color:var(--cream);font-size:clamp(17px,1.5vw,21px)}

/* the rest of the team */
.team-more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);margin-top:44px}
.tm{display:flex;gap:24px;align-items:flex-start;padding-top:24px;border-top:1px solid var(--hairline-on-green)}
.tm-photo{width:250px;height:330px;object-fit:contain;object-position:center bottom;flex:0 0 auto}
.tm-name{font-family:var(--f-sans);font-weight:600;font-size:19px;color:var(--cream);margin:0}
.tm-role{font-family:var(--f-sans);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:6px 0 12px}
.tm-desc{font-family:var(--f-serif);font-size:15px;line-height:1.5;color:var(--sand);margin:0}
.tm-cred{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:5px}
.tm-cred li{font-family:var(--f-sans);font-size:13px;color:var(--sand);padding-left:16px;position:relative}
.tm-cred li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:1px;background:var(--signal)}

/* press list */
.press-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:none;margin-top:8px}
.press-item{display:block;padding:18px 0;border-top:1px solid var(--hairline-on-green);text-decoration:none}
.press-item .pi-src{font-family:var(--f-sans);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.press-item .pi-t{display:block;font-family:var(--f-serif);font-size:17px;line-height:1.4;color:var(--cream);margin-top:8px}
.press-item .pi-t::after{content:" \2197";color:var(--signal);font-family:var(--f-sans)}
.press-item:hover .pi-t{color:var(--signal)}

/* client reviews */
.reviews-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.review-link{display:inline-flex;flex-direction:column;gap:4px;padding:16px 22px;border:1px solid var(--hairline-on-green);text-decoration:none;min-width:230px}
.review-link .rl-k{font-family:var(--f-sans);font-weight:600;font-size:15px;color:var(--cream)}
.review-link .rl-k::after{content:" \2197";color:var(--signal)}
.review-link .rl-v{font-family:var(--f-sans);font-size:12.5px;color:var(--warm-grey)}
.review-link:hover{border-color:var(--signal)}

/* restated delivery line */
.delivery{border-top:1px solid var(--hairline-on-green)}
.delivery p{font-family:var(--f-serif);font-size:clamp(20px,2.2vw,30px);line-height:1.35;color:var(--cream);max-width:none;margin:0}
.delivery .accent{color:var(--signal)}

@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:20px}
  .feature-photo{max-width:220px}
  .team-more{grid-template-columns:1fr}
  .tm{gap:18px}
  .tm-photo{width:150px;height:210px}
  .press-list{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .spec dt{margin-top:6px}
}

/* ============================================================
   COMPETENCY — engagement pass (logos, book, two-column intro)
   ============================================================ */
/* Two-column sceptical intro */
.intro-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);max-width:none;align-items:start}
.intro-col{display:flex;flex-direction:column}
.intro-col p:last-child{margin-bottom:0}

/* Who/Where: body text with the verify box beside it (right) */
.doss-split{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;margin-top:4px}
.doss-split .doss-text .doss-body:first-child{margin-top:0}
.doss-split .verify{max-width:none;margin-top:0}

/* Logo tile — a cream chip so light-background logos read on the green ground
   (all the supplied logos are drawn for light backgrounds). */
.logo-chip{display:inline-flex;align-items:center;justify-content:center;
  background:var(--cream);border-radius:4px;box-sizing:border-box;overflow:hidden}
.logo-chip img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
.logo-chip-sm{height:34px;padding:4px 10px;vertical-align:middle;margin-left:8px}

/* Credential logo row under a team member */
.cred-logos{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:18px;align-items:center;justify-items:start}
.cred-logos .logo-chip{height:64px;max-width:100%;padding:2px 0;justify-content:flex-start}
.cred-logos .logo-chip img{max-width:100%;max-height:100%;width:auto;height:auto}
.cred-cap{font-family:var(--f-sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--warm-grey);margin:0 0 10px;width:100%}

/* Book showcase */
.book{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,3vw,44px);align-items:center}
.book-img{width:100%;height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.32))}

/* Press: outlet logo + article text, uniform tile size */
.press-item{display:flex;align-items:center;gap:18px}
.press-item .logo-chip{flex:0 0 auto;width:160px;height:64px;padding:10px 16px}
.press-item .pi-text{display:flex;flex-direction:column;min-width:0}
.press-item.no-logo{padding-left:0}

/* Review-platform logo above the review links */
.reviews-logo{margin:22px 0 2px}
.reviews-logo .logo-chip{height:52px;padding:6px 0;justify-content:flex-start}

/* Location gallery — the focus office (Dubai): tall portrait + two stacked */
.loc-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:clamp(30px,4vw,46px) 0 0}
.loc-gallery figure{margin:0;overflow:hidden;border:1px solid var(--hairline-on-green)}
.loc-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.loc-gallery .g-wide{aspect-ratio:16/10}
.loc-cap{font-family:var(--f-sans);font-size:12px;letter-spacing:.02em;
  color:var(--warm-grey);margin:12px 0 0}

/* International-group entity cards — deliberately secondary to Dubai */
.entities{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);margin-top:26px}
.ent{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,2.4vw,30px);
  border:1px solid var(--hairline-on-green)}
.ent-region{font-family:var(--f-sans);font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);margin:0}
.ent-logo{height:42px;display:flex;align-items:center}
.ent-logo img{max-height:100%;max-width:min(100%,230px);width:auto;height:auto;
  object-fit:contain;object-position:left center;display:block}
.ent-figures{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ent-figure{margin:0;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--hairline-on-green)}
.ent-figure img{width:100%;height:100%;object-fit:cover;display:block}
.ent-spec{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.ent-spec dt{font-family:var(--f-sans);font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warm-grey);white-space:nowrap}
.ent-spec dd{margin:0;font-family:var(--f-sans);font-size:14px;color:var(--cream)}
.ent .src-link{margin-top:auto;padding-bottom:0}

@media (max-width:820px){
  .intro-lead{grid-template-columns:1fr;gap:20px}
  .doss-split{grid-template-columns:1fr;gap:22px}
  .book{grid-template-columns:1fr;justify-items:start}
  .book-img{max-width:210px}
  .press-item .logo-chip{width:120px;height:52px}
  .entities{grid-template-columns:1fr;gap:18px}
  .loc-gallery{grid-template-columns:1fr}
}

/* ============================================================
   COMPETENCY — alternating grounds, proof band, pull-quote
   ============================================================ */
/* Dossier components recolored for a CREAM ground (alternating sections).
   Every light-on-green colour gets a dark-on-cream counterpart, and every
   powder-blue text accent becomes green so it stays readable on cream. */
.ground-cream .doss{border-top-color:var(--hairline-on-cream)}
.ground-cream .doss-h{color:var(--ink)}
.ground-cream .doss-body{color:var(--warm-grey)}
.ground-cream .doss-body strong{color:var(--ink)}
.ground-cream .doss-sub{color:var(--ink)}
.ground-cream .doss-num{color:var(--warm-grey)}
.ground-cream .verify{border-color:var(--hairline-on-cream);background:rgba(17,40,32,.04)}
.ground-cream .verify .src-link{border-top-color:var(--hairline-on-cream)}
.ground-cream .verify-label{color:var(--green)}
.ground-cream .src-k{color:var(--ink)}
.ground-cream .src-k::after{color:var(--green)}
.ground-cream .src-v{color:var(--warm-grey)}

/* Proof band — three headline numbers directly under the intro */
.proofband{border-top:1px solid var(--hairline-on-cream);border-bottom:1px solid var(--hairline-on-cream)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.proof-stat{padding:clamp(30px,4.5vw,52px) clamp(20px,2.4vw,36px);border-left:1px solid var(--hairline-on-cream)}
.proof-stat:first-child{border-left:0}
.proof-num{font-family:var(--f-sans);font-weight:600;font-size:clamp(46px,6vw,82px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.proof-num .u{color:var(--green)}
.proof-cap{font-family:var(--f-serif);font-size:clamp(15px,1.3vw,18px);line-height:1.4;color:var(--warm-grey);margin:16px 0 0;max-width:24ch}
@media (max-width:760px){
  .proof-grid{grid-template-columns:1fr}
  .proof-stat{border-left:0;border-top:1px solid var(--hairline-on-cream)}
  .proof-stat:first-child{border-top:0}
}

/* Large pull-quote — the strongest endorsement as its own moment */
.pullquote .wrap{max-width:1040px}
.pq-quote{font-family:var(--f-serif);font-weight:400;font-size:clamp(28px,4.6vw,54px);
  line-height:1.16;letter-spacing:-.01em;color:var(--ink);margin:0}
.pq-attr{margin:30px 0 0;font-family:var(--f-sans);font-size:15px;line-height:1.5;color:var(--warm-grey)}
.pq-attr b{display:block;color:var(--ink);font-weight:600;font-size:16px;margin-bottom:2px}

/* Delivery line on cream */
.ground-cream.delivery{border-top-color:var(--hairline-on-cream)}
.ground-cream .delivery p,.delivery.ground-cream p{color:var(--ink)}
.delivery.ground-cream .accent{color:var(--green)}

/* ============================================================
   COMPETENCY — logos directly on the page + cream team/press/clients
   ============================================================ */
/* Logos sit directly on the ground, with no coloured tile/frame */
.logo-chip{background:transparent;border-radius:0;overflow:visible}

/* Team / press / clients recoloured for a cream ground (dark logos read on cream) */
.ground-cream .feature-photo{border-bottom-color:var(--hairline-on-cream)}
.ground-cream .feature-name,.ground-cream .tm-name,
.ground-cream .book-title,.ground-cream .spec dd{color:var(--ink)}
.ground-cream .feature-role,.ground-cream .tm-role,.ground-cream .book-kick{color:var(--green)}
.ground-cream .tm-desc,.ground-cream .book-sub,
.ground-cream .endorse figcaption,.ground-cream .tm-cred li{color:var(--warm-grey)}
.ground-cream .endorse blockquote,.ground-cream .endorse figcaption b,
.ground-cream .framework-note .q,.ground-cream .doss-body strong{color:var(--ink)}
.ground-cream .book,.ground-cream .framework-note{border-color:var(--hairline-on-cream)}
.ground-cream .framework-note{background:rgba(17,40,32,.04)}
.ground-cream .press-item{border-top-color:var(--hairline-on-cream)}
.ground-cream .press-item .pi-src{color:var(--green)}
.ground-cream .press-item .pi-t{color:var(--ink)}
.ground-cream .press-item:hover .pi-t{color:var(--green)}
.ground-cream .press-item .pi-t::after{color:var(--green)}
.ground-cream .review-link{border-color:var(--hairline-on-cream)}
.ground-cream .review-link .rl-k{color:var(--ink)}
.ground-cream .review-link .rl-k::after{color:var(--green)}
.ground-cream .review-link:hover{border-color:var(--green)}

/* Footer brand lockup (4.svg) */
.brand-logo-foot{height:clamp(84px,9.5vw,124px);width:auto;margin-bottom:22px;display:block}
/* Springer logo beside the "View the book" link */
.book-src{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.book-src .src-link{flex:0 1 auto}
.springer-logo{height:30px;width:auto;flex:0 0 auto}

/* ============================================================
   COMPETENCY — revisions: bigger logos, press cards on green
   ============================================================ */
/* Springer logo beside the "View the book" link — much larger */
.springer-logo{height:48px;width:auto}

/* Press intro spans clearly above both columns */
.press-intro{max-width:82ch}

/* Press section stays green; each article sits in its own cream card,
   with a prominent, size-normalised outlet logo */
.press-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.press-item{display:flex;align-items:center;gap:24px;background:var(--cream);
  border-top:0;padding:22px 26px;text-decoration:none;transition:transform .15s ease}
.press-item:hover{transform:translateY(-2px)}
.press-item .logo-chip{width:150px;height:auto;padding:0;flex:0 0 auto;justify-content:flex-start}
.press-item .logo-chip img{width:100%;height:auto;max-height:54px}
.press-item .pi-src{color:var(--green)}
.press-item .pi-t{color:var(--ink)}
.press-item:hover .pi-t{color:var(--green)}
.press-item .pi-t::after{color:var(--green)}
.press-item.no-logo{padding-left:26px}

/* Trustpilot logo — larger */
.reviews-logo .logo-chip{height:auto;padding:0}
.reviews-logo .logo-chip img{height:76px;width:auto;max-height:76px}

@media (max-width:820px){
  .press-list{grid-template-columns:1fr}
  .press-item .logo-chip{width:130px}
}

/* Sebastian: endorsement/Harvard/vacuum (left) beside the framework questions (right) */
.sci-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,52px);align-items:start;margin-top:clamp(44px,5vw,68px)}
.sci-col .doss-body,.sci-col .endorse{max-width:none}
@media (max-width:820px){.sci-split{grid-template-columns:1fr;gap:26px}}

/* University of Passau seal — 20% larger than the other credential logos */
.cred-logos .logo-lg-passau{height:78px}

/* ============================================================
   HOW WE HELP — one set of topics, from the hero chips, through
   the domains, into the contact form
   ============================================================ */
.dom-heading{grid-column:1 / -1;margin:0}

/* a topic named in the hero, as it appears inside its domain */
.dom-topic{
  transition:background-color .45s ease,box-shadow .45s ease,padding .45s ease,color .3s ease}
/* every bullet: a bold name, then the light description */
.dom-bullets li b{font-weight:600;color:var(--ink)}
/* arriving from a chip: tinted, ruled in the accent, eased in */
.dom-topic.is-focus{background:rgba(159,199,232,.24);box-shadow:inset 2px 0 0 var(--signal);
  padding-left:14px;padding-right:14px;color:var(--ink)}

/* Program overview: two separately clickable items */
.dom-programs{margin-top:28px}
.prog-tabs{display:flex;flex-wrap:wrap;gap:10px}
.prog-tab{font:inherit;font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:10px 18px;background:transparent;color:var(--ink);
  border:1px solid var(--ink);cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .45s ease}
.prog-tab:hover{background:rgba(17,40,32,.06)}
.prog-tab[aria-expanded="true"]{background:var(--ink);color:var(--cream)}
.prog-tab.is-focus{box-shadow:0 0 0 4px rgba(159,199,232,.55)}
.prog-tab:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* the domain's own call to action, below the expert */
.dom-cta{margin-top:26px;padding-top:24px;border-top:1px solid var(--hairline-on-cream)}
.dom-cta .btn{padding:14px 24px;font-size:15px}

/* the chip a domain CTA just ticked, so the arrival is legible */
.chip.is-flash span{animation:chipFlash 1.6s ease}
@keyframes chipFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(159,199,232,0)}
  25%{box-shadow:0 0 0 6px rgba(159,199,232,.45)}
}
@media (prefers-reduced-motion:reduce){
  .dom-topic,.prog-tab{transition:none}
  .chip.is-flash span{animation:none}
}

/* Program overview: say it, and show it — a line of instruction, and a
   chevron on each button that turns when its list is open */
.prog-hint{margin:-4px 0 14px;font-size:14px;line-height:1.5;color:var(--warm-grey)}
.prog-tab{display:inline-flex;align-items:center;gap:10px}
.prog-tab::after{content:"";width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
.prog-tab[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.prog-tab::after{transition:none}}

/* The open door, under the contact copy. Kept small on purpose: a glimpse,
   not a feature. Its edges are feathered so the picture's own dark wall
   melts into the section instead of reading as a pasted rectangle. */
.cta-door{margin:clamp(30px,4vw,48px) 0 0;width:clamp(130px,14vw,190px)}
.cta-door img{display:block;width:100%;height:auto;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 84%,transparent 100%);
  mask-composite:intersect}
@media (max-width:1024px){.cta-door{width:clamp(110px,26vw,160px)}}

/* Program overview: each button opens its list as a popup — a cream
   glass card laid over the panel just below the buttons */
.prog-anchor{position:relative}
.prog-anchor .prog-pop.glass{position:absolute;z-index:5;top:calc(100% + 10px);left:0;
  width:min(560px,100%);padding:18px 20px 16px;color:var(--ink);
  /* inside the glass domain panel the popup's own blur can't reach the
     text beneath it, so the surface itself has to carry the list */
  background:rgba(246,243,236,.97);
  box-shadow:0 18px 48px rgba(12,29,23,.22),0 2px 6px rgba(12,29,23,.08)}
.prog-pop[hidden]{display:none}
.prog-pop:not([hidden]){animation:popIn .22s cubic-bezier(.2,.7,.2,1)}
@keyframes popIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.prog-pop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.prog-pop-title{margin:0;color:var(--ink)}
.prog-close{width:32px;height:32px;margin:-6px -8px -6px 0;background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;color:var(--ink);opacity:.6}
.prog-close:hover{opacity:1}
.prog-close:focus-visible{outline:2px solid var(--signal);outline-offset:1px;opacity:1}
.prog-list{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.prog-list li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--hairline-on-cream);
  font-size:13.5px;line-height:1.4;color:var(--warm-grey)}
.prog-list li b{color:var(--ink);font-weight:600}
.prog-more{margin:12px 0 0;font-size:14.5px;color:var(--ink)}
.prog-more a{font-weight:600;color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--signal)}
.prog-more a:hover{text-decoration-thickness:2px}
.prog-note{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--warm-grey)}
/* on a phone the list is taller than the screen: open it in place,
   pushing the page down, instead of laying it over the panel */
@media (max-width:640px){
  .prog-list{columns:1}
  .prog-anchor .prog-pop.glass{position:relative;top:auto;margin-top:12px;width:100%;padding:16px 16px 14px}
}
@media (prefers-reduced-motion:reduce){.prog-pop:not([hidden]){animation:none}}

/* the domain panels are <figure>s: on a phone, drop the browser's 40px
   side margins, which cost a quarter of the column */
@media (max-width:640px){.dom-panel{margin-left:0;margin-right:0}}

/* Program overview: the way into the assessment, given its own card */
.prog-assess{margin:18px 0 0;padding:16px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  background:rgba(159,199,232,.22);border-left:2px solid var(--signal)}
.prog-assess-q{margin:0;flex:1 1 220px;font-size:15px;line-height:1.45;color:var(--ink)}
.prog-assess-q b{font-weight:600}
.prog-assess .prog-assess-btn{flex:none;padding:12px 20px;font-size:14.5px;background:var(--ink);color:var(--cream);
  border:1px solid var(--ink);text-decoration:none}
.prog-assess .prog-assess-btn:hover{background:var(--green);border-color:var(--green);color:var(--cream)}

/* ============ Phones & tablets: steadier motion, more room ============
   Desktop is untouched: every rule below sits under a max-width. */

/* The framework panel loops its signal every ~10s, and the Crisis-proof
   row used to open and close with it. Stacked in one column, that moved
   everything below the panel by ~53px each time, and iOS Safari does no
   scroll anchoring to hide it. The row now keeps its place, dimmed
   until the signal reaches it, and only its light changes. */
@media (max-width:1024px){
  .has-js .inst-crisis{max-height:none;padding:16px 0;opacity:.35;transition:opacity .45s ease}
  .has-js .inst-crisis.revealed{opacity:1}
}

@media (max-width:820px){
  /* drop the compositing hint once a reveal has played — dozens of
     standing layers cost a phone memory and frames while scrolling */
  .has-js .reveal.is-in{will-change:auto}
}

@media (max-width:640px){
  /* interest chips: same look, smaller, so eleven of them take about
     half the rows */
  .chips{gap:8px}
  .chip span{padding:8px 11px;font-size:12.5px;letter-spacing:.06em}
  /* the send button takes the full width; the note sits under it */
  .field-submit{flex-direction:column;align-items:stretch;gap:12px}
  .field-submit .btn{width:100%;text-align:center}
  .field-submit .trust-line{text-align:center}
}

/* ============ Proof under the trust strip ============
   The rating and the way to the Transparency page, straight after the
   claims in the strip. On cream, in its own band under the strip. */
.trust-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;text-align:center}
.trust-rating{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 12px;
  color:var(--ink);font-size:15px;text-decoration:none}
.trust-rating b{font-weight:700}
.trust-rating:hover span:last-child{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}
.stars{position:relative;display:inline-block;font-size:17px;letter-spacing:2px;line-height:1;
  color:transparent;background:linear-gradient(90deg,#5E8FB8 var(--rate,100%),rgba(41,45,43,.18) var(--rate,100%));
  -webkit-background-clip:text;background-clip:text}
.ground-green .stars{background:linear-gradient(90deg,var(--signal) var(--rate,100%),rgba(243,239,229,.22) var(--rate,100%));
  -webkit-background-clip:text;background-clip:text}
.trust-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:5px}
.trust-link::after{content:"\2192";text-decoration:none;transition:transform .2s ease}
.trust-link:hover::after{transform:translateX(4px)}

/* the rating on the Transparency page */
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:18px 0 0;font-size:16px;color:var(--ink)}
.rating b{font-weight:700}
.rating span:last-child{color:var(--warm-grey)}

/* "Click" for a pointer, "Tap" for a finger */
.hint-tap{display:none}
@media (hover:none) and (pointer:coarse){.hint-click{display:none}.hint-tap{display:inline}}

/* the hero's second way in, and the page jump row: phones only */
.hero-alt,.jump{display:none}
@media (min-width:821px) and (max-width:1100px) and (orientation:portrait){
  .hero-alt{display:block;margin-top:18px;max-width:34ch;font-size:15px;line-height:1.45;color:var(--sand);
    text-decoration:underline;text-decoration-color:rgba(159,199,232,.7);text-underline-offset:4px}
  .hero-alt::after{content:" \2192";color:var(--signal)}
}

@media (max-width:820px){
  /* the assessment, as a quieter second way in under Let's talk */
  .hero-alt{display:block;margin-top:18px;max-width:30ch;font-size:15px;line-height:1.45;color:var(--sand);
    text-decoration:underline;text-decoration-color:rgba(159,199,232,.7);text-underline-offset:4px}
  .hero-alt::after{content:" \2192";color:var(--signal)}

  /* one telling of the domains is enough on a phone: the list below
     stays; the network diagram section and the big mark go */
  .problem-logo{display:none}
  /* with the green band gone, the problem and the domains share the
     cream: a hairline, not a second band of padding, divides them */
  #services-detail{padding-top:12px}
  .trust-more{flex-direction:column;gap:14px}
  .trust-proof{padding-bottom:36px}
  .trust-link{min-height:44px}

  /* Transparency: straight to each part */
  .jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
  .jump a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;
    border:1px solid rgba(216,211,199,.3);font-size:14px;color:var(--cream);text-decoration:none}
  .jump a:last-child{border-color:var(--signal);color:var(--signal)}
  .jump-star{font-size:13px}
  .doss[id]{scroll-margin-top:84px}
}

@media (max-width:640px){
  /* the form's field names, a size up */
  .field label{font-size:12.5px;letter-spacing:.1em}
}

/* the way from a home-page domain panel to its own page */
.dom-more{margin:22px 0 0}
.dom-more a{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-weight:600;font-size:15px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:5px}
.dom-more a::after{content:"\2192";transition:transform .2s ease}
.dom-more a:hover::after{transform:translateX(4px)}

/* "The problem" now follows "How we help" on the same cream: a hairline
   between them instead of a second band of padding */
#problem{position:relative;padding-top:0}
#problem > .wrap{position:relative;padding-top:var(--band)}
#problem > .wrap::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1px solid var(--hairline-on-cream)}

/* the home questionnaire sits where the old form was, beside the
   headline; narrower than on the domain pages, so fewer tiles a row */
.cta .qf{margin:0;max-width:none;padding:clamp(22px,3vw,36px) clamp(18px,3vw,34px)}
.cta .qf-tiles--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.cta .qf-fields{grid-template-columns:1fr}
@media (max-width:640px){
  .cta .qf-tiles--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-door{display:none}
}
.cta .qf-tiles--text{grid-template-columns:repeat(2,minmax(0,1fr))}
.cta .qf-tiles--text .qf-tile-b{min-height:0}
@media (max-width:640px){.cta .qf-tiles--text{grid-template-columns:1fr}}

/* ---- How we help: one still picture, four slides over it ----------
   The picture fills the frame and never moves. Over it, per domain: the
   name set large in the middle, its line, the expert standing in the
   fog (bottom left) and the services as buttons (bottom right). The
   track scrolls sideways with snap points, so a finger or trackpad
   swipes natively; js/how.js adds the dashes, arrows and a mouse drag. */
.how-stage{position:relative;overflow:hidden;border-radius:8px;background:#3E5566;isolation:isolate;color:#fff}
.how-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:45% 58%;
  filter:saturate(.85) brightness(.7);pointer-events:none;user-select:none}
/* a veil, darker at the top (the bar) and the foot (the buttons) */
.how-stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,34,46,.6) 0%,rgba(18,34,46,.34) 26%,rgba(18,34,46,.36) 55%,rgba(12,29,23,.72) 100%)}

.how-bar{position:absolute;z-index:2;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:clamp(18px,2.4vw,32px) clamp(18px,3vw,40px);pointer-events:none}
.how-bar > *{pointer-events:auto}
.how-label{margin:0;font-family:var(--f-sans);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.how-dots{display:flex;gap:6px}
.how-dot{position:relative;width:34px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.how-dot::before{content:"";position:absolute;left:4px;right:4px;top:11px;height:2px;border-radius:2px;background:rgba(255,255,255,.4);
  transition:background-color .25s ease,left .25s ease,right .25s ease}
.how-dot:hover::before{background:rgba(255,255,255,.7)}
.how-dot.is-on::before{left:0;right:0;background:#fff}
.how-nav{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.how-count{margin:0 8px 0 0;font-size:13.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8)}
/* the arrows: on the picture's left and right edges, white and large,
   so the other three domains are hard to miss. The next arrow nudges
   when the section comes into view, until the visitor has used it. */
.how-arrow{position:absolute;z-index:3;top:46%;display:grid;place-items:center;width:clamp(48px,4.2vw,60px);height:clamp(48px,4.2vw,60px);
  padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--green-deep);cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.45);transform:translateY(-50%);
  transition:transform .2s ease,background-color .2s ease,opacity .25s ease,visibility .25s}
.how-arrow--prev{left:clamp(12px,1.6vw,24px)}
.how-arrow--next{right:clamp(12px,1.6vw,24px)}
.how-arrow::before{content:"";width:12px;height:12px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:translateX(3px) rotate(45deg)}
.how-arrow--next::before{transform:translateX(-3px) rotate(-135deg)}
.how-arrow:hover:not(:disabled){background:#fff;transform:translateY(-50%) scale(1.08)}
.how-arrow:disabled{opacity:0;visibility:hidden}
.how-stage.is-hint .how-arrow--next{animation:howNudge 1.5s ease-in-out 2 .6s}
@keyframes howNudgeFlat{0%,100%{transform:none}35%{transform:translateX(8px)}65%{transform:translateX(-2px)}}
@keyframes howNudge{0%,100%{transform:translateY(-50%)}35%{transform:translateY(-50%) translateX(8px)}65%{transform:translateY(-50%) translateX(-2px)}}
.how-arrow:focus-visible,.how-dot:focus-visible,.how-chips a:focus-visible,.how-more:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.how-track{position:relative;z-index:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;min-height:clamp(500px,min(54vw,calc(100svh - 160px)),720px);touch-action:pan-x pan-y}
.how-track::-webkit-scrollbar{display:none}
.how-track:focus{outline:none}
.how-track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.how-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:32px;
  padding:clamp(76px,min(9vw,12vh),112px) clamp(18px,3vw,40px) 0}

.how-mid{grid-column:1 / -1;align-self:center;justify-self:center;max-width:800px;text-align:center;padding-bottom:12px}
.how-t{margin:0;font-family:var(--f-sans);font-weight:500;font-size:clamp(36px,min(5.6vw,8.6vh),80px);line-height:1.02;letter-spacing:-.03em;
  color:#fff;text-wrap:balance;text-shadow:0 2px 40px rgba(12,29,23,.35)}
.how-d{max-width:60ch;margin:clamp(12px,2vh,20px) auto 0;font-size:clamp(15px,min(1.3vw,2.2vh),18px);line-height:1.55;color:rgba(255,255,255,.9);
  text-shadow:0 1px 18px rgba(12,29,23,.4)}
.how-more{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:10px;font-size:14.5px;font-weight:500;color:#fff;
  text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:1.5px;text-underline-offset:5px}
.how-more::after{content:"\2192";transition:transform .2s ease}
.how-more:hover::after{transform:translateX(4px)}
/* the domain, and the proof: the second link goes to Transparency */
.how-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin:clamp(12px,2vh,18px) 0 0}
.how-links .how-more{margin-top:0}
.how-trust{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.55);border-radius:999px;
  font-size:14px;font-weight:500;color:#fff;text-decoration:none;background:rgba(12,29,23,.18);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.how-trust::before{content:"";width:12px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0 12 2.2v4.3C12 10.2 9.5 12.9 6 14 2.5 12.9 0 10.2 0 6.5V2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0 12 2.2v4.3C12 10.2 9.5 12.9 6 14 2.5 12.9 0 10.2 0 6.5V2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  color:var(--signal)}
.how-trust:hover{background:#fff;border-color:#fff;color:var(--green)}
.how-trust:hover::before{color:var(--green)}
.how-trust:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* the expert, full figure, standing on the frame's lower edge */
.how-expert{grid-column:1;grid-row:2;align-self:end;display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,22px);min-width:0}
.how-person{display:block;flex:0 0 auto;width:auto;height:clamp(220px,min(25vw,38vh),330px);filter:drop-shadow(0 18px 30px rgba(12,29,23,.35))}
.how-who{min-width:0;padding-bottom:clamp(22px,min(3vw,4vh),40px)}
.how-who p{margin:0}
.how-who-k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.how-who-n{margin-top:4px!important;font-weight:600;font-size:18px;line-height:1.25;color:#fff}
.how-who-r{margin-top:3px!important;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.78)}
.how .how-cta{margin-top:16px;padding:12px 22px;font-size:15px}

/* the services, as buttons */
.how-chips{grid-column:2;grid-row:2;align-self:end;justify-self:end;width:min(460px,100%);list-style:none;margin:0;
  padding:0 0 clamp(22px,min(3vw,4vh),40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vh,10px)}
.how-chips li:last-child:nth-child(odd){grid-column:1 / -1}
.how-chips a{display:flex;align-items:center;justify-content:center;min-height:clamp(42px,6vh,50px);height:100%;padding:8px 14px;
  border:1px solid rgba(255,255,255,.5);border-radius:4px;background:rgba(18,34,46,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:14.5px;line-height:1.25;text-align:center;color:#fff;text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.how-chips a:hover{background:rgba(255,255,255,.16);border-color:#fff}
.how-chips li.is-focus a{border-color:var(--signal);background:rgba(159,199,232,.3)}

/* Up to 900px: one column — the name and line, the services, then the
   expert on the lower edge. Still the one picture; only this moves. */
@media (max-width:900px){
  .how-track{min-height:0}
  .how-slide{display:flex;flex-direction:column;padding:100px 18px 0}  /* stacked, the arrows would land on the words: they move up into the
     bar, top right, and the dashes already say where you are */
  .how-count{display:none}
  .how-arrow{top:clamp(10px,1.6vw,20px);width:44px;height:44px;transform:none}
  .how-arrow:hover:not(:disabled){transform:scale(1.06)}
  .how-arrow::before{width:10px;height:10px;border-width:2px}
  .how-arrow--prev{left:auto;right:calc(clamp(12px,1.6vw,24px) + 52px)}
  .how-stage.is-hint .how-arrow--next{animation-name:howNudgeFlat}

  .how-mid{align-self:stretch;padding-bottom:0}
  .how-chips{order:1;align-self:stretch;width:100%;padding:26px 0 0}
  .how-expert{order:2;align-self:stretch;margin-top:auto;padding-top:22px}
  .how-person{height:clamp(220px,52vw,300px)}
  .how-who{padding-bottom:22px}
  .how-stage::after{background:linear-gradient(180deg,rgba(18,34,46,.66) 0%,rgba(18,34,46,.5) 40%,rgba(12,29,23,.76) 100%)}
}
@media (max-width:640px){
  .how .wrap{padding-left:12px;padding-right:12px}
  .how-stage{border-radius:6px}
  .how-bar{grid-template-columns:auto 1fr;padding:16px 16px}
  .how-dots{justify-content:flex-start;gap:2px}
  .how-dot{width:22px}
  .how-count{margin:0}
  .how-slide{padding:76px 14px 0}
  .how-t{font-size:clamp(32px,9.4vw,40px)}
  .how-d{font-size:15.5px;margin-top:14px}
  .how-chips{gap:8px}
  .how-chips a{min-height:46px;font-size:13.5px;padding:8px 10px}
  .how-person{height:215px;margin-left:-14px}
  .how-who-n{font-size:16.5px}
  .how-who-r{font-size:12.5px}
  .how .how-cta{padding:12px 16px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.how-dot::before,.how-arrow,.how-chips a{transition:none}.how-stage.is-hint .how-arrow--next{animation:none}}

/* ---- A photograph behind a page's opening (Transparency) ----------- */
.page-intro.has-photo{position:relative;isolation:isolate;overflow:hidden}
.page-photo{position:absolute;inset:0;z-index:-1;background:var(--green)}
.page-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.page-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,29,23,.86) 0%,rgba(12,29,23,.62) 55%,rgba(12,29,23,.38) 100%),
    linear-gradient(180deg,rgba(12,29,23,.35) 0%,rgba(12,29,23,.05) 45%,rgba(12,29,23,.55) 100%)}
@media (max-width:820px){
  /* phones and tablets: the photograph as a banner, the words below it */
  .photo-top .page-intro.has-photo{--dp-photo:clamp(290px,74vw,460px);padding-top:calc(var(--dp-photo) - 18px)}
  .page-photo{bottom:auto;height:var(--dp-photo);background:none}
  .page-photo img{object-position:55% 50%}
  .page-photo::after{background:linear-gradient(180deg,rgba(12,29,23,.5) 0%,rgba(12,29,23,0) 28%,rgba(12,29,23,0) 62%,var(--green) 100%)}
}

/* the rating row runs straight on into "How we help" on the same cream */
.trust-proof + .how{padding-top:clamp(12px,2vw,28px)}

/* ============================================================
   TRANSPARENCY — the book and the team, laid out for any width
   ============================================================ */
/* The book no longer sits in Sebastian's text column (a narrow card
   pushed far to the right); it spans the page under him: cover, title
   and link, then the facts to check. */
.book.book--wide{max-width:none;margin:clamp(32px,4vw,52px) 0 0;padding:clamp(22px,3vw,40px);
  grid-template-columns:clamp(150px,16vw,220px) minmax(0,1fr) minmax(0,1.15fr);gap:clamp(22px,3.4vw,52px);align-items:center}
.book--wide .book-sub{margin-bottom:22px}
.book--wide .spec{margin:0;padding-left:clamp(22px,3vw,40px);border-left:1px solid var(--hairline-on-cream);gap:10px 22px}
.book--wide .book-src{justify-content:flex-start;gap:14px 28px}
@media (max-width:1100px){
  .book.book--wide{grid-template-columns:clamp(140px,20vw,190px) minmax(0,1fr);align-items:start}
  .book--wide .spec{grid-column:2;padding-left:0;padding-top:20px;border-left:0;border-top:1px solid var(--hairline-on-cream)}
}
@media (max-width:640px){
  .book.book--wide{grid-template-columns:1fr;justify-items:stretch}
  .book--wide .book-img{max-width:190px}
  .book--wide .spec{grid-column:auto}
}

/* Iris and Julian: photo above, words below, so the text has the whole
   column instead of the sliver beside a 250px photograph. */
.team-more{grid-template-columns:repeat(3,minmax(0,1fr))}
.team-more .tm{flex-direction:column;gap:22px;min-width:0}
.team-more .tm-photo{width:auto;max-width:100%;height:clamp(240px,24vw,330px);object-position:left bottom;
  border-bottom:1px solid var(--hairline-on-cream)}
.team-more .tm > div{width:100%;max-width:60ch}
.team-more .tm-desc{font-size:16px}
.team-more .cred-logos{grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr));max-width:560px}
.team-more .cred-logos .logo-chip{min-width:0}
/* three across needs ~900px; below, one per row with the photo beside
   the words (the full width is there), and on phones stacked again */
@media (max-width:900px){
  .team-more{grid-template-columns:minmax(0,1fr)}
  .team-more .tm{flex-direction:row;gap:28px}
  .team-more .tm-photo{flex:0 0 auto;width:min(230px,38%);height:260px;object-fit:contain;object-position:left bottom}
  .team-more .tm > div{flex:1 1 auto;width:auto;min-width:0}
}
@media (max-width:640px){.team-more .tm{flex-direction:column;gap:20px}.team-more .tm-photo{width:auto;max-width:100%}.team-more .tm > div{width:100%}}
@media (max-width:640px){
  .team-more .tm-photo{height:240px}
}

/* Transparency 02: the map and the phone, part of the text, not a box */
.doss-links{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:24px}
.doss-links .src-link{padding:12px 0 0;border-top:1px solid var(--hairline-on-green);min-width:min(260px,100%)}

/* Transparency 04: press, then clients, in one section on green */
.doss-more{margin-top:clamp(56px,7vw,88px);padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--hairline-on-green)}
.doss-more .doss-sub{margin-top:0}
.doss-more .rating{color:var(--cream)}
.doss-more .rating span:last-child{color:var(--sand)}
/* the ProvenExpert mark is dark: it sits on a light chip on the green */
.doss-more .reviews-logo .logo-chip{background:var(--cream);padding:10px 18px;border-radius:4px}
.doss-more .reviews-logo .logo-chip img{height:52px;max-height:52px}
/* press & clients runs straight into the closing call, both on green */
#press + .cta{border-top:1px solid var(--hairline-on-green)}

/* Transparency 01: the two paragraphs side by side */
.doss-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.doss-cols .doss-body{margin-top:0}
@media (max-width:820px){.doss-cols{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   WEBINAR — the "coming soon" page with its notify form
   ============================================================ */
.wb-intro{padding-bottom:clamp(64px,8vw,120px)}
.wb-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center;
  min-height:clamp(420px,52vh,560px)}
.wb-h{margin:18px 0 0;max-width:14ch;color:var(--cream);font-size:clamp(36px,min(4.8vw,7.6vh),66px);text-wrap:balance}
.wb-lead{margin:22px 0 0;max-width:46ch;color:var(--sand)}
.wb-card{background:#FBF9F4;color:var(--ink);border-radius:10px;padding:clamp(24px,3vw,38px);
  box-shadow:0 30px 70px -30px rgba(8,20,15,.6)}
.wb-k{margin:0 0 18px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#5E8FB8}
.wb-field{margin:0 0 16px}
.wb-field label{display:block;margin-bottom:7px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-grey)}
.wb-opt{margin-left:6px;letter-spacing:.02em;text-transform:none;color:#9a9e97}
.wb-field input{display:block;width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid rgba(41,45,43,.18);border-radius:6px;transition:border-color .2s ease,box-shadow .2s ease}
.wb-field input:focus{outline:none;border-color:#5E8FB8;box-shadow:0 0 0 3px rgba(159,199,232,.45)}
.wb-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wb-submit{width:100%;justify-content:center;margin-top:6px;border-radius:6px}
.wb-submit:disabled{opacity:.6;cursor:progress}
.wb-legal{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--warm-grey)}
.wb-legal a,.wb-err a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--signal)}
.wb-err{margin:14px 0 0;padding:12px 14px;border-radius:6px;background:rgba(117,13,55,.07);font-size:14px;line-height:1.5;color:#750D37}
.wb-done{outline:none}
.wb-done-t{margin:0;font-family:var(--f-sans);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.01em;color:var(--ink)}
.wb-done-d{margin:12px 0 0;font-family:var(--f-serif);font-size:17px;line-height:1.55;color:#4A4F4C}
.wb-done-link{display:inline-block;margin-top:22px;font-size:15px;font-weight:500;color:var(--ink);text-underline-offset:5px;text-decoration-color:var(--signal)}
.wb-done-link::after{content:"\00a0\2192"}
@media (max-width:900px){
  .wb-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:30px}
}