/* =========================================================================
   Andrea, Paid Social Specialist
   Design system. Two stages: ink and paper. One accent, in rare doses.
   ========================================================================= */

/* =========================================================================
   FONTS, SELF-HOSTED. No request leaves this origin to render type.
   These declarations are Google's own, copied verbatim from the css2 response
   that used to be linked in the head, with only the src swapped to a local
   file. Same font versions, same weights, same `swap`, same `unicode-range` —
   so rendering is identical to what was approved, not merely similar.

   ONLY the `latin` subset ships. Every character the site actually renders was
   inventoried: all of them fall inside `latin` except → (U+2192) and ▾ (U+25BE),
   and neither is in latin-ext, cyrillic or vietnamese either — so both already
   fell back to a system font while Google served the fonts. Keeping the
   unicode-range preserves that exact fallback. latin-ext, cyrillic, cyrillic-ext
   and vietnamese were dropped: nothing on this site has ever used them.

   Schibsted Grotesk and Instrument Sans are variable fonts — one file each
   covers both weights, which is why two faces share one src. IBM Plex Mono
   ships static per weight. Four files, 104 KB.
   All three families are SIL Open Font License, which permits self-hosting.
   ========================================================================= */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
/* ART DIRECTION PASS, 21 Aug 2026. Dark first, end to end.
   The warm PAPER stage is superseded: --paper* now names an ELEVATED COOL DARK
   surface. Every existing rule that referenced those tokens converts to the dark
   system automatically, on every page, with no markup change. */
:root{
  /* environment: near-black with a midnight blue bias */
  --canvas:#070A14;
  --surface-01:#0B1120;      /* slightly lifted cool graphite */
  --surface-02:#101A30;      /* cooler elevated dark surface */
  --surface-03:#16223C;      /* highest lift, foreground objects */
  --panel:var(--surface-02);
  --panel-2:var(--surface-03);

  /* cool text hierarchy */
  --text-primary:#E9EEF8;
  --text-secondary:#A8B6CE;
  --text-tertiary:#8C9AB6;

  /* translucent cool hairlines, never solid strokes */
  --hair:rgba(150,185,240,.105);
  --hair-2:rgba(150,185,240,.18);
  --panel-line:var(--hair);
  --border-int-ink:#41536F;

  /* the former PAPER stage, retokenised as an elevated dark surface */
  --paper:#0B1224;
  --paper-panel:#121C33;
  --paper-line:var(--hair);
  --ink-primary:#E9EEF8;
  --ink-secondary:#A8B6CE;
  --border-int-paper:#41536F;

  /* ambient, extremely restrained */
  --glow:rgba(96,140,220,.085);
  --glow-2:rgba(96,140,220,.045);

  /* accent, now scarcer: CTA, focus, one signal, one transition */
  --accent:#E2482B;
  --accent-hover:#C93A1F;
  --accent-soft:rgba(226,72,43,.20);
  --accent-faint:rgba(226,72,43,.09);

  /* per-stage aliases, reassigned by stage classes */
  --bg:var(--canvas);
  --fg:var(--text-primary);
  --fg-2:var(--text-secondary);
  --fg-3:var(--text-tertiary);
  --line:var(--hair);
  --surface:var(--surface-02);
  --border-int:var(--border-int-ink);

  /* type */
  --display:"Schibsted Grotesk",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-display:clamp(2.7rem,6.4vw,5.4rem);
  --fs-h1:clamp(2.25rem,4.8vw,4rem);
  --fs-h2:clamp(1.85rem,3.4vw,3rem);
  --fs-h3:clamp(1.2rem,1.55vw,1.5rem);
  --fs-lede:clamp(1.06rem,1.45vw,1.32rem);
  --fs-body:1.0625rem;
  --fs-sm:1rem;
  --fs-label:.78rem;

  /* rhythm */
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(4.5rem,9.5vw,9rem);
  --max:1240px;
  --max-text:none;

  /* motion */
  --e1:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.65,0,.35,1);
  --t-fast:.28s;
  --t-med:.55s;
  --t-slow:.9s;

  /* elevation, built from stacked light rather than an obvious box shadow */
  --lift-1:inset 0 1px 0 rgba(170,200,245,.07), 0 12px 30px rgba(0,0,0,.34);
  --lift-2:inset 0 1px 0 rgba(178,208,250,.11),
           inset 0 34px 68px rgba(96,140,220,.055),
           0 26px 60px rgba(0,0,0,.46);

  --tshadow:0 1px 2px rgba(5,7,12,.95),0 3px 12px rgba(5,7,12,.78),0 10px 44px rgba(5,7,12,.8);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  /* deliberately NOT scroll-behavior:smooth. On a scroll-scrubbed hero an
     animated anchor jump drags the video through 560vh at speed, which reads
     as the page malfunctioning. Anchor jumps land instantly instead. */
}
body{
  margin:0;
  overflow-x:hidden;
  overflow-x:clip;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* ---------- a11y ---------- */
.sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:1000;
  background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:2px;
  font-family:var(--mono);font-size:var(--fs-sm);
  transition:top var(--t-fast) var(--e1);
}
.skip:focus{top:calc(var(--gut) * .6)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
main:focus{outline:none}

/* =========================================================================
   Environment layer. One place, not stacked sections.
   ========================================================================= */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.09;
  background:
    radial-gradient(64% 48% at 74% 10%,rgba(90,135,220,.55) 0%,rgba(90,135,220,0) 64%),
    radial-gradient(72% 56% at 14% 84%,rgba(70,110,190,.40) 0%,rgba(70,110,190,0) 68%);
  animation:envDrift 96s var(--e2) -22s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:-50%;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);
  background-size:3px 3px;
  opacity:.16;
  animation:envGrain 24s steps(6) -5s infinite;
}
@keyframes envDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.08)}
}
@keyframes envGrain{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-1.5%,1%,0)}
  40%{transform:translate3d(1%,-1.5%,0)}
  60%{transform:translate3d(-1%,-1%,0)}
  80%{transform:translate3d(1.5%,1.5%,0)}
}
body.on-paper .env{opacity:.075}

/* =========================================================================
   Layout primitives
   ========================================================================= */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
main{position:relative;z-index:1;display:block}

.stage-ink{background:var(--canvas);color:var(--text-primary);
  --bg:var(--canvas);--fg:var(--text-primary);--fg-2:var(--text-secondary);
  --fg-3:var(--text-tertiary);
  --line:var(--panel-line);--surface:var(--surface-02);--border-int:var(--border-int-ink)}
.stage-paper{background:var(--paper);color:var(--ink-primary);
  --bg:var(--paper);--fg:var(--ink-primary);--fg-2:var(--ink-secondary);
  --fg-3:var(--text-tertiary);
  --line:var(--paper-line);--surface:var(--paper-panel);--border-int:var(--border-int-paper)}

section{position:relative;padding-block:var(--sec)}
section.tight{padding-block:calc(var(--sec) * .62)}

/* ---------- type ---------- */
.kicker{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;
}
.kicker::before{content:"";width:22px;height:1px;background:var(--hair-2);flex:none}
.kicker.plain{color:var(--fg-2)}
.kicker.plain::before{background:var(--fg-2);opacity:.5}

h1,h2,h3,.h-d{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.03em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);letter-spacing:-.028em}
h3{font-size:var(--fs-h3);font-weight:500;line-height:1.24;letter-spacing:-.016em}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--fg-2);max-width:52ch}
p{max-width:68ch}
p + p{margin-top:1.1em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* one rare editorial device, at most once per page */
.pull{
  font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.22;letter-spacing:-.02em;
  color:var(--fg);max-width:22ch;
}

/* ---------- the marker for facts Andrea has to supply ---------- */
.todo{
  font-family:var(--mono);font-size:.78em;font-weight:500;
  color:var(--accent);background:var(--accent-faint);
  border:1px dashed var(--accent-soft);border-radius:3px;
  padding:.05em .45em;white-space:normal;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-size:var(--fs-sm);font-weight:500;letter-spacing:.005em;
  padding:.92rem 1.5rem;border-radius:3px;border:1px solid transparent;cursor:pointer;
  text-shadow:none;
  transition:background var(--t-fast) var(--e1),color var(--t-fast) var(--e1),
             border-color var(--t-fast) var(--e1),transform var(--t-fast) var(--e1);
}
.btn .arw{transition:transform var(--t-fast) var(--e1)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:#FFF6F4;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border-int)}
.btn-ghost:hover{border-color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1rem}
@media (pointer:coarse){
  .btn{min-height:44px}
}

.tlink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--fg);
  border-bottom:1px solid var(--accent-soft);padding-bottom:.18rem;
  transition:border-color var(--t-fast) var(--e1),color var(--t-fast) var(--e1);
}
.tlink:hover{border-color:var(--accent);color:var(--accent)}
.tlink .arw{transition:transform var(--t-fast) var(--e1)}
.tlink:hover .arw{transform:translateX(3px)}

/* ---------- corner brackets: the secondary motif ---------- */
.framed{position:relative}
.framed::before,.framed::after,
.framed > .fc::before,.framed > .fc::after{
  content:"";position:absolute;width:20px;height:20px;pointer-events:none;
  border-color:var(--accent);border-style:solid;border-width:0;
  opacity:0;transition:opacity var(--t-med) var(--e1) .15s;
}
.framed::before{top:-9px;left:-9px;border-top-width:1px;border-left-width:1px}
.framed::after{bottom:-9px;right:-9px;border-bottom-width:1px;border-right-width:1px}
.framed > .fc::before{top:-9px;right:-9px;border-top-width:1px;border-right-width:1px}
.framed > .fc::after{bottom:-9px;left:-9px;border-bottom-width:1px;border-left-width:1px}
.framed.in::before,.framed.in::after,
.framed.in > .fc::before,.framed.in > .fc::after{opacity:.85}

/* =========================================================================
   Navigation
   ========================================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  transition:background var(--t-med) var(--e1),border-color var(--t-med) var(--e1),
             backdrop-filter var(--t-med) var(--e1);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:color-mix(in srgb,var(--canvas) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--panel-line);
}
body.on-paper .nav.solid{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  border-bottom-color:var(--paper-line);
}
.nav-in{
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.4rem);
  min-height:72px;
}
.brand{display:flex;align-items:baseline;gap:.6rem;flex:none;margin-right:auto}
.brand b{font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-.03em;color:var(--nav-fg,var(--text-primary))}
.brand span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nav-fg-2,var(--text-secondary))}
body.on-paper .brand b{color:var(--ink-primary)}
body.on-paper .brand span{color:var(--ink-secondary)}

.nav-links{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.8rem)}
.nav-links a,.nav-links button.navtop{
  font-size:var(--fs-sm);color:var(--text-secondary);background:none;border:0;padding:.4rem 0;cursor:pointer;
  position:relative;transition:color var(--t-fast) var(--e1);
  display:inline-flex;align-items:center;gap:.35rem;
}
body.on-paper .nav-links a,body.on-paper .nav-links button.navtop{color:var(--ink-secondary)}
.nav-links a:hover,.nav-links button.navtop:hover{color:var(--accent)}
.nav-links a[aria-current="page"]{color:var(--text-primary)}
body.on-paper .nav-links a[aria-current="page"]{color:var(--ink-primary)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);
}

/* services dropdown */
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 14px);left:-1.1rem;min-width:264px;
  background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-fast) var(--e1),transform var(--t-fast) var(--e1),visibility var(--t-fast);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
body.on-paper .sub{background:var(--paper-panel);border-color:var(--paper-line);box-shadow:0 18px 50px rgba(20,16,10,.13)}
.has-sub.open .sub{opacity:1;visibility:visible;transform:translateY(0)}
/* One line per service since the 01/02/03 came out, so the row is a row rather
   than a two-line stack. Same type, same hover, same padding block. */
.sub a{
  display:flex;align-items:center;min-height:2.35rem;
  padding:.62rem .85rem;border-radius:3px;
  transition:background var(--t-fast) var(--e1);
}
.sub a:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.sub a strong{font-weight:500;font-size:var(--fs-sm);color:var(--text-primary)}
body.on-paper .sub a strong{color:var(--ink-primary)}

/* language switcher */
.lang{display:flex;align-items:center;gap:.1rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em}
.lang a,.lang span{padding:.3rem .45rem;border-radius:2px;transition:color var(--t-fast) var(--e1),background var(--t-fast) var(--e1)}
.lang span[aria-current]{color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 10%,transparent)}
body.on-paper .lang span[aria-current]{color:var(--ink-primary);background:color-mix(in srgb,var(--ink-primary) 8%,transparent)}
.lang a{color:var(--text-secondary)}
body.on-paper .lang a{color:var(--ink-secondary)}
.lang a:hover{color:var(--accent)}
.lang i{font-style:normal;opacity:.32;padding-inline:.1rem}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;flex:none}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0;transition:transform var(--t-fast) var(--e1),opacity var(--t-fast) var(--e1)}
.nav.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.menu-open .burger span:nth-child(2){opacity:0}
.nav.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block;color:var(--text-primary)}
  body.on-paper .burger{color:var(--ink-primary)}
  .nav-links{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--canvas);border-bottom:1px solid var(--panel-line);
    padding:1rem var(--gut) 2rem;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity var(--t-fast) var(--e1),transform var(--t-fast) var(--e1),visibility var(--t-fast);
    max-height:calc(100dvh - 72px);overflow-y:auto;
  }
  body.on-paper .nav-links{background:var(--paper);border-bottom-color:var(--paper-line)}
  .nav.menu-open .nav-links{transform:translateY(0);opacity:1;visibility:visible}
  .nav-links > li{border-bottom:1px solid var(--line)}
  .nav-links > li > a,.nav-links > li > button.navtop{padding:1rem 0;font-size:1.05rem;width:100%;justify-content:space-between}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 .8rem;display:none}
  body.on-paper .sub{background:none}
  .has-sub.open .sub{display:block}
  .nav-links .btn{margin-top:1.2rem;width:100%}
  .nav-links .lang{margin-top:1.2rem;justify-content:flex-start}
  .nav-links > li:last-child{border-bottom:0}
}

/* =========================================================================
   HERO: the scroll-scrubbed stage
   ========================================================================= */
.hero{position:relative;height:560vh}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--canvas);
}
.stage .poster,
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.stage .poster{
  background-position:center;background-size:cover;background-repeat:no-repeat;
  background-color:#0A0E14;
}
.stage video{
  opacity:0;transition:opacity .6s var(--e1);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}

/* fallback texture so the hero is composed even with no poster and no video */
.stage .poster::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(226,72,43,.10) 0%,rgba(226,72,43,0) 34%),
    linear-gradient(190deg,#161C27 0%,#0B0F16 58%,#080B11 100%);
}
.stage.has-poster .poster::after{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%);
}
.stage-inert{position:absolute;inset:0}

/* caption bands */
.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;top:50%;transform:translateY(-50%);
  left:var(--gut);width:min(52ch,44vw);
  opacity:0;text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-14% -20% -14% -30%;pointer-events:none;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 42% 50%,
    rgba(5,5,10,var(--peak,.66)) 0%,
    rgba(5,5,10,calc(var(--peak,.66) * .66)) 46%,
    rgba(5,5,10,0) 76%);
}
.band > *{position:relative}
.band .btxt{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,4.1rem);line-height:1.03;letter-spacing:-.035em;
  color:#F7F5F1;
}
.band .btn{text-shadow:none}

/* settle band */
.band-settle{width:min(60ch,52vw)}
.band-settle .btxt{font-size:var(--fs-display)}
.band-settle .bsub{
  margin-top:1.4rem;font-size:var(--fs-lede);line-height:1.5;color:#D6D2CB;max-width:44ch;
  opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0)) * 12px));
}
.band-settle .brow{
  margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.9rem;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0)) * 14px));
}

/* ---- text choreography. transform and opacity only, scrubbed off --k ---- */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc)) * var(--jx,0px)),calc((1 - var(--kc)) * var(--jy,0px)))
            rotate(calc((1 - var(--kc)) * var(--jr,0deg)));
}
/* (i) weave: characters arrive alternating from above and below, echoing
   particles turning on the spot as the field reaches them */
.e-weave .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.4,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * var(--jy,0px)))
            rotate(calc((1 - var(--kc)) * var(--jr,0deg)));
}
/* (b) grid snap-align */
.e-snap .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* (c) blur-to-sharp: two stacked copies, opacity crossfade only */
.e-blur{position:relative}
.e-blur .soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));
}
.e-blur .sharp{opacity:var(--k,0)}
/* (f) drift-down */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (e) word-by-word rise, staged settle */
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}

/* loading ring + scroll cue */
.cue{
  position:absolute;left:50%;bottom:clamp(1.6rem,4vh,2.8rem);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  color:#C9C5BE;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:var(--tshadow);
}
.ring{width:34px;height:34px;color:var(--accent);transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .12s linear}
.chev{width:16px;height:26px;animation:chev 2.6s var(--e2) -.4s infinite}
@keyframes chev{0%,100%{transform:translateY(-3px);opacity:.45}50%{transform:translateY(3px);opacity:1}}

/* static hero, for phones and reduced motion */
.static-hero{display:none;position:relative;min-height:88vh;min-height:88svh;overflow:hidden}
.static-hero .poster{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#0A0E14}
.static-hero .poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(190deg,#161C27 0%,#0B0F16 58%,#080B11 100%);
}
.static-hero.has-poster .poster::after{
  background:linear-gradient(180deg,rgba(8,11,17,.30) 0%,rgba(8,11,17,.78) 62%,rgba(8,11,17,.94) 100%);
}
.static-hero .sh-in{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:88vh;min-height:88svh;padding-block:clamp(6rem,16vh,9rem) clamp(3rem,8vh,5rem);
}
.static-hero h1{font-size:var(--fs-display);color:#F7F5F1;text-shadow:var(--tshadow);max-width:16ch}
.static-hero .lede{margin-top:1.3rem;color:#D6D2CB;text-shadow:var(--tshadow);max-width:40ch}
.static-hero .brow{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.9rem}

/* THE FIVE STATIC-HERO GATES. These five strings are duplicated character for
   character in hero.js. If one changes here it changes there. */
@media (max-width:720px){.hero{display:none}.static-hero{display:block}}
@media (orientation:portrait) and (max-width:1024px){.hero{display:none}.static-hero{display:block}}
@media (orientation:portrait) and (pointer:coarse){.hero{display:none}.static-hero{display:block}}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){.hero{display:none}.static-hero{display:block}}
@media (prefers-reduced-motion:reduce){.hero{display:none}.static-hero{display:block}}

/* scrub-capable but short: keep the scrub, drop the overlays with no room */
@media (max-height:560px){.cue{display:none}}

/* =========================================================================
   Page hero for inner pages
   ========================================================================= */
/* A page opening, not a section. Taller than any content section so the page
   announces itself, and still well under the homepage hero, which is a full
   viewport. The lower value is the phone, where the same air would read as a
   blank screen. */
.phero{padding-block:clamp(8.5rem,19vh,13rem) clamp(3.25rem,6.5vw,6rem);position:relative;overflow:hidden}
.phero h1{max-width:17ch}
.phero .lede{margin-top:1.5rem;max-width:56ch}

/* =========================================================================
   Section layouts. No two neighbours share a skeleton.
   ========================================================================= */

/* 02 credibility: one row of four on hairlines */
.cred{border-block:1px solid var(--line);padding-block:0}
.cred ul{display:grid;grid-template-columns:repeat(4,1fr)}
.cred li{padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1rem,2vw,1.9rem);border-left:1px solid var(--line)}
.cred li:first-child{border-left:0;padding-left:0}
.cred li:last-child{padding-right:0}
.cred b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.45rem);letter-spacing:-.025em;margin-bottom:.5rem}
.cred span{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.5;display:block;max-width:30ch}
@media (max-width:900px){
  .cred ul{grid-template-columns:1fr 1fr}
  .cred li{border-left:0;border-top:1px solid var(--line);padding-inline:0 1rem}
  .cred li:nth-child(-n+2){border-top:0}
  .cred li:nth-child(even){border-left:1px solid var(--line);padding-left:clamp(1rem,4vw,1.9rem)}
}
@media (max-width:560px){
  .cred ul{grid-template-columns:1fr}
  .cred li{border-left:0!important;border-top:1px solid var(--line);padding-inline:0}
  .cred li:first-child{border-top:0}
}

/* 05 method: sticky index, numbered steps */
.met-grid{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.met-side{position:sticky;top:110px}
.met-side .lede{max-width:30ch;margin-top:1.4rem}
@media (max-width:860px){
  .met-grid{grid-template-columns:1fr;gap:2.6rem}
  .met-side{position:static}
}

/* 07 results page: featured cases, then selected client work */
/* both heads are g12 children: they must declare their span like every other
   one, or they collapse into a single 1/12 column. Centred, and capped well
   inside the wrap, so the page reads down its middle rather than off its left. */
.cx-head,.wk-head{grid-column:1 / -1}}

/* 08 case studies: editorial beats */
.case{border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem);margin-top:clamp(2.5rem,5vw,4rem)}
.case:first-of-type{margin-top:0}
.case-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.case-head .tag{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;display:block}
.case-head h3{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.8vw,2.5rem);letter-spacing:-.03em;line-height:1.08;max-width:18ch}
.case-head .lede{font-size:var(--fs-body);max-width:34ch}
.beats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.8rem)}
.beat{border-top:1px solid var(--line);padding-top:1.1rem}
.beat h4{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.beat p{font-size:var(--fs-sm);color:var(--fg-2);max-width:60ch}
.beat.wide{grid-column:1 / -1}
.beat-res{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;margin-top:.3rem}
.beat-res .met{display:flex;flex-direction:column;gap:.25rem}
.beat-res .met i{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.beat-res .met b{font-family:var(--mono);font-weight:500;font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.beat-res .met em{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--accent)}
.beat-res .met.lead b{color:var(--accent)}
@media (max-width:760px){
  .case-head{grid-template-columns:1fr;align-items:start}
  .beats{grid-template-columns:1fr}
}

/* 09 how I work: positive differentiation, numbered, not a comparison table */

/* 10 about: photo and text */
.about-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.portrait{position:relative;border-radius:4px;overflow:hidden;background:var(--surface);aspect-ratio:3/4}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.portrait.ph{display:flex;align-items:center;justify-content:center;border:1px dashed var(--accent-soft)}
.portrait.ph span{font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent);text-align:center;padding:2rem;max-width:26ch}
.about-body h2{max-width:15ch}
.about-body p{margin-top:1.5rem;color:var(--fg-2);font-size:var(--fs-sm)}
.about-body .tlink{margin-top:2rem}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;gap:2.5rem}
  .portrait{max-width:22rem}
}

/* about page: alternating blocks */
.abx{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:clamp(1.2rem,3vw,3rem);
  padding-block:clamp(2rem,4vw,3.2rem);border-top:1px solid var(--line)}
.abx:last-of-type{border-bottom:1px solid var(--line)}
.abx .n{font-family:var(--mono);font-size:var(--fs-sm);color:var(--accent)}
.abx h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:1.1rem}
.abx p{color:var(--fg-2);font-size:var(--fs-sm)}
@media (max-width:700px){.abx{grid-template-columns:1fr;gap:.9rem}}

/* generic list block used on service pages */
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(1.2rem,2.4vw,2.2rem)}
.lgrid li{border-top:1px solid var(--line);padding-top:1.1rem}
.lgrid h3{font-size:var(--fs-h3);margin-bottom:.55rem}
.lgrid p{font-size:var(--fs-sm);color:var(--fg-2);max-width:44ch}
.blk{margin-top:clamp(3rem,6vw,5rem)}
.blk:first-of-type{margin-top:0}
.blk-head{margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.blk-head h2{max-width:18ch}
/* opt-in per block: a one-statement headline that must not break */
.blk-head.is-wide h2{max-width:32ch}
/* ONE EDITORIAL STACK, not two columns set against each other: the headline,
   then the line that supports it, on the same left axis. */
.blk-head.is-stack h2{max-width:26ch}
.blk-head.is-stack .lede{max-width:62ch}
.blk-head .lede{margin-top:1.1rem}
.note{
  font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--accent);
  background:var(--accent-faint);border-left:2px solid var(--accent-soft);
  padding:.7rem .95rem;border-radius:0 3px 3px 0;margin-top:1.2rem;max-width:66ch;
}

/* =========================================================================
   Form
   ========================================================================= */
