/* ==========================================================================
   FlowParallel
   Palette grounded in kashi kari, the glazed tilework of Multan, Hala and
   Lahore (Wazir Khan Mosque, 1634-41). Documented pigments: cobalt blue,
   copper turquoise, lead-antimoniate mustard, manganese purple, tin white.
   Colour carries meaning here and is never decoration:
     manganese = the manual state you have today
     cobalt    = handled by the automation
     copper    = in progress
     mustard   = a person is involved
   ========================================================================== */

:root{
  --ink:      #062A35;
  --tile:     #0B3C4A;
  --tile-up:  #14495A;
  --input-bg: #0A3340;
  --tin:      #EDF1EA;
  --slip:     #DCE5DD;
  --slip-2:   #C9D6CB;
  --slip-3:   #B7C7BA;

  --cobalt:    #1A4FA8;
  --cobalt-lt: #7FAEF2;
  --copper:    #2FA6AA;
  --copper-dk: #0A6068;
  --copper-lt: #7FE0E3;
  --mustard:   #EBA83C;
  --mustard-lt:#F6C878;
  --mustard-dk:#7A4E05;
  --manganese:    #5B3550;
  --manganese-mid:#A0628F;   /* 3.34 on ink, for rails on dark */
  --manganese-lt: #D9A8CC;   /* 7.50 on ink, for text on dark */

  --on-dark:        var(--tin);      /* 10.44 on tile, 13.21 on ink */
  --on-dark-muted:  var(--slip-3);   /* 6.76 on tile */
  --on-dark-muted2: var(--slip-2);   /* 10.04 on ink */
  --on-light:       var(--ink);      /* 13.21 on tin */
  --on-light-muted: #3D5860;         /* 6.65 on tin, 5.90 on slip */

  --danger-dk: #B3261E;
  --danger-lt: #FFAFA4;
  --ok-lt:     #7BE3A6;
  --wa:        #25D366;

  /* two-tone focus ring: one half always clears 3:1 on any ground we use */
  --ring-in:  #FFF6E2;
  --ring-out: #04202A;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --r-mod: 18px;
  --r-panel: 10px;
  --r-field: 7px;

  --sans: 'Bricolage Grotesque', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif: 'Petrona', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23EDF1EA' stroke-opacity='0.048' stroke-width='1'%3E%3Crect x='15' y='15' width='30' height='30' rx='4'/%3E%3Crect x='15' y='15' width='30' height='30' rx='4' transform='rotate(45 30 30)'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;
  background:var(--tin);
  color:var(--on-light);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.62;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
img,svg{max-width:100%}
h1,h2,h3{
  font-family:var(--sans);
  font-variation-settings:'wdth' 92;
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.017em;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
a{color:inherit}
ul,ol,dl,dd,dt,figure,blockquote{margin:0;padding:0}
li{list-style:none}
button,input,textarea{font:inherit;color:inherit}

/* focus: cream inner ring + near-black outer ring.
   tin page -> outer reads 14.75:1 | tile ground -> inner reads 11.10:1
   mustard button -> outer 8.19:1  | cobalt -> inner 7.16:1 | wa green -> outer 8.50:1 */
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--ring-in), 0 0 0 6px var(--ring-out);
  border-radius:5px;
}
@media (forced-colors:active){
  :where(a,button,input,textarea,summary,[tabindex]):focus-visible{outline:3px solid Highlight}
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(60px,8.5vw,116px)}
.band--dark,.band--tile{background-image:var(--lattice);background-size:60px 60px;background-repeat:repeat;color:var(--on-dark)}
.band--dark{background-color:var(--ink)}
.band--tile{background-color:var(--tile)}
.band--light{background:var(--tin);color:var(--on-light)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--gut);top:-120px;z-index:60;background:var(--mustard);color:var(--ink);
  padding:.7em 1.1em;border-radius:var(--r-field);font-family:var(--sans);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- logo mark ---------- */
