/* ==========================================================================
   Executive Revenue Narrative — editorial minimalism.
   Three tiers: Manrope (power), Instrument Serif italic (narrative),
   Geist (functional). Sharp corners, no shadows, depth from tone and line.
   ========================================================================== */
:root{
  --ink:#111111;
  --ink-2:#3B3B39;
  --ink-3:#6F6E6A;
  --paper:#F7F6F3;
  --paper-2:#FFFFFF;
  --paper-3:#F0EEE9;
  --line:#D9D7D2;
  --line-2:#C2BFB8;
  --gold:#B4975A;
  --gold-2:#8F7539;
  --maxw:1440px;
  --gut:80px;
  --pow:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fun:"Geist","Manrope",-apple-system,BlinkMacSystemFont,sans-serif;
  --nar:"Instrument Serif",Georgia,serif;
}
@media(max-width:1100px){:root{--gut:44px;}}
@media(max-width:640px){:root{--gut:24px;}}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fun);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:var(--pow);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
canvas{display:block;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
::selection{background:var(--gold);color:var(--paper-2);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}

/* --- type tiers --- */
.cap{font-family:var(--fun);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.cap-g{color:var(--gold-2);}
.dxl{font-size:clamp(2.8rem,6.6vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1;}
.hlg{font-size:clamp(1.9rem,4vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;}
.hmd{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;}
.ser{font-family:var(--nar);font-style:italic;font-weight:400;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.4;letter-spacing:-.01em;}
.blg{font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.62;color:var(--ink-2);max-width:62ch;}
.bmd{font-size:15px;line-height:1.6;color:var(--ink-2);}
.bsm{font-size:13.5px;line-height:1.55;color:var(--ink-3);}

section{padding:clamp(44px,5vw,78px) 0;}
.hr{height:1px;background:var(--line);border:0;margin:0;}
.sec-head{display:grid;gap:16px;max-width:60ch;margin-bottom:clamp(28px,3.2vw,46px);}

/* --- buttons: 1px, sharp, instant invert --- */
.btn{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-family:var(--fun);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 26px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .06s linear,color .06s linear;
}
.btn:hover{background:transparent;color:var(--ink);}
.btn-o{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-family:var(--fun);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 26px;background:transparent;color:var(--ink);border:1px solid var(--ink);
  transition:background .06s linear,color .06s linear;
}
.btn-o:hover{background:var(--ink);color:var(--paper);}
.btn-lt{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn-lt:hover{background:transparent;color:var(--paper);}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}

/* --- nav: glass exception, framed by 1px --- */
nav{position:sticky;top:0;z-index:80;background:rgba(247,246,243,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
nav .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;}
.brand{font-family:var(--pow);font-size:15px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;}
.brand i{font-style:normal;color:var(--gold);}
.nlinks{display:flex;gap:30px;}
.nlinks a{font-family:var(--fun);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);transition:color .15s;}
.nlinks a:hover{color:var(--ink);}
/* which page you are on, stated rather than left to be inferred */
.nlinks a.on{color:var(--ink);}
.nlinks a.on::after{content:"";display:block;height:1px;margin-top:5px;background:var(--gold);}
.nbtn{padding:11px 18px;font-size:11px;}
/* Hiding these was fine while everything lived on one page. Now that it does
   not, a hidden nav leaves a phone with no way off the page it landed on, so
   the links move to a scrollable strip under the brand instead. */
@media(max-width:1080px){
  nav .bar{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:0;gap:0 20px;}
  .nlinks{order:3;flex:1 0 100%;gap:22px;margin-top:12px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-top:1px solid var(--line);padding:11px 0;}
  .nlinks::-webkit-scrollbar{display:none;}
  .nlinks a{white-space:nowrap;padding:4px 0;}
  .nlinks a.on::after{margin-top:4px;}
}
@media(max-width:600px){.nbtn{display:none;}}

/* --- hero: asymmetric, 12-col with a deliberate void --- */
.hero{padding-top:clamp(48px,5.4vw,84px);padding-bottom:clamp(42px,4.8vw,72px);}
.hero-grid{display:block;}
.hero-copy{max-width:960px;margin:0 auto;text-align:center;}
.hero h1{max-width:17ch;margin:0 auto;}
.hero .blg{max-width:60ch;margin-left:auto;margin-right:auto;}
.hero .ctas{justify-content:center;}
.hero h1 em{font-family:var(--nar);font-style:italic;font-weight:400;letter-spacing:-.01em;}
.hero .blg{margin-top:28px;}
/* capacity callout: 1px vertical separators */
.capacity{margin-top:clamp(34px,3.6vw,52px);border-top:1px solid var(--ink);padding-top:26px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:0;}
.hero .capacity{max-width:960px;margin-left:auto;margin-right:auto;}
.hero .cap-cell{text-align:center;padding-right:44px;}
.hero .cap-cell + .cap-cell{padding-left:44px;}
.cap-cell{padding-right:40px;}
.cap-cell + .cap-cell{padding-left:40px;border-left:1px solid var(--line);}
.cap-n{font-family:var(--pow);font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;}
.cap-cell.tgt .cap-n{color:var(--gold-2);}
.cap-arrow{align-self:center;padding:0 34px;color:var(--line-2);font-size:20px;}
@media(max-width:640px){.cap-arrow{display:none;}.cap-cell + .cap-cell{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:20px;padding-top:20px;}}

/* --- hero runs on the globe plate: every child inverts onto the dark ground --- */
.hero{position:relative;overflow:hidden;background:#08080A;}
.hero video.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .hero-scrim{position:absolute;inset:0;background:
  radial-gradient(78% 62% at 50% 44%, rgba(8,8,10,.34) 0%, rgba(8,8,10,.06) 62%, rgba(8,8,10,0) 100%),
  linear-gradient(180deg,rgba(8,8,10,.80) 0%,rgba(8,8,10,.56) 30%,rgba(8,8,10,.58) 64%,rgba(8,8,10,.90) 100%);}
.hero .wrap{position:relative;}
.hero .cap-g{color:var(--gold);}
.hero h1{color:#F8F5EE;}
.hero .blg{color:#BAB5AA;}
.hero .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.hero .btn:hover{background:transparent;color:var(--paper);}
.hero .btn-o{color:#F0EDE6;border-color:rgba(247,246,243,.50);}
.hero .btn-o:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.hero .capacity{border-top-color:rgba(247,246,243,.42);}
.hero .capacity .cap{color:rgba(247,246,243,.58);}
.hero .cap-n{color:#F8F5EE;}
.hero .cap-cell.tgt .cap-n{color:var(--gold);}
.hero .cap-cell + .cap-cell{border-left-color:rgba(247,246,243,.20);}
.hero .bsm{color:rgba(247,246,243,.62);}
.hero .cap-arrow{color:rgba(247,246,243,.42);}
@media(max-width:1000px){
  .hero .hero-scrim{background:linear-gradient(180deg,rgba(8,8,10,.90) 0%,rgba(8,8,10,.62) 46%,rgba(8,8,10,.88) 100%);}
}
@media(max-width:640px){.hero .cap-cell + .cap-cell{border-top-color:rgba(247,246,243,.20);}}

/* --- the argument, given its own dark room --- */
.quote{background:#111111;padding:clamp(50px,5.2vw,78px) 0;}
/* two columns so the statement starts on the gutter like every other section
   and the band still fills its row, rather than floating centred and narrow */
.quote-grid{display:grid;gap:clamp(24px,3.2vw,54px);}
@media(min-width:900px){
  .quote-grid{grid-template-columns:repeat(12,1fr);align-items:end;}
  .q-lead{grid-column:1 / span 7;}
  .q-sub{grid-column:9 / span 4;}
}
.q-lead{font-family:var(--nar);font-style:italic;font-size:clamp(1.75rem,3.7vw,3rem);line-height:1.18;letter-spacing:-.01em;color:#F8F5EE;text-wrap:balance;}
.q-sub{max-width:46ch;font-size:clamp(.95rem,1.15vw,1.06rem);line-height:1.62;color:rgba(248,245,238,.60);}

/* --- markets on the constellation plate --- */
.mkv{position:relative;overflow:hidden;background:#08080A;padding:clamp(50px,5.4vw,82px) 0;}
.mkv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mkv-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.68) 30%,rgba(8,8,10,.74) 64%,rgba(8,8,10,.94) 100%);}
.mkv .wrap{position:relative;}
.mkv .cap-g{color:var(--gold);}
.mkv h2{color:#F8F5EE;}
.mkv .blg{color:#B6B1A6;}
.mkv .mk{border-top-color:rgba(248,245,238,.42);}
.mkv .mk h4{color:rgba(248,245,238,.58);}
.mkv .mk-b h4{color:var(--gold);}
.mkv .mk li{border-bottom-color:rgba(248,245,238,.16);}
.mkv .mk-b li::before{border-color:rgba(248,245,238,.38);}
.mkv .mk-n{color:#F4F1EA;}
.mkv .mk-t{color:rgba(248,245,238,.56);}

/* --- work: zig-zag, never 3 equal cards --- */
.work-item{padding:clamp(26px,2.6vw,36px) 0;border-top:1px solid var(--line);display:grid;gap:clamp(28px,3.4vw,52px);}
@media(min-width:960px){
  .work-item{grid-template-columns:repeat(12,1fr);align-items:start;}
  .wi-body{grid-column:1 / span 6;}
  .wi-media{grid-column:8 / span 5;}
  /* both children pinned to row 1: without this, a flipped media at columns
     1-5 cannot back-fill behind the body and grid pushes it to a new row */
  .wi-body,.wi-media{grid-row:1;}
  .work-item.flip .wi-body{grid-column:7 / span 6;}
  .work-item.flip .wi-media{grid-column:1 / span 5;}
}
.wi-body h3{margin-top:12px;}
.wi-body .bmd{margin-top:14px;max-width:54ch;}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.tags span{
  font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line-2);padding:7px 11px;white-space:nowrap;
}
.kv{margin-top:24px;display:grid;gap:6px;}
.kv dt{font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.kv dd{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55;}
.res{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:28px;border-top:1px solid var(--ink);}
@media(min-width:520px){.res{grid-template-columns:repeat(4,1fr);}}
.res div{padding:20px 18px 20px 0;border-bottom:1px solid var(--line);}
@media(min-width:520px){.res div{border-bottom:0;border-right:1px solid var(--line);}.res div:last-child{border-right:0;}
  /* cells 2-4 sat flush against the divider they follow */
  .res div + div{padding-left:18px;}}
.res b{display:block;font-family:var(--pow);font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;}
.res span{display:block;margin-top:9px;font-family:var(--fun);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
/* --- DeliverIQ wears its own brand inside this one item ---------------
   Sampled from the mark: #1A1D24 charcoal (cooler than the site's ink)
   and #C6994D gold (warmer than the site's). Redefining the tokens on the
   article scopes every child to them, so nothing else needed touching. */
.work-item.diq{
  --ink:#1A1D24;
  --ink-2:#454B5A;
  --ink-3:#6E7482;
  --line:#E3E5EA;
  --line-2:#C8CBD3;
  --gold:#C6994D;
  --gold-2:#A87B31;
  color:var(--ink);
}
.work-item.diq .panel{background:#FFFFFF;}

/* --- work panels: native markup, so they stay sharp and fill the column
       instead of sitting as a fixed-height raster inside it --- */
.panel{
  border:1px solid var(--line);background:var(--paper-2);
  padding:clamp(24px,2.5vw,34px);display:flex;flex-direction:column;
  gap:clamp(16px,1.8vw,24px);min-height:clamp(320px,31vw,440px);
}
.pn-head{padding-bottom:16px;border-bottom:1px solid var(--ink);}
.pn-title{font-family:var(--pow);font-size:clamp(1.2rem,1.85vw,1.55rem);font-weight:700;letter-spacing:-.035em;line-height:1.14;margin-top:10px;}
.pn-logo{display:block;height:clamp(28px,2.4vw,34px);width:auto;margin-top:12px;}
.pn-rows{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:center;}
.pn-rows li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);}
.pn-rows li:last-child{border-bottom:0;}
/* the product names are links, but four coloured items would change what
   the panel is; they stay type until you reach for them */
.pn-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .15s ease,color .15s ease;}
.pn-link:hover{color:var(--gold-2);border-bottom-color:var(--gold);}
/* 20px tall is under the 24px minimum target; grow the hit area with an
   overlay so the gold underline stays exactly where it was drawn */
.pn-link{position:relative;}
.pn-link::after{content:"";position:absolute;left:0;right:0;top:-4px;height:calc(100% + 8px);}
.pn-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.pn-n{font-family:var(--pow);font-size:clamp(.98rem,1.3vw,1.15rem);font-weight:700;letter-spacing:-.022em;line-height:1.2;}
.pn-v{flex:none;font-family:var(--fun);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap;}
.pn-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 13px;color:var(--ink-2);}
.pn-chip i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;}
.pn-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 20px;padding-top:16px;border-top:1px solid var(--ink);}
.pn-foot span{font-family:var(--fun);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
/* separated by gap, not a leading glyph: a wrapped line started with the
   slash and sat 7.5px right of the line above it */
/* the advisory panel is a matrix rather than a list */
.pn-grid{flex:1;display:flex;flex-direction:column;justify-content:center;}
.pn-gh,.pn-gr{display:grid;grid-template-columns:1fr repeat(3,46px);align-items:center;gap:10px;}
.pn-gh{padding-bottom:12px;border-bottom:1px solid var(--line);}
.pn-gh span{font-family:var(--fun);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.pn-gh span + span{text-align:center;}
.pn-gr{padding:15px 0;border-bottom:1px solid var(--line);}
.pn-gr:last-child{border-bottom:0;}
.pn-mk{justify-self:center;width:15px;height:15px;border:1.5px solid var(--gold);border-radius:50%;}
@media(max-width:520px){
  .pn-rows li{flex-direction:column;align-items:flex-start;gap:9px;}
  .pn-gh,.pn-gr{grid-template-columns:1fr repeat(3,34px);}
}
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.status i{width:6px;height:6px;border-radius:50%;flex:none;}
.st-done{color:var(--ink-3);} .st-done i{background:var(--line-2);}
.st-live{color:var(--gold-2);} .st-live i{background:var(--gold);animation:pulse 2.4s ease-in-out infinite;}
.st-talk{color:var(--ink-3);} .st-talk i{border:1px solid var(--line-2);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* --- method: rows with drawing rule --- */
.meth{border-top:1px solid var(--ink);}
.mrow{display:grid;gap:14px;padding:clamp(24px,2.5vw,34px) 0;border-bottom:1px solid var(--line);position:relative;transition:background .25s;}
@media(min-width:900px){.mrow{grid-template-columns:repeat(12,1fr);gap:40px;align-items:baseline;}
  .mrow .mn{grid-column:1 / span 1;} .mrow .mh{grid-column:2 / span 3;} .mrow .mp{grid-column:6 / span 6;}}
.mrow:hover{background:var(--paper-3);}
.mn{font-family:var(--pow);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--gold-2);}
/* the spine draws the claim the copy makes: each stage hangs off the one above
   it, so the sequence is visible rather than only asserted */
@media(min-width:900px){
  .mrow::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--line-2);}
  /* the number is baseline-aligned to a much larger heading, so it sits about
     10px below the padding edge; start and stop the spine at the dot, not at
     the row box, or the first dot grows a stub and the last one floats free */
  .mrow:first-child::before{top:calc(clamp(24px,2.5vw,34px) + 21px);}
  .mrow:last-child::before{bottom:auto;height:calc(clamp(24px,2.5vw,34px) + 20px);}
  .mn{position:relative;padding-left:20px;}
  .mn::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;
    background:var(--gold);}
}
/* the cost line is the half that sells, so it carries the weight the
   description used to have all of */
.mcost{margin-top:14px;padding-left:14px;border-left:2px solid var(--gold);}
.mcost b{display:block;font-family:var(--fun);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:6px;}
.mcost p{font-size:14.5px;line-height:1.6;color:var(--ink);}
.meth-cta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:22px 0 0;}
.meth-cta span{font-size:14.5px;color:var(--ink-2);}
.meth-cta a{font-family:var(--fun);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-2);text-decoration:none;border-bottom:1px solid var(--gold);
  padding-bottom:2px;position:relative;}
.meth-cta a::after{content:"";position:absolute;left:0;right:0;top:-8px;height:calc(100% + 16px);}
.meth-cta a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.mh h3{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:700;letter-spacing:-.03em;text-transform:uppercase;}
.mh em{font-style:normal;display:block;margin-top:8px;font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.mbar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold);transition:width .9s cubic-bezier(.16,1,.3,1);}
.meth.is-in .mbar{width:100%;}
.meth.is-in .mrow:nth-child(2) .mbar{transition-delay:.1s;}
.meth.is-in .mrow:nth-child(3) .mbar{transition-delay:.2s;}
.meth.is-in .mrow:nth-child(4) .mbar{transition-delay:.3s;}
.tm{font-size:.42em;vertical-align:super;color:var(--gold);letter-spacing:0;}

/* --- proof --- */
.proof{display:grid;border-top:1px solid var(--ink);}
@media(min-width:600px){.proof{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.proof{grid-template-columns:repeat(3,1fr);}}
.pc{padding:clamp(24px,2.6vw,34px) 30px clamp(24px,2.6vw,34px) 0;border-bottom:1px solid var(--line);}
@media(min-width:600px){.pc{border-right:1px solid var(--line);}.pc:nth-child(2n){border-right:0;padding-left:30px;}}
@media(min-width:1040px){
  /* same three-column correction as .aic: the 2n/3n mix left card 5 flush */
  .pc:nth-child(3n+1){padding-left:0;border-right:1px solid var(--line);}
  .pc:nth-child(3n+2){padding-left:30px;border-right:1px solid var(--line);}
  .pc:nth-child(3n){padding-left:30px;border-right:0;}}
.pn{font-family:var(--pow);font-size:clamp(2.6rem,5.2vw,4rem);font-weight:800;letter-spacing:-.055em;line-height:.94;font-variant-numeric:tabular-nums;}
.pk{margin-top:13px;font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.ps{margin-top:11px;font-size:13.4px;line-height:1.55;color:var(--ink-3);}

/* --- markets: two lists, gold square bullets --- */
.mk{display:grid;gap:clamp(34px,4vw,64px);border-top:1px solid var(--ink);padding-top:34px;}
@media(min-width:820px){.mk{grid-template-columns:repeat(12,1fr);gap:56px;}
  .mk-a{grid-column:1 / span 5;} .mk-b{grid-column:7 / span 5;}}
.mk h4{font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px;}
.mk-b h4{color:var(--gold-2);}
.mk ul{list-style:none;margin:0;padding:0;}
.mk li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);}
.mk li::before{content:"";width:4px;height:4px;background:var(--gold);transform:translateY(-3px);}
.mk-b li::before{background:transparent;border:1px solid var(--line-2);}
.mk-n{font-size:15.5px;font-weight:500;color:var(--ink);}
.mk-t{display:block;margin-top:5px;font-size:13px;color:var(--ink-3);line-height:1.5;}

/* --- point of view --- */
.pov{background:var(--paper-3);}
.neg{border-top:1px solid var(--ink);margin-top:clamp(24px,2.6vw,36px);}
.neg div{padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line-2);
  font-family:var(--pow);font-size:clamp(1.4rem,3.2vw,2.5rem);font-weight:700;letter-spacing:-.04em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;}
.neg s{text-decoration:none;color:var(--line-2);}
.neg i{font-style:normal;color:var(--gold);}
.povb{display:grid;gap:24px;margin-top:clamp(26px,2.8vw,40px);}
@media(min-width:920px){.povb{grid-template-columns:repeat(3,1fr);gap:44px;}}
.povb strong{display:block;font-family:var(--pow);font-size:1.02rem;font-weight:700;letter-spacing:-.025em;margin-bottom:9px;}
.povb p{font-size:15px;line-height:1.68;color:var(--ink-2);}

/* --- capability / AI --- */
.ai-grid{display:grid;border-top:1px solid var(--line);}
@media(min-width:700px){.ai-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1060px){.ai-grid{grid-template-columns:repeat(3,1fr);}}
.aic{padding:24px 28px 26px 0;border-bottom:1px solid var(--line);}
@media(min-width:700px){.aic{border-right:1px solid var(--line);}.aic:nth-child(2n){border-right:0;padding-left:28px;}}
@media(min-width:1060px){
  /* address the three columns directly: the old 2n/3n mix was a two-column
     rule set, and cell 5 matched none of it so it sat 28px left of its column */
  .aic:nth-child(3n+1){padding-left:0;border-right:1px solid var(--line);}
  .aic:nth-child(3n+2){padding-left:28px;border-right:1px solid var(--line);}
  .aic:nth-child(3n){padding-left:28px;border-right:0;}}
.aic .n{font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--gold-2);}
.aic h4{font-size:1.1rem;font-weight:700;letter-spacing:-.025em;margin:12px 0 9px;}
.aic p{font-size:14.4px;line-height:1.6;color:var(--ink-2);}
.aivis{margin-top:clamp(26px,2.8vw,40px);border:1px solid var(--line);background:var(--paper-2);}
.aivis .top{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line);}
.aivis .top span{font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
#capCanvas{width:100%;height:auto;}

/* --- services: zig-zag rows --- */
/* nine cells on a hairline grid: the 1px gap over an inked background draws
   the rules, so every cell shares its edges and nothing doubles up */
.svc{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--ink);}
@media(min-width:560px){.svc{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.svc{grid-template-columns:repeat(3,1fr);}}
/* Ten cells: even in two columns, but ten into three leaves a single orphan on
   the last row, so let it span the full width rather than sit alone in column 1. */
@media(min-width:900px){.scell:last-child{grid-column:1 / -1;}}
.scell{background:var(--paper);padding:clamp(19px,2.1vw,26px);
  display:flex;flex-direction:column;gap:9px;transition:background .18s linear;}
.scell:hover{background:var(--paper-2);}
.scell h3{font-size:clamp(1.02rem,1.35vw,1.17rem);font-weight:700;letter-spacing:-.026em;
  transition:color .18s linear;}
.scell:hover h3{color:var(--gold-2);}
.scell p{font-size:14px;line-height:1.58;color:var(--ink-3);}
.svc-note{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:56ch;}

/* --- about --- */
.about{display:grid;gap:clamp(38px,4.6vw,62px);}
.ab-t{max-width:none;}
/* the prose runs in two balanced columns: one 64ch measure left half the row
   empty, and a full-width line would be far too long to read comfortably */
@media(min-width:860px){
  .ab-p{columns:2;column-gap:clamp(44px,5vw,84px);}
  .ab-p p{break-inside:avoid;}
  .ab-p p:first-child{margin-top:0;}
}
/* the facts run full width beneath the prose in two columns: side by side they
   left a ragged short column and a block of dead space under the text */
@media(min-width:760px){
  .facts{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,84px);}
}
.about .ser{margin-bottom:clamp(28px,3.2vw,42px);max-width:none;font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.32;text-wrap:balance;}
.about p{margin-top:18px;font-size:15.4px;line-height:1.74;color:var(--ink-2);}
.facts{border-top:1px solid var(--ink);}
.fact{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.fact dt{font-family:var(--fun);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.fact dd{margin:0;font-size:14.6px;color:var(--ink);line-height:1.55;}

/* --- close --- */
.close{background:var(--ink);color:var(--paper);}
.close h2{color:var(--paper);}
.close .blg{color:rgba(247,246,243,.72);}
.close .cap{color:var(--gold);}
.close-grid{display:grid;gap:clamp(34px,4vw,64px);align-items:center;}
@media(min-width:960px){.close-grid{grid-template-columns:repeat(12,1fr);gap:64px;align-items:start;}
  .cl-t{grid-column:1 / span 5;} .cl-m{grid-column:7 / span 6;}}
/* the closing column ran short beside the form; the portrait fills it and
   puts a face next to the point of contact */
.cl-por{margin:clamp(30px,3.4vw,42px) 0 0;max-width:240px;}
/* the frame sits on the image, not the figure: with the caption inside a
   padded box it sat 12px right of the copy above it */
.cl-por img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border:1px solid rgba(247,246,243,.22);background:rgba(247,246,243,.05);
  filter:grayscale(1);transition:filter .5s ease;}
.cl-por:hover img{filter:grayscale(0);}
.cl-por figcaption{margin-top:14px;font-family:var(--fun);font-size:10.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.55;
  color:rgba(247,246,243,.55);}
.cl-por figcaption b{display:block;font-weight:600;color:rgba(247,246,243,.9);}

/* --- enquiry form: composes a mail message, so a static page can carry it --- */
/* gap and field height tuned so the form column ends level with the
   portrait column beside it, instead of stopping 86px short */
.cform{display:grid;gap:21px;}
.cf-row{display:grid;gap:8px;}
.cform label{font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,246,243,.62);}
.cform input,.cform textarea{
  width:100%;font-family:var(--fun);font-size:15px;line-height:1.5;color:var(--paper);
  background:rgba(247,246,243,.06);border:1px solid rgba(247,246,243,.24);border-radius:0;
  padding:13px 14px;transition:border-color .12s linear,background .12s linear;}
.cform textarea{resize:vertical;min-height:184px;}
.cform input::placeholder,.cform textarea::placeholder{color:rgba(247,246,243,.35);}
.cform input:hover,.cform textarea:hover{border-color:rgba(247,246,243,.4);}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);background:rgba(247,246,243,.1);}
.cform .btn{justify-self:start;margin-top:4px;}
/* off-screen, never focusable: only automated submissions fill it */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cf-err{font-size:13.5px;line-height:1.5;color:#F0B0A6;}
.cf-sent{border:1px solid var(--gold);padding:26px;}
.cf-sent b{display:block;font-family:var(--pow);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:var(--paper);margin-bottom:9px;}
.cf-sent p{font-size:14px;line-height:1.6;color:rgba(247,246,243,.66);}
.cw-reply{display:grid;gap:8px;margin-top:4px;}
.cw-reply input{width:100%;border:1px solid var(--line);border-radius:0;padding:10px 12px;font-family:var(--fun);font-size:13.5px;color:var(--ink);background:var(--paper);}
.cw-reply input:focus{outline:2px solid var(--gold);outline-offset:-1px;}
.cw-note{font-size:11.5px;line-height:1.5;color:var(--ink-3);}
.cf-note{font-size:12px;line-height:1.5;color:rgba(247,246,243,.42);}
.cf-ok{border:1px solid var(--gold);padding:26px;}
.cf-ok b{display:block;font-family:var(--pow);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:var(--paper);margin-bottom:9px;}
.cf-ok p{font-size:14px;line-height:1.6;color:rgba(247,246,243,.66);}
.cf-ok a{color:var(--gold);text-decoration:underline;}
footer{background:var(--ink);color:rgba(247,246,243,.5);border-top:1px solid rgba(247,246,243,.14);padding:30px 0 42px;}
footer .bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline;}
footer .brand{color:var(--paper);}
footer a{font-family:var(--fun);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
footer a:hover{color:var(--gold);}
footer a{position:relative;}
footer a::after{content:"";position:absolute;left:0;right:0;top:-4px;height:calc(100% + 8px);}
.flinks{display:flex;flex-wrap:wrap;gap:26px;}

/* --- right rail: where you are in the page, and a way to jump --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.rail{position:fixed;right:clamp(14px,1.8vw,30px);top:50%;transform:translateY(-50%);z-index:70;display:none;}
@media(min-width:1180px){.rail{display:block;}}
.rail ul{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:12px;text-decoration:none;padding:3px 0;}
.rail span{font-family:var(--fun);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);opacity:.5;white-space:nowrap;transition:opacity .18s ease,color .18s ease;}
.rail i{display:block;width:20px;height:1px;background:var(--line-2);transition:width .22s ease,background .18s ease;}
.rail a:hover span{opacity:1;}
.rail a:hover i{width:32px;}
.rail a.on span{opacity:1;color:var(--ink);}
.rail a.on i{width:42px;background:var(--ink);}
.rail a:focus-visible{outline:2px solid var(--gold);outline-offset:5px;}
/* until the viewport is wide enough to clear the 1440 content column, the
   labels would sit on top of it: show the rules, reveal a label on hover */
@media(max-width:1699px){
  .rail a{position:relative;}
  .rail span{position:absolute;right:100%;margin-right:12px;opacity:0;pointer-events:none;}
  .rail a:hover span,.rail a:focus-visible span{opacity:1;}
}
/* the rail crosses four dark bands, so it inverts with them */
.rail.inv span{color:rgba(247,246,243,.66);}
.rail.inv i{background:rgba(247,246,243,.34);}
.rail.inv a.on span{color:var(--paper);opacity:1;}
.rail.inv a.on i{background:var(--gold);}

/* --- quick answers: a local assistant, no backend and no live-agent pretence --- */
.cw{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);z-index:90;}
.cw-btn{display:flex;align-items:center;justify-content:center;gap:0;width:56px;height:56px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;
  transition:background .12s linear,color .12s linear;}