.cta-sec{position:relative}
.g12 > .cta-grid{grid-column:1 / -1}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.cta-copy h2{max-width:18ch}
.cta-copy .lede{margin-top:1.5rem;max-width:42ch}
.form{display:grid;gap:1.1rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:1px solid var(--border-int);border-radius:3px;
  padding:.85rem 1rem;font-size:var(--fs-sm);color:var(--fg);
  transition:border-color var(--t-fast) var(--e1),background var(--t-fast) var(--e1);
}
.field textarea{min-height:8.5rem;resize:vertical;line-height:1.55}
.field select{
  appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.3rem,calc(100% - .8rem) 1.3rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--canvas);color:var(--text-primary)}
body.on-paper .field select option{background:var(--paper);color:var(--ink-primary)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-2);opacity:.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;background:color-mix(in srgb,var(--accent) 4%,transparent)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--accent)}
.field .msg{font-family:var(--mono);font-size:.74rem;color:var(--accent);min-height:1.1em;opacity:0;transition:opacity var(--t-fast) var(--e1)}
.field.err .msg{opacity:1}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-foot{display:flex;flex-direction:column;gap:1rem;margin-top:.4rem}
.f-priv{font-size:.8rem;color:var(--fg-2);line-height:1.5;max-width:52ch}
.f-priv a{border-bottom:1px solid var(--accent-soft)}
.f-priv a:hover{border-color:var(--accent);color:var(--accent)}
.form button[type=submit]{justify-self:start}
.form.busy button[type=submit]{opacity:.6;pointer-events:none}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr;gap:2.5rem}}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}

.f-state{
  border:1px solid var(--line);border-radius:4px;padding:clamp(1.4rem,3vw,2rem);
  display:none;
}
.f-state.on{display:block}
.f-state b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-.025em;margin-bottom:.6rem}
.f-state p{font-size:var(--fs-sm);color:var(--fg-2)}
.f-state.ok{border-color:var(--accent-soft);background:var(--accent-faint)}
.f-state.ok b{color:var(--accent)}
.form.hidden{display:none}

/* =========================================================================
   Footer. Two areas: brand left, one page list right in three columns.
   Editorial, not boxed. The only rule in the whole component is the hairline
   above the bottom row; vermilion appears on hover and focus and nowhere else.
   ========================================================================= */
.foot{background:var(--canvas);color:var(--text-primary);border-top:1px solid var(--panel-line);padding-block:clamp(3.25rem,6.5vw,5rem) 2rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2.25rem,5vw,4.5rem);align-items:start}
.foot-brand b{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.03em;display:block;margin-bottom:.9rem}
.foot-brand p{font-size:var(--fs-sm);color:var(--text-secondary);max-width:44ch}
.foot-lbl{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:1.35rem}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2.25rem)}
.foot ul{display:grid;gap:.7rem;align-content:start}
.foot li a{font-size:var(--fs-sm);color:var(--text-secondary);transition:color var(--t-fast) var(--e1)}
.foot a:hover{color:var(--accent)}
.foot-bot{
  display:flex;justify-content:space-between;align-items:center;gap:1.25rem;flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--panel-line);
  font-family:var(--mono);font-size:.74rem;color:var(--text-secondary);
}
.foot-util{display:flex;align-items:center;gap:.9rem}
.foot-util > a{color:var(--text-secondary);transition:color var(--t-fast) var(--e1)}
/* Tablet: the brand keeps its own line, the three page columns keep their
   grouping underneath it. */
@media (max-width:940px){
  .foot-grid{grid-template-columns:1fr;gap:clamp(2.25rem,6vw,3rem)}
  .foot-brand p{max-width:56ch}
}
/* Phone: three narrow columns would be unreadable, so the three lists flow as
   one stack. The gap between lists equals the gap inside them, so it reads as a
   single list; the extra padding keeps the tap targets comfortable. */
@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr;gap:.85rem}
  .foot ul{gap:.85rem}
  .foot li a{display:inline-block;padding-block:.2rem}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* =========================================================================
   Entrances. Prefixed with the container class so a later rule cannot kill them.
   ========================================================================= */
.reveal > *{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--e1),transform var(--t-slow) var(--e1)}
.reveal.in > *{opacity:1;transform:none}
.reveal.in > *:nth-child(1){transition-delay:0ms}
.reveal.in > *:nth-child(2){transition-delay:80ms}
.reveal.in > *:nth-child(3){transition-delay:160ms}
.reveal.in > *:nth-child(4){transition-delay:240ms}
.reveal.in > *:nth-child(5){transition-delay:320ms}
.reveal.in > *:nth-child(6){transition-delay:400ms}
.reveal.in > *:nth-child(7){transition-delay:480ms}
.reveal.in > *:nth-child(8){transition-delay:560ms}
.reveal.in > *:nth-child(9){transition-delay:640ms}
/* retire the stagger once the entrance is done, at matching specificity or the
   hover on later siblings lags by the stagger forever */
.reveal.done.in > *:nth-child(n){transition-delay:0ms!important}

.rv{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--e1),transform var(--t-slow) var(--e1)}
.rv.in{opacity:1;transform:none}

/* =========================================================================
   CONTEXTUAL SECTION LINK, 25 August 2026
   One link at the foot of a section, to the page that answers the question the
   section has just raised. It is the site's existing `.tlink`, given the same
   top margin the results invitation uses, on the section's own left axis. No
   box, no list, no "related pages" module: a section earns at most one of
   these, and only where a reader finishing it has a real next question.
   ========================================================================= */
.blk-foot{margin-top:clamp(1.8rem,3vw,2.6rem)}
.blk-foot .tlink{align-self:flex-start}
/* two links share one foot on Chi sono: they are siblings, not a list */
.now-foot{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.4rem) clamp(1.6rem,4vw,3rem)}
/* the Risultati foot follows its centred section */
.blk-foot.is-center{text-align:center;max-width:none}
@media (max-width:640px){.now-foot{flex-direction:column;align-items:flex-start}}

/* =========================================================================
   THE WRITTEN CASE STUDY, 25 August 2026
   The shared architecture for all four cases, established on Nail Care:

     eyebrow -> centred title -> business description
     KPI strip
     punto di partenza -> cosa ho fatto        |  scaling statement -> evidence

   It is an expanded PROOF CARD, not a miniature page. Everything below is
   keyed to `.is-centred` on the header or to the presence of `.cp-start`, so a
   case that is not written yet keeps the original panel untouched and a case
   that gets written inherits this composition with no per-case CSS.
   ========================================================================= */

/* THE NARRATIVE MEASURE, 26 August 2026. ONE value, shared by all four written
   cases and by every block of narrative prose inside the panel: the starting
   point, the six intervention descriptions and the outcome line. It replaced
   FIVE separate `ch` caps — 74ch on the starting point, 46ch on an intervention
   in a two-column body, 64ch in a stacked one, 58ch below 1100px, and 52ch on
   the outcome (see `.cp-scale`) — which is why the same paragraph
   rendered at four different measures depending on which case it was in and how
   wide the window was, and why three of the four cases left roughly 450px of
   empty panel to the right of every line they set.

   It is a CAP, not a width. `100%` wins whenever the panel is narrower than the
   cap, so the narrative widens with the panel up to 55rem and then stops: at
   1440 the panel's content box is 1075px and the narrative sits at 880px, about
   82% of it, which is the intent — substantially more of the width, with
   deliberate breathing room on the right rather than a line running edge to
   edge. From 1024 down the cap stops binding and the narrative simply takes the
   panel's own measure, which is what a phone should do, and no media query is
   needed to say so.

   Change this ONE value and all four cases move together. There is no per-case
   narrative-width override anywhere in this file, and none may be added. */
.cpanel{--cp-narr:min(100%,55rem)}

/* THE HEADER. One centred composition across the panel's full measure. Not
   `text-align:center` bolted onto the old narrow column: the column is gone,
   and each element takes the measure that suits it. */
.cp-hero.is-centred{
  display:block;text-align:center;
  max-width:none;margin-inline:auto;
}
.cp-hero.is-centred .cp-cat{margin-bottom:clamp(.7rem,1.4vw,1rem)}
/* Held to a readable measure so the title resolves into two or three lines and
   never runs the full width of a 1240 wrap as one long ribbon. */
.cp-hero.is-centred h3{
  max-width:48ch;margin-inline:auto;margin-bottom:clamp(.8rem,1.6vw,1.1rem);
  text-wrap:balance;
}
.cp-hero.is-centred .cp-lede{
  max-width:58ch;margin-inline:auto;
}

/* THE KPI STRIP. Its own full-width band under the header, and one of the two
   strongest things on the card. */
.cpanel .cp-kpi.is-band{
  margin-top:clamp(1.8rem,3.2vw,2.6rem);
  padding-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid var(--line);
}

/* DENSITY. A proof card should end when the useful information ends. The seams
   were sized for a composition with a photograph holding a column open; without
   one they left bands of empty ground. Tightened on written cases only. */
.cpanel:has(.cp-start) .cp-body{
  margin-top:clamp(1.5rem,2.6vw,2.1rem);
  padding-top:clamp(1.4rem,2.4vw,1.9rem);
}
.cpanel:has(.cp-start) .cp-in{padding-bottom:clamp(1.6rem,3vw,2.4rem)}

/* The starting point opens the work column: same type as the interventions
   under it, one step quieter, so it reads as the state before rather than as
   the first thing done. */
.cp-start{
  margin-top:clamp(1.5rem,2.6vw,2.1rem);
  padding-top:clamp(1.4rem,2.4vw,1.9rem);
  border-top:1px solid var(--line);
}
/* the band that follows it already carries the seam, so it does not need one */
.cpanel:has(.cp-start) .cp-body{border-top:0}
.cp-start h4{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:.55rem;
}
.cp-start p{font-size:var(--fs-sm);line-height:1.62;color:var(--fg-2);max-width:var(--cp-narr)}

/* The practical reading of the capture, directly above it. Its ROLE is
   unchanged and deliberate — it belongs to the evidence, not to the
   interventions — but its measure is the shared one, 26 August 2026. Its own
   `max-width:52ch` survived the first pass of the widening and left this
   paragraph as the single narrow line in an otherwise wide panel, 510px of text
   with 565px of empty ground beside it, directly under interventions running to
   880px. That is the exact fault the widening was asked to remove, so the last
   `ch` cap in the case system goes with the other four. Nothing about the copy,
   the position or the type changed. */
.cp-scale{
  font-size:var(--fs-sm);line-height:1.6;color:var(--fg-2);
  max-width:var(--cp-narr);margin-bottom:clamp(1rem,2vw,1.4rem);
}

/* EVIDENCE, NOT DECORATION. A light Ads Manager capture on a dark page needs a
   surface or it glares; the panel is the site's own elevated dark tone and the
   border its own hairline. `contain` plus the element's declared ratio means it
   is never stretched, whatever column it lands in. */
.cp-shot img.is-shot{
  background:var(--surface-03);
  border:1px solid var(--hair-2);border-radius:8px;
  padding:clamp(.4rem,1vw,.7rem);
  object-fit:contain;
  /* NEVER UPSCALED. `--nat` is the capture's own pixel width, written inline by
     the build. A screenshot enlarged past its source goes soft exactly where it
     matters — the figures — so it stops at its own size and centres in whatever
     column it lands in. The wide captures are unaffected: they are already
     wider than any column here. */
  max-width:min(100%, var(--nat, 100%));
  margin-inline:auto;
}

/* COMPOSITION. With the header centred and full width, the two columns below
   carry narrative on the left and proof on the right. The evidence column takes
   the wider track: the capture is the thing a reader checks, and the
   interventions are one-liners that read comfortably narrow. */
/* Desktop only. Below 1101 the panel body is already a single column and this
   must not outrank that: an unscoped override held two tracks at 390 and
   squeezed the capture to 154px, which is not evidence any more. */
@media (min-width:1101px){
  /* `:not(.is-stacked)` matters: a case whose capture needs the panel's full
     measure sets that class in the build, and this rule outranks it on
     specificity alone. Without the guard Golf kept two columns and its capture
     rendered at 0.35 of its own pixels. */
  /* THE NARRATIVE TAKES THE WIDER TRACK, 26 August 2026. It was 5.5fr / 6.5fr,
     which put the prose — the only thing on the card that wraps, and therefore
     the only thing driving the panel's height — in the NARROWER of the two
     columns, and handed the surplus to a capture that is a fixed number of
     pixels and gains nothing from the room. Reversed. Nail Care is the only
     case this reaches today: its capture is 656px of source and now renders at
     468px rather than 553px, 71% of its own size and comfortably above the 60%
     floor documented below, while its interventions gained 19% of measure. This
     is the shared rule for any written case whose capture does not need the
     full panel, not a rule about Nail Care.

     The `max-width:46ch` that used to sit here is GONE: the paragraph now takes
     the track it is given, bounded only by the shared `--cp-narr`. */
  .cpanel:has(.cp-start) .cp-body:not(.is-stacked){
    grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr);
  }
}

@media (max-width:900px){
  .cp-hero.is-centred h3{max-width:none}
  .cp-hero.is-centred .cp-lede{max-width:none}
}
@media (max-width:620px){
  /* a centred display headline on a phone reads as a poster, not as a case */
  .cp-hero.is-centred{text-align:left}
  .cp-hero.is-centred h3,.cp-hero.is-centred .cp-lede{margin-inline:0}
}

/* =========================================================================
   Draft banner. Removed at deploy.
   ========================================================================= */
.draft{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--accent);color:#FFF6F4;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  padding:.5rem var(--gut);text-align:center;
}
body.has-draft{padding-bottom:2.2rem}

/* =========================================================================
   Reduced motion. Honoured completely, and live in both directions.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .reveal > *,.rv{opacity:1!important;transform:none!important}
  .framed::before,.framed::after,.framed > .fc::before,.framed > .fc::after{opacity:.85!important}
  .env{animation:none}
  .env::after{animation:none}
  .mark{--hk:1}
  .hold-rail::after{width:100%}
  .hold-done{opacity:1}
  .band{opacity:1}
  .c,.w{opacity:1!important;transform:none!important}
  .e-blur .soft{opacity:0!important}
  .e-blur .sharp{opacity:1!important}
  .chev{animation:none}
}

/* narrow screens: a CTA row of two differently sized buttons reads as untidy.
   Match them to the column instead. */
@media (max-width:560px){
  .brow{flex-direction:column;align-items:stretch}
  .brow .btn{width:100%}
}

/* pinned states, applied by JS when reduced motion flips on mid-session */
body.pinned .reveal > *,body.pinned .rv{opacity:1!important;transform:none!important;transition:none!important}
body.pinned .framed::before,body.pinned .framed::after,
body.pinned .framed > .fc::before,body.pinned .framed > .fc::after{opacity:.85!important}
body.pinned .mark{--hk:1}
body.pinned .hold-rail::after{width:100%}
body.pinned .hold-done{opacity:1}

/* pause every animation off-tab. animation-play-state does not inherit, so it
   has to reach elements and pseudo-elements directly. */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Reduced motion: the disclosure still works, it simply arrives instantly. The
   information is never animation-dependent, and the group is reachable by
   hover, focus and tap exactly as before. */
@media (prefers-reduced-motion:reduce){
  .sct.has-more .sct-body,.sct.has-more .proof-b{transition:none}
}

/* =========================================================================
   CONCEPT 2 — HOMEPAGE
   Three acts: INK (hero, credibility, services) / PAPER (method, results) /
   INK (about, contact). Grid and type are constant across stages; only the
   depth language changes. Everything here is scoped to body.home so the
   internal pages are untouched.
   ========================================================================= */

/* ---- opt-in 12 column grid. `.wrap` is deliberately NOT converted, so the
        13 internal pages keep their current container behaviour. ---- */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,1.75rem)}
@media (max-width:900px){.g12{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){.g12{grid-template-columns:minmax(0,1fr)}}

/* ---- display weight: 500 primary, homepage only ---- */
body.home h1,body.home h2{font-weight:500}
body.home .stage-ink h1,body.home .stage-ink h2{letter-spacing:-.038em}
body.home .stage-paper h2{letter-spacing:-.033em}

/* ---- depth dialects. Ink gets ambient light, paper gets a flat surface. ---- */
.stage-ink .surface{
  background:var(--panel);border:0;
  box-shadow:inset 0 1px 0 rgba(244,242,237,.06),
             inset 0 28px 56px rgba(120,150,200,.035),
             0 18px 40px rgba(0,0,0,.34);
}
.stage-paper .surface{background:var(--paper-panel);border:1px solid var(--paper-line);box-shadow:none}

/* ---- structural vertical rules. Ink acts only. ---- */
.rules{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(to right,
    transparent 0,transparent calc(100% / 6 - 1px),
    rgba(244,242,237,.04) calc(100% / 6 - 1px),rgba(244,242,237,.04) calc(100% / 6));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}

/* =============================== 1. HERO =============================== */
.chero{
  position:relative;overflow:hidden;
  /* The hero reserves the credibility strip's height, not the navigation's.
     It used to reserve 4.75rem, which put the strip 76px into a 129px band:
     the four mono labels were cut through and Marketing Pro, Paid Social,
     Ad spend gestito and Italia · EMEA · USA were not on the screen at all.
     Reserving the band instead lands its last line on the bottom edge, so the
     promise, the portrait, the buttons and the four proof signals resolve as
     one first screen. The room comes out of the hero's own slack — the copy
     block sat in 824px with ~72px unused above and below it — and not out of
     the headline, the buttons or the measure, which are what the hero is for. */
  --proof-h:8.4rem;
  /* The frame hangs from here. Raised on 27 August: at .5-2rem the bright
     studio backdrop began immediately under the navigation and the subject
     read as pinned to the menu. Lower, he centres better against the whole
     left-hand block. The height formula below subtracts this, so the frame
     still finishes on the hero's floor and no gap opens underneath. */
  --ph-top:clamp(1.25rem,5.5vh,3.5rem);
  min-height:calc(100vh - var(--proof-h));
  min-height:calc(100svh - var(--proof-h));
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(7rem,14vh,9.5rem) clamp(2rem,5vh,3rem);
}
.chero-halo{
  position:absolute;left:-8%;top:4%;width:78%;height:78%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 32% 42%,rgba(198,214,240,.06),transparent 64%);
}
.chero .wrap{position:relative;z-index:1;width:100%}
/* cols 1-8 carry the proposition, as before. What changed on 27 August is the
   headline's own cap: at 15ch it stopped 66px short of its column at 1280 and
   produced
   a narrower stack than the column had room for. The cap is now generous enough
   that `text-wrap: balance` decides the break instead of the cap, and balance is
   what removes the orphan a raw wider wrap produces: "Paid Social, progettato /
   come un sistema di / crescita." strands the last word on a line of its own.
   Font size is untouched at every width.
   THE SPAN STAYS AT 8 COLUMNS. Widening it to 9 was tried and reverted the same
   day: Italian balanced to three lines and stayed clear, but ENGLISH is shorter,
   balanced to two, filled the wider box and ran its ink to 1003px at 1440 while
   the portrait's field turns opaque at 947. The cap is the safe lever here; the
   span is not.
   THE WIDER CAP IS SCOPED TO >=901px, and the 15ch base below it is not a
   leftover - it is load-bearing. Between 561 and 900 the portrait is still
   beside the headline but has moved left (its box starts at x=443 at 820), so
   26ch there ran Italian ink to 695px and English to 622px straight across it.
   Both languages, both caps, every width are measured in the 27 August notes. */
.chero-main{grid-column:1 / 9}
.chero h1{font-size:clamp(2.5rem,5.9vw,5.1rem);line-height:1.03;max-width:15ch}
/* Balance is scoped to the widths where the portrait shares the row. Above 900
   it holds the composition at "Paid Social, / progettato come un / sistema di
   crescita." and, critically, stops the wider cap from stranding "crescita." on
   a line of its own. Below 900 the frame drops to the foot of the hero and the
   headline has the full width, where balance re-broke it as "un sistema / di
   crescita." and split the phrase; mobile wraps naturally instead. */
@media (min-width:901px){ .chero h1{max-width:26ch;text-wrap:balance} }
.chero .lede{margin-top:clamp(1.2rem,2vw,1.7rem);max-width:46ch;font-size:var(--fs-lede)}
.chero .brow{margin-top:clamp(1.9rem,3vw,2.6rem);display:flex;gap:.9rem;flex-wrap:wrap}
/* Build / Run / Scale, demoted to a quiet baseline row at the foot of the viewport */
.chero-foot{
  position:relative;z-index:1;width:100%;
  margin-top:clamp(3rem,8vh,5.5rem);
}
.chero-foot ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2.2rem);
  grid-column:1 / 9}
.chero-foot li{
  font-family:var(--mono);font-size:.76rem;line-height:1.45;color:var(--text-secondary);
  border-top:1px solid var(--panel-line);padding-top:.8rem;
}
@media (max-width:900px){
  .chero-main{grid-column:1 / -1}
  .chero-foot ul{grid-column:1 / -1}
}
@media (max-width:560px){
  .chero{min-height:auto;padding-block:clamp(6.5rem,18vh,8rem) clamp(2.5rem,6vh,3.5rem)}
  .chero-foot ul{grid-template-columns:1fr;gap:0}
  .chero-foot li{padding-block:.75rem}
}

/* THE STACKED HERO ORDER, 30 August 2026.
   Below 620 the portrait leaves its absolute box and joins the flow, and it
   used to land AFTER the buttons: H1, lede, buttons, portrait. The approved
   mobile hierarchy is H1, lede, PORTRAIT, then the two calls to action.

   `.chero` is already a column flex container, but the portrait is a sibling
   of `.wrap` while the buttons sit two levels inside it, so `order` alone
   cannot interleave them. `display:contents` on the two wrappers drops their
   boxes and promotes h1, .lede and .brow to flex items of `.chero` itself,
   which is what makes them orderable against the portrait.

   Two things the wrappers were carrying have to be replaced, and both are
   load-bearing:
     - `.wrap` supplied the page gutter. THE GUTTER GOES ON `.chero`, NOT ON
       THE CHILDREN, and that is not a stylistic preference. Padding the h1
       directly costs it 2x--gut of CONTENT width while `max-width:15ch` still
       caps its BORDER box, which pushed the Italian headline from three lines
       to four at 390 and 620 and the English from two to three at 620. Putting
       the padding on the flex container instead leaves every child a
       padding-free box of exactly the width `.wrap` used to give it, so all
       three measures and their line counts are identical to before.
     - `.chero .wrap` carried `z-index`, which kept the copy above the three
       absolutely positioned atmosphere layers (`.chero-field`, `.chero-halo`,
       `.chero-flow`, all z-index:0). A positioned z-index:0 element paints
       above non-positioned in-flow content, so without this the gradients
       would wash over the headline.
   The absolutely positioned layers are unaffected by the new padding: an
   absolute child resolves against its ancestor's PADDING box, which padding
   does not shrink, so `.chero-field`, `.chero-halo`, `.chero-flow` and
   `.chero-cue` all keep the full width they had.
   The entrance animation is untouched: `.reveal > *` targets the CHILDREN of
   `.chero-main`, and `display:contents` changes layout only, not the DOM, so
   both the selector and its nth-child stagger still resolve exactly as before.
   Scoped to 620 because that is precisely where the portrait enters the flow;
   above it the hero is still a two-column composition and must not stack. */
@media (max-width:620px){
  .chero{padding-inline:var(--gut)}
  .chero .wrap,.chero-main{display:contents}
  .chero h1,.chero .lede,.chero .brow{position:relative;z-index:2}
  .chero h1{order:1}
  .chero .lede{order:2}
  .chero-photo{order:3}
  .chero .brow{order:4}
}