.mark{width:var(--mk,32px);height:var(--mk,32px);flex:none;display:block}
.brand{display:inline-flex;align-items:center;gap:.62rem;text-decoration:none;font-family:var(--sans);
  font-weight:800;font-variation-settings:'wdth' 88;letter-spacing:-0.028em;font-size:1.24rem;line-height:1}
.mark-primary,.mark-reversed{--m-a:#65C8C3;--m-b:#F0B23E;--rt-on-a:#062A35;--rt-on-b:#062A35}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--ink);border-bottom:2px solid var(--copper-dk)}
.hdr-row{display:flex;align-items:center;gap:1rem;min-height:68px;color:var(--tin)}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,2vw,1.75rem)}
.nav a{color:var(--slip-2);text-decoration:none;font-size:.98rem;padding:.3em 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--tin);border-bottom-color:var(--copper-lt)}
.pill{display:inline-block;background:var(--mustard);color:var(--ink);text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:.93rem;padding:.55em 1.05em;border-radius:999px;white-space:nowrap}
.pill:hover{background:var(--mustard-lt)}
.menu{margin-left:auto;position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55rem;color:var(--tin);
  font-family:var(--sans);font-weight:700;font-size:.95rem;padding:.45em .25em}
.menu>summary::-webkit-details-marker{display:none}
.burger{width:17px;height:2px;background:var(--copper-lt);display:block;
  box-shadow:0 -5px 0 var(--copper-lt),0 5px 0 var(--copper-lt)}
.menu[open] .burger{background:var(--mustard);box-shadow:0 -5px 0 var(--mustard),0 5px 0 var(--mustard)}
.menu-panel{position:absolute;right:0;top:calc(100% + 13px);background:var(--ink);border:2px solid var(--copper-dk);
  border-radius:var(--r-panel);padding:.45rem;min-width:230px;display:grid}
.menu-panel a{color:var(--tin);text-decoration:none;padding:.62em .8em;border-radius:6px;font-size:1rem}
.menu-panel a:hover{background:var(--tile-up)}
.menu-panel a.pill{margin:.4rem .3rem .2rem;text-align:center;color:var(--ink)}
.menu-panel a.pill:hover{background:var(--mustard-lt)}
@media (min-width:900px){.menu{display:none}}
@media (max-width:899px){.nav,.hdr-row>.pill{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--sans);
  font-weight:700;font-size:1rem;letter-spacing:-0.012em;padding:.8em 1.35em;border-radius:var(--r-field);
  border:2px solid transparent;text-decoration:none;cursor:pointer;line-height:1.2}