.cw-btn:hover{background:var(--gold-2);border-color:var(--gold-2);}
.cw-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* [hidden] is a UA rule of equal specificity, so the display below would
   otherwise beat it and the panel could never actually hide */
.cw-panel[hidden]{display:none;}
.cw-panel{position:absolute;right:0;bottom:68px;width:min(360px,calc(100vw - 32px));
  background:var(--paper-2);border:1px solid var(--ink);display:flex;flex-direction:column;
  max-height:min(560px,calc(100vh - 120px));}
.cw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 20px 16px;border-bottom:1px solid var(--line);}
.cw-head b{display:block;font-family:var(--pow);font-size:1rem;font-weight:700;letter-spacing:-.02em;}
.cw-head p{margin-top:5px;font-size:12px;line-height:1.5;color:var(--ink-3);}
.cw-x{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:20px;line-height:1;
  /* 20x24 was too small to hit: grow the target into the header padding
     with negative margins, so the glyph stays exactly where it was */
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  margin:-11px -13px -11px 0;}
.cw-x:hover{color:var(--ink);}
.cw-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.cw-body{padding:16px 20px;overflow-y:auto;display:grid;gap:10px;}
.cw-q{text-align:left;width:100%;background:none;border:1px solid var(--line);cursor:pointer;
  font-family:var(--fun);font-size:13.5px;line-height:1.45;color:var(--ink);padding:11px 13px;
  transition:border-color .12s linear,background .12s linear;}