/* ========================== 2. CREDIBILITY ============================= */
/* compact metadata band, continuous with the hero rather than a section */
body.home .cred{border-top:0;border-bottom:1px solid var(--panel-line)}
body.home .cred ul{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
body.home .cred li{padding-block:clamp(1.3rem,2.4vw,1.9rem)}
body.home .cred b{
  font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-primary);margin-bottom:.45rem;
}
body.home .cred span{font-size:.86rem;max-width:26ch}
@media (max-width:900px){
  body.home .cred ul{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body.home .cred ul{grid-template-columns:1fr}
}

/* ============================ 3. SERVICES ============================== */
.svcx-sec{position:relative;overflow:hidden}
.svcx-head{grid-column:1 / 8;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.svcx-head h2{max-width:15ch}
.svcx{grid-column:1 / -1;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.svcx-panel{
  position:relative;display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(1.7rem,2.5vw,2.5rem);border-radius:6px;
  min-height:clamp(22rem,32vw,28rem);
  color:var(--text-secondary);
  transition:transform .38s var(--e1),opacity .38s var(--e1),
             box-shadow .38s var(--e1),color .38s var(--e1);
}
.svcx-panel .n{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--accent)}
.svcx-panel h3{color:var(--text-primary);font-size:clamp(1.2rem,1.7vw,1.5rem);margin-top:.15rem;
  transition:color .38s var(--e1)}
.svcx-panel p{font-size:var(--fs-sm);flex:1;max-width:34ch}
.svcx-panel .tlink{align-self:flex-start;margin-top:.3rem}
/* back / front hierarchy */
.svcx-panel.back{z-index:1;transform:scale(.962) translateY(20px);opacity:.86}
.svcx-panel.front{z-index:3;transform:none;opacity:1;color:var(--text-primary)}
/* the overlapped edge gets its padding back, or the back panels' copy runs
   underneath the front one */
.svcx-panel.l{margin-right:-44px;padding-right:calc(clamp(1.7rem,2.5vw,2.5rem) + 58px)}
.svcx-panel.r{margin-left:-44px;padding-left:calc(clamp(1.7rem,2.5vw,2.5rem) + 58px)}
/* once a back panel is raised it no longer needs the clearance */
.svcx-panel.l:hover,.svcx-panel.l:focus-within{padding-right:clamp(1.7rem,2.5vw,2.5rem)}
.svcx-panel.r:hover,.svcx-panel.r:focus-within{padding-left:clamp(1.7rem,2.5vw,2.5rem)}
.svcx-panel{transition:transform .38s var(--e1),opacity .38s var(--e1),
            box-shadow .38s var(--e1),color .38s var(--e1),padding .38s var(--e1)}
/* focus brings a back panel forward; the front one yields */
.svcx-panel.back:hover,.svcx-panel.back:focus-within{
  z-index:4;transform:none;opacity:1;color:var(--text-primary);
}
.svcx-panel.back:hover h3,.svcx-panel.back:focus-within h3{color:var(--text-primary)}
.svcx:has(.svcx-panel.back:hover) .svcx-panel.front,
.svcx:has(.svcx-panel.back:focus-within) .svcx-panel.front{
  transform:scale(.976);opacity:.8;
}
/* mobile: a deliberate index, not three stacked cards */
@media (max-width:900px){
  .svcx-head{grid-column:1 / -1}
  .svcx{grid-template-columns:1fr}
  .svcx-panel{
    margin:0!important;transform:none!important;opacity:1!important;
    padding-left:0!important;padding-right:0!important;
    min-height:0;border-radius:0;padding:clamp(1.4rem,5vw,1.9rem) 0;
    background:none!important;box-shadow:none!important;
    border-top:1px solid var(--panel-line);color:var(--text-secondary);
    flex-direction:column;gap:.6rem;
  }
  .svcx-panel:last-child{border-bottom:1px solid var(--panel-line)}
  .svcx-panel h3{color:var(--text-primary)}
  .svcx-panel p{max-width:46ch}
  .svcx-panel.front{
    padding-block:clamp(1.9rem,6.5vw,2.6rem);
    padding-left:clamp(1rem,4vw,1.4rem)!important;
    border-left:2px solid var(--accent);
  }
  .svcx-panel.front h3{font-size:clamp(1.4rem,5.4vw,1.75rem)}
}

/* ---- the entrance, 25 August 2026 ----
   The three panels arrive as one composition instead of appearing already
   arranged: Audit Meta from the left, Supporto Agenzie from the right, and the
   front panel by scale alone, because it is already where it belongs and only
   has to resolve. Same idiom as the three situations on Supporto Agenzie.

   Everything is declared on the OUT state, never on `.in`. That is the whole
   trick: when the observer adds `.in` these rules simply stop matching, each
   panel falls back to the resting transform it already had, and the panel's own
   transition carries it there. Nothing here restates a resting value that lives
   above, and the raise-on-hover rules are untouched, because no rule in this
   block ever applies once the entrance has run.

   The stagger comes from the shared `.reveal.in > *:nth-child()` delays, so the
   order is 0 / 80 / 160ms and the composition resolves inside 800ms. The
   entrance is given a slower duration than the hover it shares a transition
   with, retired the moment the observer marks the block `done`.

   Nothing is marked important, so the two global pins outrank all of it:
   `prefers-reduced-motion` and `body.pinned` show the three panels in place,
   with no spatial movement, exactly as before this block existed. Below 900 the
   panels are a plain index and the mobile block pins them with `!important`;
   a horizontal entrance there would be a different composition, not this one. */
/* Each start state restates the panel's OWN resting transform, from the depth
   block further down the sheet — `scale(.945) translateY(26px)` behind,
   `scale(1.03) translateY(-10px)` in front — and adds nothing but the entrance
   delta to it. That is what keeps the movement to the one axis each panel was
   given: 28px of pure horizontal travel for the two behind, and for the front
   panel a scale of .978 against its resting 1.03, which is a 5% growth and no
   drift at all. Anything less exact and a card would quietly slide or shrink on
   arrival along an axis nobody asked for. */
.svcx.reveal:not(.in) > .svcx-panel{opacity:0}
/* THE COMPOSITION ASSEMBLES ITSELF. The two lateral cards converge inward and
   the centre one emerges through a scale-up, on the section's existing reveal
   observer. Travel widened and the centre's scale deepened on 26 August 2026:
   at 28px and .978 the movement read as a plain fade. Still short — a
   composition settling, not three cards flying in. */
.svcx.reveal:not(.in) > .svcx-panel.l{transform:translateX(-42px) scale(.945) translateY(26px)}
.svcx.reveal:not(.in) > .svcx-panel.r{transform:translateX(42px) scale(.945) translateY(26px)}
.svcx.reveal:not(.in) > .svcx-panel.front{transform:scale(.94) translateY(-10px)}
.svcx.reveal.in:not(.done) > .svcx-panel{transition-duration:.62s}

/* ============================= 4. METHOD =============================== */
.prog-head{grid-column:1 / 7}
/* the method headline is one statement and holds one line on a desktop */
.prog-head h2{max-width:none}
.prog-meta{grid-column:9 / -1;align-self:end;font-size:var(--fs-sm);color:var(--fg-2);max-width:34ch}
.prog-wrap{grid-column:1 / -1;position:relative;margin-top:clamp(2.4rem,4.5vw,3.6rem)}
.prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.1rem,2.4vw,2.3rem);position:relative}
/* one continuous hairline; the indices sit in gaps punched through it */
.prog-rule{
  position:absolute;left:0;right:0;top:.58rem;height:1px;background:var(--line);
  transform-origin:left;transform:scaleX(var(--draw,0));
  transition:transform 1.05s var(--e1);
}
.prog li{position:relative;padding-top:2rem}
.prog .n{
  position:absolute;top:0;left:0;line-height:1.2;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--accent);
  background:var(--bg);padding-right:.75rem;
}
.prog h3{font-size:clamp(1.05rem,1.5vw,1.3rem);margin-bottom:.5rem}
.prog p{font-size:var(--fs-sm);color:var(--fg-2);max-width:32ch}
@media (max-width:900px){
  .prog-head,.prog-meta{grid-column:1 / -1}
  .prog-meta{margin-top:1rem}
  .prog{grid-template-columns:1fr;gap:0}
  .prog-rule{left:.42rem;right:auto;top:0;bottom:0;width:1px;height:auto;
    transform-origin:top;transform:scaleY(var(--draw,0))}
  .prog li{padding:1.15rem 0 1.15rem 2.1rem}
  .prog .n{top:1.2rem;background:var(--bg);padding:0 .55rem 0 0}
  .prog p{max-width:46ch}
}

/* ============================ 5. RESULTS =============================== */
.evid-head{grid-column:1 / -1}
.evid-head h2{max-width:34ch}
.evid-head .lede{max-width:58ch}
.evid{grid-column:1 / -1;margin-top:clamp(2rem,3.6vw,3rem)}
.evid li{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,2fr);
  gap:clamp(1rem,2.4vw,2.4rem);align-items:baseline;
  padding-block:clamp(1.3rem,2.3vw,1.9rem);border-top:1px solid var(--line);
}
.evid li:last-child{border-bottom:1px solid var(--line)}
.evid .cat{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.evid .who{font-family:var(--display);font-weight:500;font-size:clamp(1rem,1.4vw,1.2rem);
  letter-spacing:-.02em;color:var(--fg)}
.evid .mets{display:flex;gap:clamp(1.1rem,2.6vw,2.6rem);flex-wrap:wrap}
.evid .met{display:flex;flex-direction:column;gap:.2rem}
.evid .met i{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2)}
.evid .met b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(1.15rem,1.9vw,1.55rem);letter-spacing:-.025em;color:var(--fg)}
.evid .meta{font-family:var(--mono);font-size:.76rem;color:var(--fg-2);text-align:right}
/* centred on the strip it closes, 25 August 2026: the link is the section's
   own last word, not a left-hung caption on a full-width object. Same component
   and same rule, only the axis changes. */
.evid-foot{grid-column:1 / -1;margin-top:clamp(1.8rem,3vw,2.6rem);text-align:center}
@media (max-width:900px){
  .evid-head{grid-column:1 / -1}
  .evid li{grid-template-columns:1fr;gap:.9rem}
  .evid .meta{text-align:left}
}

/* ========================= 6. ABOUT / WHY ============================== */
/* The portrait that used to hold columns 1-5 here is gone: the homepage carries
   one photograph, in the hero, and a second printing of the same face four
   screens later was repetition rather than composition. Rather than leave the
   half it vacated empty, the block takes the whole measure and splits the way
   every other heading on the site does — label and headline left, the reading
   and its link right — so the section reads as intended and not as a layout
   with a hole in it.
   27 August: the split moved from 6/6 to 7/5. At 6 columns the headline had a
   566px area but a 15ch cap that used only 444px of it, so it stacked to five
   lines and stranded `account` alone on the fourth. The cap is gone - the column
   IS the measure now - and `text-wrap: balance` picks the breaks, which brings
   it to three lines. The reading keeps ~56 characters a line at 467px, still
   inside a comfortable measure, and the section grows 28px. Do not chase the
   exact break after `Pessot.`: that line needs 736px, which costs an eighth
   column, drops the reading to 368px and re-strands the last word. */
.abt-body{
  grid-column:1 / -1;align-self:start;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1rem,2vw,1.75rem);
}
.abt-body > .kicker{grid-column:1 / 8;grid-row:1}
/* the headline spans the rows the reading occupies, or it would stretch the
   first of them and open a hole between the two paragraphs beside it */
.abt-body > h2{grid-column:1 / 8;grid-row:2 / span 3;align-self:start;max-width:none;
  text-wrap:balance;margin-bottom:0}
.abt-body > p:not(.kicker){grid-column:8 / -1;max-width:52ch}
/* SCOPED TO >=901px ON 30 AUGUST 2026, and the scope is the whole fix.
   These two rows pin the reading beside the headline in the desktop 7/5
   composition. Unscoped they carry specificity (0,3,1), which beats the
   single-column reset below at (0,2,1), so below 901 the paragraphs stayed
   pinned to rows 2 and 3 while the headline - correctly reset to `auto` -
   was auto-placed after them. The rendered order was kicker, p1, p2, H2,
   link, on BOTH language homepages. The DOM order was always correct, so
   this is a placement fix and nothing else: no markup moved, no copy
   changed, and the desktop composition above 900 is byte-identical. */
@media (min-width:901px){
  .abt-body > p:not(.kicker):nth-of-type(2){grid-row:2}
  .abt-body > p:not(.kicker):nth-of-type(3){grid-row:3}
}
.abt-body > .tlink{grid-column:8 / -1;grid-row:4;justify-self:center;margin-top:1.8rem}
.abt-body p{font-size:var(--fs-sm);color:var(--fg-2)}
@media (max-width:900px){
  .abt-body{grid-template-columns:minmax(0,1fr)}
  .abt-body > .kicker,.abt-body > h2,
  .abt-body > p:not(.kicker),.abt-body > .tlink{grid-column:1;grid-row:auto}
  .abt-body > h2{max-width:17ch;margin-bottom:1.3rem}
}

/* ============================ 7. CONTACT =============================== */
/* offset composition, homepage only. Internal pages keep the existing form layout. */
body.home .cta-grid{grid-column:3 / 11;display:block}
body.home .cta-copy{margin-bottom:clamp(2.2rem,4vw,3.2rem)}
body.home .cta-copy h2{max-width:18ch}
body.home .cta-copy .lede{max-width:52ch}
@media (max-width:1100px){body.home .cta-grid{grid-column:2 / 12}}
@media (max-width:900px){body.home .cta-grid{grid-column:1 / -1}}

/* ---- reduced motion / pinned final states for the new primitives ---- */
@media (prefers-reduced-motion:reduce){
  .prog-rule{transform:scaleX(1)!important}
  .svcx-panel{transition:none}
}
body.pinned .prog-rule{transform:scaleX(1)!important}
body.pinned
@media (max-width:900px){
  @media (prefers-reduced-motion:reduce){.prog-rule{transform:scaleY(1)!important}}
  body.pinned .prog-rule{transform:scaleY(1)!important}
}

/* =========================================================================
   ART DIRECTION PASS — dark first, cool, material
   Supersedes the INK/PAPER alternation. Section rhythm now comes from a small
   family of dark values, hairlines, spacing and typography.
   ========================================================================= */

/* ---- the grid is felt, not seen ---- */
.rules{
  background-image:repeating-linear-gradient(to right,
    transparent 0,transparent calc(100% / 6 - 1px),
    rgba(150,185,240,.028) calc(100% / 6 - 1px),rgba(150,185,240,.028) calc(100% / 6));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
}
/* structural rules earn their place in the hero only */
.svcx-sec > .rules{display:none}

/* ---- homepage tone rhythm. Every section dark, none the same dark. ---- */
body.home .chero{background:var(--canvas)}
body.home .cred{background:var(--canvas)}
body.home .svcx-sec{background:var(--surface-01)}
/* Named, not counted. The homepage narrative was reordered on 22 August —
   person before offer — and these rules had been reaching the method and the
   results band by their position in the document, which quietly moved. */
body.home .abt-sec{background:var(--canvas)}
body.home .prog-sec{background:var(--canvas)}                            /* method dips back */
body.home .evid-sec{background:var(--surface-02);border-top:1px solid var(--hair)}
body.home .cta-sec{background:var(--surface-01)}

/* =============================== HERO ================================== */
.chero-halo{
  left:-14%;top:-6%;width:88%;height:92%;
  background:
    radial-gradient(ellipse 58% 52% at 34% 40%,var(--glow),transparent 66%),
    radial-gradient(ellipse 40% 34% at 22% 74%,var(--glow-2),transparent 70%);
}
.chero h1{color:var(--text-primary)}
.chero .lede{color:var(--text-secondary)}
/* Build / Run / Scale, integrated rather than tabulated */
.chero-foot li{
  border-top:1px solid var(--hair);
  color:var(--text-tertiary);
  transition:color var(--t-med) var(--e1);
}
.chero-foot li:first-child{color:var(--text-secondary)}

/* ============================ CREDIBILITY ============================== */
/* system metadata, not a four cell stats strip */
body.home .cred{border-bottom:1px solid var(--hair)}
body.home .cred li{
  border-left:0!important;border-top:0!important;
  padding-left:0;padding-right:clamp(1.2rem,3vw,2.6rem);
}
body.home .cred b{color:var(--text-secondary);letter-spacing:.1em}
body.home .cred span{color:var(--text-tertiary)}
body.home .cred li:first-child b{color:var(--text-primary)}