.btn--go{background:var(--mustard);border-color:var(--mustard);color:var(--ink)}
.btn--go:hover{background:var(--mustard-lt);border-color:var(--mustard-lt)}
.btn--go[disabled]{background:var(--slip-3);border-color:var(--slip-3);color:#1E3037;cursor:progress}
.btn--wa{background:var(--wa);border-color:var(--wa);color:var(--ink)}
.btn--wa:hover{background:#55E191;border-color:#55E191}
.btn--ghostd{background:transparent;border-color:var(--slip-3);color:var(--tin)}
.btn--ghostd:hover{background:var(--tile-up);border-color:var(--copper-lt)}
.tlink{color:inherit;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px;
  font-family:var(--sans);font-weight:600}
.tlink:hover{border-bottom-width:4px}

/* ---------- section heads ---------- */
.head{display:grid;gap:1.15rem;margin-bottom:clamp(2.3rem,4.5vw,3.5rem)}
@media (min-width:900px){
  .head--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:end}
}
.head h2{font-size:clamp(1.95rem,4.3vw,3.05rem)}
.head p{max-width:56ch}
.band--light .head p{color:var(--on-light-muted)}
.band--dark .head p,.band--tile .head p{color:var(--on-dark-muted)}

/* ---------- hero ---------- */
/* Message cards drifting along routes behind the hero, leaving through a node
   more organised than they arrived. The SVG animates itself and loops without
   a seam; people who ask for reduced motion get a still frame instead, because
   SMIL animation cannot be switched off from CSS. It sits behind the content
   and never takes a click. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.hero-grid{display:grid;gap:clamp(2.6rem,5vw,4.2rem)}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:start}}
.hero h1{font-size:clamp(2.45rem,8.2vw,4.85rem);font-variation-settings:'wdth' 97;font-weight:800;
  line-height:.96;letter-spacing:-0.031em;max-width:15ch}
.hero-lead{margin-top:1.45rem;font-size:clamp(1.07rem,1.9vw,1.26rem);line-height:1.57;
  color:var(--on-dark-muted2);max-width:51ch}
.hero-acts{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.85rem}
.hero-wa{margin-top:2rem;padding-top:1.5rem;border-top:2px solid var(--copper-dk);max-width:47ch;
  font-size:.99rem;color:var(--on-dark-muted)}
.hero-wa strong{color:var(--tin);font-weight:600}
.hero-wa a{margin-top:.6rem;display:inline-block;color:var(--copper-lt)}

.ba-card{border-radius:var(--r-mod);padding:1.45rem 1.5rem}
.ba-card h3{font-size:1.04rem;font-variation-settings:'wdth' 84;letter-spacing:.004em;margin-bottom:.45rem}
.ba-card p{font-size:1rem;line-height:1.54}
.ba-now{background:var(--manganese);color:var(--tin)}
.ba-then{background:var(--cobalt);color:var(--tin)}
.ba-route{padding-left:2.2rem;line-height:0}
.ba-route svg{width:48px;height:46px}
.ba-foot{margin-top:1rem;border:2px solid var(--mustard);border-radius:var(--r-panel);
  padding:.95rem 1.15rem;display:flex;gap:.75rem;align-items:flex-start}
.ba-foot p{font-size:1rem;color:var(--tin)}
.dot-m{width:11px;height:11px;border-radius:50%;background:var(--mustard);flex:none;margin-top:.52em}

/* ---------- register: five kinds of repetitive work ---------- */
.reg{border-top:3px solid var(--copper-dk)}
.reg-key{display:none}
@media (min-width:940px){
  .reg-key{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:1.7rem;
    padding:.75rem 0;border-bottom:2px solid var(--copper-dk)}
  .reg-key span{font-family:var(--sans);font-weight:700;font-size:.93rem;color:var(--copper-dk)}
  .reg-key span:first-child{grid-column:2}
}
.reg-row{display:grid;gap:1rem;padding:clamp(1.5rem,3vw,2.15rem) 0;border-bottom:1px solid rgba(6,42,53,.24)}
@media (min-width:940px){
  .reg-row{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:1.7rem;align-items:start}
}
.reg-glyph{width:34px;height:34px;flex:none}
.reg-now h3{font-size:1.3rem;font-variation-settings:'wdth' 88;margin-bottom:.4rem}
.reg-now p{color:var(--on-light-muted);max-width:44ch}
.reg-then{background:var(--slip);border-left:5px solid var(--cobalt);
  border-radius:0 var(--r-panel) var(--r-panel) 0;padding:1rem 1.2rem}
.reg-then p{font-size:1.01rem;max-width:44ch}
.reg-then b{font-family:var(--sans);font-weight:700;font-size:.87rem;color:var(--cobalt);
  display:block;margin-bottom:.15rem}

/* ---------- the worked example ---------- */
.ex{display:grid;gap:clamp(1.7rem,3.4vw,2.6rem)}
@media (min-width:1000px){.ex{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:start}}

.chat{background:var(--ink);border:2px solid var(--copper-dk);border-radius:var(--r-mod);
  padding:clamp(1rem,2.6vw,1.5rem)}
.chat-hdr{display:flex;align-items:center;gap:.8rem;padding-bottom:.95rem;
  border-bottom:1px solid rgba(237,241,234,.2);margin-bottom:1.1rem}
.avatar{width:40px;height:40px;border-radius:13px;background:var(--slip-3);color:var(--ink);
  display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:1rem;flex:none}
.chat-hdr b{font-family:var(--sans);font-weight:700;font-size:1.02rem;display:block;line-height:1.2}
.chat-hdr small{font-size:.86rem;color:var(--on-dark-muted)}
.thread{display:grid;gap:.85rem}
.stamp{font-size:.79rem;color:var(--on-dark-muted);font-family:var(--sans);font-weight:600}
.bub{padding:.75rem .95rem;max-width:min(100%,31rem);font-size:1.01rem;line-height:1.5}
.bub-in{background:var(--slip);color:var(--ink);border-radius:15px 15px 15px 4px}
.bub-out{background:var(--cobalt);color:var(--tin);border-radius:15px 15px 4px 15px;margin-left:auto}
.hl{padding:.03em .1em;border-radius:3px;border-bottom:2px dotted transparent;transition:background-color .25s,border-color .25s}


.extract{border:2px solid var(--copper-dk);border-radius:var(--r-panel);padding:.85rem 1rem}
.extract dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;font-size:.96rem}
.extract dt{font-family:var(--sans);font-weight:700;color:var(--copper-lt);font-size:.88rem;align-self:center}
.extract dd{color:var(--tin)}

