/* ============================================================
   COMTAX · Lumon-style concept
   Type: Forma DJR Banner (titles) / Manifold Extended (labels,
   navigation, subtitles) / SF Pro Display (body)
   ============================================================ */

@font-face{font-family:'Forma DJR Banner';src:url('fonts/forma-djr-banner-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Forma DJR Banner';src:url('fonts/forma-djr-banner-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manifold Extended';src:url('fonts/manifold-extended-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('fonts/sf-pro-display-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('fonts/sf-pro-display-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'SF Pro Display';src:url('fonts/sf-pro-display-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#FFFFFF;
  --paper-2:#F4F6F8;
  --paper-3:#EAEEF2;
  --ink:#0A0A0B;
  --ink-2:#565E68;
  --ink-3:#8A929B;
  --blue:#1E4E78;
  --blue-2:#2A6BA3;
  --blue-3:#3E88C6;
  --blue-pale:#E7EEF5;
  --rule:#D3DAE2;
  --rule-2:#E7EBF0;
  --green:#1F9C6B;

  --display:'Forma DJR Banner','Helvetica Neue',Helvetica,Arial,sans-serif;
  --label:'Manifold Extended','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;

  --gut:clamp(20px,3.4vw,76px);
  --maxw:1720px;
  --hdr:84px;
  --tick-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;
  font-size:clamp(16px,.34vw + 14.6px,19px);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:0;line-height:1.02}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue-3);outline-offset:3px}
::selection{background:var(--blue);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip{position:fixed;top:-100px;left:12px;z-index:200;background:var(--blue);color:#fff;
  padding:12px 18px;font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{top:12px}

/* ---------- shared type ---------- */
.kick{
  font-family:var(--label);font-weight:700;text-transform:uppercase;
  font-size:clamp(10px,.2vw + 9.2px,12.5px);letter-spacing:.24em;color:var(--blue);
  display:flex;align-items:center;gap:12px;
}
.kick::before{content:"";width:26px;height:1px;background:var(--blue);flex:none}
.lab{font-family:var(--label);font-weight:700;text-transform:uppercase;
  font-size:clamp(10.5px,.14vw + 9.8px,12px);letter-spacing:.2em}
.d1{font-family:var(--display);font-weight:700;font-size:clamp(40px,5.5vw,104px);line-height:1.04;letter-spacing:.012em}
.d2{font-family:var(--display);font-weight:700;font-size:clamp(32px,3.5vw,68px);line-height:1.08;letter-spacing:.012em}
.d3{font-family:var(--display);font-weight:500;font-size:clamp(22px,1.1vw + 16px,38px);line-height:1.14;letter-spacing:.004em}
.lede{font-size:clamp(17px,.32vw + 15.6px,21.5px);line-height:1.56;color:var(--ink-2);max-width:56ch}
.blue{color:var(--blue)}

/* the four-line rule: the signature institutional device */
.rule4{display:flex;flex-direction:column;gap:3px;width:min(430px,100%)}
.rule4 i{display:block;height:1.5px;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.in .rule4 i,.rule4.in i{transform:scaleX(1);transition:transform .9s var(--ease)}
.in .rule4 i:nth-child(2),.rule4.in i:nth-child(2){transition-delay:.07s}
.in .rule4 i:nth-child(3),.rule4.in i:nth-child(3){transition-delay:.14s}
.in .rule4 i:nth-child(4),.rule4.in i:nth-child(4){transition-delay:.21s}
.rule4.dark i{background:#fff}
.rule4.sm{width:min(240px,100%)}

/* halftone texture, echoing the logo globe */
.dots{
  background-image:radial-gradient(var(--blue) .85px,transparent .85px);
  background-size:6px 6px;opacity:.16;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--label);font-weight:700;text-transform:uppercase;
  font-size:clamp(11px,.14vw + 10.3px,12.5px);letter-spacing:.15em;
  padding:19px 34px;min-height:58px;border:1.5px solid var(--blue);
  background:var(--blue);color:#fff;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .46s var(--ease)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost::after{background:var(--blue)}
.btn.ghost:hover{color:#fff;border-color:var(--blue)}
.btn.onblue{background:#fff;color:var(--blue);border-color:#fff}
.btn.onblue::after{background:var(--ink)}
.btn.onblue:hover{color:#fff;border-color:var(--ink)}
.btn.wide{width:100%}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--hdr);
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--rule-2);
  transition:transform .5s var(--ease),box-shadow .4s var(--ease);
}
.hdr.hide{transform:translateY(-101%)}
.hdr.lift{box-shadow:0 1px 22px rgba(10,20,40,.07)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center}
.brand .mark{height:48px;color:var(--blue)}
.hdr-r{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.hdr-tel{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.13em;
  color:var(--ink);display:flex;align-items:center;gap:9px;transition:color .3s}
.hdr-tel:hover{color:var(--blue)}
.hdr-tel .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;
  animation:pulse 2.6s infinite var(--ease-io)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.menubtn{display:flex;align-items:center;gap:11px;font-family:var(--label);font-weight:700;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;padding:10px 0 10px 4px}
.menubtn .bars{width:22px;display:flex;flex-direction:column;gap:4px}
.menubtn .bars i{height:1.5px;background:var(--ink);transition:transform .4s var(--ease),background .3s}
.menubtn:hover{color:var(--blue)}
.menubtn:hover .bars i{background:var(--blue)}
.menubtn:hover .bars i:nth-child(1){transform:translateX(3px)}
.menubtn:hover .bars i:nth-child(3){transform:translateX(-3px)}

/* ---------- nav overlay ---------- */
.nav{
  position:fixed;inset:0;z-index:120;background:#111315;color:#fff;
  display:grid;grid-template-rows:var(--hdr) 1fr auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .72s var(--ease-io);
  visibility:hidden;
}
.nav.open{clip-path:inset(0 0 0 0);visibility:visible}
.nav-top{display:flex;align-items:center}
.nav-top .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-top .mark{height:48px;color:#fff}
.closebtn{display:flex;align-items:center;gap:11px;font-family:var(--label);font-weight:700;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#fff;padding:10px 0}
.closebtn .x{position:relative;width:19px;height:19px}
.closebtn .x i{position:absolute;top:9px;left:0;width:19px;height:1.6px;background:#fff;
  transition:transform .45s var(--ease)}
.closebtn .x i:first-child{transform:rotate(45deg)}
.closebtn .x i:last-child{transform:rotate(-45deg)}
.closebtn:hover .x i:first-child{transform:rotate(135deg)}
.closebtn:hover .x i:last-child{transform:rotate(45deg)}

.nav-mid{display:flex;align-items:center;overflow-y:auto}
.nav-mid .wrap{width:100%;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end}
.navlist{border-left:1.5px solid rgba(255,255,255,.34);padding-left:clamp(20px,3.4vw,48px)}
.navlist li{overflow:hidden}
.navlist a{
  position:relative;display:block;font-family:var(--label);font-weight:700;
  text-transform:uppercase;font-size:clamp(23px,5vw,54px);letter-spacing:.005em;
  line-height:1.18;padding:2px 0;color:#fff;
  transform:translateY(105%);transition:transform .66s var(--ease-io),color .3s;
}
.nav.open .navlist a{transform:translateY(0)}
.nav.open .navlist li:nth-child(1) a{transition-delay:.14s}
.nav.open .navlist li:nth-child(2) a{transition-delay:.20s}
.nav.open .navlist li:nth-child(3) a{transition-delay:.26s}
.nav.open .navlist li:nth-child(4) a{transition-delay:.32s}
.nav.open .navlist li:nth-child(5) a{transition-delay:.38s}
.nav.open .navlist li:nth-child(6) a{transition-delay:.44s}
/* the split-channel hover, per the reference */
.navlist a span{position:relative;z-index:2;display:block;transition:opacity .16s linear}
.navlist a b{
  position:absolute;left:0;top:2px;font-weight:700;pointer-events:none;white-space:nowrap;
  opacity:0;transition:opacity .16s linear,transform .34s var(--ease);
}
.navlist a b.up{color:var(--blue-3);clip-path:inset(0 0 50% 0)}
.navlist a b.dn{color:var(--green);clip-path:inset(50% 0 0 0)}
.navlist a:hover span,.navlist a:focus-visible span{opacity:.07}
.navlist a:hover b,.navlist a:focus-visible b{opacity:1}
.navlist a:hover b.up,.navlist a:focus-visible b.up{transform:translateX(-9px)}
.navlist a:hover b.dn,.navlist a:focus-visible b.dn{transform:translateX(9px)}

.nav-aside{max-width:290px;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .42s,transform .6s var(--ease) .42s}
.nav.open .nav-aside{opacity:1;transform:none}
.nav-aside .lab{color:var(--blue-3);display:block;margin-bottom:14px}
.nav-aside p{color:rgba(255,255,255,.62);font-size:14.5px;line-height:1.6}
.nav-aside .tel{display:block;margin-top:22px;font-family:var(--display);font-weight:700;
  font-size:27px;letter-spacing:.01em;color:#fff;transition:color .3s}
.nav-aside .tel:hover{color:var(--blue-3)}
.nav-bot{border-top:1px solid rgba(255,255,255,.13)}
.nav-bot .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;
  padding-top:20px;padding-bottom:20px}
.nav-bot span{font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--hdr) + clamp(46px,7vw,104px));padding-bottom:clamp(48px,6vw,84px);
  position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;top:var(--hdr);right:0;width:min(46vw,620px);height:min(46vw,620px);
  background:radial-gradient(circle at 70% 30%,var(--blue-pale),transparent 66%);
  pointer-events:none;z-index:-1;
}
.hero-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(34px,4.4vw,74px);align-items:end}
.hero .kick{margin-bottom:clamp(22px,2.6vw,34px)}
.hero h1{margin-bottom:clamp(24px,2.8vw,36px);max-width:15ch}
.hero .rule4{margin-bottom:clamp(24px,2.8vw,34px)}
.hero .lede{margin-bottom:clamp(28px,3.2vw,40px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* specimen panel */
.panel{border:1.5px solid var(--ink);background:var(--paper);position:relative}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;border-bottom:1.5px solid var(--ink)}
.panel-hd .lab{font-size:9.5px;letter-spacing:.19em}
.panel-hd .lab.b{color:var(--blue)}
.panel-fig{position:relative;padding:clamp(28px,3.4vw,46px) clamp(20px,2.6vw,38px);
  border-bottom:1px solid var(--rule);overflow:hidden}
.panel-fig .dots{position:absolute;inset:0}
.panel-fig .mark{position:relative;width:100%;max-width:330px;margin:0 auto;color:var(--blue)}
.rows{padding:6px 0}
.rows li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(20px,2.6vw,38px);border-bottom:1px solid var(--rule-2)}
.rows li:last-child{border-bottom:0}
.rows .k{font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.rows .v{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.01em;color:var(--ink)}
.rows .v.ok{font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.14em;
  color:var(--green);display:flex;align-items:center;gap:8px}
.rows .v.ok i{width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:pulse 2.6s infinite var(--ease-io)}

/* ---------- ticker ---------- */
.tick{background:var(--blue);color:#fff;overflow:hidden;padding:15px 0}
.tick-tr{display:flex;width:max-content;animation:slide 38s linear infinite}
.tick:hover .tick-tr{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tick-tr span{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:0 26px;display:flex;align-items:center;gap:26px;white-space:nowrap}
.tick-tr span::after{content:"";width:5px;height:5px;background:rgba(255,255,255,.5);
  border-radius:50%;flex:none}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,8.4vw,132px) 0;position:relative}
.sec.pale{background:var(--paper-2)}
.sec.dark{background:var(--blue);color:#fff}
.sec.ink{background:var(--ink);color:#fff}
.sec-hd{margin-bottom:clamp(38px,4.6vw,68px)}
.sec-hd .kick{margin-bottom:clamp(18px,2vw,26px)}
.sec-hd .d2{max-width:22ch}
.sec-hd .lede{margin-top:22px}
.sec-hd.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:end}
.sec.dark .kick,.sec.ink .kick{color:#fff}
.sec.dark .kick::before,.sec.ink .kick::before{background:rgba(255,255,255,.6)}
.sec.dark .lede,.sec.ink .lede{color:rgba(255,255,255,.72)}

/* ---------- departments ---------- */
.dept{border-top:1.5px solid var(--ink)}
.dept-row{
  position:relative;display:grid;grid-template-columns:112px 1.02fr 1.32fr;
  gap:clamp(18px,3vw,52px);align-items:start;
  padding:clamp(28px,3.4vw,46px) clamp(14px,1.6vw,24px);
  border-bottom:1px solid var(--rule);isolation:isolate;
  transition:padding-left .45s var(--ease);
}
.dept-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.dept-row:hover::before{transform:scaleY(1)}
.dept-row:hover{padding-left:clamp(24px,2.6vw,40px)}
.dept-row .num,.dept-row .d3{transition:color .42s var(--ease)}
.dept-row:hover .d3,.dept-row:hover .num{color:#fff}
.dept-row:hover .hook{color:#fff;border-left-color:rgba(255,255,255,.55)}
.dept-row:hover .body{color:rgba(255,255,255,.78)}
.dept-row:hover .code{color:rgba(255,255,255,.66);border-color:rgba(255,255,255,.38)}
.dept-row:hover .go{color:#fff;border-color:rgba(255,255,255,.6)}
.num{font-family:var(--display);font-weight:700;font-size:clamp(38px,4.2vw,60px);
  line-height:.9;letter-spacing:.005em;color:var(--rule)}
.dept-l .d3{margin-bottom:14px}
.code{display:inline-block;font-family:var(--label);font-weight:700;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule);padding:5px 9px;transition:color .42s var(--ease),border-color .42s var(--ease)}
.hook{font-family:var(--body);font-weight:500;font-size:clamp(16px,.5vw + 15px,19px);
  line-height:1.45;color:var(--blue);border-left:2px solid var(--blue);
  padding-left:16px;margin-bottom:18px;letter-spacing:-.01em;
  transition:color .42s var(--ease),border-color .42s var(--ease)}
.body{color:var(--ink-2);transition:color .42s var(--ease)}
.go{display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);border-bottom:1px solid var(--rule);padding-bottom:5px;
  transition:color .42s var(--ease),border-color .42s var(--ease)}
.go svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.dept-row:hover .go svg{transform:translateX(5px)}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.22)}
.proof li{background:var(--blue);padding:clamp(26px,3vw,42px) clamp(16px,2vw,30px)}
.proof .n{font-family:var(--display);font-weight:700;font-size:clamp(40px,5.2vw,72px);
  line-height:.98;letter-spacing:.005em;display:block;margin-bottom:14px}
.proof .t{font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.68);line-height:1.5}

/* ---------- principles (plaques) ---------- */
.prin{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.plaque{
  position:relative;padding:clamp(15px,1.6vw,20px);
  background:linear-gradient(158deg,#2C5D86,#1B4568 62%,#173C5C);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 30px -18px rgba(11,32,54,.7);
}
.plaque::before{content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 3px),
                   repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px)}
.plate{
  position:relative;background:linear-gradient(168deg,#EFF1EE,#DDE2E4);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 1.5px rgba(16,42,66,.5),0 5px 14px -8px rgba(11,32,54,.55) inset;
  padding:clamp(26px,3.2vw,42px) clamp(20px,2.4vw,32px);text-align:center;
}
.plate .pk{font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#5E6B77;margin-bottom:14px;
  text-shadow:0 1px 0 rgba(255,255,255,.85)}
.plate .pt{
  font-family:var(--display);font-weight:700;font-size:clamp(24px,2.5vw,36px);
  letter-spacing:.012em;color:#14202B;line-height:1.1;
  text-shadow:0 1px 0 rgba(255,255,255,.72),0 -1px 1px rgba(10,22,34,.42);
}
.plate .pb{margin-top:16px;font-size:15.4px;line-height:1.55;color:#3F4C58;max-width:36ch;
  margin-left:auto;margin-right:auto}
.plate .pr{width:54px;height:1px;background:#9AA6B1;margin:18px auto 0;
  box-shadow:0 1px 0 rgba(255,255,255,.8)}

/* ---------- refinement (the interactive) ---------- */
.ref-wrap{display:grid;grid-template-columns:1fr 1.36fr;gap:clamp(28px,4vw,64px);align-items:start}
.ref-side .lede{margin:22px 0 26px}
.mdr{border:1.5px solid rgba(255,255,255,.34);background:rgba(4,16,28,.42);position:relative}
.mdr-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.24)}
.mdr-hd .lab{font-size:9.5px;letter-spacing:.18em;color:rgba(255,255,255,.66)}
.mdr-pct{font-family:var(--display);font-weight:700;font-size:16px;color:#fff}
.mdr-bar{height:3px;background:rgba(255,255,255,.16);position:relative}
.mdr-bar i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--blue-3);
  transition:width .6s var(--ease)}
.mdr-note{padding:14px 16px;border-top:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mdr-note p{font-size:13.6px;color:rgba(255,255,255,.68);transition:color .5s}
.mdr-note strong{color:#fff;font-weight:500}
.mini{font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-3);border-bottom:1px solid rgba(62,136,198,.5);
  padding-bottom:3px;transition:color .3s,border-color .3s}
.mini:hover{color:#fff;border-color:#fff}

/* ---------- owners / industries ---------- */
.ind{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule)}
.ind li{
  width:33.333%;display:flex;align-items:center;gap:13px;padding:15px 18px 15px 0;
  border-bottom:1px solid var(--rule);font-size:15.6px;color:var(--ink-2);
  transition:color .34s var(--ease),padding-left .34s var(--ease);
}
.ind li:hover{color:var(--blue);padding-left:9px}
.ind li i{width:5px;height:5px;background:var(--blue);flex:none;transition:transform .34s var(--ease)}
.ind li:hover i{transform:scale(1.9)}
.note{margin-top:clamp(26px,3vw,40px);padding:clamp(20px,2.4vw,30px);background:var(--paper-2);
  border-left:2px solid var(--blue);color:var(--ink-2);font-size:15.8px;max-width:78ch}

/* ---------- behind / objection ---------- */
.behind{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:center}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(34px,4vw,56px)}

/* ---------- faq ---------- */
.faq{border-top:1.5px solid var(--ink)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{
  display:flex;align-items:flex-start;gap:clamp(14px,2vw,28px);cursor:pointer;
  padding:clamp(20px,2.2vw,28px) 0;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa .qn{font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.16em;
  color:var(--ink-3);padding-top:7px;flex:none;transition:color .3s}
.qa .qt{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.1vw + 15px,25px);
  letter-spacing:.004em;line-height:1.28;flex:1;transition:color .3s}
.qa .pm{position:relative;width:17px;height:17px;flex:none;margin-top:7px}
.qa .pm i{position:absolute;background:var(--blue);transition:transform .42s var(--ease)}
.qa .pm i:first-child{top:8px;left:0;width:17px;height:1.5px}
.qa .pm i:last-child{left:8px;top:0;height:17px;width:1.5px}
.qa[open] .pm i:last-child{transform:rotate(90deg)}
.qa summary:hover .qt,.qa summary:hover .qn{color:var(--blue)}
.qa .ans p{padding:0 0 clamp(22px,2.4vw,30px) calc(clamp(14px,2vw,28px) + 34px);
  color:var(--ink-2);max-width:74ch}

/* ---------- form ---------- */
.start-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,4.4vw,72px);align-items:start}
.card{background:var(--paper);border:1.5px solid var(--ink);position:relative}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1.5px solid var(--ink)}
.card-hd .lab{font-size:9.5px;letter-spacing:.19em}
.card-hd .lab.b{color:var(--blue)}
.card-bd{padding:clamp(22px,2.6vw,34px)}
form .fr{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.f{margin-bottom:18px}
.f label{display:block;font-family:var(--label);font-weight:700;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.f label .req{color:var(--blue)}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--paper);
  border:0;border-bottom:1.5px solid var(--rule);padding:11px 2px;min-height:46px;
  transition:border-color .3s var(--ease);border-radius:0;
}
.f textarea{min-height:104px;resize:vertical;line-height:1.55}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--blue)}
.f select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E4E78' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
.f.bad input,.f.bad select,.f.bad textarea{border-bottom-color:#C0392B}
.err{display:none;font-family:var(--label);font-weight:700;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:#C0392B;margin-top:7px}
.f.bad .err{display:block}
.fine{margin-top:16px;font-size:13.2px;color:var(--ink-3);line-height:1.5}
.done{display:none;text-align:center;padding:clamp(30px,3.6vw,50px) clamp(20px,2.4vw,32px)}
.done.on{display:block;animation:rise .6s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.done .tk{width:52px;height:52px;border:1.5px solid var(--blue);color:var(--blue);
  display:grid;place-items:center;margin:0 auto 22px}
.done .tk svg{width:24px;height:24px}
.done .d3{margin-bottom:14px}
.done p{color:var(--ink-2);max-width:44ch;margin:0 auto}
.done .alt{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule-2)}
.done .alt .lab{display:block;color:var(--ink-3);margin-bottom:14px}
.done .alt .row{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
form.sent{display:none}

.reach li{padding:20px 0;border-bottom:1px solid var(--rule)}
.reach .lab{display:block;color:var(--ink-3);margin-bottom:9px}
.reach a{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.5vw,27px);
  letter-spacing:.01em;transition:color .3s}
.reach a:hover{color:var(--blue)}
.reach .sm{font-size:15px;color:var(--ink-2);font-family:var(--body);font-weight:400;letter-spacing:0}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#fff;padding:clamp(52px,6vw,88px) 0 0}
.ftr-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(28px,4vw,60px);
  padding-bottom:clamp(38px,4.4vw,58px)}
.ftr .mark{width:180px;color:#fff;margin-bottom:22px}
.ftr p{color:rgba(255,255,255,.56);font-size:14.8px;max-width:38ch}
.ftr h4{font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:18px}
.ftr-l li{margin-bottom:11px}
.ftr-l a,.ftr-l span{color:rgba(255,255,255,.76);font-size:14.8px;transition:color .3s}
.ftr-l a:hover{color:#fff}
.ftr-bot{border-top:1px solid rgba(255,255,255,.13);padding:22px 0 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center}
.ftr-bot span{font-family:var(--label);font-weight:700;font-size:9px;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.36)}
.creed{color:rgba(255,255,255,.5)}

/* ---------- mobile call bar ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--rule);
  grid-template-columns:1fr 1fr 1fr;
  padding-bottom:env(safe-area-inset-bottom);
}
.bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 4px;min-height:58px;font-family:var(--label);font-weight:700;font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;border-right:1px solid var(--rule-2)}
.bar a:last-child{border-right:0;background:var(--blue);color:#fff}
.bar a svg{width:17px;height:17px;color:var(--blue)}
.bar a:last-child svg{color:#fff}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .78s var(--ease),transform .78s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.dl1{transition-delay:.08s}.rv.dl2{transition-delay:.16s}.rv.dl3{transition-delay:.24s}
.rv.dl4{transition-delay:.32s}.rv.dl5{transition-delay:.4s}


/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;align-items:start}
  .panel{max-width:520px}
  .ref-wrap{grid-template-columns:1fr}
  .start-grid{grid-template-columns:1fr}
  .sec-hd.split{grid-template-columns:1fr;gap:24px}
  .dept-row{grid-template-columns:76px 1fr;gap:20px 24px}
  .dept-r{grid-column:2}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ind li{width:50%}
  .nav-mid .wrap{grid-template-columns:1fr;gap:34px;align-items:start}
  .nav-aside{max-width:none}
}
@media (max-width:860px){
  :root{--hdr:64px}
  .hdr-tel span{display:none}
  .proof{grid-template-columns:repeat(2,1fr)}
  .prin{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .behind{grid-template-columns:1fr}
  .bar{display:grid}
  body{padding-bottom:58px}
  .ind li{width:100%}
  form .fr{grid-template-columns:1fr}
  .qa .ans p{padding-left:0}
}
@media (max-width:560px){
  .ftr-top{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
  .rows .v{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .rule4 i{transform:scaleX(1)}
  .navlist a{transform:none}
}

/* ---------- additions ---------- */
section[id]{scroll-margin-top:calc(var(--hdr) + 20px)}
.plate .pd{display:block;margin-top:9px;font-family:var(--label);font-weight:700;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#6B7783;
  text-shadow:0 1px 0 rgba(255,255,255,.8)}
.about-grid .plate .pb{max-width:46ch}
.about-grid .plate{text-align:center}

/* plaques: the plate fills its frame so paired plaques match height */
.prin .plaque,.about-grid .plaque{display:flex}
.prin .plate,.about-grid .plate{flex:1;display:flex;flex-direction:column;justify-content:center}
.plate .pd{margin-top:13px;color:#55636F;font-size:9.5px;letter-spacing:.18em}
.plate .pr{margin-top:20px}
/* the panel is a container, not a control: no ring when it takes focus */
.nav:focus,.nav:focus-visible{outline:none}

/* the mark is 8:5, so size it by height to sit inside the bar */
.brand .mark,.nav-top .mark{height:48px}
@media (max-width:860px){
  .brand .mark,.nav-top .mark{height:38px}
}

/* ---------- the mark ----------
   The supplied artwork, painted through a CSS mask so one file serves
   both the blue and the reversed white lockups. Its true aspect is
   821:435; the earlier hand-drawn vector was 8:5 and read too squat. */
.mark{
  display:block;
  aspect-ratio:821/435;
  background-color:currentColor;
  -webkit-mask:url('img/comtax-mark.png') center/contain no-repeat;
  mask:url('img/comtax-mark.png') center/contain no-repeat;
}
.ftr .mark,.panel-fig .mark{height:auto}

/* the hero mark wipes in rather than drawing itself */
.panel-fig .mark{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease) .12s}
.panel-fig .mark.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .panel-fig .mark{clip-path:none}
}
/* the artwork carries its own halftone, so the panel ground steps back */
.panel-fig .dots{opacity:.07}

/* ---------- financial intake terminal ----------
   Replaces the old number field. Same chrome, same tokens: thin
   rules, small tracked system labels, white primaries, muted
   blue-grey secondaries, one bright blue accent. */
.mdr-hd-r{display:flex;align-items:center;gap:12px}
.opline{padding:9px 16px;border-bottom:1px solid rgba(255,255,255,.16);min-height:36px;
  display:flex;align-items:center}
.oplab{font-family:var(--label);font-weight:700;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue-3);display:flex;align-items:center;gap:9px;
  transition:opacity .25s var(--ease)}
.oplab::before{content:"";width:5px;height:5px;background:var(--blue-3);flex:none}
.oplab.swap{opacity:0}

.stage{position:relative;height:404px;overflow:hidden;padding:12px}

/* the scattered records */
.recs{position:absolute;inset:12px}
.rec{position:absolute;left:0;top:0;width:116px;
  border:1px solid rgba(255,255,255,.2);background:rgba(6,22,38,.72);
  padding:5px 8px 6px;will-change:transform;
  transition:transform .95s var(--ease),opacity .55s var(--ease),border-color .55s var(--ease)}
.rec .rl{display:block;font-family:var(--label);font-weight:700;font-size:7.5px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .55s}
.rec .ra{display:block;font-family:var(--body);font-weight:500;font-size:11.5px;
  font-variant-numeric:tabular-nums;color:#fff;margin-top:2px;line-height:1.2}
#term[data-stage="chaos"] .rec.drift .rec-b{animation:drift 7s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(2px,-2px)}}
#term:not([data-stage="chaos"]) .rec{border-color:rgba(62,136,198,.42)}
#term:not([data-stage="chaos"]) .rec .rl{color:var(--blue-3)}
#term[data-stage="statements"] .rec,#term[data-stage="insights"] .rec{opacity:0}

/* category headers, positioned by script to match the columns */
.cats{position:absolute;inset:12px;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
#term[data-stage="sorting"] .cats{opacity:1}
.cat{position:absolute;border-top:1px solid rgba(255,255,255,.28);padding-top:7px;
  font-family:var(--label);font-weight:700;font-size:8px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.58);line-height:1.35}
.cat.side{border-top:0;border-left:1px solid rgba(255,255,255,.28);padding:0 0 0 8px;
  display:flex;align-items:center}

/* the statements */
.stmts{position:absolute;left:12px;right:12px;top:12px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  opacity:0;visibility:hidden;transform:translateY(74px);
  transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s}
#term[data-stage="statements"] .stmts{opacity:1;visibility:visible;transform:translateY(74px)}
#term[data-stage="insights"] .stmts{opacity:1;visibility:visible;transform:translateY(0)}
.stm{border:1px solid rgba(255,255,255,.22);background:rgba(6,22,38,.5);padding:12px 13px 13px}
.stm h4{font-family:var(--label);font-weight:700;font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 11px}
.stm .row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;
  font-size:12.4px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.stm .row.tot{border-top:1px solid rgba(255,255,255,.22);margin-top:7px;padding-top:9px;
  align-items:baseline;color:#fff}
.stm .row.tot .lbl{font-family:var(--label);font-weight:700;font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.stm .row.tot .amt{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.012em}

/* the read-out */
.ins{position:absolute;left:12px;right:12px;top:214px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s,visibility .6s}
#term[data-stage="insights"] .ins{opacity:1;visibility:visible;transform:translateY(0)}
.ins h3{font-family:var(--display);font-weight:700;font-size:clamp(15px,1.05vw + 8px,19px);
  letter-spacing:.012em;text-transform:uppercase;color:#fff;line-height:1.1}
.ins>p{font-size:12.8px;line-height:1.5;color:rgba(255,255,255,.66);margin-top:8px}
.insrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}
.insight{border-left:2px solid var(--blue-3);padding:1px 0 1px 11px}
.insight .il{display:block;font-family:var(--label);font-weight:700;font-size:7.5px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.insight .iv{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:.012em;color:#fff;margin-top:6px;line-height:1.1}
.insight .ix{display:block;font-size:11.4px;color:var(--blue-3);margin-top:4px}

.sample{position:absolute;right:12px;bottom:9px;font-family:var(--label);font-weight:700;
  font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.32);
  opacity:0;transition:opacity .5s var(--ease)}
#term[data-stage="statements"] .sample,#term[data-stage="insights"] .sample{opacity:1}

/* the terminal command */
.acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cmd{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;padding:10px 16px;min-height:40px;
  border:1px solid var(--blue-3);background:rgba(62,136,198,.15);
  transition:background .3s var(--ease),color .3s,border-color .3s}
.cmd::before{content:"\203A";color:var(--blue-3);font-size:14px;line-height:1;transition:color .3s}
.cmd:hover{background:var(--blue-3)}
.cmd:hover::before{color:#fff}
.mdr-note .acts .mini{background:none;border-top:0;border-left:0;border-right:0}


@media (max-width:860px){
  /* the terminal grows once there are statements to hold */
  .stage{height:340px;transition:height .55s var(--ease)}
  #term[data-stage="statements"] .stage,
  #term[data-stage="insights"] .stage{height:392px}

  /* three panels do not stack on a phone without pushing the read-out
     off the bottom, so they become a swipeable row */
  .stmts{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;transform:translateY(0)}
  #term[data-stage="statements"] .stmts{transform:translateY(0)}
  .stmts::-webkit-scrollbar{height:2px}
  .stmts::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
  .stm{flex:0 0 76%;scroll-snap-align:start;padding:10px 12px 11px}
  .stm h4{margin-bottom:8px}
  .stm .row{padding:3px 0;font-size:12px}
  .stm .row.tot{margin-top:5px;padding-top:8px}
  .stm .row.tot .amt{font-size:15px}

  .ins{top:162px;bottom:auto}
  .ins>p{font-size:12.2px}
  .insrow{grid-template-columns:1fr;gap:9px;margin-top:12px}
  .insight{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px}
  .insight .il{flex:1 0 100%}
  .insight .iv{font-size:15px;margin-top:3px}
  .insight .ix{margin-top:3px}

  .acts{gap:14px}
}

/* ---------- contact emphasis: WhatsApp first, and a status light
   that says what it means ---------- */
.hdr-tel{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}
.hdr-tel .live{display:flex;align-items:center;gap:7px;font-size:8.5px;
  letter-spacing:.18em;color:var(--green)}
.hdr-tel .tnum{font-size:11px;letter-spacing:.13em}
.hdr-wa{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--blue);
  border:1.5px solid var(--blue);padding:11px 16px;min-height:42px;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.hdr-wa svg{width:15px;height:15px;flex:none}
.hdr-wa:hover{background:var(--ink);border-color:var(--ink)}

.btn.wa svg{width:17px;height:17px;flex:none}
.undercta{display:flex;align-items:center;gap:10px;margin-top:18px;
  font-size:14.2px;color:var(--ink-2)}
.undercta .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;
  animation:pulse 2.6s infinite var(--ease-io)}

.reach .wa-link{display:inline-flex;align-items:center;gap:10px}
.reach .wa-link svg{width:19px;height:19px;flex:none;color:var(--blue)}
.reach li .sm{display:block;margin-top:7px}
.fine a{color:var(--blue);border-bottom:1px solid var(--rule);transition:border-color .3s}
.fine a:hover{border-bottom-color:var(--blue)}

.bar a.wa-first{background:var(--blue);color:#fff}
.bar a.wa-first svg{color:#fff}
.bar a:last-child{background:none;color:var(--ink)}
.bar a:last-child svg{color:var(--blue)}

@media (max-width:860px){
  .hdr-tel{display:none}
  .hdr-wa{padding:9px 13px;min-height:38px;font-size:9px}
}
@media (max-width:400px){
  .hdr-wa span{display:none}
  .hdr-wa{padding:9px 11px}
}

/* .cmd sets display, which would otherwise outrank the [hidden] attribute */
[hidden]{display:none!important}

/* ---------- status dots: separation carried by margin, not gap ----------
   The dot used to sit beside a bare text node; the space between them
   relied on flex gap applying to an anonymous item, which did not hold
   up in every browser. The text is now a real element and the dot owns
   its own margin. */
.hdr-tel .live{gap:0}
.hdr-tel .live .dot{width:7px;height:7px;margin-right:10px}
.hdr-tel .live .lt{display:block}

.undercta{gap:0;align-items:flex-start}
.undercta .dot{width:7px;height:7px;margin-right:14px;margin-top:.42em}
.undercta .lt{display:block;flex:1}

/* ---------- intake section: balance the two columns ----------
   With the read-out gone the left column is much shorter than the
   terminal, so centring it keeps the start and end of the text evenly
   balanced against the top and bottom of the panel. */
.ref-wrap{align-items:center}
.ref-side .lede{margin:22px 0 0}
@media (max-width:1080px){
  .ref-wrap{align-items:start}
  .ref-side .lede{margin:22px 0 30px}
}

/* ---------- ticker ----------
   A stopped marquee reads as broken text rather than as restraint, so it
   keeps rolling even when motion is reduced, at a third of the speed.
   The !important beats the blanket duration reset in the reduce block. */
@media (prefers-reduced-motion:reduce){
  .tick-tr{
    animation:slide 110s linear infinite !important;
    animation-play-state:running !important;
  }
}

/* ---------- status dots ----------
   Taken out of flex flow entirely. The separation is now a padding on
   the container plus an absolute offset on the dot, so it cannot depend
   on how an engine treats gap against an anonymous text item. */
.hdr-tel .live{position:relative;display:block;padding-left:17px}
.hdr-tel .live .dot{position:absolute;left:0;top:calc(50% - 3.5px);margin:0}
.hdr-tel .live .lt{display:block}

.undercta{position:relative;display:block;padding-left:22px}
.undercta .dot{position:absolute;left:0;top:.55em;margin:0}
.undercta .lt{display:block}

/* ---------- the firm: three people ---------- */
.about-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){
  .about-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr}
}

/* three across needs less vertical padding than two did */
.about-grid .plate{padding:clamp(20px,2.2vw,30px) clamp(16px,1.9vw,26px)}
.about-grid .plate .pb{max-width:40ch;font-size:14.6px;line-height:1.5}
.about-grid .plaque{padding:clamp(12px,1.2vw,15px)}

/* ---------- the firm: one shared head block ----------
   Roles, names and credential lines sit at identical heights across the
   three plates, so the names line up. The description is what absorbs
   the difference, centred in whatever room is left. */
.about-grid .plate{justify-content:flex-start}
.about-grid .plate .pk{min-height:15px;white-space:nowrap}
.about-grid .plate .pd{min-height:31px;display:flex;align-items:flex-start;justify-content:center}
.about-grid .plate .pr{flex:none}
.about-grid .plate .pb{margin-top:auto;margin-bottom:auto}
@media (max-width:860px){
  .about-grid .plate .pd{min-height:0}
  .about-grid .plate .pb{margin-top:16px}
}

/* ---------- fill the first screen ----------
   The hero occupies everything above the service band, so the band lands
   on the fold in the default view instead of floating mid-page. */
@media (min-width:861px){
  .hero{
    min-height:calc(100vh - var(--tick-h));
    min-height:calc(100svh - var(--tick-h));
    display:flex;align-items:center;
    padding-top:calc(var(--hdr) + clamp(24px,3vw,52px));
    padding-bottom:clamp(24px,3vw,52px);
  }
  .hero>.wrap{width:100%}
  .tick{padding:16px 0}
}

/* ---------- header at the larger scale ---------- */
.menubtn{font-size:clamp(11px,.14vw + 10.3px,12.5px)}
.hdr-wa{font-size:clamp(10px,.14vw + 9.3px,11.5px);padding:12px 18px;min-height:46px}
.hdr-wa svg{width:16px;height:16px}
.brand .mark,.nav-top .mark{height:56px}

/* Manifold's numerals go mushy at small sizes, so the phone number is set
   in the display face with tabular figures. The label stays Manifold. */
.hdr-tel .live{font-size:clamp(9px,.1vw + 8.6px,10px)}
.hdr-tel .tnum{
  font-family:var(--display);font-weight:700;
  font-size:clamp(15px,.2vw + 14px,18px);letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
}

/* the hero panel read-out gets the same treatment */
.rows .k{font-size:clamp(9.5px,.12vw + 9px,11px)}
.rows .v{font-size:clamp(20px,.3vw + 18px,24px)}
.rows .v.ok{font-size:clamp(10px,.12vw + 9.4px,11.5px)}
.panel-hd .lab{font-size:clamp(9.5px,.12vw + 9px,11px)}

/* ---------- the wider shell needs a little more air ---------- */
@media (min-width:1500px){
  .hero-grid{gap:clamp(48px,5vw,96px)}
  .panel-fig .mark{max-width:400px}
  .stage{height:440px}
  .rec{width:132px}
}

/* ---------- short screens ----------
   The full-height hero only works if its contents actually fit. On
   laptop-height displays the type and the paddings step down so the
   service band still lands on the fold rather than just below it. */
@media (min-width:861px) and (max-height:880px){
  .hero{padding-top:calc(var(--hdr) + 16px);padding-bottom:16px}
  .hero h1{font-size:clamp(38px,4.3vw,64px);margin-bottom:20px}
  .hero .kick{margin-bottom:16px}
  .hero .rule4{margin-bottom:18px}
  .hero .lede{font-size:16.5px;line-height:1.5;margin-bottom:24px}
  .hero .undercta{margin-top:14px;font-size:13.4px}
  .hero .btn{padding:15px 26px;min-height:50px}
  .panel-fig{padding:20px 24px}
  .panel-fig .mark{max-width:280px}
  .rows li{padding:9px clamp(18px,2vw,30px)}
  .rows .v{font-size:19px}
}
@media (min-width:861px) and (max-height:740px){
  .hero h1{font-size:clamp(34px,3.6vw,52px)}
  .hero .lede{font-size:15.5px}
  .panel-fig .mark{max-width:230px}
}

/* ---------- firm record: values set in Manifold ----------
   Large enough that the numerals stay crisp; Manifold only goes mushy at
   the small sizes it was previously used at here. */
.rows .v{
  font-family:var(--label);font-weight:700;
  font-size:clamp(19px,.26vw + 17.2px,23px);
  letter-spacing:.03em;font-variant-numeric:tabular-nums;
}
.rows .v.txt{
  font-size:clamp(12.5px,.13vw + 11.8px,14.5px);
  letter-spacing:.11em;text-transform:uppercase;
}
.rows .v.ok{
  font-family:var(--label);
  font-size:clamp(11px,.12vw + 10.4px,12.5px);letter-spacing:.11em;
}
@media (min-width:861px) and (max-height:880px){
  .rows .v{font-size:19px}
}
.rows .v.ok{text-transform:uppercase}

/* ---------- principles: same shared head block as the team plates ----------
   Kickers, titles and rules pinned to one level across all four, with the
   body absorbing the difference. */
.prin .plate{justify-content:flex-start}
.prin .plate .pk{min-height:15px;white-space:nowrap}
.prin .plate .pt{min-height:1.06em}
.prin .plate .pr{flex:none}
.prin .plate .pb{margin-top:auto;margin-bottom:auto}
@media (max-width:860px){
  .prin .plate .pb{margin-top:16px}
}

/* ============================================================
   Manifold titling, one step up across the page
   ============================================================ */
.kick{font-size:clamp(11px,.22vw + 10px,14px)}
.lab{font-size:clamp(11.5px,.16vw + 10.7px,13.5px)}
.btn{font-size:clamp(12px,.16vw + 11.2px,14px)}
.menubtn{font-size:clamp(12px,.16vw + 11.2px,14px)}
.hdr-wa{font-size:clamp(11px,.16vw + 10.2px,13px)}
.closebtn{font-size:clamp(11px,.16vw + 10.2px,13px)}
.code{font-size:clamp(10px,.12vw + 9.4px,11.5px)}
.go{font-size:clamp(11px,.14vw + 10.3px,12.5px)}
.mini{font-size:clamp(10.5px,.14vw + 9.8px,12px)}
.cmd{font-size:clamp(11px,.14vw + 10.3px,12.5px)}
.proof .t{font-size:clamp(11px,.14vw + 10.3px,12.5px)}
.qa .qn{font-size:clamp(11px,.12vw + 10.4px,12.5px)}
.plate .pk{font-size:clamp(10.5px,.12vw + 9.9px,12px)}
.plate .pd{font-size:clamp(10.5px,.12vw + 9.9px,12px)}
.f label{font-size:clamp(10.5px,.12vw + 9.9px,12px)}
.err{font-size:clamp(9.5px,.1vw + 9px,10.5px)}
.ftr h4{font-size:clamp(10.5px,.12vw + 9.9px,12px)}
.ftr-bot span{font-size:clamp(10px,.1vw + 9.5px,11.5px)}
.nav-bot span{font-size:clamp(10.5px,.1vw + 10px,12px)}
.oplab{font-size:clamp(10px,.12vw + 9.4px,11.5px)}
.cat{font-size:clamp(9px,.1vw + 8.5px,10.5px)}
.rec .rl{font-size:clamp(8.5px,.08vw + 8.1px,9.5px)}
.stm h4{font-size:clamp(9.5px,.1vw + 9px,11px)}
.insight .il{font-size:clamp(8.5px,.08vw + 8.1px,9.5px)}
.sample{font-size:clamp(8.5px,.08vw + 8.1px,9.5px)}
.bar a{font-size:clamp(9.5px,.1vw + 9px,11px)}

/* the credential line is two lines at any size */
.about-grid .plate .pd{min-height:2.5em}

/* ---------- header number: Manifold, sized so it stays crisp ---------- */
.hdr-tel .live{font-size:clamp(10px,.1vw + 9.6px,11.5px)}
.hdr-tel .tnum{
  font-family:var(--label);font-weight:700;
  font-size:clamp(14px,.16vw + 13.2px,16.5px);
  letter-spacing:.055em;font-variant-numeric:tabular-nums;
}

/* ---------- firm record: every value the same size ---------- */
.rows li{align-items:flex-start}
.rows .k{padding-top:.15em}
.rows .v,
.rows .v.txt,
.rows .v.ok{
  font-family:var(--label);font-weight:700;
  font-size:clamp(14px,.16vw + 13.2px,16.5px);
  letter-spacing:.055em;text-transform:uppercase;
  text-align:right;line-height:1.3;font-variant-numeric:tabular-nums;
}
.rows .v.ok{color:var(--green);display:flex;align-items:center;gap:9px;justify-content:flex-end}
@media (min-width:861px) and (max-height:880px){
  .rows .v,.rows .v.txt,.rows .v.ok{font-size:14px}
}

/* ---------- the four-line rule runs the width of the copy below it ----------
   Both the rule and the paragraph read the same px measure, so their
   right edges land together regardless of either one's font size. */
.hero-l,.behind>div:first-child{--measure:min(100%,640px)}
.hero-l .lede,.behind>div:first-child .lede{max-width:var(--measure)}
.hero-l .rule4,.behind>div:first-child .rule4{width:var(--measure)}
/* keep the record values on one line; the label wraps first if anything must */
.rows .v,.rows .v.txt,.rows .v.ok{white-space:nowrap}
.rows .k{white-space:normal}

/* ---------- small screens: let the columns actually shrink ----------
   Grid items default to min-width:auto, so the wide Manifold button text
   was forcing the hero column past the viewport. */
.hero-grid>*{min-width:0}
.btn{text-align:center;line-height:1.25}
@media (max-width:620px){
  .btn{padding:16px 18px;font-size:11.5px;letter-spacing:.1em}
  .btn.wa svg{width:15px;height:15px}
}
@media (max-width:400px){
  .btn{padding:15px 12px;font-size:10.5px;letter-spacing:.08em;gap:8px}
}
@media (max-width:620px){
  /* the long text value may wrap on a narrow row; the numbers still may not */
  .rows .v.txt{white-space:normal}
  .rows .v,.rows .v.txt,.rows .v.ok{font-size:13.5px;letter-spacing:.04em}
  .rows li{padding-left:20px;padding-right:20px;gap:12px}
}

/* ---------- the four-line rule runs the full column ----------
   Wider than the headline as well as the paragraph, which is what the
   measure-matched version was not. */
.hero-l .rule4,.behind>div:first-child .rule4{width:100%}

/* ---------- blog: a separate view, not part of the main scroll ---------- */
.blogview{padding-top:var(--hdr)}
.posts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,38px) clamp(20px,2.4vw,34px);
  margin-top:clamp(30px,3.6vw,52px);
}
.post{border-top:1.5px solid var(--ink);padding-top:20px}
.pmeta{
  display:block;font-family:var(--label);font-weight:700;text-transform:uppercase;
  font-size:clamp(9.5px,.12vw + 9px,11px);letter-spacing:.2em;color:var(--blue);
  margin-bottom:14px;
}
.post h2{margin-bottom:12px}
.post p{color:var(--ink-2);font-size:clamp(15px,.14vw + 14.3px,16.5px);line-height:1.55}
.blog-foot{
  margin-top:clamp(44px,5vw,76px);padding-top:clamp(26px,3vw,40px);
  border-top:1px solid var(--rule);
}
.blog-foot .cta-row{margin-top:22px}
@media (max-width:1080px){
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .posts{grid-template-columns:1fr}
}

/* the firm record centres against the headline block rather than
   hanging from its baseline */
@media (min-width:1081px){
  .hero-grid{align-items:center}
}

/* ---------- WhatsApp ----------
   Official mark and official green, used only for the WhatsApp action so
   it reads as that service rather than as a second brand colour. */
:root{--wa:#25D366;--wa-dark:#1DA851}

.btn.wabtn{
  background:var(--wa);border-color:var(--wa);color:#fff;
  display:inline-flex;align-items:center;gap:12px;
}
.btn.wabtn::after{background:var(--wa-dark)}
.btn.wabtn:hover{border-color:var(--wa-dark);color:#fff}
.btn.wabtn svg{width:19px;height:19px;flex:none}
.reach li .btn.wabtn{margin-bottom:4px}

/* the mobile bar cell carries the same mark and colour */
.bar a.wa-first{background:var(--wa);color:#fff}
.bar a.wa-first svg{color:#fff;width:19px;height:19px}

/* ---------- floating action button ---------- */
.wafab{
  position:fixed;z-index:88;
  right:clamp(18px,1.8vw,32px);bottom:clamp(18px,1.8vw,32px);
  display:none;align-items:center;justify-content:flex-end;
  height:62px;border-radius:999px;
  background:var(--wa);color:#fff;
  box-shadow:0 12px 30px -10px rgba(16,124,62,.6),0 2px 10px rgba(0,0,0,.14);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             background .35s var(--ease);
}
@media (min-width:861px){.wafab{display:inline-flex}}
.wafab-ic{
  width:62px;height:62px;flex:none;display:grid;place-items:center;position:relative;z-index:2;
}
.wafab-ic svg{width:32px;height:32px}
.wafab-lb{
  font-family:var(--label);font-weight:700;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.15em;white-space:nowrap;
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .5s var(--ease),opacity .3s var(--ease),padding .5s var(--ease);
}
.wafab:hover,.wafab:focus-visible{transform:translateY(-3px);background:var(--wa-dark)}
.wafab:hover .wafab-lb,.wafab:focus-visible .wafab-lb{max-width:200px;opacity:1;padding-left:24px}

/* the pulse sits behind the button and reads out from its circle */
.wafab::before{
  content:"";position:absolute;right:0;bottom:0;width:62px;height:62px;
  border-radius:50%;background:var(--wa);z-index:-1;
  animation:wapulse 2.8s var(--ease-io) infinite;
}
@keyframes wapulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
/* the pulse is the whole point of the element, so it keeps going when
   motion is reduced, at half speed */
@media (prefers-reduced-motion:reduce){
  .wafab::before{animation:wapulse 5.6s var(--ease-io) infinite !important}
}

/* a send that failed must look like a failure */
.sendfail{
  margin-top:16px;padding:14px 16px;
  border-left:2px solid #C0392B;background:#FDF3F2;
  font-size:14.4px;line-height:1.5;color:#8A2A20;
}