/* ============================= SERVICES ================================ */
/* three layered editorial objects in one environment */
.svcx-panel{border-radius:8px}
.svcx-panel.back{
  background:var(--surface-02);
  box-shadow:var(--lift-1);
  transform:scale(.945) translateY(26px);
  opacity:.92;
}
.svcx-panel.front{
  background:linear-gradient(178deg,var(--surface-03) 0%,#141A27 100%);
  box-shadow:var(--lift-2);
  transform:scale(1.03) translateY(-10px);
  z-index:3;
}
.svcx-panel.back:hover,.svcx-panel.back:focus-within{
  background:linear-gradient(178deg,var(--surface-03) 0%,#141A27 100%);
  box-shadow:var(--lift-2);
  transform:scale(1.03) translateY(-10px);
}
.svcx:has(.svcx-panel.back:hover) .svcx-panel.front,
.svcx:has(.svcx-panel.back:focus-within) .svcx-panel.front{
  transform:scale(.945) translateY(26px);opacity:.92;
  background:var(--surface-02);box-shadow:var(--lift-1);
}
/* indices are metadata, not accents */
.svcx-panel .n{color:var(--text-tertiary);transition:color var(--t-med) var(--e1)}
.svcx-panel.front .n{color:var(--text-secondary)}
.svcx-panel h3{color:var(--text-secondary)}
.svcx-panel.front h3{color:var(--text-primary)}
.svcx-panel.back:hover h3,.svcx-panel.back:focus-within h3{color:var(--text-primary)}
.svcx-panel p{color:var(--text-tertiary)}
.svcx-panel.front p,.svcx-panel.back:hover p,.svcx-panel.back:focus-within p{color:var(--text-secondary)}
@media (max-width:900px){
  .svcx-panel.back,.svcx-panel.front{
    background:none!important;box-shadow:none!important;transform:none!important;
    border-radius:0;
  }
  .svcx-panel{border-top-color:var(--hair)}
  .svcx-panel.front{
    background:linear-gradient(180deg,var(--surface-02),transparent)!important;
    border-left-color:var(--accent);
  }
}

/* ============================== METHOD ================================= */
/* a decision framework, not four columns of text */
.prog .n{
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;
  font-weight:400;color:var(--text-tertiary);
  background:var(--bg);padding-right:1rem;
}
.prog li{padding-top:3.1rem}
.prog-rule{top:1.55rem;background:var(--hair-2)}
.prog h3{color:var(--text-primary)}
.prog p{color:var(--text-tertiary)}
.prog-meta{color:var(--text-tertiary)}
@media (max-width:900px){
  .prog .n{top:1.05rem;padding:0 .7rem 0 0}
  .prog li{padding:1.4rem 0 1.4rem 3rem}
  .prog-rule{left:.9rem}
}

/* ============================== RESULTS ================================ */
/* evidence, not a dashboard. Scale carries the metric; vermilion is held back
   so four simultaneous accents never appear at rest. */
.evid li{border-top-color:var(--hair);transition:background var(--t-med) var(--e1)}
.evid li:last-child{border-bottom-color:var(--hair)}
.evid .cat{color:var(--text-tertiary)}
.evid .who{color:var(--text-primary)}
.evid .met i{color:var(--text-tertiary)}
.evid .met b{color:var(--text-secondary)}
/* NO HERO METRIC AND NO KPI HOVER, 26 August 2026. One enlarged value per row
   read as arbitrary once the four rows emphasised four different kinds of KPI —
   ROAS, revenue, ROAS, cost per lead — and the vermilion on hover made a
   reporting table behave like a highlight reel. Every value in this strip is
   now set identically; the hierarchy is account, then labels, then values, and
   it is carried by spacing and by the label treatment, not by scale.
   The row still lifts very slightly under pointer and focus, because that is
   navigation feedback on a row, not emphasis on a figure. */
.evid li:focus-within{background:linear-gradient(90deg,rgba(184,205,235,.028),transparent 72%)}
@media (hover:hover) and (pointer:fine){
  .evid li:hover{background:linear-gradient(90deg,rgba(184,205,235,.028),transparent 72%)}
}
.evid .meta{color:var(--text-tertiary)}

/* =============================== ABOUT ================================= */
.abt-body h2{color:var(--text-primary)}
.abt-body p{color:var(--text-secondary)}
.portrait{background:var(--surface-02);box-shadow:var(--lift-1);border-radius:8px}
.portrait.ph{border-color:var(--hair-2)}
.portrait.ph span{color:var(--text-tertiary)}

/* ============================== CONTACT ================================ */
/* the quietest state on the page */
body.home .cta-sec .rules{display:none}
.field label{color:var(--text-secondary)}
.field input,.field select,.field textarea{
  background:var(--surface-02);
  border-color:var(--hair-2);
  color:var(--text-primary);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-tertiary);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);
  background:var(--surface-03);
  box-shadow:0 0 0 3px rgba(226,72,43,.10);
}
.field select option{background:#121825;color:var(--text-primary)}
.f-state{border-color:var(--hair-2);background:var(--surface-01)}
.f-priv{color:var(--text-tertiary)}

/* ========================= NAV / FOOTER ================================ */
.nav.solid{background:color-mix(in srgb,var(--canvas) 82%,transparent);border-bottom-color:var(--hair)}
body.on-paper .nav.solid{background:color-mix(in srgb,var(--canvas) 82%,transparent);border-bottom-color:var(--hair)}
.sub,body.on-paper .sub{background:var(--surface-03);border-color:var(--hair-2);box-shadow:var(--lift-2)}
.foot{background:var(--canvas);border-top-color:var(--hair)}
.foot-bot{border-top-color:var(--hair)}
.btn-ghost{border-color:var(--border-int-ink)}
.tlink{border-bottom-color:var(--hair-2)}


/* ---- contrast corrections found by the post-pass sweep ----
   White on the pure accent measures 3.80:1, below the 4.5 floor. The accent
   token is unchanged; only filled surfaces carrying white text go one step
   deeper, which is where legibility is actually decided. */
:root{--accent-fill:#C0351C;--accent-fill-hover:#A82D16}
.btn-primary{background:var(--accent-fill);border-color:var(--accent-fill)}
.btn-primary:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}
.skip{background:var(--accent-fill)}
.draft{background:var(--accent-fill)}
/* the open-marker chip: accent text on its own faint tint needs the tint kept
   low enough that the text still clears the floor against the page behind it.
   Measured 22 Aug on the navy grounds: #F0674A read 3.75:1 on the deepest
   composite, so the marker text moves to a lighter tint of the same hue and
   clears 4.9:1 everywhere it renders. The chip is still unmistakably a warning. */
.todo{background:rgba(226,72,43,.07);border-color:rgba(226,72,43,.26);color:#FF8567}

/* ---- section-head spacing. h2 and lede were colliding. ---- */
.evid-head .lede,.cx-head .lede,.wk-head .lede,.svcx-head .lede,.blk-head .lede,.cta-copy .lede{margin-top:1.1rem}
.evid-head,.cx-head,.wk-head{margin-bottom:clamp(2rem,3.6vw,3rem)}
/* the progression rule stops with the last step rather than trailing off */
.prog-rule{right:auto;width:calc(100% - 6rem)}
@media (max-width:900px){.prog-rule{width:1px}}

/* =========================================================================
   FINAL POLISH — readability, Results hierarchy, photograph
   ========================================================================= */

/* ---- readability. Meaningful commercial copy must not inherit the
        reference's decorative microcopy contrast. ---- */
.chero-foot li{font-size:.95rem;line-height:1.5;color:var(--text-secondary)}
.chero-foot li:first-child{color:var(--text-primary)}
body.home .cred b{font-size:.9rem;color:var(--text-primary)}
body.home .cred span{font-size:1rem;line-height:1.55;color:var(--text-secondary)}
body.home .cred li:first-child b{color:var(--text-primary)}
.svcx-panel p{font-size:1rem;line-height:1.6;color:var(--text-secondary)}
.svcx-panel.front p,.svcx-panel.back:hover p,.svcx-panel.back:focus-within p{color:var(--text-primary)}
.svcx-panel .n{font-size:.82rem;color:var(--text-secondary)}
.prog p{font-size:1rem;line-height:1.6;color:var(--text-secondary)}
.prog-meta{font-size:1rem;line-height:1.6;color:var(--text-secondary)}
.abt-body p{font-size:1.03rem;line-height:1.68;color:var(--text-secondary)}
.field label{font-size:.8rem;color:var(--text-primary)}
.f-priv{font-size:.92rem;line-height:1.6;color:var(--text-secondary)}
.foot li a,.foot-util a{color:var(--text-secondary)}
.foot-brand p{color:var(--text-secondary)}
.kicker{color:var(--text-secondary)}

/* ---- Results: business hierarchy on fixed slots.
        1 BUDGET · 2 CPA/CPL · 3 ROAS · 4 REVENUE · 5 PURCHASES/LEADS
        A slot with no stored metric stays empty. Nothing is invented. ---- */
.evid li{grid-template-columns:minmax(0,3.1fr) minmax(0,8fr);gap:clamp(1rem,2.6vw,2.8rem)}
.evid .mets{
  display:grid;
  /* EQUAL COLUMNS, AS MANY AS THE ROW HAS. The three rows that carry four
     metrics align with each other column for column, and Training's three
     spread across the same measure instead of holding an empty slot open.
     Same mechanism the case-study KPI band uses. */
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:clamp(.7rem,1.8vw,1.6rem);
  align-items:baseline;
}
.evid .met{min-width:0}
.evid .met i{font-size:.74rem;letter-spacing:.11em;color:var(--text-tertiary);display:block;margin-bottom:.3rem}
/* THE VALUE IS ITS OWN TARGET, 26 August 2026. It shrink-wraps to the figure
   so the hit area is the number and not the whole column, and it grows from
   its left edge so it never moves away from the label above it. The transform
   is the only thing that changes size, so no row, column or label geometry
   moves with it. */
.evid .met b{font-size:clamp(1rem,1.5vw,1.22rem);color:var(--text-secondary);display:block;
  width:fit-content;transform-origin:left center;
  transition:color var(--t-fast) var(--e1),transform var(--t-fast) var(--e1)}
/* POINTER ONLY, AND NOTHING IN THE TAB ORDER. These values were briefly given
   tabindex and a :focus-visible treatment so a keyboard user could reach the
   same feedback; that put fifteen stops in the homepage tab order for fifteen
   pieces of informational text with nowhere to go. A figure in a reporting
   table is not a control, so the interaction is now what it always was in
   substance: a pointer affordance, and nothing a keyboard user has to walk
   through. The values remain fully available to assistive technology through
   their own markup — the label and the figure are read as they always were. */
@media (hover:hover) and (pointer:fine){
  .evid .met b:hover{color:var(--accent);transform:scale(1.16)}
}
@media (prefers-reduced-motion:reduce){
  .evid .met b{transition:color var(--t-fast) var(--e1)}
  .evid .met b:hover{transform:none}
}
.evid .met.budget b{color:var(--text-primary);font-size:clamp(.98rem,1.35vw,1.1rem)}
/* The enlarged lead value and its word variant were removed on 26 August 2026
   together with the hero-metric system. A word in a metric slot — Golf's
   `Stabile` — now needs no special case, because every value in the strip is
   set at the same size. */
.evid .who-col{min-width:0}
.evid .cat{color:var(--text-tertiary);font-size:.76rem}
.evid .who{display:block;color:var(--text-primary);font-size:clamp(1.02rem,1.45vw,1.24rem)}
/* ONE ROW ON DESKTOP, 25 August 2026. The row used to break into two levels at
   1100, which put the business on one line and its figures on the next and lost
   the reading the strip exists for: this account, at this spend, produced this.
   The stack now waits for 900, the breakpoint the rest of the site already uses
   to give up its multi-column compositions, so 1024 and 960 still read as one
   continuous performance strip. Nothing was retuned to buy the width: the type
   scale, the slot map and the track ratios are the desktop ones, unchanged. */
@media (max-width:900px){
  .evid li{grid-template-columns:1fr;gap:1.1rem}
  .evid .mets{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.2rem}
  .evid .met{grid-column:auto!important}
}
@media (max-width:560px){
  .evid .mets{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- the photograph, in the same material system ---- */
.portrait{overflow:hidden;background:var(--surface-02);box-shadow:var(--lift-1)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
@media (max-width:900px){.portrait img{object-position:50% 14%}}

/* ---- final readability sweep: nothing meaningful below ~12.8px ---- */
:root{--fs-label:.8rem}
.evid .met i{font-size:.8rem}
.evid .cat{font-size:.8rem}
.foot-lbl{font-size:.8rem}
.brand span{font-size:.74rem}
.foot-bot{font-size:.82rem}
.lang{font-size:.82rem}

/* THE FIVE TUNED TRACKS ARE GONE, 26 August 2026. They existed for a row that
   led with a long budget string and for a Golf row that carried a fifth metric;
   neither is true any more, and the fifth track stayed empty on every row,
   which is the unused space on the right. The strip now takes as many equal
   columns as the row actually has — four for three of the rows, three for
   Training — declared once as auto columns further up.

   The two collapses below have to put the flow back to rows, or an explicit
   template under an auto-flow of column would push the extra metrics into new
   implicit columns instead of wrapping. */
.evid .met.budget b{white-space:nowrap}
@media (max-width:900px){
  .evid .mets{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .evid .mets{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the portrait's rounded edge lives on the image, so the corner brackets are
   not clipped. They move to the cool hairline: four vermilion marks on the
   photograph would work against the accent-scarcity rule. */
.portrait{overflow:visible}
.portrait img{border-radius:8px}
.framed::before,.framed::after,.framed > .fc::before,.framed > .fc::after{border-color:var(--hair-2)}

/* =========================================================================
   HERO ATMOSPHERE
   Layered navy depth so the hero stops reading as a flat black rectangle.
   Static, CSS and one inline SVG. No JS, no dependency.
   ========================================================================= */

/* A. the colour field: near-black -> midnight navy -> desaturated blue -> near-black.
      Large, soft, asymmetric, partly off-canvas, low contrast, layered. */
body.home .chero{background:var(--canvas)}
.chero-field{
  position:absolute;inset:-12% -8% -18% -8%;z-index:0;pointer-events:none;
  background:
    radial-gradient(78% 62% at 6% 14%, rgba(42,72,140,.40) 0%, rgba(42,72,140,0) 62%),
    radial-gradient(96% 74% at 92% 84%, rgba(30,54,110,.30) 0%, rgba(30,54,110,0) 66%),
    radial-gradient(70% 54% at 62% -8%, rgba(58,92,168,.18) 0%, rgba(58,92,168,0) 60%),
    linear-gradient(163deg,#060911 0%,#0A1122 40%,#0C1630 64%,#070A14 100%);
}

/* B. primary illumination behind the headline, so the type sits inside the
      environment instead of on top of it */
.chero-halo{
  left:-22%;top:-16%;width:96%;height:112%;z-index:0;
  background:
    radial-gradient(ellipse 46% 42% at 46% 46%, rgba(120,158,230,.115), transparent 68%),
    radial-gradient(ellipse 30% 26% at 40% 40%, rgba(150,182,240,.075), transparent 72%);
}
/* secondary, much broader and softer, giving the negative space material depth */
.chero-halo::after{
  content:"";position:absolute;right:-96%;bottom:-52%;width:150%;height:130%;
  background:radial-gradient(ellipse 50% 46% at 50% 50%, rgba(86,124,205,.10), transparent 70%);
}

/* C. structural arcs. Traces of an underlying system, noticed last. */
.chero-arcs{
  position:absolute;z-index:0;pointer-events:none;
  right:-24%;top:50%;transform:translateY(-50%);
  width:min(86vw,1180px);height:auto;
  color:#9DB6DE;opacity:.16;
}

/* D. the grid: visible on inspection, still clearly subordinate */
.chero .rules{
  z-index:1;
  background-image:repeating-linear-gradient(to right,
    transparent 0,transparent calc(100% / 6 - 1px),
    rgba(168,198,246,.055) calc(100% / 6 - 1px),rgba(168,198,246,.055) calc(100% / 6));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
}
.chero .wrap,.chero-foot{z-index:2}

/* E. the atmosphere decays into the next section, so act one reads as one
      environment rather than two stacked rectangles */
body.home .cred{position:relative;background:var(--canvas)}
body.home .cred::before{
  content:"";position:absolute;inset:-1px 0 auto 0;height:220%;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 100% at 12% -40%, rgba(42,72,140,.20) 0%, rgba(42,72,140,0) 62%),
    radial-gradient(120% 90% at 88% -30%, rgba(30,54,110,.14) 0%, rgba(30,54,110,0) 60%);
}
body.home .cred > .wrap{position:relative;z-index:1}

/* F. mobile: atmosphere kept, structure simplified aggressively */
@media (max-width:900px){
  .chero-arcs{right:-52%;width:150vw;opacity:.13}
}
@media (max-width:560px){
  .chero-arcs{display:none}
  .chero-field{
    inset:-6% -6% -12% -6%;
    background:
      radial-gradient(94% 46% at 18% 10%, rgba(42,72,140,.40) 0%, rgba(42,72,140,0) 66%),
      radial-gradient(110% 46% at 84% 88%, rgba(30,54,110,.26) 0%, rgba(30,54,110,0) 70%),
      linear-gradient(172deg,#060911 0%,#0A1122 44%,#0B142B 70%,#070A14 100%);
  }
  .chero-halo{left:-30%;top:-10%;width:150%;height:80%}
  .chero-halo::after{display:none}
}

/* A note is only a warning when it carries an unresolved marker. Explanatory
   footnotes read as body copy, which also clears the contrast floor. */
.note{color:var(--text-secondary);background:transparent;border-left-color:var(--hair-2)}
.note:has(.todo){color:#FF8567;background:var(--accent-faint);border-left-color:var(--accent-soft)}

/* =========================================================================
   HERO REFINEMENT
   No straight lines. One curved flow language. Three-word signature.
   ========================================================================= */

/* the structural grid is gone from the hero entirely */
.chero .rules,.chero-arcs{display:none!important}

/* gradient direction reinforces the movement: deeper at the lower-left origin,
   subtly cooler and lighter in the direction of expansion */
.chero-field{
  inset:-12% -8% -18% -8%;
  background:
    radial-gradient(86% 72% at 80% 16%, rgba(58,96,176,.34) 0%, rgba(58,96,176,0) 64%),
    radial-gradient(78% 64% at 98% 52%, rgba(40,74,146,.26) 0%, rgba(40,74,146,0) 68%),
    radial-gradient(84% 70% at 4% 96%, rgba(5,8,16,.88) 0%, rgba(5,8,16,0) 62%),
    linear-gradient(116deg,#060911 0%,#090F1F 32%,#0C1734 64%,#0E1C3E 100%);
}
.chero-halo{
  left:-20%;top:-10%;width:88%;height:104%;
  background:radial-gradient(ellipse 44% 40% at 48% 48%, rgba(126,164,234,.10), transparent 70%);
}
.chero-halo::after{display:none}

/* the flow field */
.chero-flow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;
  color:#9FB9E4;opacity:.20;
}

/* the signature: three words, one baseline, centred low in the hero */
.chero-foot{margin-top:clamp(3.4rem,9vh,6rem)}
.chero-foot ul{
  display:flex;justify-content:center;align-items:baseline;
  gap:clamp(2.2rem,7vw,6.5rem);
  grid-column:auto;
}
.chero-foot li{
  border:0;padding:0;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.92rem,1.45vw,1.22rem);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-secondary);
  white-space:nowrap;
}
.chero-foot li:first-child{color:var(--text-secondary)}
@media (max-width:560px){
  .chero-foot{margin-top:clamp(2.6rem,7vh,3.6rem)}
  .chero-foot ul{gap:1.15rem;flex-wrap:wrap}
  .chero-foot li{font-size:.82rem;letter-spacing:.2em}
  .chero-flow{opacity:.15}
}

/* =========================================================================
   CREDIBILITY: one system, not four unrelated statistics
   ========================================================================= */
body.home .cred{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
body.home .cred ul{position:relative}
body.home .cred li{
  padding-block:clamp(1.5rem,2.6vw,2.1rem);
  padding-right:clamp(1.2rem,3vw,2.4rem);
}
body.home .cred b{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(.95rem,1.35vw,1.15rem);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-primary);margin-bottom:.4rem;
}
body.home .cred span{font-size:.95rem;color:var(--text-tertiary);max-width:24ch}
@media (max-width:900px){body.home .cred li{padding-right:1.2rem}}

/* =========================================================================
   METHOD: the supporting paragraph belongs to the headline
   ========================================================================= */
.prog-head{grid-column:1 / -1}
.prog-meta{
  grid-column:1 / 10;align-self:start;
  margin-top:clamp(1rem,1.8vw,1.5rem);
  max-width:74ch;
}
@media (max-width:900px){.prog-head,.prog-meta{grid-column:1 / -1}}

/* the hero must decay into the credibility band, not butt against it */
body.home .cred{border-top:0}
body.home .cred::before{
  height:300%;
  background:
    radial-gradient(140% 120% at 82% -70%, rgba(58,96,176,.26) 0%, rgba(58,96,176,0) 60%),
    radial-gradient(140% 110% at 98% -40%, rgba(40,74,146,.20) 0%, rgba(40,74,146,0) 58%),
    linear-gradient(180deg, rgba(14,28,62,.55) 0%, rgba(14,28,62,0) 42%);
}
@media (max-width:560px){
  body.home .cred::before{
    background:
      radial-gradient(150% 90% at 86% -60%, rgba(58,96,176,.30) 0%, rgba(58,96,176,0) 62%),
      linear-gradient(180deg, rgba(14,28,62,.60) 0%, rgba(14,28,62,0) 38%);
  }
}

/* The method section is painted canvas by the tone rhythm while its stage class
   still resolves --bg to the paper token. The index numbers punch their gap in
   the rule with --bg, so the two must agree or the patch shows. */
body.home .prog-sec{--bg:var(--canvas)}
body.home .evid-sec{--bg:var(--surface-02)}

/* =========================================================================
   REFINEMENT PASS
   ========================================================================= */

/* ---- 1. hero: signature removed, spacing rebalanced without growing height ---- */
.chero-foot{display:none}
body.home .chero{
  justify-content:center;
  /* 17vh / 11vh was 252px of padding around a 508px copy block, and it put the
     credibility strip past the bottom of every laptop screen. The hero is
     centred and its min-height now reserves the strip, so on 800px and taller
     this padding is only a floor: the copy is centred in the room that is left
     and keeps every pixel of the air it had. It binds on a 768px laptop, which
     is the one viewport where the whole composition cannot fit without giving
     something up, and there it gives up padding rather than the headline, the
     buttons or the proof row. */
  padding-block:clamp(5.75rem,12.5vh,9.5rem) clamp(2.25rem,5.5vh,6rem);
}
@media (max-width:560px){
  body.home .chero{padding-block:clamp(7rem,19vh,8.5rem) clamp(3.5rem,9vh,5rem)}
}

/* ---- 2. credibility: one balanced four-column proof strip ---- */
body.home .cred ul{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(1rem,2.4vw,2.4rem);
}
body.home .cred li{
  padding:clamp(1.6rem,2.8vw,2.2rem) 0;
  border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;
}
body.home .cred b{
  display:block;margin:0 0 .55rem;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.9rem,1.25vw,1.1rem);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-primary);white-space:nowrap;
}
body.home .cred li:nth-child(4) b{white-space:normal}
body.home .cred span{
  display:block;max-width:26ch;margin:0 auto;
  font-size:.95rem;line-height:1.5;color:var(--text-tertiary);
}
@media (max-width:900px){
  body.home .cred ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
  body.home .cred li{padding-block:clamp(1.3rem,4vw,1.7rem)}
  body.home .cred li:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
@media (max-width:480px){
  body.home .cred b{white-space:normal!important;font-size:.88rem}
  body.home .cred span{font-size:.9rem}
}

/* ---- 5. the portrait emerges from the environment instead of sitting on it ---- */
.portrait{
  background:transparent;box-shadow:none;border:0;border-radius:0;overflow:visible;
  position:relative;
}
/* a cool field behind the photograph bridges the light image and the dark page */
.portrait::before{
  content:"";position:absolute;inset:-14% -12% -10% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 34%, rgba(58,96,176,.20), rgba(58,96,176,0) 72%);
}
.portrait img{
  position:relative;z-index:1;
  border-radius:0;
  /* one soft elliptical mask, weighted high so head and shoulders stay solid and
     only the lateral and lower boundaries dissolve. The subject is never blurred. */
  -webkit-mask-image:radial-gradient(ellipse 74% 92% at 50% 34%,
    #000 0%, #000 54%, rgba(0,0,0,.92) 68%, rgba(0,0,0,.55) 84%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse 74% 92% at 50% 34%,
    #000 0%, #000 54%, rgba(0,0,0,.92) 68%, rgba(0,0,0,.55) 84%, rgba(0,0,0,0) 100%);
}
@media (max-width:900px){
  .portrait::before{inset:-10% -8% -8% -8%}
  .portrait img{
    -webkit-mask-image:radial-gradient(ellipse 80% 94% at 50% 32%,
      #000 0%, #000 58%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.55) 87%, rgba(0,0,0,0) 100%);
            mask-image:radial-gradient(ellipse 80% 94% at 50% 32%,
      #000 0%, #000 58%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.55) 87%, rgba(0,0,0,0) 100%);
  }
}

/* the longest credibility label must hold one line at 1280 and 1440, or the
   fourth column reads as a different hierarchy from the other three */
body.home .cred b{font-size:clamp(.86rem,1.1vw,1rem);letter-spacing:.085em}

/* The radial mask's radii extended past the visible box, so the fade never
   reached the edges and the photo still read as a card. Two composited linear
   masks instead, with the fade distances set from where the subject actually
   sits in this crop: arms reach ~6% from the left edge and the hands sit at
   ~90% of the height, so the mask stays outside both. */
.portrait img{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 4%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 4%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* the ambient field behind does the rest of the bridging */
.portrait::before{
  inset:-18% -16% -14% -16%;
  background:
    radial-gradient(ellipse 56% 54% at 50% 32%, rgba(72,112,190,.26), rgba(72,112,190,0) 74%),
    radial-gradient(ellipse 70% 40% at 50% 88%, rgba(16,26,48,.55), rgba(16,26,48,0) 76%);
}
@media (max-width:900px){
  .portrait img{
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 3%, #000 88%, transparent 100%);
            mask-image:
      linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 3%, #000 88%, transparent 100%);
  }
  .portrait::before{inset:-12% -10% -10% -10%}
}

/* A mask to transparency produced a visible halo, because the subject's arm
   reaches ~6% from the left edge and forces a short, therefore perceptible,
   fade. Overlaying the page colour instead allows a long gradual ramp with no
   band and no rounded corners: the photograph's own background darkens into the
   environment rather than being cut out of it. */
.portrait img{
  -webkit-mask-image:none;mask-image:none;
}
.portrait::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,  #070A14 0%, rgba(7,10,20,.80) 3%, rgba(7,10,20,0) 24%),
    linear-gradient(270deg, #070A14 0%, rgba(7,10,20,.80) 3%, rgba(7,10,20,0) 26%),
    linear-gradient(0deg,   #070A14 0%, rgba(7,10,20,.88) 4%, rgba(7,10,20,0) 32%),
    linear-gradient(180deg, #070A14 0%, rgba(7,10,20,.70) 3%, rgba(7,10,20,0) 18%);
}
@media (max-width:900px){
  .portrait::after{
    background:
      linear-gradient(90deg,  #070A14 0%, rgba(7,10,20,.78) 3%, rgba(7,10,20,0) 20%),
      linear-gradient(270deg, #070A14 0%, rgba(7,10,20,.78) 3%, rgba(7,10,20,0) 22%),
      linear-gradient(0deg,   #070A14 0%, rgba(7,10,20,.86) 4%, rgba(7,10,20,0) 26%),
      linear-gradient(180deg, #070A14 0%, rgba(7,10,20,.68) 3%, rgba(7,10,20,0) 15%);
  }
}

/* The ambient field behind the portrait now works against the overlay: it
   bleeds a lighter navy outside the photo's darkened edge, which reads as the
   rectangle it was meant to dissolve. The overlay alone does the blending. */
.portrait::before{display:none}


/* =========================================================================
   RESULTS PAGE
   The page reads down its centre: intro, then two section heads, each smaller
   than the one above it. FEATURED is depth, four compact 2 x 2 cards whose
   16:9 sources are reframed to 4:3 so they read as selected work rather than
   as banners. SELECTED is breadth, a dense square grid that cannot be mistaken
   for the layer above. Vermilion stays held back at rest, as everywhere.
   ========================================================================= */

/* ---- centred editorial heads ---- */
.sec-head{text-align:center}
.sec-head h1,.sec-head h2,.sec-head .lede{margin-inline:auto}

/* page intro: an introduction, not a second homepage hero */
.phero-mid{padding-block:clamp(7rem,15vh,10rem) clamp(2.75rem,5.5vw,5rem)}
.sec-head.is-intro h1{font-size:clamp(1.95rem,3.5vw,2.95rem);max-width:19ch}
.sec-head.is-intro .lede{max-width:56ch}

/* section heads: visibly a step below the intro */
.cx-head,.wk-head{margin-bottom:clamp(2.4rem,4.4vw,3.6rem)}
.cx-head h2,.wk-head h2{font-size:clamp(1.45rem,2.5vw,2.05rem);max-width:22ch}
.cx-head .lede,.wk-head .lede{max-width:50ch;font-size:var(--fs-sm)}

/* ---- shared media treatment ---- */
.cx-media,.wk-media{
  position:relative;overflow:hidden;border-radius:6px;
  background:var(--surface);box-shadow:var(--lift-1);
}
.cx-media img,.wk-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:filter var(--t-med) var(--e1);
}
/* a media slot with no approved asset says so, in the placeholder language
   the portrait already uses. It never borrows an unrelated photograph. */
.cx-media .ph,.wk-media .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--accent-soft);border-radius:6px;
  /* the darkest ground in the system: an empty slot should read as empty, and
     the marker text needs it to clear 4.5:1 */
  background:var(--canvas);
}
.cx-media .ph span,.wk-media .ph span{
  font-family:var(--mono);font-size:var(--fs-sm);line-height:1.5;color:var(--accent);
  text-align:center;padding:1.5rem;max-width:24ch;
}
.wk-media .ph span{font-size:.72rem;padding:.7rem;line-height:1.4}

/* ---- featured case studies: 2 x 2, compact ---- */
.cases-x{
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.2rem,4vw,3.4rem) clamp(1.6rem,2.8vw,2.6rem);
}
.cx{display:block;color:inherit;text-decoration:none}
/* the crop: 16:9 sources reframed, never re-cut on disk */
.cx-media{aspect-ratio:4 / 3}
.cx-body{padding-top:clamp(1rem,1.7vw,1.4rem)}
.cx-body .cat{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-tertiary);
}
.cx-body h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.12rem,1.55vw,1.42rem);letter-spacing:-.025em;line-height:1.18;
  margin-top:.55rem;max-width:24ch;color:var(--text-primary);
}
.cx-mets{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;margin-top:clamp(1rem,1.7vw,1.4rem);
}
.cx-mets .met{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.cx-mets .met i{
  font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-tertiary);
}
.cx-mets .met b{
  font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(.98rem,1.4vw,1.15rem);letter-spacing:-.025em;color:var(--text-secondary);
}
/* scale carries the lead figure at rest; the accent is an interaction signal */
.cx-mets .met.lead b{
  color:var(--text-primary);font-size:clamp(1.28rem,2vw,1.6rem);
  transition:color var(--t-med) var(--e1);
}
.cx-go{
  margin-top:clamp(1rem,1.7vw,1.3rem);
  font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-primary);
  display:inline-flex;align-items:center;gap:.55rem;
}
.cx-go .arw{transition:transform var(--t-fast) var(--e1)}

/* the linked state. Dormant until the four case-study pages exist: while
   CASE_PAGES is false the card is an <article> and none of this applies. */
a.cx.is-link{cursor:pointer}
a.cx.is-link:hover .cx-media img,
a.cx.is-link:focus-visible .cx-media img{filter:brightness(1.07)}
a.cx.is-link:hover .cx-mets .met.lead b,
a.cx.is-link:focus-visible .cx-mets .met.lead b{color:var(--accent)}
a.cx.is-link:hover .cx-go,
a.cx.is-link:focus-visible .cx-go{color:var(--accent)}
a.cx.is-link:hover .cx-go .arw,
a.cx.is-link:focus-visible .cx-go .arw{transform:translateX(4px)}
a.cx.is-link:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}

@media (max-width:760px){
  .cases-x{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .cx-body h3{max-width:26ch}
}

/* ---- selected client work: dense, unmistakably the secondary layer ---- */
.work{
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.1rem,1.9vw,1.7rem) clamp(.85rem,1.5vw,1.25rem);
}
.wk{position:relative;display:flex;flex-direction:column}
.wk-media{aspect-ratio:1 / 1}
.wk-body{padding-top:.7rem}
.wk-body .cat{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.wk-body h3{
  font-family:var(--display);font-weight:500;font-size:clamp(.9rem,1.05vw,1rem);
  letter-spacing:-.015em;line-height:1.25;margin-top:.3rem;color:var(--text-primary);
}

/* the three KPI slots. Resting on touch, revealed over the image on a mouse.
   A slot with no approved figure draws a rule, never a character, so no dash
   ever enters the copy. */
.wk-kpi{display:flex;flex-direction:column;gap:.55rem;margin-top:.7rem}
.wk-kpi .met{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;min-width:0}
.wk-kpi .met i{
  font-style:normal;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);flex:none;
}
.wk-kpi .met b{
  font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:.92rem;letter-spacing:-.02em;color:var(--text-primary);text-align:right;
}
.wk-kpi .met.is-pending b{width:2.25rem;height:1px;background:var(--hair-2);align-self:center;flex:none}

@media (hover:hover) and (pointer:fine){
  /* the layer sits exactly over the square media box and is inert until asked */
  .wk-kpi{
    position:absolute;top:0;left:0;right:0;aspect-ratio:1 / 1;margin-top:0;
    justify-content:center;gap:clamp(.7rem,1.1vw,1rem);
    padding:clamp(.85rem,1.5vw,1.3rem);
    border-radius:6px;background:rgba(7,10,20,.92);
    opacity:0;transform:translateY(5px);pointer-events:none;
    transition:opacity var(--t-med) var(--e1),transform var(--t-med) var(--e1);
  }
  .wk-kpi .met + .met{
    border-top:1px solid rgba(150,185,240,.16);
    padding-top:clamp(.7rem,1.1vw,1rem);
  }
  .wk:hover .wk-kpi,.wk:focus-within .wk-kpi{opacity:1;transform:none}
  .wk:hover .wk-media img,.wk:focus-within .wk-media img{filter:brightness(.9)}
}

@media (max-width:1100px){.work{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* On a phone the grid becomes a list: same 1:1 crop at thumbnail size, the
   three slots permanently open beside it, a fraction of the height. */
@media (max-width:560px){
  .work{grid-template-columns:minmax(0,1fr);gap:0}
  .wk{
    display:grid;grid-template-columns:5.25rem minmax(0,1fr);
    column-gap:1rem;align-items:start;
    padding-block:1.05rem;border-top:1px solid var(--line);
  }
  .wk:first-child{border-top:0;padding-top:0}
  .wk-media{grid-column:1;grid-row:1 / 3;width:5.25rem}
  .wk-media .ph span{font-size:.55rem;padding:.35rem;line-height:1.3}
  .wk-body{grid-column:2;grid-row:1;padding-top:0}
  .wk-body h3{font-size:.98rem}
  .wk-kpi{
    grid-column:2;grid-row:2;margin-top:.65rem;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;
  }
  .wk-kpi .met{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.22rem}
  .wk-kpi .met b{text-align:left}
  .wk-kpi .met.is-pending b{align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .cx-media img,.wk-media img,.cx-go .arw,.wk-kpi{transition:none}
}

/* =========================================================================
   GLOBAL SURFACE SYSTEM, 22 August 2026
   The homepage is the reference: deep navy grounds carrying soft, off-axis
   blue washes rather than one flat black rectangle per section. This block
   extends that language to every internal page, in both languages, from the
   stage classes themselves, so no page owns a copy of it.

   The homepage is untouched by design: every one of its seven sections already
   names its own background under `body.home`, which outranks the stage rules
   below. Nothing here reaches it.

   The washes are radial and fade to transparent well inside each section, so
   consecutive sections tint without ever drawing a seam, and the two stages
   anchor their light on opposite sides so the page reads as a tonal descent
   rather than as a repeating tile.
   ========================================================================= */
.stage-ink{
  background-color:var(--canvas);
  background-image:
    radial-gradient(118% 78% at 8% -14%, rgba(42,72,140,.19) 0%, rgba(42,72,140,0) 60%),
    radial-gradient(104% 72% at 94% 116%, rgba(30,54,110,.15) 0%, rgba(30,54,110,0) 64%);
}
.stage-paper{
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 82% at 92% -16%, rgba(58,92,168,.17) 0%, rgba(58,92,168,0) 62%),
    radial-gradient(112% 74% at 4% 118%, rgba(40,68,132,.15) 0%, rgba(40,68,132,0) 66%),
    linear-gradient(180deg, rgba(150,185,240,.030) 0%, rgba(150,185,240,0) 44%);
}

/* The inner-page hero gets the homepage hero's atmosphere at a lower dose:
   the same colour field, the same off-centre illumination, no arcs and no
   flow. `.phero` is already position:relative with overflow:hidden, so the
   field can run past its edges without touching the document width. */
.phero::before{
  content:"";position:absolute;inset:-14% -10% -22% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(74% 60% at 8% 16%, rgba(42,72,140,.40) 0%, rgba(42,72,140,0) 62%),
    radial-gradient(92% 70% at 90% 90%, rgba(30,54,110,.28) 0%, rgba(30,54,110,0) 66%),
    radial-gradient(66% 52% at 62% -10%, rgba(58,92,168,.17) 0%, rgba(58,92,168,0) 60%),
    linear-gradient(166deg,#060911 0%,#0A1122 42%,#0C1630 66%,#070A14 100%);
}
.phero > *{position:relative;z-index:1}

/* An index is structure, not a signal. Vermilion is reserved for the CTA, the
   focus ring and one state change; an index is none of those. */
.abx .n{color:var(--text-tertiary)}

/* The contact block closes every page on a lifted ground, exactly as it does
   on the homepage, so the form never lands on the darkest surface in the
   system. Copy, labels and behaviour are untouched. */
body:not(.home) .cta-sec{
  background-color:var(--surface-01);
  background-image:
    radial-gradient(96% 78% at 88% -18%, rgba(58,92,168,.16) 0%, rgba(58,92,168,0) 62%),
    radial-gradient(110% 80% at 6% 118%, rgba(40,68,132,.13) 0%, rgba(40,68,132,0) 66%);
  border-top:1px solid var(--hair);
}

/* =========================================================================
   SERVICE PAGE BLOCKS
   Four kinds, four distinct objects. A visitor should never have to read two
   of them to work out that they carry different kinds of information.
   ========================================================================= */

/* ---- capabilities: what I manage ----------------------------------------
   An editorial overview on hairlines, not six cards. Three columns at desk,
   two at tablet, one on a phone; the hairline is the only frame. */
.lgrid.caps{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vw,2.4rem) clamp(1.6rem,3.2vw,3rem);
}
.lgrid.caps li{border-top:1px solid var(--hair-2);padding-top:1.15rem}
.lgrid.caps h3{
  font-size:clamp(1.02rem,1.25vw,1.18rem);letter-spacing:-.02em;
  color:var(--fg);margin-bottom:.5rem;
}
.lgrid.caps p{font-size:.98rem;line-height:1.6;color:var(--fg-2);max-width:38ch}
@media (max-width:1000px){.lgrid.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .lgrid.caps{grid-template-columns:minmax(0,1fr);gap:0}
  .lgrid.caps li{padding-block:1.1rem}
  .lgrid.caps li:first-child{padding-top:0;border-top:0}
  .lgrid.caps p{max-width:52ch}
}

/* ---- client benefits: what changes for the client ------------------------
   One elevated object split into quadrants, not a second grid of text. The
   panel is the whole point: it reads as a single claim about the engagement,
   where the capability list reads as an inventory. */
.bnf-sec .blk-head h2{max-width:26ch}
.bnf{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--hair-2);border-radius:10px;overflow:hidden;
  background-color:var(--surface-02);
  background-image:
    radial-gradient(112% 108% at 2% 0%, rgba(96,140,220,.13) 0%, rgba(96,140,220,0) 60%),
    radial-gradient(96% 96% at 100% 100%, rgba(58,92,168,.10) 0%, rgba(58,92,168,0) 62%);
  box-shadow:var(--lift-2);
}
.bnf-item{
  padding:clamp(1.5rem,2.9vw,2.5rem);
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);
}
.bnf-item:nth-child(-n+2){border-top:0}
.bnf-item:nth-child(odd){border-left:0}
.bnf-item h3{
  font-size:clamp(1.08rem,1.45vw,1.32rem);letter-spacing:-.022em;
  color:var(--text-primary);margin-bottom:.65rem;
}
.bnf-item p{font-size:var(--fs-sm);line-height:1.62;color:var(--text-secondary);max-width:42ch}
@media (max-width:760px){
  .bnf{grid-template-columns:minmax(0,1fr)}
  .bnf-item{border-left:0;border-top:1px solid var(--hair);padding-block:1.35rem}
  .bnf-item:nth-child(-n+2){border-top:1px solid var(--hair)}
  .bnf-item:first-child{border-top:0}
}

/* ---- method: diagnosis to scaling ---------------------------------------
   An ordered progression carried by a pictogram and a drawn rail. No index,
   no 01 / 02 / 03, and no vermilion: the rail is a cool hairline, drawn once
   on entry, and it is what makes the five phases read as a sequence.
   Each row draws only the segment below its own mark, so the rail never has
   to be hidden behind an opaque disc that would not match a gradient ground. */
.phz{--phz-pad:clamp(1.15rem,2vw,1.6rem);--phz-mark:2.75rem;position:relative}
.phz li{
  position:relative;display:grid;
  grid-template-columns:var(--phz-mark) minmax(0,1fr);
  gap:clamp(1.1rem,2.4vw,2rem);
  padding-block:var(--phz-pad);
}
.phz li:first-child{padding-top:0}
.phz li:last-child{padding-bottom:0}
.phz li:not(:last-child)::before{
  content:"";position:absolute;left:calc(var(--phz-mark) / 2 - .5px);
  top:calc(var(--phz-pad) + var(--phz-mark) + .5rem);
  bottom:calc(.5rem - var(--phz-pad));
  width:1px;background:var(--hair-2);
  transform:scaleY(var(--draw,0));transform-origin:top center;
  transition:transform var(--t-slow) var(--e1);
}
.phz li:first-child:not(:last-child)::before{top:calc(var(--phz-mark) + .5rem)}
.phz-mark{
  width:var(--phz-mark);height:var(--phz-mark);border-radius:50%;
  display:grid;place-items:center;flex:none;
  border:1px solid var(--hair-2);color:var(--fg-2);
  background:rgba(150,185,240,.05);
  transition:color var(--t-med) var(--e1),border-color var(--t-med) var(--e1);
}
.ph-ico{width:22px;height:22px}
.phz-body h3{
  font-size:clamp(1.05rem,1.35vw,1.25rem);letter-spacing:-.022em;
  color:var(--fg);margin-bottom:.45rem;padding-top:.35rem;
}
.phz-body p{font-size:var(--fs-sm);line-height:1.62;color:var(--fg-2);max-width:70ch}
@media (min-width:1001px){
  /* the phases read as one band rather than five paragraphs: the title holds
     its own column, so the eye runs down the marks and the names first */
  .phz li{grid-template-columns:var(--phz-mark) minmax(0,16.5rem) minmax(0,1fr)}
  .phz-body{display:contents}
  .phz-body h3{margin-bottom:0;align-self:start}
  .phz-body p{padding-top:.4rem}
}
@media (max-width:620px){
  .phz{--phz-mark:2.35rem}
  .ph-ico{width:19px;height:19px}
  .phz-body p{font-size:.98rem}
}

/* ---- FAQ ----------------------------------------------------------------
   Native details / summary. Keyboard operable and fully readable with no
   script at all; site.js only animates the height. Compact when closed, and
   the open state is a shape change, never a hover. */
.faq{border-top:1px solid var(--hair);max-width:58rem}
.faq details{border-bottom:1px solid var(--hair)}
/* The whole row is the control. It bleeds past the text on both sides so the
   hover state reads as a row and not as a word, and it is still a summary:
   keyboard, no-JS and screen readers get the native element unchanged. */
.faq summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:start;
  padding:clamp(1rem,1.8vw,1.25rem) .9rem;margin-inline:-.9rem;
  cursor:pointer;list-style:none;border-radius:4px;
  transition:background var(--t-fast) var(--e1);
  -webkit-tap-highlight-color:transparent;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary .q{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.4;letter-spacing:-.018em;
  color:var(--fg);transition:color var(--t-fast) var(--e1);
}
.faq summary:hover{background:rgba(150,185,240,.045)}
.faq summary:hover .q{color:var(--text-primary)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq .ans p{margin-inline:0}

/* the control: a plus that becomes a minus. Legible at rest, so a closed row
   can never be mistaken for a line of static text, and it takes the accent
   only while the answer is open. Nothing about it depends on a pointer. */
.faq-mark{position:relative;width:17px;height:17px;margin-top:.28rem;flex:none}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;background:var(--fg-2);border-radius:1px;
  transition:transform var(--t-fast) var(--e1),background var(--t-fast) var(--e1);
}
.faq-mark::before{left:0;right:0;top:8px;height:1.5px}
.faq-mark::after{top:0;bottom:0;left:7.75px;width:1.5px}
.faq details[open] .faq-mark::after{transform:scaleY(0)}
.faq details[open] .faq-mark::before{background:var(--accent)}
.faq summary:hover .faq-mark::before,.faq summary:hover .faq-mark::after{background:var(--fg)}
.faq details[open] summary:hover .faq-mark::before{background:var(--accent)}

.faq .ans{overflow:hidden}
.faq .ans p{
  font-size:var(--fs-sm);line-height:1.68;color:var(--fg-2);
  max-width:72ch;padding-bottom:clamp(1.1rem,2vw,1.5rem);
}
@media (max-width:620px){
  .faq summary{gap:1rem}
  .faq .ans p{font-size:.98rem}
}

/* reduced motion: the rail and the answer arrive complete, never animated */
@media (prefers-reduced-motion:reduce){
  .phz li::before{transform:scaleY(1)!important}
  .faq .ans{height:auto!important}
}
body.pinned .phz li::before{transform:scaleY(1)!important}

/* =========================================================================
   EDITORIAL COMPOSITION, 22 August 2026
   The pages were reading down a narrow left column with an empty right half,
   section after section. These are the compositions a section can be built
   from. They are chosen per section in the content file, never applied
   wholesale: a page that centred everything would be as monotonous as a page
   that stacked everything, and corporate besides.

     .phero-in           inner-page hero: headline left, supporting line right,
                         bottom-aligned to it
     .blk-head.is-split  headline set against its supporting line across the
                         full measure. For sections whose body is full width.
     .blk-head.is-center a narrow head over a full-width object below it
     .faq.is-center      the column follows its centred head

   All of them collapse to the stacked default below 900px, where a phone has
   one column and nothing to balance.
   ========================================================================= */

/* ---- inner-page hero ---- */
.phero-in{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:end;
}
.phero-in .kicker{grid-column:1;grid-row:1;margin-bottom:1.5rem}
.phero-in h1{grid-column:1;grid-row:2;max-width:none}
.phero-in .lede{
  grid-column:2;grid-row:2;margin-top:0;max-width:40ch;
  padding-bottom:.5rem;color:var(--fg-2);
}
@media (max-width:900px){
  .phero-in{grid-template-columns:minmax(0,1fr)}
  .phero-in .kicker{grid-column:1;grid-row:1}
  .phero-in h1{grid-column:1;grid-row:2;max-width:17ch}
  .phero-in .lede{grid-column:1;grid-row:3;margin-top:1.5rem;max-width:56ch;padding-bottom:0}
}

/* ---- split heading block ---- */
.blk-head.is-split{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:end;
}
.blk-head.is-split .kicker{grid-column:1;grid-row:1}
.blk-head.is-split h2{grid-column:1;grid-row:2;max-width:20ch}
.blk-head.is-split .lede{
  grid-column:2;grid-row:2;margin-top:0;max-width:44ch;padding-bottom:.4rem;
}
@media (max-width:900px){
  .blk-head.is-split{grid-template-columns:minmax(0,1fr)}
  .blk-head.is-split h2{max-width:18ch}
  .blk-head.is-split .lede{grid-column:1;grid-row:3;margin-top:1.1rem;padding-bottom:0}
}

/* ---- centred heading block ----
   The block itself spans the wrap. Only the headline and its supporting line
   are centred, by their own measure. That is what keeps the eyebrow on the
   left axis while the composition below it is centred. See the eyebrow rule. */
.blk-head.is-center{text-align:center}
.blk-head.is-center h2{max-width:30ch;margin-inline:auto}
.blk-head.is-center .lede{max-width:56ch;margin-inline:auto}
@media (max-width:620px){
  .blk-head.is-center{text-align:left}
  .blk-head.is-center h2,.blk-head.is-center .lede{margin-inline:0}
}
.faq.is-center{margin-inline:auto}

/* =========================================================================
   THE EYEBROW AXIS
   Every section label on an inner page starts on the same left content axis,
   whatever the heading below it does. The eyebrow is the reader's fixed
   anchor down the page; the composition under it is free to be centred,
   split or stacked. One rule, no page ever restates it.
   ========================================================================= */
.blk-head,.sec-head{margin-inline:0;max-width:none}
.blk-head > .kicker,.sec-head > .kicker{
  justify-content:flex-start;text-align:left;margin-inline:0;
}

/* =========================================================================
   CHI SONO, 22 August 2026. Italian architecture, second pass.
   The first pass argued a position, Paid Social seen from both sides, and
   spent the page on it. This one is a credibility page: it shows the scale and
   the variety of the work and what is being run today, and lets the reader draw
   the conclusion. Two broad compositions carry it rather than five sections,
   because the fault to avoid here is a page that turns every idea into another
   full-height band of heading, paragraph and three columns.

   Built from the tokens, the stage classes, the shared hero shell and the
   shared split head. Nothing in this block reaches another page: the homepage
   portrait keeps `.portrait`, and the English About page keeps `.about-grid`
   and `.abx` until it is synchronised.
   ========================================================================= */

/* ---- hero: one introduction, not two claims ----
   The shared inner-page hero keeps its shell, its spacing and its atmosphere;
   only the composition inside changes. The split arrangement sets the headline
   against a second, competing statement in the right column, which is right for
   a service page and wrong for an opening that has to read as one sentence
   followed by its qualification. So this variant stacks, on one axis, and takes
   enough of the measure that the right half reads as a page opening rather than
   as a column that ran out. */
.phero-in.is-solo{display:block}
/* Widened on 27 August. At 19ch the headline broke into a narrow three-line
   stack and left most of the canvas empty on the right, while this hero has the
   full container to itself: no portrait, no second column. The cap is now
   generous and `text-wrap: balance` chooses the break, so line lengths even out
   instead of stranding a short last line. Font size is unchanged at every width.
   The supporting line gets a proportionate lift, still inside a comfortable
   reading measure. */
.phero-in.is-solo h1{max-width:29ch;text-wrap:balance}
.phero-in.is-solo .lede{
  margin-top:clamp(1.4rem,2.4vw,2rem);max-width:64ch;
  font-size:clamp(1.1rem,1.55vw,1.4rem);color:var(--fg-2);padding-bottom:0;
}
@media (max-width:900px){
  .phero-in.is-solo h1{max-width:20ch}
  .phero-in.is-solo .lede{max-width:52ch}
}

/* ---- the photograph ----
   The original picture, whole. No card, no border, no radius, no shadow, no
   corner brackets, and above all no cut-out: an earlier pass dissolved the
   studio backdrop around the subject and it read as a sticker. The only
   treatment is a short fade on the four outer edges of the frame, so the
   rectangle stops announcing itself against the navy. The subject is never
   segmented, the photographic background inside the frame is untouched, and
   nothing is blurred: this is alpha at the frame edge, not a filter. */
.pframe{position:relative;margin:0}
/* There is no cool field behind the frame any more. A wash sitting just outside
   the picture is exactly the uniform luminous frame this treatment exists to
   remove: it lit the boundary instead of dissolving it. */
.pframe img{
  position:relative;z-index:1;
  width:100%;height:auto;display:block;
  /* the two upper corners only, and barely: the bottom dissolves, so rounding
     it would be rounding nothing. Never a card. */
  border-radius:7px 7px 0 0;
  /* Directional, not a uniform frame. The picture stays defined at the top,
     where the head has air above it, loosens at the sides, and dissolves into
     the page at the bottom, where the frame is torso all the way down. The
     left ramp stops short of the elbow, which reaches ~3.7% from that edge. */
  /* Eased ramps, not straight ones. A linear fade holds a constant slope and
     then stops dead where it reaches full opacity, and the eye reads that break
     as a second, lighter rectangle sitting inside the photograph. These stops
     approximate a smoothstep, so the alpha arrives at 1 without a shoulder and
     there is one photographic field with one edge treatment.
     Left and right are mirror images of each other by construction. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 1.05%, rgba(0,0,0,.16) 2.1%, rgba(0,0,0,.35) 3.15%,
    rgba(0,0,0,.6) 4.2%, rgba(0,0,0,.82) 5.25%, rgba(0,0,0,.95) 6.3%, #000 7.5%,
    #000 92.5%, rgba(0,0,0,.95) 93.7%, rgba(0,0,0,.82) 94.75%, rgba(0,0,0,.6) 95.8%,
    rgba(0,0,0,.35) 96.85%, rgba(0,0,0,.16) 97.9%, rgba(0,0,0,.05) 98.95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.1) .5%, rgba(0,0,0,.35) 1.2%, rgba(0,0,0,.7) 2.2%,
    rgba(0,0,0,.92) 3%, #000 4%,
    #000 74%, rgba(0,0,0,.93) 79%, rgba(0,0,0,.76) 84%, rgba(0,0,0,.5) 89%,
    rgba(0,0,0,.25) 94%, rgba(0,0,0,.07) 97.5%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 1.05%, rgba(0,0,0,.16) 2.1%, rgba(0,0,0,.35) 3.15%,
    rgba(0,0,0,.6) 4.2%, rgba(0,0,0,.82) 5.25%, rgba(0,0,0,.95) 6.3%, #000 7.5%,
    #000 92.5%, rgba(0,0,0,.95) 93.7%, rgba(0,0,0,.82) 94.75%, rgba(0,0,0,.6) 95.8%,
    rgba(0,0,0,.35) 96.85%, rgba(0,0,0,.16) 97.9%, rgba(0,0,0,.05) 98.95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.1) .5%, rgba(0,0,0,.35) 1.2%, rgba(0,0,0,.7) 2.2%,
    rgba(0,0,0,.92) 3%, #000 4%,
    #000 74%, rgba(0,0,0,.93) 79%, rgba(0,0,0,.76) 84%, rgba(0,0,0,.5) 89%,
    rgba(0,0,0,.25) 94%, rgba(0,0,0,.07) 97.5%, transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* The top band needs the page colour over it, because the crown sits about 7%
   down and a mask fade long enough to matter would take the head with it. It is
   a top-only gradient, mitred to the same rounding and wearing the same side
   ramps as the picture: given its own edges it printed a second, lighter
   rectangle inside the photograph, which is the artefact this replaces. */
.pframe::after{
  content:"";position:absolute;left:0;right:0;top:0;height:20%;z-index:2;pointer-events:none;
  border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,
    rgba(11,18,36,.66) 0%, rgba(11,18,36,.52) 16%, rgba(11,18,36,.36) 33%,
    rgba(11,18,36,.21) 52%, rgba(11,18,36,.10) 70%, rgba(11,18,36,.03) 86%,
    rgba(11,18,36,0) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 1.05%, rgba(0,0,0,.16) 2.1%, rgba(0,0,0,.35) 3.15%,
    rgba(0,0,0,.6) 4.2%, rgba(0,0,0,.82) 5.25%, rgba(0,0,0,.95) 6.3%, #000 7.5%,
    #000 92.5%, rgba(0,0,0,.95) 93.7%, rgba(0,0,0,.82) 94.75%, rgba(0,0,0,.6) 95.8%,
    rgba(0,0,0,.35) 96.85%, rgba(0,0,0,.16) 97.9%, rgba(0,0,0,.05) 98.95%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 1.05%, rgba(0,0,0,.16) 2.1%, rgba(0,0,0,.35) 3.15%,
    rgba(0,0,0,.6) 4.2%, rgba(0,0,0,.82) 5.25%, rgba(0,0,0,.95) 6.3%, #000 7.5%,
    #000 92.5%, rgba(0,0,0,.95) 93.7%, rgba(0,0,0,.82) 94.75%, rgba(0,0,0,.6) 95.8%,
    rgba(0,0,0,.35) 96.85%, rgba(0,0,0,.16) 97.9%, rgba(0,0,0,.05) 98.95%, transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.pframe .ph-note{
  display:flex;align-items:center;justify-content:center;aspect-ratio:2/3;
  border:1px dashed var(--accent-soft);font-family:var(--mono);
  font-size:var(--fs-sm);color:var(--accent);text-align:center;padding:2rem;
}

/* ---- portrait and the Meta account of the work, one composition ---- */
.cred-lead{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.pframe{width:clamp(15rem,36vw,29rem)}
.cred-copy{padding-top:clamp(.5rem,2vw,1.75rem)}
/* an eyebrow labelling one column of a side-by-side composition belongs to that
   column, and is deliberately outside the page-axis rule. See THE EYEBROW AXIS. */
.cred-copy h2{max-width:19ch;margin-bottom:clamp(1.2rem,2.2vw,1.8rem)}
.cred-copy p{color:var(--fg-2);max-width:60ch}
/* A tablet still has two columns to work with. Stacking there leaves the
   photograph alone against half an empty page, so the single column starts
   where a single column is honest. */
@media (max-width:900px){
  .cred-lead{gap:clamp(1.5rem,3.5vw,2.4rem)}
  .pframe{width:clamp(13rem,38vw,20rem)}
  .cred-copy{padding-top:0}
  .cred-copy h2{max-width:16ch}
  .cred-copy p{max-width:52ch}
}
@media (max-width:680px){
  .cred-lead{grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,5vw,2.4rem)}
  .pframe{width:min(80vw,20rem)}
  .cred-copy h2{max-width:17ch}
  .cred-copy p{max-width:60ch}
}

/* ---- the proof band ----
   Three measurements on one rule, not three cards: the figures do the work and
   the pictograms only say which kind of measurement each one is. Sized to be
   read before the paragraph above them and still stay under the headline. */
.proof{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.5rem,3.5vw,3rem);row-gap:clamp(2rem,4.5vw,2.8rem);
  margin-top:clamp(2.8rem,5vw,4.2rem);
  padding-top:clamp(2.1rem,3.4vw,2.8rem);
  border-top:1px solid var(--line);
}
/* Each metric is one object read down a single centre axis, pictogram over
   figure over label. Three columns of equal width and one shared axis are what
   make them read as a system rather than as three text fragments that happen to
   sit in a row. No box, no border, no ground: they stay in the editorial layout
   and the alignment alone does the work. */
.proof li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;
}
.pf-ico{width:26px;height:26px;color:var(--accent);opacity:.9;flex:none}
.proof b{
  font-family:var(--display);font-weight:500;font-variant-numeric:normal;
  font-size:clamp(1.75rem,2.8vw,2.4rem);line-height:1;letter-spacing:-.035em;
  color:var(--fg);
}
/* The counting digits, and only them. Tabular figures give every digit the same
   advance, so a fixed decimal format holds one width from $0.0M+ to $1.5M+ and
   nothing on the row moves; a bare integer gains a digit as it climbs, so its
   box is reserved in `ch` at build time instead. */
.pf-n{font-style:normal;font-variant-numeric:normal}
/* Tabular figures on the digit runs and nowhere else: applied to the whole
   number they would give the decimal point a full digit advance and print
   `$1 . 5M+`. The leading run also carries a `ch` reservation for its digit
   count, so a number that climbs from one digit to three never moves the row. */
.pf-n .d{
  display:inline-block;text-align:left;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* The globe's single turn is driven from script, alongside the counts and the
   market sequence, so all three share one duration and one trigger. A full turn
   leaves the mark exactly where it started. */
.pf-ico{transform-origin:50% 50%}
/* The market that is currently showing. It is centred in its own column, so a
   longer name recentres the word and moves nothing else on the row. */
.pf-seq{display:inline-block;white-space:nowrap}
/* the label, and only the label: the figure above it now carries spans of its
   own — the screen-reader copy and the counting layer — and they must keep the
   display face and size of the `b` they sit in */
.proof li > span{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.6;
  /* `ch` is the advance of a zero and ignores the .11em tracking, so the real
     line is wider than the count suggests. 26ch is what puts the longest label
     of the three on two lines instead of three. */
  color:var(--fg-3);max-width:26ch;margin-inline:auto;
}
/* A phone has one column, so the axis becomes the page's own centre. Three
   narrow tracks would break the labels into four ragged lines each. */
@media (max-width:760px){
  .proof{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(1.7rem,5vw,2.1rem);
    justify-items:center;
  }
  .proof li{gap:.6rem}
  .proof li > span{max-width:30ch}
}

/* ---- what the work covers today ----
   The paragraphs keep the headline's column and the map takes the supporting
   line's, so the section reads as one composition on the axis the split head
   already set, rather than as a paragraph followed by yet another grid. */
.now{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:start;
  margin-top:clamp(2.4rem,4.4vw,3.6rem);
}
.now-body p{color:var(--fg-2);max-width:54ch}
.emap{margin:0}
.emap > div{
  padding-block:clamp(.85rem,1.6vw,1.15rem);
  border-top:1px solid var(--line);
}
.emap > div:last-child{border-bottom:1px solid var(--line)}
.emap dt{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  /* The four labels carry the accent from 27 August. They are the scan path
     through this block, and at --fg-3 they sat quieter than the values they
     introduce. Size and weight unchanged: hierarchy by colour only, using the
     same vermilion token as every other accent on the site. */
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
  margin-bottom:.4rem;
}
.emap dd{margin:0;color:var(--fg);font-size:var(--fs-sm);line-height:1.5}
/* Room around the middle dot. The single spaces either side are still in the
   text, so lines break between items exactly as before; this only opens the
   gap. The dot stays neutral against the values it separates. */
.emap dd .sep{margin-inline:.3em;color:var(--fg-3)}
@media (max-width:900px){
  .now{grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,5vw,2.6rem)}
  .now-body p{max-width:60ch}
}

/* ---- the closing statement ----
   Set in the display face at the lighter weight and left roman, not in `.pull`:
   Schibsted Grotesk ships here without an italic axis, and at this size the
   synthesised slant is visible. One short vermilion rule marks it as the page's
   last word before the form. */
.say{
  position:relative;padding-top:2.4rem;max-width:none;
  font-family:var(--display);font-weight:500;line-height:1.32;letter-spacing:-.025em;
  font-size:clamp(1.35rem,2.3vw,2.05rem);color:var(--fg);
}
/* It takes the wrap, held only by a reading measure in ch so a 1512 screen
   does not set it as one endless line. */
@media (min-width:901px){ .say{max-width:64ch} }
.say::before{
  content:"";position:absolute;left:0;top:0;width:34px;height:1px;
  background:var(--accent);opacity:.9;
}
@media (max-width:620px){.say{max-width:none;padding-top:2rem}}

/* =========================================================================
   THE HOMEPAGE PORTRAIT, 22 August 2026
   The hero was typographic end to end and reserved columns 9-12 as negative
   space. The colour portrait takes that space instead of being dropped into a
   box beside the copy: it is anchored to the right edge of the section, runs
   off it, and is cut by the section's own overflow rather than by a frame.

   It sits under `.chero .wrap`, which already carries z-index 2, so the
   headline and the buttons are never competing with it — and the photographic
   field, not the man, is what dissolves. There is no cut-out, no outline, no
   glow and no vignette: two straight ramps take the pale studio backdrop into
   the navy on the two sides that face the composition, and nothing touches the
   subject.
   ========================================================================= */
.chero-photo{
  /* Hung from the top of the hero rather than dropped into its bottom-right
     corner, so the head sits level with the headline instead of below it, and
     the composition stays balanced whatever height the viewport gives the hero.
     The bottom is wherever it falls: it dissolves before it gets there. */
  /* It starts under the navigation rather than below it. The nav sits above on
     z-index and carries its own ground once scrolled, so the photograph can
     keep going up without costing the menu any legibility — and the hero stops
     looking like a picture parked in the lower right of a blue rectangle. */
  /* The frame is sized by the hero rather than allowed to overflow it. Height
     is the smallest of three things: its own natural 750px, the room left
     between the top of the frame and the proof row, and whatever its width cap
     allows. Width follows from the 4:5, so the crop, the framing and the two
     ramps are the approved ones at every size and the bottom fade finishes on
     the hero's floor instead of being cut by it — a fixed height on a 768px
     laptop met the section edge at 81% of the frame, straight through the
     middle of the fade. On a shorter screen the photograph gets smaller. It is
     never cropped, and the head never moves. */
  position:absolute;right:0;top:var(--ph-top);bottom:auto;
  z-index:1;margin:0;
  width:auto;aspect-ratio:4/5;overflow:hidden;pointer-events:none;
  height:min(750px, calc(100vh - var(--proof-h) - var(--ph-top)), calc(min(46vw,600px) * 1.25));
  height:min(750px, calc(100svh - var(--proof-h) - var(--ph-top)), calc(min(46vw,600px) * 1.25));
  /* Two ramps, and only two.
     LEFT, where the photograph meets the copy, is the one that matters: it now
     runs across nearly a fifth of the frame, so the studio backdrop gives out
     gradually into the navy instead of starting at a visible edge. It is shaped
     to be all but opaque by the time it reaches the hand at about 7.5% in, so
     what dissolves is the photographic field and not him.
     BOTTOM takes the lower frame into the floor of the hero.
     The right runs off the section and needs no ramp; the top has none by
     design, because the crown sits ~6% down and any fade worth the name there
     goes straight through the hair. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.03) 2%, rgba(0,0,0,.11) 4%, rgba(0,0,0,.24) 6%,
    rgba(0,0,0,.42) 8%, rgba(0,0,0,.61) 10%, rgba(0,0,0,.78) 12%,
    rgba(0,0,0,.90) 14%, rgba(0,0,0,.97) 17%, #000 20%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 1.2%, rgba(0,0,0,.40) 2.4%, rgba(0,0,0,.66) 3.6%,
    rgba(0,0,0,.86) 4.6%, rgba(0,0,0,.96) 5.2%, #000 5.8%,
    #000 62%, rgba(0,0,0,.93) 71%, rgba(0,0,0,.76) 79%, rgba(0,0,0,.50) 87%,
    rgba(0,0,0,.25) 93%, rgba(0,0,0,.07) 98%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.03) 2%, rgba(0,0,0,.11) 4%, rgba(0,0,0,.24) 6%,
    rgba(0,0,0,.42) 8%, rgba(0,0,0,.61) 10%, rgba(0,0,0,.78) 12%,
    rgba(0,0,0,.90) 14%, rgba(0,0,0,.97) 17%, #000 20%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 1.2%, rgba(0,0,0,.40) 2.4%, rgba(0,0,0,.66) 3.6%,
    rgba(0,0,0,.86) 4.6%, rgba(0,0,0,.96) 5.2%, #000 5.8%,
    #000 62%, rgba(0,0,0,.93) 71%, rgba(0,0,0,.76) 79%, rgba(0,0,0,.50) 87%,
    rgba(0,0,0,.25) 93%, rgba(0,0,0,.07) 98%, transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* What the mask cannot reach without touching him, a gradient finishes: the
   hero's own navy, laid over the outer left band of the photographic field and
   gone well before the body. It is what turns a visible edge into a transition,
   and it follows the frame, never the figure. */
.chero-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(9,15,31,.88) 0%, rgba(9,15,31,.70) 6%, rgba(9,15,31,.48) 12%,
      rgba(9,15,31,.28) 18%, rgba(9,15,31,.13) 24%, rgba(9,15,31,.04) 29%,
      rgba(9,15,31,0) 34%),
    /* And a longer one along the top. This is what makes the bright studio
       backdrop resolve into the hero instead of starting under the navigation as
       a lit rectangle. It is an overlay, not a mask: it darkens the field and
       never removes him, so it can run past the crown at about 6% and over the
       hair without eating it. Finished well above the eyes. */
    linear-gradient(180deg,
      rgba(9,15,31,.74) 0%, rgba(9,15,31,.60) 2%, rgba(9,15,31,.45) 4%,
      rgba(9,15,31,.31) 6%, rgba(9,15,31,.20) 8%, rgba(9,15,31,.11) 10.5%,
      rgba(9,15,31,.05) 13%, rgba(9,15,31,0) 16%);
}
/* The frame is cut here, never on disk: the file is the whole photograph, and
   `object-position` decides what the hero shows. Anchored to the top of the
   frame, so all of the headroom the photograph has stays above the crown. */
.chero-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0%}
@media (max-width:900px){
  /* Below 900 the strip goes two up and the first screen stops trying to hold
     the whole composition, so the frame goes back to its own size at the foot
     of the hero. */
  .chero-photo{width:min(46vw,400px);height:auto;top:auto;bottom:0}
}
@media (max-width:620px){
  .chero-photo{
    position:relative;width:auto;right:auto;bottom:auto;
    /* SUBJECT CENTRING, 30 August 2026. The left margin is the only lever
       here, and it is a lever on the FRAME, not on the picture: the source is
       640x960 (2:3) inside a 1:1 box, so `cover` scales it by width and there
       is no horizontal overflow at all. `object-position`'s X is therefore
       inert below 620 and moving it would have done nothing - measured, not
       assumed. The subject's face centres on 47.5% of the frame (the widest
       facial row spans 220-388 of 640), so with the frame flush right at 80%
       wide his head landed at 58% of the viewport, ~30px right of centre.
       Solving `V - 0.525*Wf = 0.5V` keeps the frame flush right - the only
       edge treatment that works, because the source's own right edge is pale
       (~rgb(201,214,231)) against a near-black canvas and any exposed edge
       would read as a hard cut - and puts the face exactly on the viewport's
       centre line. The mask, the crop, the aspect and the source are all
       untouched; the frame is simply wider and starts further left.

       The negative right margin is what keeps it flush: `.chero` now carries
       the page gutter (see the stacked-order block above), and without this
       the frame would stop --gut short of the viewport edge and expose that
       pale edge as a hard vertical cut. Cancelling the gutter on this one
       side restores the bleed and, with a zero left margin, lands the face
       within ~1-2px of the centre line at every width in the band - the
       residual is 0.475*gut - 0.025*W, which is sub-pixel-perceptible and
       needs no magic number to chase it. */
    margin:clamp(1.8rem,4.5vh,2.6rem) calc(-1 * var(--gut)) 0 0;
    aspect-ratio:1/1;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.09) 1.5%, rgba(0,0,0,.3) 3%, rgba(0,0,0,.58) 4.5%,
    rgba(0,0,0,.82) 6%, rgba(0,0,0,.95) 7.5%, #000 9.5%, #000 100%),
      linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.9) 79%,
        rgba(0,0,0,.66) 86%, rgba(0,0,0,.36) 93%, rgba(0,0,0,.12) 97.5%, transparent 100%);
            mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.09) 1.5%, rgba(0,0,0,.3) 3%, rgba(0,0,0,.58) 4.5%,
    rgba(0,0,0,.82) 6%, rgba(0,0,0,.95) 7.5%, #000 9.5%, #000 100%),
      linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.9) 79%,
        rgba(0,0,0,.66) 86%, rgba(0,0,0,.36) 93%, rgba(0,0,0,.12) 97.5%, transparent 100%);
  }
}