.avail{border:2px solid var(--copper-dk);border-radius:var(--r-panel);padding:.85rem 1rem}
.avail h4{margin:0 0 .6rem;font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--copper-lt)}
.slots{display:flex;flex-wrap:wrap;gap:.45rem}
.slot{font-family:var(--sans);font-weight:700;font-size:.85rem;padding:.34em .62em;border-radius:6px;
  border:2px solid var(--slip-3);color:var(--slip-3);background:transparent}
.slot.taken{text-decoration:line-through;opacity:.72}
.slot.free{background:var(--copper-lt);border-color:var(--copper-lt);color:var(--ink)}

.note{border:2px solid var(--mustard);border-left-width:6px;border-radius:0 var(--r-panel) var(--r-panel) 0;
  padding:.9rem 1.1rem}
.note b{font-family:var(--sans);font-weight:700;font-size:.88rem;color:var(--mustard);display:block;margin-bottom:.2rem}
.note p{font-size:.98rem;color:var(--tin)}
.notsent{font-size:.88rem;color:var(--on-dark-muted);margin-top:.15rem}

.quad-wrap{display:grid;justify-items:start;gap:1.35rem}
.quad{width:min(100%,286px);height:auto;justify-self:center}
@media (min-width:1000px){.quad{justify-self:start}}
.track{fill:none;stroke:var(--slip-3);stroke-opacity:.34;stroke-width:9;stroke-linecap:round}
.mod{fill:var(--tile-up);stroke:var(--slip-3);stroke-width:2;transition:fill .3s,stroke .3s}
.mod.act{fill:var(--copper);stroke:var(--copper)}
.mod.done{fill:var(--cobalt);stroke:var(--cobalt)}
.mod.done.human{fill:var(--mustard);stroke:var(--mustard)}
.route{fill:none;stroke:var(--slip-3);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke .3s}
.route.act{stroke:var(--ink);stroke-dashoffset:0}
.route.done{stroke:var(--tin);stroke-dashoffset:0}
.route.done.human{stroke:var(--ink)}
.endpt{fill:var(--slip-3);transition:fill .3s}
.endpt.act,.endpt.done.human{fill:var(--ink)}
.endpt.done{fill:var(--tin)}

.led{border-top:2px solid var(--copper-dk);width:100%}
.led-row{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
  padding:.8rem 0;border-bottom:1px solid rgba(237,241,234,.2)}
.led-row:last-child{border-bottom:0}
.led-row h3{font-size:1.01rem;font-variation-settings:'wdth' 86;font-weight:600}
.led-state{font-family:var(--sans);font-weight:700;font-size:.87rem;color:var(--on-dark-muted);
  white-space:nowrap;text-align:right}
