/* ==========================================================================
   Executive Revenue Narrative — editorial minimalism.
   Two tiers: Manrope (power and function), Instrument Serif italic
   (narrative). Sharp corners, no shadows, depth from tone and line.

   Geist was dropped: it spread through create-next-app, v0 and shadcn
   templates rather than by anyone choosing it, and now reads as the AI-era
   default. Manrope was already carrying the headings and holds up alone.
   ========================================================================== */
:root{
  /* Warm near-blacks, not neutral ones. On a warm paper (#F7F6F3) a neutral
     #111 reads slightly cold and slightly cheap; the greys are given a little
     of the paper's hue so the palette holds together. COLLINS uses #140700,
     MKT1 uses #1E1919 - nobody good ships #000 or #111 on warm stock.
     Contrast improves rather than degrades: ink-3 goes from 4.72:1 to 5.54:1
     on paper and from 4.40:1 to 5.16:1 on the tinted panel, clearing the
     4.5:1 floor it used to fail. */
  --ink:#14100C;
  --ink-2:#3A3530;
  --ink-3:#6A625A;
  --paper:#F7F6F3;
  --paper-2:#FFFFFF;
  --paper-3:#F0EEE9;
  --line:#D9D7D2;
  --line-2:#C2BFB8;
  /* Two golds with two jobs, which is what the contrast failures were about.
     --gold is the MARK: rules, dots, borders, focus rings, and any gold that
     sits on one of the dark grounds, where a pale gold is correct and has
     plenty of contrast. It is never text on paper.
     --gold-2 is TEXT on light. #8F7539 was 4.07:1 on paper and 3.80:1 on the
     tinted panel, both under the 4.5:1 floor, and it carried 54 of the site's
     69 contrast failures. #7A6028 reads as the same old gold and measures
     5.50:1 on paper, 5.95:1 on white, 5.13:1 on the panel, and 5.50:1 the
     other way round when paper sits on a gold fill. */
  --gold:#B4975A;
  --gold-2:#7A6028;
  /* --- type scale -------------------------------------------------------
     Seven steps. The site previously rendered 24 distinct sizes, ten of them
     between 10px and 13.5px including 13.5 / 13.4 / 13.3 / 13 - differences
     nobody can see and nobody chose. Measured across ten well-regarded sites
     (COLLINS, Rauno Freiberg, MKT1, Fletch, Julian Shapiro, Peep Laja, Wes
     Kao and others) the median count is six.

     The display step is unchanged: 80px at -0.04em with line-height 1 was
     already right, and 80:18 is a 4.4:1 display-to-body ratio, inside the
     3.2-5:1 range those sites occupy. */
  --t-display: clamp(2.8rem, 6.6vw, 5rem);   /*  45 - 80px  hero only        */
  --t-xl:      clamp(2rem, 4vw, 2.5rem);     /*  32 - 40px  section headings */
  --t-lg:      clamp(1.5rem, 2.2vw, 1.625rem);/* 24 - 26px  sub-headings     */
  --t-md:      1.3125rem;                    /*       21px  leads            */
  --t-body:    1.125rem;                     /*       18px  READING SIZE     */
  --t-sm:      .9375rem;                     /*       15px  secondary        */
  --t-label:   .8125rem;                     /*       13px  uppercase labels */
  --maxw:1440px;
  --gut:80px;
  --pow:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fun:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",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:var(--t-body);line-height:1.62;
  -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:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.cap-g{color:var(--gold-2);}
.dxl{font-size:var(--t-display);font-weight:800;letter-spacing:-.04em;line-height:1;}
.hlg{font-size:var(--t-xl);font-weight:700;letter-spacing:-.03em;line-height:1.15;}
.hmd{font-size:var(--t-md);font-weight:600;letter-spacing:-.02em;line-height:1.3;}
.ser{font-family:var(--nar);font-style:italic;font-weight:400;font-size:var(--t-lg);line-height:1.4;letter-spacing:-.01em;}
.blg{font-size:var(--t-body);line-height:1.62;color:var(--ink-2);max-width:62ch;}
.bmd{font-size:var(--t-body);line-height:1.6;color:var(--ink-2);}
.bsm{font-size:var(--t-sm);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:var(--t-label);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:var(--t-label);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{display:inline-flex;align-items:center;text-decoration:none;}
.brand-lockup{height:32px;width:auto;display:block;}
@media(max-width:560px){.brand-lockup{height:27px;}}
.nlinks{display:flex;gap:30px;}
.nlinks a{font-family:var(--fun);font-size:var(--t-label);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:var(--t-label);}
/* 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:var(--t-xl);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(--ink-3);font-size:var(--t-md);}
@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.
   The globe was 2,612 KB - 93% of the page - at 1600x678/30fps. It sits under
   a scrim that darkens it by up to 80%, so the detail was being paid for and
   then thrown away: re-encoded to 1280x542 at 20fps and CRF 36 it is 649 KB,
   4x lighter and visually identical through the scrim. --- */
.hero{position:relative;overflow:hidden;background:#0C0906;}
.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(12,9,6,.34) 0%, rgba(12,9,6,.06) 62%, rgba(12,9,6,0) 100%),
  linear-gradient(180deg,rgba(12,9,6,.80) 0%,rgba(12,9,6,.56) 30%,rgba(12,9,6,.58) 64%,rgba(12,9,6,.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 video.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .hero-scrim{background:linear-gradient(180deg,rgba(12,9,6,.90) 0%,rgba(12,9,6,.62) 46%,rgba(12,9,6,.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:var(--t-xl);line-height:1.18;letter-spacing:-.01em;color:#F8F5EE;text-wrap:balance;}
.q-sub{max-width:46ch;font-size:var(--t-body);line-height:1.62;color:rgba(248,245,238,.60);}

/* --- markets on the constellation plate --- */
.mkv{position:relative;overflow:hidden;background:#0C0906;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(12,9,6,.92) 0%,rgba(12,9,6,.68) 30%,rgba(12,9,6,.74) 64%,rgba(12,9,6,.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:var(--t-label);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:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.kv dd{margin:0;font-size:var(--t-body);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:var(--t-lg);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:var(--t-label);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:var(--t-md);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:var(--t-body);font-weight:700;letter-spacing:-.022em;line-height:1.2;}
.pn-v{flex:none;font-family:var(--fun);font-size:var(--t-label);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:var(--t-label);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:var(--t-label);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:var(--t-label);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:var(--t-sm);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:var(--t-label);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:6px;}
.mcost p{font-size:var(--t-body);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:var(--t-body);color:var(--ink-2);}
.meth-cta a{font-family:var(--fun);font-size:var(--t-label);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:var(--t-lg);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:var(--t-label);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-2);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:var(--t-xl);font-weight:800;letter-spacing:-.055em;line-height:.94;font-variant-numeric:tabular-nums;}
.pk{margin-top:13px;font-family:var(--fun);font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.ps{margin-top:11px;font-size:var(--t-sm);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:var(--t-label);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:var(--t-body);font-weight:500;color:var(--ink);}
.mk-t{display:block;margin-top:5px;font-size:var(--t-sm);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:var(--t-lg);font-weight:700;letter-spacing:-.04em;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;}
.neg s{text-decoration:none;color:var(--ink-3);}
.neg i{font-style:normal;color:var(--gold-2);}   /* the "not equal" glyph carries meaning, so it reads as text */
.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:var(--t-body);font-weight:700;letter-spacing:-.025em;margin-bottom:9px;}
.povb p{font-size:var(--t-body);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:var(--t-label);font-weight:600;letter-spacing:.1em;color:var(--gold-2);}
.aic h4{font-size:var(--t-md);font-weight:700;letter-spacing:-.025em;margin:12px 0 9px;}
.aic p{font-size:var(--t-body);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:var(--t-label);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:var(--t-body);font-weight:700;letter-spacing:-.026em;
  transition:color .18s linear;}
.scell:hover h3{color:var(--gold-2);}
.scell p{font-size:var(--t-body);line-height:1.58;color:var(--ink-3);}
.svc-note{margin-top:14px;font-size:var(--t-body);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:var(--t-lg);line-height:1.32;text-wrap:balance;}
.about p{margin-top:18px;font-size:var(--t-body);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:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0;}
.fact dd{margin:0;font-size:var(--t-body);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:var(--t-label);
  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);}
.cl-por figcaption .cl-cred{display:block;margin:2px 0 6px;font-weight:700;letter-spacing:.14em;color:var(--gold,#B4975A);}

/* --- 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:var(--t-label);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:var(--t-body);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:var(--t-sm);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:var(--t-md);font-weight:700;letter-spacing:-.02em;color:var(--paper);margin-bottom:9px;}
.cf-sent p{font-size:var(--t-body);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:var(--t-sm);color:var(--ink);background:var(--paper);}
.cw-reply input:focus{outline:2px solid var(--gold);outline-offset:-1px;}
.cw-note{font-size:var(--t-label);line-height:1.5;color:var(--ink-3);}
.cf-note{font-size:var(--t-label);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:var(--t-md);font-weight:700;letter-spacing:-.02em;color:var(--paper);margin-bottom:9px;}
.cf-ok p{font-size:var(--t-body);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 .brand{color:var(--paper);}   /* .brand pins ink for the nav; the footer ground is ink */
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:var(--t-label);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;}

/* --- newsletter panel, centred ---------------------------------------------
   Centred on screen, but keeping the casual shape: rounded, shadowed, no hard
   rule. The scrim is light rather than heavy - enough to lift the panel off the
   page, not so much that the site disappears behind it.
   Centred and over a scrim means it IS modal, so site.js gives it the dialog
   behaviour to match: focus moves in, Tab stays inside, Esc and a scrim click
   close it. On a phone it is a sheet near the bottom, where a thumb reaches. */
.nlm{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(20,16,12,.42);opacity:0;transition:opacity .24s ease;}
.nlm[hidden]{display:none;}
.nlm.is-in{opacity:1;}
.nlm-box{position:relative;width:min(372px,100%);background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(20,16,12,.28),0 2px 10px rgba(20,16,12,.10);
  padding:24px 22px 20px;transform:translateY(10px) scale(.985);
  transition:transform .24s ease;}
.nlm.is-in .nlm-box{transform:none;}
.nlm-x{position:absolute;top:8px;right:10px;appearance:none;background:none;border:0;cursor:pointer;
  font-size:20px;line-height:1;padding:6px 8px;color:var(--ink-3);border-radius:8px;}
.nlm-x:hover{color:var(--ink);background:var(--paper-3);}
.nlm h2{font-size:21px;line-height:1.25;letter-spacing:-.01em;margin:0 0 7px;padding-right:22px;}
.nlm h2 em{font-family:var(--nar);font-style:italic;color:var(--gold-2);}
.nlm p{font-size:14px;line-height:1.5;color:var(--ink-3);margin:0 0 15px;}
.nlm form{display:grid;gap:8px;}
.nlm .nlm-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nlm input{appearance:none;width:100%;background:var(--paper);border:1px solid var(--line);
  border-radius:9px;color:var(--ink);font:inherit;font-size:14px;padding:11px;}
.nlm input::placeholder{color:var(--ink-3);}
.nlm input:focus{outline:0;border-color:var(--gold);background:var(--paper-2);}
.nlm button[type=submit]{appearance:none;cursor:pointer;background:var(--ink);color:var(--paper);
  border:0;border-radius:9px;font-family:var(--fun);font-size:13px;font-weight:700;
  letter-spacing:.06em;padding:12px 14px;margin-top:2px;}
.nlm button[type=submit]:hover{background:var(--gold-2);}
.nlm button[disabled]{opacity:.55;cursor:default;}
.nlm-no{justify-self:start;background:none;border:0;padding:4px 0 0;cursor:pointer;
  font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;}
.nlm-no:hover{color:var(--ink);}
.nlm-note{font-size:13px;line-height:1.45;margin:4px 0 0;}
.nlm-note[hidden]{display:none;}
.nlm-ok{color:var(--gold-2);}
.nlm-err{color:#9B2C2C;}
@media(max-width:620px){
  .nlm{align-items:flex-end;padding:12px;}
  .nlm-box{width:100%;border-radius:18px;padding:20px 17px 17px;max-height:84vh;overflow:auto;}
  .nlm .nlm-two{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){ .nlm,.nlm-box{transition:none;} }

/* the honeypot: off-screen rather than display:none, which some bots skip */
.nlf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* --- the launcher tab ------------------------------------------------------
   A tab on the left edge, vertically centred, that opens the panel. It is the
   way back in once somebody has dismissed the panel, which otherwise hides for
   30 days with no way to reopen it. The right edge is taken by the section rail
   and the chat button, so the left is the only free edge. */
.nlt{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:150;
  appearance:none;border:0;cursor:pointer;background:var(--ink);color:var(--paper);
  writing-mode:vertical-rl;padding:16px 9px;border-radius:0 10px 10px 0;
  font-family:var(--fun);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;box-shadow:0 6px 20px rgba(20,16,12,.22);
  transition:background .18s ease,padding .18s ease;}
.nlt:hover{background:var(--gold-2);padding-right:13px;}
.nlt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media(max-width:620px){ .nlt{font-size:11px;padding:13px 7px;letter-spacing:.1em;} }
@media(max-width:620px){.nlf input{min-width:0;flex:1 1 12rem;}}

/* --- 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:var(--t-label);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;}
/* A short "Hi" beside the launcher so the chat announces itself rather than waiting to
   be noticed. Square like everything else on this site. */
.cw-greet{position:absolute;right:0;bottom:84px;display:flex;align-items:center;gap:6px;
  background:var(--paper-2);border:1px solid var(--ink);padding:8px 8px 8px 14px;
  max-width:min(300px,calc(100vw - 48px));box-shadow:0 10px 30px rgba(0,0,0,.12);}
.cw-greet[hidden]{display:none;}
.cw-greet-open{border:0;background:none;padding:0;cursor:pointer;font-family:var(--fun);
  font-size:var(--t-sm);font-weight:700;color:var(--ink);text-align:left;line-height:1.35;}
.cw-greet-x{border:0;background:none;cursor:pointer;line-height:1;font-size:18px;
  color:var(--ink-3);padding:0 2px;}
.cw-greet-x:hover{color:var(--ink);}
.cw-btn{display:flex;align-items:center;justify-content:center;gap:0;width:72px;height:72px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;
  overflow:hidden;padding:0;border-radius:50%;
  transition:background .12s linear,color .12s linear,transform .12s ease;}
.cw-btn:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-1px);}
/* The photo fills the launcher edge to edge. The launcher is the one round element on a
   square site, by request: a portrait reads as a face in a circle and as a passport
   photo in a square. */
.cw-face{display:block;width:100%;height:100%;object-fit:cover;}
.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:84px;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:var(--t-body);font-weight:700;letter-spacing:-.02em;}
.cw-head p{margin-top:5px;font-size:var(--t-label);line-height:1.5;color:var(--ink-3);}
.cw-x{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:var(--t-md);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:var(--t-sm);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:var(--t-sm);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:var(--t-label);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:var(--t-sm);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:var(--t-label);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:var(--t-body);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:var(--t-body);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:var(--t-body);font-weight:700;letter-spacing:-.026em;}
.clab{display:block;font-family:var(--fun);font-size:var(--t-label);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);margin-bottom:5px;}
.crow p{font-size:var(--t-body);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:var(--t-body);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:var(--t-label);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;}}


/* --- portfolio --- */
#portfolio{padding:clamp(64px,7vw,110px) 0;border-top:1px solid var(--line);background:var(--paper-2);}
.pf{display:grid;gap:0;border-top:1px solid var(--line);}
.pfc{display:grid;grid-template-columns:96px 1fr;gap:0 28px;padding:clamp(30px,3.4vw,46px) 0;border-bottom:1px solid var(--line);}
.pfn{font-family:var(--pow);font-size:var(--t-sm);font-weight:800;letter-spacing:.12em;color:var(--gold-2);padding-top:5px;}
.pfb{min-width:0;}
.pfb h3{font-size:var(--t-lg);letter-spacing:-.025em;}
.pfk{margin-top:8px;font-family:var(--fun);font-size:var(--t-body);font-weight:600;color:var(--ink-2);}
.pfm{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;}
.pfm span{font-family:var(--fun);font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.pfm span+span{position:relative;padding-left:18px;}
.pfm span+span::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--line-2);}
.pfg{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px;margin-top:22px;}
.pfs b{display:block;font-family:var(--fun);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;}
.pfs p{margin:0;font-size:var(--t-body);line-height:1.6;color:var(--ink-2);}
.pfv{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}
.pfi{flex:1 1 190px;min-width:170px;border-left:2px solid var(--gold);padding:2px 0 2px 14px;}
.pfi span{display:block;font-family:var(--pow);font-size:var(--t-md);font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.pfi em{display:block;margin-top:3px;font-style:normal;font-size:var(--t-label);line-height:1.45;color:var(--ink-3);}

.pfw{margin-top:clamp(44px,5vw,72px);}
.pfwg{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:20px;}
.pfwi h4{font-family:var(--pow);font-size:var(--t-body);font-weight:700;letter-spacing:-.015em;margin-bottom:8px;padding-top:14px;border-top:2px solid var(--ink);}
.pfwi p{margin:0;}


@media(max-width:900px){
  .pfwg{grid-template-columns:repeat(2,1fr);}
  .pfg{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .pfc{grid-template-columns:1fr;gap:0;}
  .pfn{padding:0 0 10px;}
  .pfwg{grid-template-columns:1fr;}
  .pfi{flex:1 1 100%;}
}

/* chat panel form: the same three fields as the DeliverIQ widget */
.cw-form{display:grid;gap:10px;padding:16px 20px 20px;}
.cw-form input,.cw-form textarea{width:100%;border:1px solid var(--line);border-radius:0;padding:11px 13px;
  font-family:var(--fun);font-size:var(--t-sm);line-height:1.4;color:var(--ink);background:var(--paper);}
.cw-form textarea{resize:vertical;min-height:96px;}
.cw-form input:focus,.cw-form textarea:focus{outline:2px solid var(--gold);outline-offset:-1px;}
.cw-form input::placeholder,.cw-form textarea::placeholder{color:var(--ink-3);}
.cw-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}
.cw-err{font-size:var(--t-label);line-height:1.5;color:#9a2f2f;}
.cw-err[hidden]{display:none;}
.cw-send{border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;
  font-family:var(--fun);font-size:var(--t-label);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:13px 18px;transition:background .12s linear,border-color .12s linear;}
.cw-send:hover{background:var(--gold-2);border-color:var(--gold-2);}
.cw-send:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.cw-send[disabled]{opacity:.6;cursor:default;}
.cw-done{padding:16px 20px 20px;font-size:var(--t-sm);line-height:1.55;color:var(--ink);}

/* 14-Oct-2026: logo strip. Endorsing institutions of the conference programme, then the
   platforms we build on. 14-Oct (later): conference + DeliverIQ row added above them. Shown in full brand colour (his call, 14-Oct);
   the ACES mark is a white-ground JPG, blended so its box disappears on paper. */
.logos{margin-top:clamp(34px,3.8vw,56px);border-top:1px solid var(--ink);display:grid;gap:0;}
.logos-work{margin-top:0;margin-bottom:clamp(26px,2.6vw,36px);}
.lg-row{display:grid;gap:16px;padding:26px 0;border-bottom:1px solid var(--line);}
@media(min-width:900px){ .lg-row{grid-template-columns:220px 1fr;align-items:center;gap:32px;} }
.lg-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px;}
.lg-list img{display:block;height:38px;width:auto;max-width:150px;object-fit:contain;}
.lg-list img.lg-blend{mix-blend-mode:multiply;height:44px;}
.lg-work{gap:22px 56px;}
@media(min-width:900px){ .lg-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:32px;} }
.lg-work li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.lg-work img{width:200px;height:56px;max-width:none;object-fit:contain;object-position:left bottom;}
.lg-work span:not(.lg-sub){font-family:var(--fun);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.lg-sub{font-family:var(--fun);font-size:var(--t-sm);line-height:1.5;color:var(--ink-3);text-transform:none;letter-spacing:0;font-weight:400;}
.lg-sub a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;}
.lg-names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;}
.lg-names li{font-family:var(--fun);font-size:var(--t-sm);font-weight:600;color:var(--ink-2,#3A3530);}
.lg-intro{font-size:var(--t-sm);line-height:1.55;color:var(--ink-3);margin:0 0 16px;max-width:70ch;}
.lg-eco{gap:14px 26px;}
.lg-note{margin:16px 0 0;font-style:italic;}
.lg-eco img{height:54px;max-width:130px;}
@media(max-width:620px){ .lg-eco img{height:44px;max-width:104px;} }
.lg-tools li{display:flex;align-items:center;gap:10px;}
.lg-tools img{height:22px;width:auto;max-width:60px;}
.lg-tools span{font-family:var(--fun);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
@media(max-width:620px){ .lg-list{gap:18px 28px;} .lg-list img{height:30px;max-width:120px;} .lg-tools img{height:20px;} }

/* 14-Oct-2026: Randhir asked to "zoom out a bit" - on laptops and desktops the site read
   too large. Scale the whole page to 90% from 1024px up; phones and tablets keep full size
   because that is where legibility is already tight. */
@media (min-width:1024px){ html{ zoom:.85; } }

/* 14-Oct-2026 "professional pass" (Randhir: the site read as built by AI).
   1. Labels: sentence case, normal tracking, so the page reads like an editorial firm
      rather than a template of shouted eyebrows. Buttons and the nav keep their caps.
   2. Edge gimmicks removed: the vertical NEWSLETTER tab and the floating section rail.
   3. Chat greeting no longer squeezes into the 72px launcher column. */
.cap, .pk, .pfs b, .pfk, .lg-tools span, .lg-work span:not(.lg-sub), .cl-por figcaption,
.cw-head p, .fact dt, .sec-head .cap, .mh em, .mcost b, .meth-cta a, .tags span, .kv dt, .res span,
.pn-v, .pn-foot span, .pn-gh span, .status, .mk h4, .aivis .top span, .cform label, .pfm span, .clab
{ text-transform:none !important; letter-spacing:.01em !important; }
.mh h3{ text-transform:none; letter-spacing:-.02em; }
.cap{ font-size:var(--t-sm); font-weight:600; }
.pfs b{ font-size:var(--t-sm); }
.cl-por figcaption .cl-cred{ letter-spacing:.06em !important; }
.nlt, .rail{ display:none !important; }
.cw-greet{ width:max-content; max-width:min(300px,calc(100vw - 48px)); white-space:normal; }