/* =========================================================================
   MOTION, 22 August 2026
   Three families, and deliberately only three. Everything else on the site
   stays still: a page that animates because it can is a portfolio, not a
   professional's site.

     A  REVEAL              `.reveal` / `.rv`, already the site's entrance for
                            grouped editorial blocks. Opacity and a short lift,
                            staggered between siblings. Unchanged here.
     B  SEQUENTIAL EMPHASIS `.seq`, below. For ordered processes only — the four
                            homepage steps and the five method phases. Each item
                            is briefly lifted in turn, so the eye is walked
                            through the order rather than told about it.
     C  DATA                the Chi sono proof row. Counts and the market
                            sequence, in the behaviour block further up.

   All three are transform and opacity only, all three run once, and all three
   are off entirely under prefers-reduced-motion, where the content is already
   in its final state anyway.
   ========================================================================= */
.seq > *{--seq-i:0}
/* `both` so the item holds its own layout before and after: the emphasis leaves
   nothing behind, and the reveal's final transform is the same `none`. */
.seq.seq-run > *{
  animation:seqLift 800ms var(--e1) both;
  animation-delay:calc(var(--seq-i) * 800ms);
  transform-origin:left center;
}
@keyframes seqLift{
  0%{transform:none}
  40%{transform:scale(1.035)}
  100%{transform:none}
}
/* the mark travels with its step, in the one accent the system allows. Only a
   middle keyframe, so it departs from and returns to whatever colour the mark
   already had, whichever stage it is sitting on. */