.led-row.act .led-state{color:var(--copper-lt)}
.led-row.done .led-state{color:var(--cobalt-lt)}
.led-row.done.human .led-state{color:var(--mustard)}
.tag{display:inline-block;margin-left:.5rem;font-family:var(--sans);font-weight:700;font-size:.74rem;
  padding:.18em .5em;border-radius:999px;background:var(--mustard);color:var(--ink);vertical-align:1px}

.runbar{display:flex;flex-wrap:wrap;gap:1rem 1.3rem;align-items:center;
  padding-top:1.5rem;border-top:3px solid var(--copper-dk)}
@media (min-width:1000px){.runbar{grid-column:1 / -1;margin-top:.4rem}}
.runstatus{font-size:.99rem;color:var(--on-dark-muted);max-width:52ch}

/* ---------- worked example: GSAP timeline additions ----------
   The reveals keep their space from the start (no display toggling), so the
   layout never jumps while the enquiry moves. GSAP hides them only after it
   has loaded; without JS the finished example is simply shown. */
.hl.lit{background:var(--mustard);border-bottom-color:var(--mustard-dk)}
.led-row{position:relative}
.led-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--copper-lt);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- worked example: fits one screen on laptops ----------
   From 900px wide the whole example (intro, chat with every result, mark,
   steps and button) sits inside one viewport, so a run is watched whole.
   Spacing and type scale with the viewport height as well as the width. */
@media (min-width:900px){
  #example.band{padding-block:clamp(14px,3vh,40px)}
  #example .head{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:.5rem clamp(1.5rem,3vw,3rem);
    align-items:center;margin-bottom:clamp(.6rem,2vh,1.4rem)}
  #example .head h2{font-size:clamp(1.5rem,min(2.6vw,5vh),2.5rem)}
  #example .head p{font-size:clamp(.86rem,min(1.1vw,2.2vh),1rem);line-height:1.5;max-width:62ch}

  #example .ex{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;
    gap:0 clamp(1.2rem,2.6vw,2.4rem);align-items:start}
  #example .chat{grid-column:1;grid-row:1 / span 2;padding:clamp(.55rem,1.5vh,1rem) clamp(.75rem,1.3vw,1.1rem)}
  #example .chat-hdr{gap:.6rem;padding-bottom:clamp(.35rem,1vh,.65rem);margin-bottom:clamp(.4rem,1.1vh,.7rem)}
  #example .avatar{width:32px;height:32px;border-radius:10px;font-size:.88rem}
  #example .chat-hdr b{font-size:.95rem}
  #example .chat-hdr small{font-size:.8rem}
  #example .thread{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(.35rem,1vh,.65rem) .6rem}
  #example .thread>:first-child,#example #x-out,#example #x-note{grid-column:1 / -1}
  #example .stamp{font-size:.72rem;line-height:1.35}
  #example .bub{padding:clamp(.35rem,.9vh,.6rem) .8rem;font-size:clamp(.86rem,min(1.1vw,2.2vh),1rem);line-height:1.42}
  #example .extract,#example .avail{padding:clamp(.35rem,1vh,.6rem) .7rem}
  #example .extract dl{font-size:clamp(.8rem,min(1vw,2vh),.92rem);gap:0 .7rem;line-height:1.45}
  #example .extract dt{font-size:.8rem}
  #example .avail h4{font-size:.78rem;line-height:1.3;margin-bottom:.35rem}
  #example .slots{gap:.3rem}
  #example .slot{font-size:.76rem;padding:.18em .45em}
  #example .notsent{font-size:.78rem;margin-top:0}
  #example .note{padding:clamp(.35rem,1vh,.6rem) .85rem}
  #example .note b{font-size:.78rem;margin-bottom:0}
  #example .note p{font-size:clamp(.82rem,min(1vw,2vh),.95rem);line-height:1.42}

  /* the mark becomes a small companion beside the step list */
  #example .quad-wrap{grid-column:2;grid-row:1;grid-template-columns:auto minmax(0,1fr);align-items:start;
    gap:clamp(.8rem,1.6vw,1.4rem)}
  #example .quad{width:clamp(56px,min(6vw,12vh),100px);justify-self:start;margin-top:.3rem}
  #example .led-row{padding:clamp(.3rem,1vh,.65rem) 0}
  #example .led-row h3{font-size:.92rem}
  #example .led-state{font-size:.8rem}
  #example .runbar{grid-column:2;grid-row:2;margin-top:clamp(.8rem,2.2vh,1.6rem);
    padding-top:clamp(.8rem,2vh,1.3rem);gap:.7rem 1rem}
  #example .runstatus{font-size:.9rem}
}