.cw-q:hover{border-color:var(--ink);background:var(--paper);}
.cw-q:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.cw-a{border-left:2px solid var(--gold);padding:2px 0 2px 14px;}
.cw-a p{font-size:13.5px;line-height:1.62;color:var(--ink-2);}
.cw-a p + p{margin-top:10px;}
.cw-back{justify-self:start;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);}
.cw-back:hover{color:var(--ink);}
.cw-cta{margin-top:2px;}
.cw-ask{display:flex;gap:0;border-top:1px solid var(--line);}
.cw-ask input{flex:1;min-width:0;border:0;border-radius:0;padding:14px 16px;font-family:var(--fun);
  font-size:13.5px;color:var(--ink);background:transparent;}
.cw-ask input:focus{outline:2px solid var(--gold);outline-offset:-2px;}
.cw-ask button{border:0;border-left:1px solid var(--line);background:var(--ink);color:var(--paper);
  cursor:pointer;font-family:var(--fun);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:0 18px;}
.cw-ask button:hover{background:var(--gold-2);}
.cw-ask button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;}
@media(max-width:520px){.cw-panel{max-height:calc(100vh - 110px);}}

/* --- motion: spring-ish cascade, transform+opacity only --- */
.js .rv{opacity:0;transform:translateY(18px);}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.js .stg > *{opacity:0;transform:translateY(14px);}
.js .stg.in > *{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.js .stg.in > *:nth-child(2){transition-delay:.06s;}
.js .stg.in > *:nth-child(3){transition-delay:.12s;}
.js .stg.in > *:nth-child(4){transition-delay:.18s;}
.js .stg.in > *:nth-child(5){transition-delay:.24s;}
.js .stg.in > *:nth-child(6){transition-delay:.3s;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .js .rv,.js .stg > *{opacity:1!important;transform:none!important;}
  .meth .mbar{width:100%!important;}
}

/* --- faq: native details, so every answer sits in the DOM for crawlers and
   assistants whether or not a human ever clicks, and no script is involved --- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:clamp(17px,2vw,23px) 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:22px;
  font-size:clamp(1rem,1.3vw,1.12rem);font-weight:600;letter-spacing:-.022em;
  transition:color .18s linear;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';flex:none;font-weight:500;color:var(--ink-3);
  transition:color .18s linear;}
.faq details[open] summary::after{content:'−';}
.faq summary:hover,.faq summary:hover::after{color:var(--gold-2);}
.faq p{padding:0 0 clamp(19px,2.2vw,26px);font-size:15px;line-height:1.65;
  color:var(--ink-3);max-width:66ch;}

/* --- comparison: one row per alternative. Stacks on small screens; on wide
   ones the name holds a narrow first column so the two arguments stay in
   readable measures side by side rather than one long line each. --- */
.cmp{border-top:1px solid var(--ink);}
.crow{display:grid;gap:6px 34px;padding:clamp(21px,2.4vw,29px) 0;
  border-bottom:1px solid var(--line);}
.crow h3{font-size:clamp(1.02rem,1.35vw,1.17rem);font-weight:700;letter-spacing:-.026em;}
.clab{display:block;font-family:var(--fun);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);margin-bottom:5px;}
.crow p{font-size:14px;line-height:1.6;color:var(--ink-3);}
.crow:last-child h3{color:var(--ink);}
.crow:last-child{background:var(--paper-3);padding-left:clamp(14px,1.6vw,20px);
  padding-right:clamp(14px,1.6vw,20px);}