.seq.seq-run > * .n,
.seq.seq-run > * .phz-mark{
  animation:seqMark 800ms var(--e1) both;
  animation-delay:calc(var(--seq-i) * 800ms);
}
@keyframes seqMark{40%{color:var(--accent)}}

@media (prefers-reduced-motion:reduce){
  .seq.seq-run > *,
  .seq.seq-run > * .n,
  .seq.seq-run > * .phz-mark{animation:none!important}
}
body.pinned .seq.seq-run > *,
body.pinned .seq.seq-run > * .n,
body.pinned .seq.seq-run > * .phz-mark{animation:none!important}

/* the footer is the one place on the site that is a true identity context, so
   it is the one place the professional descriptor appears. Typographically
   secondary to the name, on its own line below 700px. */
.foot-role{
  display:inline;font-family:var(--body);font-weight:400;
  font-size:.82em;letter-spacing:0;color:var(--text-tertiary);
  margin-left:.45em;white-space:nowrap;
}
@media (max-width:700px){
  .foot-role{display:block;margin-left:0;margin-top:.3rem;white-space:normal}
}

/* The homepage portrait now runs up behind the navigation, which put the menu
   over a bright studio backdrop and took its contrast from ~16:1 to 3.7:1.
   The photograph stays where it is; the navigation gets a ground instead — a
   short scrim under the bar, above the picture and below the links, gone by the
   time it clears the header. It costs the photograph nothing above the crown,
   which sits well below it, and it disappears the moment the bar goes solid. */
body.home .nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:150px;
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,9,17,.94) 0%, rgba(6,9,17,.86) 26%, rgba(6,9,17,.62) 52%,
    rgba(6,9,17,.30) 74%, rgba(6,9,17,.10) 88%, rgba(6,9,17,0) 100%);
  transition:opacity var(--t-med) var(--e1);
}
body.home .nav.solid::before{opacity:0}

/* =========================================================================
   AUDIT & STRATEGIA, composition pass, 22 August 2026
   The page was heading, three columns, heading, three columns, heading, three
   columns — a shape repeated until it stopped carrying meaning. Its three
   sections now have three different ones: the situations sit two by two, the
   analysis is an editorial framework, and the deliverables read as one
   progression. No new colours, no cards, no imagery; the variation is
   proportion, rules and type.
   ========================================================================= */

/* ---- two by two, so a fourth situation is never left standing alone ---- */
.lgrid.pairs{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:clamp(1.8rem,3.4vw,2.8rem);
}
.lgrid.pairs p{max-width:52ch}
@media (max-width:760px){
  .lgrid.pairs{grid-template-columns:minmax(0,1fr);row-gap:0}
  .lgrid.pairs li{padding-block:1.15rem}
  .lgrid.pairs li:first-child{padding-top:0;border-top:0}
}

/* ---- the analysis framework ----
   Two wide entries per row, each hung off a vertical rule rather than sitting
   under a horizontal one: the change of axis is what stops this reading as the
   same grid again. Titles a step up, copy given a real measure, and every
   territory written to the same depth — including the one that describes where
   the analysis stops, which is a sentence in its paragraph and not a note under
   it. Nothing here is styled as a caveat. */
.fwk{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2.2rem,5vw,4.5rem);row-gap:clamp(2.2rem,4vw,3.2rem);
}
.fwk li{
  border-left:1px solid var(--line);
  padding-left:clamp(1.1rem,2vw,1.75rem);
}
.fwk h3{
  font-size:clamp(1.12rem,1.5vw,1.32rem);font-weight:500;
  letter-spacing:-.018em;color:var(--fg);margin-bottom:.7rem;
}
.fwk p{font-size:var(--fs-sm);line-height:1.62;color:var(--fg-2);max-width:46ch}
@media (max-width:820px){
  .fwk{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.8rem,5vw,2.4rem)}
  .fwk p{max-width:56ch}
}

/* ---- the deliverables, as one process ----
   Four stages on a rail, left to right, each marked where it sits on it. Below
   860px the rail turns vertical and the sequence survives the stack.

   EQUAL STATUS, 25 August 2026. The last mark used to be vermilion, which
   promoted the closing call above the analysis, the diagnosis and the roadmap.
   All four are what the buyer receives, and the marker no longer ranks them:
   one neutral dot per stage, and the order does the sequencing. */
.flow{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(1.4rem,3vw,2.6rem);
  position:relative;padding-top:2.1rem;
}
.flow::before{
  content:"";position:absolute;top:.42rem;left:0;right:0;height:1px;
  background:var(--line);
}
.flow li{position:relative}
.flow li::before{
  content:"";position:absolute;top:-1.95rem;left:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--fg-3);box-shadow:0 0 0 4px var(--bg);
}
.flow h3{
  font-size:clamp(1.02rem,1.3vw,1.16rem);font-weight:500;
  letter-spacing:-.012em;color:var(--fg);margin-bottom:.6rem;
}
.flow p{font-size:.95rem;line-height:1.58;color:var(--fg-2);max-width:32ch}
@media (max-width:860px){
  .flow{
    grid-template-columns:minmax(0,1fr);row-gap:clamp(1.5rem,4vw,2rem);
    padding-top:0;padding-left:1.6rem;
  }
  .flow::before{top:.5rem;bottom:.5rem;left:3px;right:auto;width:1px;height:auto}
  .flow li::before{top:.35rem;left:-1.6rem}
  .flow p{max-width:52ch}
}

/* =========================================================================
   THE SCROLL CUE, 23 August 2026
   The hero now closes on the fold instead of running past it, which is the
   point of the pass — but a composition that resolves exactly at the bottom
   edge can also read as the end of the page. This says it is not.

   CENTRED, 25 August 2026. It used to sit at the right of the wrap's own axis,
   which read as aligned to the portrait's corner rather than to the hero. It is
   now on the horizontal centre of the wrap, deliberately under the composition
   it belongs to. It still sits at the foot of the hero, below the CTA row and
   clear of it: the cluster is centred on the measure while the buttons stay on
   the left axis, so the two never meet. Mono, tertiary, one size below every
   other label on the page: subordinate to the CTAs and to the strip by
   construction, not by restraint after the fact. No mouse glyph, no vermilion,
   no bounce — the chevron drifts its own height once every 2.8 seconds and
   comes back, which reads as drift rather than as an attempt to be noticed.
   ========================================================================= */
.chero-cue{
  position:absolute;left:0;right:0;bottom:clamp(1rem,2.4vh,1.75rem);
  z-index:2;pointer-events:none;
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:center;gap:.7rem;
}
.chero-cue span{
  font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-tertiary);line-height:1;
}
/* the arrow is two borders on a rotated square: one element, no glyph, and it
   inherits the label's colour so the pair can never drift apart */
.chero-cue i{
  /* the square's layout box centres on the label, but a 45 degree rotation puts
     the visible mass of the chevron below that centre; 2px takes it back onto
     the label's optical axis */
  display:block;width:6px;height:6px;margin-bottom:2px;
  border-right:1px solid var(--text-tertiary);
  border-bottom:1px solid var(--text-tertiary);
  transform:rotate(45deg);
  animation:cueDrift 2.8s var(--e1) infinite;
}
/* translate inside the rotated frame, so the travel is straight down the screen */
@keyframes cueDrift{
  0%,100%{transform:rotate(45deg) translate(0,0)}
  50%{transform:rotate(45deg) translate(2.5px,2.5px)}
}
@media (prefers-reduced-motion:reduce){
  .chero-cue i{animation:none}
}
body.pinned .chero-cue i{animation:none}
/* Below 900 the hero no longer holds the whole composition and the strip goes
   two up, so the cue would be pointing at something the visitor can already
   see is unfinished. It is not drawn. */
@media (max-width:900px){
  .chero-cue{display:none}
}