/* ---------- three stages (a real sequence) ---------- */
.stages{display:grid;gap:1.25rem}
@media (min-width:880px){.stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}}
.stage{background:var(--slip);border-radius:var(--r-mod);padding:1.5rem 1.45rem 1.65rem;border-top:6px solid var(--cobalt)}
.stage:nth-child(2){border-top-color:var(--copper-dk)}
.stage:nth-child(3){border-top-color:var(--mustard-dk)}
.stage .stage-n{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-family:var(--sans);
  font-weight:800;font-size:1.18rem;background:var(--cobalt);color:var(--tin);margin:0 0 1rem}
.stage:nth-child(2) .stage-n{background:var(--copper-dk)}
.stage:nth-child(3) .stage-n{background:var(--mustard-dk)}
.stage h3{font-size:1.28rem;font-variation-settings:'wdth' 88;margin-bottom:.5rem}
.stage p{color:var(--on-light-muted);font-size:1.01rem}

/* ---------- case study ---------- */
.cs{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media (min-width:980px){.cs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.cs h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.cs-note{margin-top:.9rem;color:var(--on-dark-muted);font-size:.99rem;max-width:44ch}
.cs-link{display:inline-block;margin-top:1.3rem;color:var(--copper-lt)}
.cs-ba{display:grid;gap:1.1rem;margin-top:1.9rem}
.cs-ba h3{font-size:1.02rem;font-variation-settings:'wdth' 84;margin-bottom:.4rem}
.cs-now{border-left:5px solid var(--manganese-mid);padding-left:1.05rem}
.cs-now h3{color:var(--manganese-lt)}
.cs-then{border-left:5px solid var(--cobalt);padding-left:1.05rem}
.cs-then h3{color:var(--cobalt-lt)}
.cs-ba p{color:var(--on-dark-muted2);font-size:1rem}
.cs-impact{margin-top:1.4rem;border:2px solid var(--mustard);border-radius:var(--r-panel);
  padding:.9rem 1.1rem;color:var(--tin);font-size:1rem}
.project-demo{background:var(--tin);color:var(--ink);border-radius:var(--r-mod);padding:clamp(1.25rem,3vw,1.8rem);
  border:2px solid var(--slip-3)}
.demo-kicker{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--copper-dk)}
.project-demo>h3{font-size:clamp(1.35rem,3vw,1.75rem);margin-top:.35rem;max-width:18ch}

/* ==========================================================================
   One screen, one idea
   On a laptop each section should fit the window at 100% zoom, so a visitor
   reads it whole instead of scrolling halfway through a thought. Until this
   block every size was tied to width alone, so a 1920 x 900 laptop got the
   same tall sections as a 1920 x 1200 monitor and most of them overflowed.
   Here spacing and display type take the smaller of the width and height
   rules, so short screens tighten and tall ones are unchanged. Phones keep
   natural scrolling: a section cannot fit a phone screen and should not try.
   ========================================================================== */
@media (min-width:940px){
  .band{padding-block:clamp(34px,min(8.5vw,7vh),116px)}
  .head{margin-bottom:clamp(1.3rem,min(4.5vw,3.6vh),3.5rem);gap:clamp(.6rem,1.4vh,1.15rem)}
  .head h2{font-size:clamp(1.8rem,min(4.3vw,5.2vh),3.05rem)}

  .hero h1{font-size:clamp(2.45rem,min(8.2vw,8.4vh),4.85rem)}
  .hero-lead{margin-top:clamp(.75rem,2vh,1.45rem)}
  .hero-acts{margin-top:clamp(1rem,2.8vh,2rem)}
  .hero-wa{margin-top:clamp(1rem,2.8vh,2rem);padding-top:clamp(.75rem,1.9vh,1.5rem)}
  .ba-card{padding:clamp(1rem,2.4vh,1.45rem) 1.5rem}
  .ba-route svg{height:clamp(30px,5vh,46px)}

  /* The repeat work: five rows and a heading on one screen. Rows lose
     vertical padding, and the text measure opens up because two short lines
     side by side read faster than three narrow ones. */
  .reg-key{padding:clamp(.45rem,1vh,.75rem) 0}
  .reg-row{padding:clamp(.5rem,1.25vh,2.15rem) 0;gap:1.2rem}
  .reg-now h3{font-size:clamp(1.08rem,2.5vh,1.3rem);margin-bottom:.15rem}
  .reg-now p,.reg-then p{max-width:none;line-height:1.45;font-size:clamp(.94rem,2.1vh,1.01rem)}
  .reg-then{padding:clamp(.55rem,1.4vh,1rem) 1.1rem;align-self:center}
  /* At this width the column heading already says "What changes", so
     repeating it inside all five panels only costs a line each. It stays in
     the markup for screen readers, who do not see the column heading. */
  .reg-then b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  .cs-impact{margin-top:clamp(.8rem,2vh,1.4rem)}
  .project-demo{padding:clamp(1rem,2.4vh,1.8rem)}

  .demo-steps{margin-top:clamp(.8rem,2vh,1.5rem)}
  .demo-step{padding-bottom:clamp(.45rem,1.05vh,1.15rem)}
  .cs-ba p{line-height:1.5}
}
.demo-steps{display:grid;margin-top:1.5rem}
.demo-step{display:grid;grid-template-columns:42px minmax(0,1fr);gap:.8rem;position:relative;padding-bottom:1.15rem}
.demo-step:not(:last-child)::after{content:'';position:absolute;left:20px;top:42px;bottom:0;width:2px;background:var(--slip-3)}
.demo-n{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--cobalt);color:var(--tin);
  font-family:var(--sans);font-weight:800;position:relative;z-index:1}