@media(min-width:820px){
  .crow{grid-template-columns:minmax(150px,.85fr) 1.35fr 1.35fr;align-items:start;}
  .crow:last-child{margin-left:calc(clamp(14px,1.6vw,20px) * -1);
    margin-right:calc(clamp(14px,1.6vw,20px) * -1);}
}

/* --- hero question: the diagnostic's first question, asked in the hero rather
   than linked to. Plain anchors carrying the answer in the query string, so it
   works with no script at all and the question text is in the markup. --- */
.hero-q{margin:30px auto 0;max-width:56ch;border:1px solid rgba(255,255,255,.22);
  background:rgba(12,12,14,.42);backdrop-filter:blur(7px);
  padding:clamp(18px,2.1vw,24px);}
.hero-q .cap{color:var(--gold);margin-bottom:9px;}
.hero-q p{font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.5;font-weight:600;
  letter-spacing:-.02em;color:#F7F6F3;margin-bottom:16px;}
.hero-yn{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 12px;}
.hero-yn .btn,.hero-yn .btn-o{min-width:96px;justify-content:center;}
/* the note sits on its own centred line: beside the buttons it unbalances a
   hero whose copy above it is centred */
.hero-yn span{flex:0 0 100%;font-size:12.5px;line-height:1.5;text-align:center;
  color:rgba(247,246,243,.62);}
@media(max-width:520px){.hero-yn .btn,.hero-yn .btn-o{flex:1 1 auto;}}