/* =========================================================================
   SUPPORTO AGENZIE, 23 August 2026
   The page ran hero, grid, grid, split text, form: five sections, two of them
   the same object, and it read as a secondary information page. Four
   compositions now carry it, and each one is a different shape on purpose, so
   the rhythm changes as the argument does.

     .sit   three situations stepped down and across the measure
     .mdl   three collaboration models on one rail, index at display size
     .intg  the shape of the relationship beside the answers about it
     .sig   a compact proof band of label and value on hairlines

   No new colours, no new type, no cards, no panels. Every token here is the
   site's own.
   ========================================================================= */

/* ---- 1. the situations ----
   Three cases on a staircase rather than in three equal columns. Each one takes
   a wide measure and starts further right than the one above it, so the section
   reads as a descent through the situations instead of a menu of them, and it
   is unmistakably a different object from the models below. */
.sit{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1rem,2vw,1.75rem);row-gap:0;
}
.sit-item{
  border-top:1px solid var(--line);
  padding-top:clamp(1.1rem,2vw,1.6rem);
  padding-bottom:clamp(1.9rem,3.6vw,3rem);
}
/* Left, centre, right, and the copy is aligned with the step rather than only
   indented by it: three items that merely shift their margin read as a grid
   with untidy gutters. The measure is capped so the centred and right-hand
   entries stay readable at this alignment. */
.sit-item:nth-child(1){grid-column:1 / 7;text-align:left}
.sit-item:nth-child(2){grid-column:4 / 10;text-align:center;margin-top:clamp(.8rem,2vw,1.8rem)}
.sit-item:nth-child(3){grid-column:7 / 13;text-align:right;margin-top:clamp(1.6rem,4vw,3.6rem)}
.sit-item:nth-child(2) p{margin-inline:auto}
.sit-item:nth-child(3) p{margin-left:auto}
.sit-item:last-child{padding-bottom:0}

/* The entrance carries the composition: the first arrives from the left, the
   middle rises, the last arrives from the right, in that order. The site's own
   entrance observer supplies `.in`; only the direction and the timing are
   local. The global reduced-motion rule pins `.reveal > *` with !important and
   outranks all of this, which is why none of it is marked important. */
.sit.reveal > .sit-item{opacity:0}
.sit.reveal > .sit-item:nth-child(1){transform:translateX(-22px)}
.sit.reveal > .sit-item:nth-child(2){transform:translateY(18px)}
.sit.reveal > .sit-item:nth-child(3){transform:translateX(22px)}
.sit.reveal.in > .sit-item{opacity:1;transform:none}
.sit.reveal.in > .sit-item:nth-child(1){transition-delay:0ms}
.sit.reveal.in > .sit-item:nth-child(2){transition-delay:190ms}
.sit.reveal.in > .sit-item:nth-child(3){transition-delay:380ms}
.sit h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.22rem,2vw,1.6rem);line-height:1.18;letter-spacing:-.022em;
  color:var(--fg);margin-bottom:.7rem;
}
.sit p{font-size:var(--fs-sm);line-height:1.64;color:var(--fg-2);max-width:54ch}
@media (max-width:900px){
  /* one column, one alignment: a step needs width to be a step, and on a phone
     the three become a plain vertical sequence instead of a broken one */
  .sit-item:nth-child(1),.sit-item:nth-child(2),.sit-item:nth-child(3){
    grid-column:1 / -1;text-align:left;margin-top:0;
  }
  .sit-item:nth-child(2) p,.sit-item:nth-child(3) p{margin-inline:0}
  .sit p{max-width:60ch}
  .sit.reveal > .sit-item:nth-child(1),
  .sit.reveal > .sit-item:nth-child(2),
  .sit.reveal > .sit-item:nth-child(3){transform:translateY(18px)}
}

/* ---- 2. the collaboration models ----
   The core of the page, and the one section allowed to be big. Three ways into
   the same relationship on one rail, the index set at display size in the mono
   face: an agency has to understand in seconds that there is more than one way
   to use me. The rail is the site's own connector idiom from the five-phase
   method, scaled up; the hairline between rows is what stops three large blocks
   from reading as one wall of text. */
.mdl{
  --mdl-col:clamp(3.4rem,6vw,5.6rem);position:relative;
  padding-left:clamp(1.1rem,2.4vw,2rem);
  /* the head above is centred, so the list is inset from both edges rather than
     run to the full wrap: it gives the three models air without boxing them */
  max-width:62rem;margin-inline:auto;
}
/* One rail down the whole list rather than a connector per row. Segments that
   stop above and below each index read as a broken line at this scale, where
   the phase list gets away with it because its marks are circles the line can
   land on. Continuous, with the row hairlines crossing it, reads as one ladder:
   three ways into the same relationship, not three separate offers. */
.mdl::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:1px;background:var(--hair-2);opacity:.45;
}
.mdl li{
  position:relative;display:grid;
  grid-template-columns:var(--mdl-col) minmax(0,1fr);
  column-gap:clamp(1.4rem,3.4vw,3rem);
  padding-block:clamp(2.1rem,4.2vw,3.4rem);
  border-top:1px solid var(--line);
}
.mdl li:first-child{border-top:0;padding-top:0}
.mdl li:last-child{padding-bottom:0}
.mdl-n{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(1.85rem,3.4vw,2.75rem);line-height:1;letter-spacing:-.03em;
  color:var(--fg-3);opacity:.62;
}
.mdl-body h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.15rem);line-height:1.12;letter-spacing:-.026em;
  color:var(--fg);margin-bottom:.9rem;
}
.mdl-body p{font-size:var(--fs-sm);line-height:1.68;color:var(--fg-2);max-width:62ch}
@media (max-width:640px){
  /* the index leaves its column and sits over the name, which is the only way
     the copy keeps a readable measure on a phone */
  .mdl{padding-left:1rem}
  .mdl li{grid-template-columns:minmax(0,1fr);row-gap:.7rem}
  .mdl-n{font-size:1.5rem}
}

/* ---- 3. the integration ----
   The shape of the relationship on the left, the answers an agency actually
   asks for as prose on the right. Six feature boxes would have said the
   opposite of what the section claims. */
.intg{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(2.2rem,5vw,4.5rem);align-items:stretch;
}
/* The timeline has to carry the same vertical depth as the prose beside it, or
   three nodes sit compressed at the top of an empty column and the composition
   reads as a list that ran out. It stretches, and the nodes distribute. */
.intg-wrap{display:flex}
.intg-flow{
  --in-node:9px;
  position:relative;margin:0;list-style:none;padding:0;
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  min-height:100%;
}
.intg-flow li{position:relative;padding-left:2.1rem}
/* the track the line runs on, present from the start and deliberately faint */
.intg-flow::before{
  content:"";position:absolute;left:4px;top:.36rem;bottom:.36rem;
  width:1px;background:var(--hair-2);opacity:.22;
}
/* the line itself, drawn downward once the section arrives. `--draw` is flipped
   by the same observer that draws the homepage method and the five-phase rail,
   so this needs no machinery of its own. */
.intg-flow::after{
  content:"";position:absolute;left:4px;top:.36rem;bottom:.36rem;
  width:1px;background:var(--hair-2);opacity:.85;
  transform:scaleY(var(--draw,0));transform-origin:top center;
  /* linear, deliberately: the site's ease-out covered half the column in the
     first fifth of the time, so the line arrived at the middle node most of a
     second before the node lit and the causality read backwards. An even draw
     lets each node's delay be its position on the line. */
  transition:transform 1.9s linear;
}
/* the node at rest: an outline, subordinate to the label beside it */
.intg-flow li::before{
  content:"";position:absolute;left:0;top:.34rem;z-index:1;
  width:var(--in-node);height:var(--in-node);border-radius:50%;
  border:1px solid var(--hair-2);background:var(--bg);
}
/* The node once the line has reached it. It reads the same `--draw` the line
   does, so the two cannot drift apart, and each node waits for the moment the
   line arrives at it.

   ONE TREATMENT FOR ALL THREE, 25 August 2026. The middle node used to light
   vermilion and carry an accent ring, which made the diagram argue its point
   with a dot. The three nodes now light identically and the hierarchy is left
   to the content: `Andrea · Competenza Paid Media senior` and the capabilities
   under it are what says which node is the subject. */
.intg-flow li::after{
  content:"";position:absolute;left:3px;top:calc(.34rem + 3px);z-index:2;
  width:5px;height:5px;border-radius:50%;background:var(--fg-2);
  opacity:var(--draw,0);
  transition:opacity .5s var(--e1);
}
.intg-flow li:nth-child(1)::after{transition-delay:.2s}
.intg-flow li:nth-child(2)::after{transition-delay:.95s}
.intg-flow li:nth-child(3)::after{transition-delay:1.8s}
.intg-k{
  display:block;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.35rem;
}
.intg-v{display:block;color:var(--fg);font-size:var(--fs-sm);line-height:1.5}
.intg-tags{
  display:block;margin-top:.55rem;max-width:32ch;
  font-family:var(--mono);font-size:.74rem;line-height:1.7;letter-spacing:.04em;
  color:var(--fg-3);
}
/* SIX CAPABILITIES, SIX LINES, 25 August 2026. Run inline with middots they
   wrapped wherever the measure happened to end — `Strategia · Execution ·` on
   one line, `Testing ·` alone on another — and six capabilities read as four
   ragged ones. Each now takes its own line, so the count is legible at a
   glance and the wrap point is no longer an accident of the column width.

   One item per line makes the separator redundant, and it is dropped rather
   than left hanging at the end of each line: this stays a compact mono list,
   not a bulleted one. Type, size, tracking, colour and the leading are the
   ones the cluster already used. */
.intg-tags i{font-style:normal;display:block}
.intg-body p{
  font-size:var(--fs-sm);line-height:1.7;color:var(--fg-2);
  max-width:60ch;margin-bottom:1.05rem;
}
.intg-body p:last-child{margin-bottom:0}
/* CONFIDENTIALITY IS PART OF THE NARRATIVE, 25 August 2026.
   It used to ship as `.intg-note`: a hairline, a mono RISERVATEZZA label and a
   smaller, dimmer type ramp. Three signals that all said the same wrong thing,
   that this is a legal footnote appended to the section. How NDAs, white-label
   and client material are handled is simply the last thing an agency needs to
   know about working with me, and it now reads as the paragraph it is — same
   measure, same size, same colour, same spacing as the four above it. The rule,
   the label and the whole `.intg-note` component are gone from the stylesheet
   and from the markup, not merely unstyled. */
@media (max-width:900px){
  .intg{grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,5vw,2.8rem)}
  .intg-flow{min-height:0;gap:clamp(1.1rem,3vw,1.6rem)}
  .intg-tags{max-width:44ch}
  .intg-body p{max-width:62ch}
}
/* a mid-session flip to reduced motion pins the whole sequence, the way it
   pins every other entrance on the site */
body.pinned .intg-flow::after{transform:scaleY(1)!important;transition:none!important}
body.pinned .intg-flow li::after{opacity:1!important;transition:none!important}

/* ---- 4. the proof band ----
   Compact by design. Its job is why an account can be handed over, not a second
   About: label and value on hairlines, no figures repeated from the homepage
   strip, nothing boxed. */
.sig{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.4rem,3vw,2.8rem);row-gap:0;margin:0;
}
.sig > div{
  border-top:1px solid var(--line);
  padding-block:clamp(.9rem,1.8vw,1.25rem);
}
.sig dt{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:.4rem;
}
.sig dd{margin:0;color:var(--fg);font-size:var(--fs-sm);line-height:1.5}
/* The band is a transition, not a section: its invitation belongs under the
   whole object, on its centre, rather than hung off the left column. */
.sig-foot{
  /* max-width:none because it is a paragraph and inherits the body measure,
     which put its centre 195px left of the band's */
  text-align:center;max-width:none;margin-top:clamp(1.6rem,3vw,2.4rem);
}
.sig-link{display:inline-block}
@media (max-width:820px){
  .sig{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .sig{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   THE EYEBROW SYSTEM, Italian site, 23 August 2026
   A GLOBAL DESIGN-SYSTEM DECISION, not a page treatment.

   Two changes, one idea. An inner page opens on its headline, because a page
   is not a section of itself and the nav, the title and the breadcrumb already
   name it; the hero eyebrow is gone from the markup, not hidden, so nothing
   reserves space for it. What remains is the SECTION eyebrow, and that is now
   a vermilion marker: it is the reader's structural anchor down a long page,
   and colour alone is what promotes it. Size, weight, tracking, case and the
   left-axis alignment rule are all untouched.

   This reverses the earlier lock that kept vermilion off kickers. The colour is
   still scarce by construction: a section eyebrow is 12.5px of mono and a 22px
   hairline, a few per page, against a primary CTA that is a filled block. It
   never becomes a page colour.

   Scoped to `html[lang="it"]` because the English site is synchronised in one
   dedicated pass, after the Italian is signed off. Removing the scope is the
   whole English change when that pass comes.
   ========================================================================= */
html[lang="it"] .kicker{color:var(--accent)}
html[lang="it"] .kicker::before{background:var(--accent)}
/* the `plain` variant keeps its own quieter reading and is not a section marker */
html[lang="it"] .kicker.plain{color:var(--fg-2)}
html[lang="it"] .kicker.plain::before{background:var(--fg-2);opacity:.5}

/* =========================================================================
   CENTRED SECTION INTRODUCTIONS, 23 August 2026
   A centred head is one editorial statement: the headline and its supporting
   line belong together, and the body underneath is a second layer. The default
   head gives both gaps roughly the same value, which read as three stacked
   paragraphs rather than an introduction and the content it introduces.

   One token, so the relationship is the same wherever a centred head is used.
   The line above tightens and the gap below roughly doubles: the section grows
   by the difference, not by spacing everything equally, and the token scales
   down on a phone so a narrow column never opens a hole.
   ========================================================================= */
.blk-head.is-center{
  --intro-gap:clamp(3rem,5.5vw,4.75rem);
  margin-bottom:var(--intro-gap);
}
.blk-head.is-center .lede{margin-top:.85rem}
/* With the eyebrow deleted the headline becomes the first child, so the head
   takes back the space the eyebrow's own margin used to provide. Nothing is
   reserved and nothing is hidden: there is simply no element here. */
.blk-head.no-eyebrow > h2:first-child{margin-top:0}
.pos-sec .blk-head.no-eyebrow{padding-top:clamp(.4rem,1vw,.9rem)}
/* The shared eyebrow is forced to flex-start by `.blk-head > .kicker`, which is
   right for every left-aligned head and wrong for this one: the rule and its
   label sat hard against the wrap's left edge while the headline was centred,
   so the eyebrow read as detached from the composition it introduces. Same
   component, same rule, same gap; only the axis follows the head. Below the
   breakpoint the head goes left-aligned and this reverts with it. */
/* THE EYEBROW IS NEVER CENTRED, 24 August 2026.
   Centring it with the head was a regression: `— COME LAVORO` belongs on the
   same left section axis as `— CASE STUDY` and `— ALTRI SETTORI`, and the
   section deliberately combines a LEFT-ALIGNED eyebrow with a CENTRED editorial
   statement. Only `max-width` is lifted, so the flex box can span the head and
   the rule starts exactly on the wrap's content edge; alignment stays
   flex-start from `.blk-head > .kicker`, at every width. */
.blk-head.is-center > .kicker{max-width:none}

/* =========================================================================
   RESULTS PAGE, ITALIAN ARCHITECTURE, 23 August 2026
   ARCHITECTURE PROTOTYPE. Imagery is deliberately unresolved.

   The page was two static grids that read as the same object twice. It is now
   four layers with four different shapes:

     the hero            unchanged
     the case system     four compact selectors, nothing open on arrival,
                         exactly one case expanded directly beneath them
     the editorial break  one statement and its reasoning, no grid at all
     breadth + CTA       light ledger rows, the last of which is the invitation

   Vermilion behaves exactly as it does everywhere else: the section eyebrows,
   the SELECTED selector, the CTA link and the focus rings. A resting metric, a
   category label and an index never take it, so the panel's own category label
   stays tertiary even though the reference material colours it.

   The English page keeps the previous architecture and none of this reaches it:
   every selector below is a class that only /risultati/ emits.
   ========================================================================= */

/* ---- the architecture slot ----
   NOT the [DA FORNIRE] marker. That one stands for a fact that must never
   quietly ship and is built to be impossible to miss; this stands for an image
   arriving in a later pass, and has to be quiet enough that the composition
   around it can be judged at real scale. It carries the final aspect ratio, so
   dropping the photograph in moves nothing. */
.slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.28rem;width:100%;aspect-ratio:var(--ar,3 / 2);
  border:1px solid var(--hair);border-radius:5px;
  background-color:var(--surface-01);
  background-image:repeating-linear-gradient(135deg,
    rgba(150,185,240,.05) 0 1px, rgba(150,185,240,0) 1px 10px);
  text-align:center;padding:.5rem;overflow:hidden;
}
.slot i,.slot em{
  font-style:normal;font-family:var(--mono);color:var(--text-tertiary);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.35;
}
.slot i{font-size:.63rem;max-width:22ch}
.slot em{font-size:.6rem;opacity:.6}

/* The hero opens the page and the case system is its proof, so the seam between
   them is tightened rather than left at a full section break. Scoped to the
   Italian site: the English page is still two static grids under a full break. */
html[lang="it"] .cases-sec{padding-top:clamp(2.5rem,5vw,4.5rem)}

/* ---- the hero takes the width ----
   Same centred direction and the same copy; only the measure and the display
   size move, so the headline sets on two commanding lines at a normal desktop
   width instead of three cramped ones. The whitespace belongs at the edges, not
   inside the headline. */
html[lang="it"] .sec-head.is-intro h1{
  font-size:clamp(2.5rem,5.2vw,4.3rem);max-width:28ch;
  letter-spacing:-.036em;line-height:1.03;
  /* two lines of roughly equal length rather than a long one and a short tail */
  text-wrap:balance;
}
html[lang="it"] .sec-head.is-intro .lede{max-width:74ch;font-size:clamp(1.1rem,1.55vw,1.4rem)}
/* the page opening gets its height back: this hero had been trimmed to sit
   below a full inner-page hero, and the trim is what made it read as timid */
html[lang="it"] .phero-mid{padding-block:clamp(8rem,17vh,12rem) clamp(2.75rem,5.5vw,5rem)}

/* The section marker and one line of context. The headline that used to sit
   here repeated the hero at full size and pushed the four cases off the first
   screen; it survives in the document as a screen-reader heading. */
.cs-head{margin-bottom:clamp(1.4rem,2.4vw,1.9rem)}
/* The section's opening statement, not a caption. It carries the whole
   case-study block, so it is set a step above body and given a measure wide
   enough that the first sentence completes on its own line: at 62ch it broke
   after "Questi sono", which orphans the second clause and reads as an
   accident. 70ch lands the natural two-line rhythm without a hardcoded break,
   and mobile falls back to the narrower measure by container width alone. */
.cs-lede{
  /* 64ch, not 70. The new intro is longer, and at 70ch balance split it straight
     through "come ho lavorato". At 64 it resolves to three lines that break at
     the sentence boundary and then at a comma, which is the reading the copy
     was written for. Still wide enough to carry presence below the hero. */
  max-width:64ch;
  font-size:clamp(1.02rem,1.28vw,1.16rem);
  line-height:1.58;color:var(--fg-2);
  /* the two clauses are 68 and 61 characters, so the balanced split IS the
     sentence boundary: the rhythm comes out of the text instead of a <br>,
     and it survives a copy edit rather than breaking on one */
  text-wrap:balance;
}

/* ---- 02a. the four selectors ----
   THE IMAGE IS THE CARD. A full-bleed photograph with the icon, the name and
   the classification sitting on it over a gradient, rather than a picture with
   detached metadata underneath it. The body owns the box, so the media can fill
   the card absolutely and a supplied photograph lands in exactly the frame the
   placeholder was holding. */
.csys{margin-top:0}
.cs-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.7rem,1.4vw,1.15rem);
}
.cs-tab{
  display:block;width:100%;padding:0;text-align:left;color:inherit;cursor:pointer;
  position:relative;overflow:hidden;border-radius:8px;
  border:1px solid var(--line);background:var(--surface-01);
  transition:transform var(--t-fast) var(--e1),border-color var(--t-fast) var(--e1);
}
.cs-tab-media{position:absolute;inset:0;display:block}
.cs-tab-media .slot,.cs-tab-media img{
  width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;
}
.cs-tab-media .slot{justify-content:flex-start;padding-top:.85rem}
.cs-tab-media .slot em{display:none}
/* THE PHOTOGRAPH IS THE PROTAGONIST, 24 August 2026.
   These four are the cases that open; the sector cards below are secondary
   evidence. That hierarchy has to be visible before anything is read, so the
   flagship image carries no wash: it was on saturate(.62) brightness(.78),
   which matched it to the secondary treatment and flattened the distinction.
   The secondary cards keep theirs deliberately (see .sct-media). */
.cs-tab-media img{
  object-fit:cover;
  transition:filter var(--t-med) var(--e1),transform var(--t-slow) var(--e1);
}
/* Readability is now LOCAL. The top and middle of the frame stay clear; the
   ramp begins only where the icon sits and reaches full strength under the
   name and classification. Audited for worst-pixel contrast, not eyeballed. */
.cs-tab-media::after{
  content:"";position:absolute;inset:0;
  /* PHOTOGRAPH FIRST, 24 August 2026. The previous pool was a tight ellipse at
     .86, which read as a visible dark spot and drained the life out of the Golf
     photograph in particular. The visible spot came from the FALLOFF, not only
     the peak: a small ellipse dropping fast draws its own edge.

     This is the same idea, flattened. The ellipse is much wider and taller, so
     it has no perceptible boundary, and the peak drops. Because the shape now
     covers the cluster evenly rather than fading out under the classification,
     the text sits in a stronger part of a lighter pool. Contrast is measured
     against every photograph, not assumed. */
  background:
    radial-gradient(ellipse 112% 76% at 50% 55%,
      rgba(7,10,20,.74) 0%,  rgba(7,10,20,.66) 38%,
      rgba(7,10,20,.44) 66%, rgba(7,10,20,.12) 88%,
      rgba(7,10,20,0)   100%),
    linear-gradient(180deg,
      rgba(7,10,20,0) 0%, rgba(7,10,20,0) 55%, rgba(7,10,20,.20) 100%);
}
/* The words carry their own local readability rather than making the whole
   photograph darker. Peak alpha drops from .95 to .72 for exactly this reason:
   these cards must stay clearly brighter than the sector cards below. */
.cs-tab-body{
  /* Local contrast that costs the photograph nothing: it lives on the glyphs,
     not on the image. Strengthened as the pool was lightened, so real-world
     legibility improves even where the measured gradient-only figure drops. */
  text-shadow:0 1px 2px rgba(4,7,14,.92),0 2px 7px rgba(4,7,14,.72),0 10px 30px rgba(4,7,14,.6);
}
/* the placeholder box has no photograph to protect, so it keeps an even ground
   and does not inherit the bottom-weighted ramp meant for imagery */
.cs-tab-media:has(.slot)::after{
  background:linear-gradient(180deg,
    rgba(7,10,20,.06) 0%, rgba(7,10,20,.20) 50%, rgba(7,10,20,.40) 100%);
}
/* the body owns the box: it is what gives the card its height.
   METADATA AS OVERLAY COMPOSITION, 24 August 2026. The group used to sit hard
   on the floor of the card, which read as a caption bolted under a thumbnail.
   It now sits in the lower-middle of the frame, inside the photograph.
   The lift is a PERCENTAGE, which resolves against the card's own width, so the
   composition holds its proportions at every breakpoint and a placeholder card
   is laid out identically to a photographed one. */
.cs-tab-body{
  position:relative;z-index:1;display:flex;flex-direction:column;
  /* CENTRED IDENTITY CLUSTER, 24 August 2026. The group is no longer anchored
     to the floor of the card at all: it is centred on both axes and biased a
     little below the exact middle, so it reads as a composition placed on the
     photograph rather than as a caption sitting under it. The bias is a
     percentage of the card's own width, so a placeholder card composes exactly
     like a photographed one at every breakpoint. */
  justify-content:center;align-items:center;text-align:center;
  aspect-ratio:4 / 5;
  padding:clamp(.9rem,1.65vw,1.3rem);
  padding-top:calc(clamp(.9rem,1.65vw,1.3rem) + 7%);
}
.cs-tab .cs-ico{
  /* 15px vanished at normal viewing distance. Sized properly through the SVG box
     rather than a transform, so the stroke stays crisp: it now reads as the top
     element of the cluster while staying subordinate to the name by weight and
     tone. The name is display-face at ~19px; this is a hairline pictogram. */
  width:30px;height:30px;color:var(--text-secondary);margin-bottom:.78rem;
  transition:color var(--t-fast) var(--e1);
}
.cs-tab-name{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:-.02em;line-height:1.18;
  color:var(--text-primary);
}
.cs-tab-sub{
  display:block;margin-top:.28rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  /* The smallest text on the card, over a photograph rather than a flat ground.
     With the pool lightened for the photography's sake, the classification takes
     the PRIMARY tone: it buys the contrast back from the type instead of from
     the image, which is the right trade when the brief is photography first.
     Hierarchy is unaffected, because the name outranks it by size and face
     (19px display against 10.5px mono), not by colour. */
  color:var(--text-primary);
}
/* the selected signal: a short rule set into the card's foot, drawn from the
   left. Two small marks and a border, never a filled orange tab. */