.demo-step h4{font-family:var(--sans);font-size:1rem;line-height:1.25;margin:0}
.demo-step p{color:var(--on-light-muted);font-size:.93rem;line-height:1.45;margin-top:.18rem}
.demo-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.35rem}
.demo-outcome{padding:.8rem .85rem;border-radius:var(--r-panel);font-size:.9rem;line-height:1.35}
.demo-outcome span{display:block;font-family:var(--sans);font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.18rem}
.demo-outcome strong{font-family:var(--sans);font-size:.98rem}
.demo-outcome--approved{background:var(--cobalt);color:var(--tin)}
.demo-outcome--review{background:var(--mustard);color:var(--ink)}
@media (max-width:460px){.demo-outcomes{grid-template-columns:1fr}}
figcaption{margin-top:.9rem;font-size:.92rem;color:var(--on-dark-muted)}

/* ---------- people ---------- */
.people{display:grid;gap:clamp(1.8rem,4vw,3.2rem)}
@media (min-width:900px){.people{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}}
.people h2{font-size:clamp(1.95rem,4.3vw,3.05rem)}
.people p{color:var(--on-light-muted);max-width:52ch}
.whos{display:grid;gap:.9rem;margin-top:1.6rem}
@media (min-width:560px){.whos{grid-template-columns:1fr 1fr}}
.who{display:flex;gap:.95rem;align-items:center;background:var(--slip);border-radius:var(--r-mod);
  padding:1.05rem 1.15rem;text-decoration:none;border:2px solid transparent}
.who:hover{border-color:var(--cobalt);background:#D2DED4}
.who-i{width:52px;height:52px;border-radius:15px;background:var(--tile);color:var(--tin);flex:none;
  display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:1.05rem}
.who b{font-family:var(--sans);font-weight:700;font-size:1.15rem;display:block;line-height:1.2}
.who small{font-size:.9rem;color:var(--on-light-muted)}

/* ---------- audit form ---------- */
.audit{display:grid;gap:clamp(2rem,4.5vw,3.4rem)}
@media (min-width:960px){.audit{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}}
.audit h2{font-size:clamp(1.95rem,4.3vw,3.05rem)}
.audit-lead{margin-top:1.2rem;color:var(--on-dark-muted2);max-width:48ch}
.audit-call{margin-top:1.5rem;border:2px solid var(--mustard);border-radius:var(--r-panel);
  padding:1rem 1.15rem;color:var(--tin);font-size:1rem}
.form{display:grid;gap:1.05rem}
.fields2{display:grid;gap:1.05rem}
@media (min-width:620px){.fields2{grid-template-columns:1fr 1fr}}
.field label{display:block;font-family:var(--sans);font-weight:700;font-size:.95rem;margin-bottom:.38rem}
.field label i{font-style:normal;font-weight:400;font-family:var(--serif);color:var(--on-dark-muted);font-size:.9rem}
.field input,.field textarea{width:100%;background:var(--input-bg);border:2px solid var(--slip-3);
  border-radius:var(--r-field);padding:.68em .8em;color:var(--tin);font-size:1rem;font-family:var(--serif)}
.field textarea{resize:vertical;min-height:7.5em;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--slip-2);opacity:1}
.field input:hover,.field textarea:hover{border-color:var(--copper-lt)}
.field [aria-invalid="true"]{border-color:var(--danger-lt)}
.err{display:block;color:var(--danger-lt);font-size:.92rem;margin-top:.3rem}
.trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-acts{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.form-note{font-size:.92rem;color:var(--on-dark-muted)}
.form-note a{color:var(--copper-lt)}
.form-status{font-size:1rem;color:var(--on-dark-muted2)}
.form-status.bad{color:var(--danger-lt)}
.form-status.good{color:var(--ok-lt)}
.form-status a{color:var(--ok-lt)}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:var(--tin);padding-block:clamp(2.8rem,6vw,4.2rem);
  border-top:3px solid var(--copper-dk)}
.ftr-grid{display:grid;gap:2rem}
@media (min-width:760px){.ftr-grid{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr))}}
.ftr p{color:var(--on-dark-muted);margin-top:.85rem;max-width:34ch;font-size:.99rem}
.ftr nav{display:grid;gap:.6rem}
.ftr nav a{color:var(--slip-2);text-decoration:none;font-size:.99rem;justify-self:start;
  border-bottom:2px solid transparent}
.ftr nav a:hover{color:var(--tin);border-bottom-color:var(--copper-lt)}
.ftr .ftr-h{font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--copper-lt);
  margin:0 0 .5rem;max-width:none}
.ftr-end{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(237,241,234,.2);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;
  font-size:.92rem;color:var(--on-dark-muted)}

/* ---------- floating whatsapp ---------- */
.wa-float{position:fixed;z-index:50;right:clamp(14px,3vw,26px);
  bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.55rem;background:var(--wa);color:var(--ink);
  text-decoration:none;font-family:var(--sans);font-weight:700;font-size:.95rem;
  padding:.68em .95em;border-radius:999px;border:2px solid var(--ink)}
.wa-float:hover{background:#55E191}
.wa-float svg{width:22px;height:22px;fill:currentColor;flex:none}
@media (max-width:560px){.wa-float span{display:none}.wa-float{padding:.72em}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}