.cs-tab-mark{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-med) var(--e1);
}
@media (hover:hover) and (pointer:fine){
  .cs-tab:hover{transform:translateY(-2px);border-color:var(--hair-2)}
  .cs-tab:hover .cs-tab-media img{transform:scale(1.025);filter:brightness(1.05)}
  .cs-tab:hover .cs-ico{color:var(--text-primary)}
}
.cs-tab[aria-expanded="true"]{border-color:var(--accent)}
.cs-tab[aria-expanded="true"] .cs-ico{color:var(--accent)}
.cs-tab[aria-expanded="true"] .cs-tab-mark{transform:scaleX(1)}
.cs-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* The instruction. It sits ABOVE the four cards, because its job is to say they
   are controls before the reader has to guess, and it stays visible with a case
   open, because it is also how you switch. Small and secondary, but set to be
   read: no box, no button, no eyebrow rule and nothing animated. */
.cs-hint{
  margin:clamp(1.5rem,2.8vw,2.2rem) 0 clamp(.9rem,1.6vw,1.2rem);max-width:none;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
  color:var(--text-secondary);
}

/* ---- 02b. the expanded case ----
   One component, four cases. The panel is a lifted surface so an open case
   reads as an object that arrived, not as more page. */
.cpanel{position:relative;overflow:hidden}
.cpanel[hidden]{display:none}
.cp-in{
  margin-block:clamp(1.4rem,2.6vw,2.1rem) clamp(1.6rem,2.8vw,2.2rem);
  padding:clamp(1.5rem,3vw,2.6rem);
  border:1px solid var(--line);border-radius:9px;
  background:var(--surface-01);box-shadow:var(--lift-1);
}
/* the dismiss control sits over the top-right of the case, which is where the
   business image will be once it exists: it carries its own ground so it stays
   legible against a photograph as well as against the slot */
.cpanel .cp-x{
  position:absolute;top:calc(clamp(1.4rem,2.6vw,2.1rem) + .55rem);right:.55rem;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(7,10,20,.66);border:1px solid var(--hair);border-radius:50%;
  cursor:pointer;font-size:1.2rem;line-height:1;color:var(--text-secondary);
  transition:color var(--t-fast) var(--e1),border-color var(--t-fast) var(--e1);
}
.cpanel .cp-x:hover{color:var(--accent);border-color:var(--accent-soft)}
.cs-panels{position:relative}

/* the internal case header */
.cp-hero{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
}
.cp-cat{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-tertiary);
}
.cp-hero h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.14;letter-spacing:-.026em;
  margin-top:.75rem;max-width:20ch;color:var(--text-primary);
}
.cp-lede{
  margin-top:.9rem;font-size:var(--fs-sm);line-height:1.62;
  color:var(--text-secondary);max-width:52ch;
}
.cp-hero-media{padding-top:.35rem}
.cp-hero-media img{
  display:block;width:100%;aspect-ratio:var(--ar,4 / 3);object-fit:cover;
  border-radius:6px;box-shadow:var(--lift-1);
}

/* the KPI group. Figures on hairlines, no boxes, the lead carried by scale.
   A slot with no confirmed figure draws a rule, never a character. */
/* One row of equal columns whatever the case carries, three KPI or four:
   `auto-fit` was creating a fifth collapsed track at some widths and moving the
   figures off the measure. The count comes from the data, not from the rule. */
.cp-kpi{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:0 clamp(1rem,2vw,1.7rem);
  margin:clamp(1.5rem,2.8vw,2.1rem) 0 0;
}
.cp-kpi .met{padding-block:.2rem}
.cp-kpi .met + .met{
  border-left:1px solid var(--line);padding-left:clamp(1rem,2vw,1.7rem);
}
.cp-kpi dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:.4rem;
}
/* Deliberately NOT tabular-nums. Nothing here counts up and nothing aligns
   between rows, and in this face tabular figures give the decimal separator a
   full digit's advance, which sets the lead figure as "8 , 39". */
.cp-kpi dd{
  margin:0;font-family:var(--mono);font-weight:500;
  font-size:clamp(1rem,1.4vw,1.16rem);letter-spacing:-.025em;color:var(--text-secondary);
}
/* the budget carries its own unit and period, so it is the one value that has
   to be allowed to set smaller rather than wrap onto a second line */
.cp-kpi .met.is-budget dd{font-size:clamp(.86rem,1.1vw,.98rem);white-space:nowrap}
.cp-kpi .met.lead dd{
  color:var(--text-primary);font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.05;
}
.cp-kpi .met.is-pending dd{
  width:2.25rem;height:1px;background:var(--hair-2);margin-top:.75rem;
}
/* The Mercati · Periodo metadata row was removed from the written case on
   25 August 2026, its markup path went on 26 August, and these rules with it.
   A case states its market in its own business description. */

/* the evidence body: what I did on the left, what it looked like on the right */
.cp-body{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(1.8rem,4vw,3.4rem);
  margin-top:clamp(2.2rem,4.2vw,3.4rem);
  padding-top:clamp(2rem,3.8vw,3rem);border-top:1px solid var(--line);
}
.cp-work h4{
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-tertiary);
  margin-bottom:clamp(1.2rem,2.2vw,1.7rem);
}
/* the interventions, on the site's own connector rail */
.cp-beats{position:relative;padding-left:1.5rem}
.cp-beats::before{
  content:"";position:absolute;left:3px;top:.5rem;bottom:.5rem;
  width:1px;background:var(--hair-2);opacity:.5;
}
.cp-beats li{position:relative;padding-bottom:clamp(1.3rem,2.4vw,1.85rem)}
.cp-beats li:last-child{padding-bottom:0}
.cp-beats li::before{
  content:"";position:absolute;left:-1.5rem;top:.44rem;
  width:7px;height:7px;border-radius:50%;
  background:var(--surface-01);border:1px solid var(--border-int-ink);
}
.cp-beats b{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(1rem,1.2vw,1.08rem);letter-spacing:-.018em;line-height:1.25;
  color:var(--text-primary);
}
.cp-beats p{
  margin-top:.42rem;font-size:.92rem;line-height:1.62;
  color:var(--text-secondary);max-width:var(--cp-narr);
}

/* the screenshots. Evidence, so they are given the darkest ground in the
   system, one hairline and a mono caption. Nothing here reads as photography. */
.cp-evid{display:flex;flex-direction:column;gap:clamp(1.3rem,2.4vw,1.9rem)}
.cp-shot{margin:0}
/* `display` is deliberately not restated here: the slot is a flex column and
   restating it as block dropped its label to the top-left corner */
.cp-shot .slot,.cp-shot img{
  width:100%;aspect-ratio:var(--ar,16 / 9);
  background-color:var(--canvas);
  border:1px solid var(--hair-2);border-radius:6px;box-shadow:var(--lift-1);
}
/* A REAL CAPTURE IS DATA. `contain`, never `cover`: a cover crop would eat the
   metric columns at the edges. No filter, no overlay, no heavy radius, and a
   ground light enough that the screenshot's own chrome stays readable. */
.cp-shot img{display:block;object-fit:cover}
.cp-shot img.is-shot{
  object-fit:contain;height:auto;filter:none;border-radius:4px;
  background-color:#0E1526;
}
/* the stacked body: a wide strip gets the panel's whole measure */
.cp-body.is-stacked{grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,4vw,2.8rem)}
/* The stacked body's own `max-width:64ch` on the interventions was removed on
   26 August 2026. It was the rule that left Golf, Training and Dispositivi
   medici setting 627px of text inside a 1075px panel. A stacked case now uses
   the shared `--cp-narr` like every other case; it needs no rule of its own. */
/* The visible screenshot caption was removed from the architecture on
   25 August 2026 and its orphan rule went with it on 26 August: the KPI band
   states the figures, the capture shows them and the alt carries them for a
   reader who cannot see it. A caption was the same information a fourth time.
   Do not reintroduce it. */
/* The winning-creative strip that used to close the case body was removed on
   23 August 2026. A real creative can identify a brand the case study
   anonymises, and it proves nothing the Ads Manager captures do not. Do not
   reintroduce it under another name. */

.cp-pending{
  margin-top:clamp(1.8rem,3.4vw,2.6rem);padding-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid var(--line);max-width:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;line-height:1.7;
  color:var(--text-tertiary);
}
.cp-foot{margin-top:clamp(1.8rem,3.4vw,2.6rem);max-width:none;text-align:center}
.cs-back{
  display:inline-flex;align-items:center;gap:.5rem;background:transparent;
  border:0;border-bottom:1px solid var(--accent-soft);padding:0 0 .18rem;
  cursor:pointer;font-family:var(--mono);font-size:var(--fs-sm);color:var(--fg);
  transition:color var(--t-fast) var(--e1),border-color var(--t-fast) var(--e1);
}
.cs-back:hover{color:var(--accent);border-color:var(--accent)}
@media (pointer:coarse){
  .cs-back{min-height:44px}
  .cpanel .cp-x{width:44px;height:44px}
}

/* ---- the panel entrance ----
   Restrained on purpose: the height is carried by JS, the content arrives in
   three short steps behind it. No slide, no parallax, no overshoot. */
.cp-in > *{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--t-med) var(--e1),transform var(--t-med) var(--e1);
}
.cpanel.is-open .cp-in > *{opacity:1;transform:none}
.cpanel.is-open .cp-in > *:nth-child(1){transition-delay:70ms}
.cpanel.is-open .cp-in > *:nth-child(2){transition-delay:170ms}
.cpanel.is-open .cp-in > *:nth-child(3){transition-delay:260ms}
.cp-x{opacity:0;transition:opacity var(--t-med) var(--e1) .18s,color var(--t-fast) var(--e1)}
.cpanel.is-open .cp-x{opacity:1}

/* ---- the anonymisation note ----
   One per page, under the four selectors and above the dynamic area, because it
   applies to every case and must not be repeated inside any of them. It is a
   transparent editorial aside, so it takes no box, no icon, no border and no
   section padding, and it does NOT fade with the invitation above it: the
   statement holds whichever case is open. */
/* The measure is tuned so the break falls after the first sentence: the note
   reads as two deliberate lines rather than as a paragraph that happened to
   wrap. Capped in `ch`, so it holds at every desktop width without a <br>. */
.cs-note{
  margin:clamp(1rem,1.8vw,1.4rem) auto 0;max-width:none;text-align:center;
  font-size:.82rem;line-height:1.62;color:var(--text-tertiary);
}
/* One line on a desktop measure: the note is one statement and splitting it
   made two half-empty lines. It wraps naturally when the viewport is narrower. */
.cs-note span{display:inline}

/* ---- 03. COME LAVORO ----
   One composed block, and deliberately a different shape from the photographic
   grids above and below it: a centred statement over four operating principles
   read horizontally. The section that preceded it was headline-left against
   copy-right, which the page already does twice.

   The principles say what the decision is made ON. They are not a sequence
   applied to everyone, and the copy has to keep that distinction: this section
   exists to say the opposite of "the same methodology, adapted". */
.pos-sec{padding-block:calc(var(--sec) * .78)}
/* 24 ch is wide enough for the longer of the two lines to complete on its own
   and far short of the two together, so the composition resolves to exactly two
   lines on desktop without shrinking the type or hardcoding a break. */
.pos-sec .blk-head.is-center h2{max-width:24ch}
/* the two halves of the headline stay one statement and break between them */
.pos-sec .blk-head.is-center h2 > span{display:inline-block}
.pos-sec .blk-head.is-center .lede{max-width:66ch}

.prin{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(1.4rem,3vw,2.8rem);row-gap:clamp(2rem,4vw,2.8rem);
}
/* hairline, then the mark, then the name, then the line. The 01/02/03/04 came
   out: they numbered four things that are not a sequence. */
.prin > li{
  position:relative;text-align:center;
  padding-top:clamp(1.4rem,2.4vw,1.9rem);border-top:1px solid var(--line);
}
.prin .ph-ico{
  width:30px;height:30px;color:var(--accent);opacity:.92;
  margin:0 auto clamp(.9rem,1.7vw,1.2rem);
}
.prin b{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(1rem,1.25vw,1.16rem);letter-spacing:-.02em;line-height:1.22;
  color:var(--fg);
}
.prin p{
  margin:.55rem auto 0;font-size:var(--fs-sm);line-height:1.62;color:var(--fg-2);
  max-width:32ch;
}

/* ---- 04. breadth of experience, eight tiles, the last of them the invitation ----
   Four across and two down, square, compact: a contact sheet of industries.
   The three-across landscape arrangement this replaced was too large and made
   breadth compete with the four featured cards, which carry the depth.

   These are not case studies. No expansion, no link, no metric, no button on a
   sector tile, and no bordered panel either: the image is the object. */
.scts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.7rem,1.35vw,1.15rem);
}
.sct{position:relative;overflow:hidden;min-width:0;border-radius:7px}
.sct-media{position:absolute;inset:0;display:block}
.sct-media .slot,.sct-media img{
  width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;
}
.sct-media .slot{justify-content:flex-start;padding-top:.8rem}
.sct-media .slot em{display:none}
.sct-media img{
  object-fit:cover;filter:saturate(.55) brightness(.8);
  transition:transform var(--t-slow) var(--e1),filter var(--t-med) var(--e1);
}
.sct-media::after{transition:opacity var(--t-med) var(--e1)}
/* restrained, and it adds nothing that is not already readable */
@media (hover:hover) and (pointer:fine){
  .sct:not(.is-cta):hover .sct-media img{transform:scale(1.035);filter:saturate(.62) brightness(.72)}
}
.sct-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(7,10,20,.08) 0%, rgba(7,10,20,.30) 40%,
    rgba(7,10,20,.74) 76%, rgba(7,10,20,.93) 100%);
}
/* the body owns the box here too, so every tile is square whatever it holds */
.sct-body{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
  /* a touch taller than square: the proof block needs the room, and squeezing
     the figure to protect the card height would defeat the point of the card */
  /* SQUARE, 24 August. At 5/6 these cards stood almost as tall as the flagship
     selectors and competed with them. They are breadth proof, not case studies,
     so the footprint drops to 1:1: the row is visibly shorter, the hierarchy
     reads at a glance, and the internal stack still fits without shrinking the
     figure. The mobile override below keeps its own, taller ratio. */
  aspect-ratio:1 / 1;padding:clamp(.85rem,1.5vw,1.15rem);
}
.sct b{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(.96rem,1.2vw,1.12rem);letter-spacing:-.02em;line-height:1.2;
  color:var(--text-primary);
}
/* ---- ONE PROOF HIERARCHY FOR ALL SEVEN CARDS ----
   The figure is the point of the card, so it outranks the business name. The
   metric deliberately differs from card to card, spend, scaling, ROAS, CPL,
   because an account is judged on its own economics rather than on one
   universal number; only the FORMATTING is systematic. */
.sct .sct-cls{
  display:block;margin-top:.3rem;font-style:normal;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.sct .proof-v{
  display:block;margin-top:clamp(.7rem,1.2vw,.95rem);
  font-family:var(--mono);font-weight:500;
  font-size:clamp(1.16rem,1.55vw,1.42rem);letter-spacing:-.03em;line-height:1.15;
  color:var(--text-primary);text-wrap:balance;
}
.sct .proof-l{
  display:block;margin-top:.22rem;font-style:normal;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.sct .proof-s{
  display:block;margin-top:.5rem;padding-top:.5rem;font-style:normal;
  border-top:1px solid rgba(150,185,240,.16);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--text-secondary);
}

/* ---- AN ADDED LAYER, NOT A REPLACEMENT. 24 August 2026, third pass ----
   The previous build cross-faded the primary out and the secondary in, which
   meant the reader lost the figure they had just read. The brief is the other
   way round: at rest the card states business and primary proof; on interaction
   a SECOND piece of evidence arrives beneath it and the primary stays readable.

   The whole content stack lifts by the height of the incoming block, so the
   secondary occupies space that was empty rather than space that was occupied.
   That lift is a TRANSFORM, so it changes nothing about layout: the card keeps
   its 5/6 body, the grid keeps its rows, and nothing below the section moves.

   NOTHING IS HOVER-ONLY. Three routes open it, and touch has its own:
     hover          desktop pointers, via the hover media query below
     :focus-within  keyboard, through the covering button
     .is-open       tap and click, set by site.js with aria-expanded */
.sct-proof{position:relative;display:block;margin-top:clamp(.7rem,1.2vw,.95rem)}
.sct-proof .proof-v{margin-top:0}
.proof-a,.proof-b{display:block}

/* the second reading waits directly under the first, out of sight until asked */
.proof-b{
  position:absolute;top:calc(100% + .5rem);left:0;right:0;
  padding-top:.45rem;border-top:1px solid rgba(150,185,240,.18);
  opacity:0;transform:translateY(7px);pointer-events:none;
}
.sct .proof-v2{
  display:block;font-family:var(--mono);font-weight:500;
  /* a step under the primary: it is additional evidence, not a replacement for
     the figure the card leads on */
  font-size:clamp(1.02rem,1.3vw,1.18rem);letter-spacing:-.025em;line-height:1.15;
  color:var(--text-primary);text-wrap:balance;
}
.sct .proof-l2{
  display:block;margin-top:.2rem;font-style:normal;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  /* the accent is the signal that this is new information */
  color:var(--accent);
}

.sct.has-more .sct-body{transition:transform 320ms var(--e1)}
.sct.has-more .proof-b{transition:opacity 300ms var(--e1),transform 300ms var(--e1)}

.sct.has-more.is-open .sct-body,
.sct.has-more:focus-within .sct-body{transform:translateY(-3.2rem)}
.sct.has-more.is-open .proof-b,
.sct.has-more:focus-within .proof-b{opacity:1;transform:none}

/* the covering control. It navigates nowhere and owns no layout: it toggles the
   reading named by aria-controls, and nothing else on the card is interactive. */
.sct-btn{
  position:absolute;inset:0;z-index:2;
  padding:0;border:0;background:none;color:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.sct-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:7px}
/* a card with a single reading carries no control, so it must not look
   touchable either */
.sct:not(.has-more) .sct-body{cursor:default}
@media (hover:hover) and (pointer:fine){
  .sct.has-more:hover .sct-body{transform:translateY(-3.2rem)}
  .sct.has-more:hover .proof-b{opacity:1;transform:none}
  /* the photograph settles back a touch while the second reading is up */
  .sct.has-more:hover .sct-media img,
  .sct.has-more.is-open .sct-media img{filter:saturate(.58) brightness(.66)}
}

/* ---- the eighth tile ----
   The last item of the same eight-tile sequence, so range turns into an
   invitation without a banner underneath it. One accent hairline and a faint
   wash: it is the loudest tile in the grid and still quieter than the primary
   button in the form directly below, which is where it hands the reader. */
.sct.is-cta{
  border:1px solid var(--accent);
  background:
    linear-gradient(150deg, rgba(226,72,43,.13) 0%, rgba(226,72,43,.03) 48%, rgba(226,72,43,0) 80%),
    var(--surface-01);
}
.sct.is-cta .sct-body{justify-content:center;padding:clamp(1rem,1.9vw,1.45rem)}
.sct.is-cta b{font-size:clamp(1.02rem,1.35vw,1.24rem);line-height:1.18}
.sct.is-cta .sct-body > span{
  margin-top:.5rem;font-family:var(--body);font-size:.84rem;line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--text-secondary);
}
/* the last word of the sentence is the link, so it is styled as one inside the
   prose rather than promoted to a control under it */
.sct.is-cta .sct-body > span a{
  color:var(--text-primary);
  border-bottom:1px solid var(--accent);padding-bottom:.06em;
  transition:color var(--t-fast) var(--e1),border-color var(--t-fast) var(--e1);
}
.sct.is-cta .sct-body > span a:hover{color:var(--accent)}
.sct.is-cta .sct-body > span a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;
}

/* ---- responsive ---- */
@media (max-width:1100px){
  .cp-body{grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,4vw,2.8rem)}
  /* The `max-width:58ch` that stood here went on 26 August 2026 with the other
     three caps. Below 1100px the panel is already narrower than `--cp-narr`, so
     the shared cap stops binding on its own and the narrative takes the panel's
     measure: there is nothing left for a breakpoint to say. */
  /* four principles across need four readable measures; below this they pair */
  .prin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prin p{max-width:44ch}
}
@media (max-width:900px){
  /* The sector grid used to lose its fourth column at 1100px, which was fine
     while these cards were 5/6. Now that they are square, a 3-column sector card
     is WIDER than a 4-column flagship and therefore TALLER: at 1024 the breadth
     proof stood 305px against the case studies' 281px and the hierarchy read
     backwards. It now keeps four columns for exactly as long as the flagship
     strip does, and both drop together at 900. */
  .scts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .scts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* the four case cards pair: at this width four across cannot hold a
     photograph, a name and a classification at a readable size */
  .cs-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-hero{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.6rem,4vw,2.2rem)}
  .cp-hero h3{max-width:24ch}
  .cp-hero-media{padding-top:0}
}

@media (max-width:620px){
  /* four KPI on one line at 375 would set the lead figure at caption size */
  .cp-kpi{
    grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(1rem,3vw,1.3rem);
  }
  .cp-kpi .met + .met{border-left:0;padding-left:0}
  .cp-kpi .met:nth-child(even){
    border-left:1px solid var(--line);padding-left:clamp(1rem,4vw,1.5rem);
  }
  /* One tile per row, and landscape: two squares on a 375 screen are 162px
     each, which is a thumbnail, and eight stacked squares would be a page of
     their own. The band keeps the photograph readable and the section short. */
  .scts{grid-template-columns:minmax(0,1fr)}
  .sct-body{aspect-ratio:16 / 10}
  .sct.is-cta .sct-body{aspect-ratio:auto;min-height:11rem}
  /* the principles stack: two narrow columns turn the copy into a ladder */
  .prin{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.6rem,4vw,2.2rem)}
  .prin p{max-width:56ch}
  /* the note is centred and two lines wide on a desktop measure; on a phone it
     simply reads left, like every other secondary line on the page */
  .cs-note{text-align:left;max-width:none}
}
@media (max-width:560px){
  /* two columns keep both grids readable at 375: a single column would make the
     photographs enormous and the page endless */
  .cs-tabs{gap:.65rem}
  .cs-tab-body{padding:.8rem .8rem .9rem}
  .cs-tab .cs-ico{width:24px;height:24px;margin-bottom:.6rem}
  .cs-tab-name{font-size:.95rem}
  .cs-tab-sub{font-size:.6rem;letter-spacing:.09em}
  .sct-body{padding:.8rem}
  .sct b{font-size:.95rem}
  .sct.is-cta .sct-body > span{font-size:.8rem}
  .cp-in{padding:clamp(1.1rem,4vw,1.5rem);border-radius:7px}
  .cpanel .cp-x{top:calc(clamp(1.4rem,2.6vw,2.1rem) + .4rem);right:.4rem}
  .cp-hero h3{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .cp-in > *{opacity:1!important;transform:none!important}
  .cp-x{opacity:1!important}
  .cs-tab-mark{transition:none}
  .cs-hint{transition:none}
  /* the sector grid and the statement are composition, not animation: with
     motion off they are simply already there. The global rule zeroes the
     stagger; this makes the intent explicit at the component. */
  .scts.reveal > *,.prin.reveal > *{opacity:1!important;transform:none!important}
  .cs-tab{transition:none}
}
/* a mid-session flip to reduced motion pins the panel exactly as it pins every
   other entrance on the site */
body.pinned .cp-in > *{opacity:1!important;transform:none!important;transition:none!important}
body.pinned .cp-x{opacity:1!important}