/* ============================================================
   Clozik — site styles
   Built from "Clozik Website.dc.html" against the Clozik design
   system. Tokens come from _ds/.../styles.css; this file adds
   two accessibility-driven tokens (see "contrast" below).
   ============================================================ */

:root{
  /* --- contrast corrections over the base palette ---------------
     --grey-500 (#7B786F) is 3.80:1 on paper: fine for rules and
     dividers, below WCAG AA for the 10–12px mono labels the design
     uses everywhere. --grey-550 keeps the same warm grey character
     at 5.09:1. Likewise --orange (#FF5A1F) is only 3.12:1 behind
     white text, so button fills use --orange-deep (4.95:1) while
     --orange stays the pure signal colour for rules, dots and icons
     exactly as the brand guidelines describe. */
  --grey-550:#67645C;
  --accent-cta:var(--orange-deep);
  --accent-cta-hover:#A83609;
  --accent-cta-press:#8E2E07;
  --meta:var(--grey-550);
  --meta-on-ink:var(--grey-300);

  --nav-h:68px;

  /* Vertical rhythm. Everything below derives from --sec-pad so the whole
     site retunes from one value. */
  --sec-pad:clamp(54px,5.2vw,80px);
  --head-gap:clamp(26px,2.4vw,36px);
  --stack:clamp(16px,1.4vw,18px);
  --gap-eyebrow:14px;   /* eyebrow -> heading */
  --gap-sub:16px;       /* heading -> supporting line */
  --gap-block:28px;     /* copy -> control row */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--font-body)}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--orange-text);text-decoration:none}
a:hover{color:var(--orange-deep)}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
img,svg{max-width:100%}
img{height:auto}

:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
::selection{background:var(--orange);color:var(--white)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:12px;top:12px;color:var(--paper)}

/* ---------- layout utilities ---------- */
.container{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad)}
.section{background:var(--paper);border-bottom:1px solid var(--grey-300)}
.section--ink{background:var(--ink);border-bottom:0}
/* One fluid section rhythm instead of a fixed 80px everywhere. Two stacked
   sections used to put 160px of air between content blocks, which read as
   dead space on wide screens; this scales with the viewport and the ratios
   below keep every section proportional to the same root value. */

/* Section heading block: ghost numeral + heading + optional note, with one
   consistent gap down to the content that follows. */
.sec-head{position:relative;margin-bottom:var(--head-gap)}
.sec-head__note{margin-top:10px}
.ghost-num{position:absolute;left:-78px;top:-14px;font-family:var(--font-display);font-weight:800;
  font-size:76px;line-height:1;color:var(--ink);opacity:.055;letter-spacing:.02em;
  pointer-events:none;user-select:none}

/* ---------- type ---------- */
.mono{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin:0}
.mono-11{font-size:11px;letter-spacing:.14em}
.mono-12{font-size:12px;letter-spacing:.14em}
.mono-tight{font-size:11.5px;letter-spacing:.1em}
.mono-kind{font-size:10.5px;letter-spacing:.12em}
.mono-num{font-size:11.5px;letter-spacing:.1em}
.mono-accent{color:var(--orange-text)}
.mono-on-ink{color:var(--orange)}
.mono-on-ink-quiet{color:var(--meta-on-ink)}

.h-display{font-family:var(--font-display);font-weight:800;letter-spacing:.4px;line-height:.98;margin:0;
  font-size:clamp(44px,6.4vw,80px)}
.h-display--sm{font-size:clamp(38px,5.4vw,68px)}
.h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:.3px;margin:0}
.h2--lg{font-size:clamp(30px,3.6vw,46px)}
.h2--md{font-size:clamp(28px,3.4vw,40px);margin-bottom:14px}
.h2--sm{font-size:clamp(26px,3vw,36px);margin-bottom:10px}
.h2--paper{color:var(--paper)}
.h3{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.1;margin:0}
.h3--sm{font-size:21px}
.lede{font-size:17.5px;line-height:1.55;color:var(--grey-700);max-width:44ch;margin:18px 0 0}
.lede--wide{max-width:46ch}
.ink-lede{font-size:16px;line-height:1.55;color:var(--meta-on-ink);max-width:50ch;margin:0 0 40px}
.body-sm{font-size:14px;line-height:1.5;color:var(--grey-700);margin:0}
.body-md{font-size:15px;line-height:1.55;color:var(--grey-700);max-width:44ch;margin:0}

/* ---------- chrome ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--orange);z-index:40;
  transition:width .12s linear;will-change:width}

/* ---------- navbar ---------- */
.navbar{position:sticky;top:0;z-index:20;background:rgba(239,238,234,.94);border-bottom:1px solid var(--grey-300)}
@supports (backdrop-filter:blur(8px)){.navbar{backdrop-filter:blur(8px)}}
.navbar__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad);
  height:var(--nav-h);display:flex;align-items:center;gap:32px}
.navbar__logo{display:flex;flex-shrink:0}
.navbar__logo img{display:block;width:132px;height:auto}
.navbar__nav{display:flex;gap:26px;margin-left:auto}
.navbar__link{position:relative;font-size:14px;font-weight:500;color:var(--grey-700);
  padding-bottom:3px;transition:color var(--dur-fast) var(--ease)}
.navbar__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left center;transition:transform .22s var(--ease)}
.navbar__link:hover,.navbar__link.is-active{color:var(--ink)}
.navbar__link:hover::after,.navbar__link.is-active::after{transform:scaleX(1)}
.navbar__cta{flex-shrink:0}
.navbar__toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--grey-300);
  border-radius:var(--radius);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease)}
.navbar__toggle:hover{background:var(--grey-100)}
.navbar__toggle span,.navbar__toggle span::before,.navbar__toggle span::after{
  display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .2s var(--ease),opacity .2s var(--ease)}
.navbar__toggle span{position:relative}
.navbar__toggle span::before,.navbar__toggle span::after{content:"";position:absolute;left:0}
.navbar__toggle span::before{top:-5px}
.navbar__toggle span::after{top:5px}
.navbar__toggle[aria-expanded="true"] span{background:transparent}
.navbar__toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.navbar__toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);
  font-weight:600;line-height:1;text-decoration:none;cursor:pointer;border-radius:999px;box-sizing:border-box;
  white-space:nowrap;flex-shrink:0;
  transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{height:36px;padding:0 16px;font-size:13px}
.btn--md{height:var(--control-h-md);padding:0 20px;font-size:14px}
.btn--lg{height:var(--control-h-lg);padding:0 26px;font-size:15px}
.btn--full{display:flex;width:100%}
.btn--primary{background:var(--ink);color:var(--white);border:1px solid var(--ink)}
.btn--primary:hover{background:#302E2B;color:var(--white);box-shadow:0 4px 14px rgba(27,26,24,.16)}
.btn--primary:active{background:#0F0E0D;box-shadow:none}
.btn--accent{background:var(--accent-cta);color:var(--white);border:1px solid var(--accent-cta)}
.btn--accent:hover{background:var(--accent-cta-hover);border-color:var(--accent-cta-hover);color:var(--white);
  box-shadow:0 4px 14px rgba(200,66,14,.28)}
.btn--accent:active{background:var(--accent-cta-press);box-shadow:none}
.btn--secondary{background:var(--white);color:var(--ink);border:1px solid var(--grey-300)}
.btn--secondary:hover{background:var(--grey-100);border-color:var(--ink);color:var(--ink)}
.btn--secondary:active{background:var(--grey-150)}

/* ---------- tags / chips ---------- */
.tag{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 15px;
  border-radius:var(--radius-pill);border:1px solid var(--grey-300);background:var(--white);color:var(--grey-700);
  font-family:var(--font-body);font-size:13px;white-space:nowrap;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.tag:hover{background:var(--grey-100);border-color:var(--grey-500)}
.tag:active{transform:scale(.97)}
.tag.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- form controls ---------- */
.field{display:block}
.field__label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field__req{color:var(--orange-text)}
.field__control{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:15px;color:var(--ink);
  background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius);outline:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
input.field__control,select.field__control{height:44px;padding:0 12px}
textarea.field__control{padding:10px 12px;line-height:1.55;resize:vertical;min-height:110px}
.field__control::placeholder{color:var(--grey-500)}
.field__control:hover{border-color:var(--grey-500)}
.field__control:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,90,31,.18)}
.field__control:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.field__control[aria-invalid="true"]{border-color:var(--orange-deep)}
.field__hint{display:block;font-size:12.5px;margin-top:6px;color:var(--meta)}
.field__error{display:block;font-size:12.5px;margin-top:6px;color:var(--orange-text);font-weight:500}
select.field__control{appearance:none;cursor:pointer;padding-right:34px;
  background-color:var(--white);background-repeat:no-repeat;background-position:right 12px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231B1A18' stroke-width='1.6'/></svg>")}
.form-status{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-text);margin:0;min-height:1em}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--meta-on-ink)}
.footer__top{max-width:var(--container-max);margin:0 auto;padding:56px var(--container-pad) 32px;
  display:flex;gap:56px;flex-wrap:wrap}
.footer__brand{min-width:220px}
.footer__brand img{display:block;width:150px;height:auto}
.footer__email{font-family:var(--font-mono);font-size:12px;margin-top:18px;letter-spacing:.04em}
.footer__email a{color:var(--orange)}
.footer__email a:hover{color:var(--white)}
.footer__col-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta-on-ink);margin:0 0 14px}
.footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer__list a{color:var(--paper);font-size:13.5px;transition:color var(--dur-fast) var(--ease)}
.footer__list a:hover{color:var(--orange)}
.footer__bottom{max-width:var(--container-max);margin:0 auto;padding:18px var(--container-pad) 40px;
  border-top:1px solid #302E2B;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11.5px;color:var(--meta-on-ink)}

/* ---------- hero ---------- */
.hero{max-width:var(--container-max);margin:0 auto;
  padding:calc(var(--sec-pad) * 1.05) var(--container-pad) calc(var(--sec-pad) * .95);
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,4vw,56px);align-items:center}
.hero__title{margin:0;display:flex;flex-wrap:wrap;gap:0 .26em}
.hero__word{display:inline-block;overflow:hidden;padding-bottom:.08em}
.hero__word>span{display:inline-block;animation:wordUp .62s var(--ease) both}
.hero__word:nth-child(1)>span{animation-delay:.06s}
.hero__word:nth-child(2)>span{animation-delay:.17s}
.hero__word:nth-child(3)>span{animation-delay:.28s}
.hero__sub{font-size:18px;line-height:1.55;color:var(--grey-700);max-width:44ch;margin:22px 0 0;
  animation:rise .5s var(--ease) .3s both}
.hero__actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;animation:rise .5s var(--ease) .38s both}
.hero__note{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--meta);margin:20px 0 0;animation:fade .6s var(--ease) .5s both}
.hero__panel{background:var(--white);border:1px solid var(--grey-300);border-top:3px solid var(--orange);
  border-radius:var(--radius);padding:26px;animation:rise .56s var(--ease) .24s both;will-change:transform}
/* The mark is inlined into the SVG now, so it centres with the viewBox
   instead of needing percentage positioning tuned to a rectangular plate. */
.hero__diagram{position:relative}
.hero__svg{width:100%;height:auto;display:block}
.hero__caption{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--meta);margin:12px 0 0;text-align:center}
.orbit{transform-origin:220px 150px;animation:spin 60s linear infinite}
.spokes{stroke-dasharray:520;animation:draw 1.1s var(--ease) .2s both}
.packet{offset-rotate:0deg;animation:offsetMove 2.6s cubic-bezier(.45,0,.55,1) infinite}
.node-pulse{animation:pulseNode 2.6s var(--ease) infinite}

/* ---------- stats + marquee ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
/* Centred in each cell rather than hugging the left edge — left alignment
   left a visible gap after the shortest value ("9") and made the row read
   as unbalanced against the dividers. */
.stat{padding:26px 22px;border-right:1px solid var(--grey-300);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.stat:last-child{border-right:0}
.stat__big{font-family:var(--font-display);font-weight:800;font-size:38px;line-height:1;letter-spacing:.3px;
  margin:0 0 8px;font-variant-numeric:tabular-nums}
.stat__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--meta);margin:0}
.marquee-wrap{background:var(--paper);border-bottom:1px solid var(--grey-300);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee{display:flex;width:max-content;gap:40px;padding:14px 0;animation:marquee 46s linear infinite}
.marquee-wrap:hover .marquee,.marquee.is-paused{animation-play-state:paused}
.marquee span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta);white-space:nowrap;display:flex;gap:40px;align-items:center}
.marquee i{width:4px;height:4px;background:var(--orange);display:inline-block}

/* ---------- grids + cards ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--stack)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--stack)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack)}
.card{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius);padding:22px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.card:hover{background:var(--grey-100);border-color:var(--ink);box-shadow:var(--shadow-featured);transform:translateY(-4px)}
.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dots{display:grid;grid-template-columns:repeat(3,5px);gap:3px}
.dots span{width:5px;height:5px;background:var(--grey-300)}
.dots span.on{background:var(--orange)}
.dots--live span.on{animation:dotPulse 2.6s var(--ease) infinite}
.dots--live span.on:nth-child(2){animation-delay:.2s}
.dots--live span.on:nth-child(3){animation-delay:.4s}
.dots--live span.on:nth-child(5){animation-delay:.6s}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--grey-300);border-bottom:1px solid var(--grey-300)}
.step{padding:28px 26px 30px;border-right:1px solid var(--grey-300);transition:background .2s var(--ease)}
.step:last-child{border-right:0}
.step:hover{background:var(--white)}
.step svg{width:60px;height:44px;display:block;margin:0 0 16px}
.step__no{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;color:var(--orange-deep);margin:0 0 10px}
.step h3{margin:0 0 8px}

/* ---------- industry tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--grey-300)}
.tile{padding:22px 24px;border-bottom:1px solid var(--grey-300);border-right:1px solid var(--grey-300);
  display:flex;gap:14px;align-items:flex-start;color:inherit;transition:background .2s var(--ease)}
.tile:hover{background:var(--white);color:inherit}
.tile__rules{display:flex;flex-direction:column;gap:3px;padding-top:7px;flex-shrink:0}
.tile__rules span{height:2px;background:var(--grey-300);transition:width .22s var(--ease)}
.tile__rules span:first-child{width:16px;background:var(--orange)}
.tile__rules span:nth-child(2){width:11px}
.tile__rules span:nth-child(3){width:14px}
.tile:hover .tile__rules span:nth-child(2){width:16px}
.tile:hover .tile__rules span:nth-child(3){width:19px}
.tile__body{display:flex;flex-direction:column;gap:6px;flex:1}
.tile__body .h3{font-size:20px}
.tile__arrow{font-family:var(--font-mono);font-size:14px;color:var(--orange-text);line-height:1.4;opacity:.35;
  transition:transform .22s var(--ease),opacity .22s var(--ease)}
.tile:hover .tile__arrow{transform:translateX(8px);opacity:1}

/* ---------- services ---------- */
.page-head{max-width:var(--container-max);margin:0 auto;
  padding:calc(var(--sec-pad) * .95) var(--container-pad) calc(var(--sec-pad) * .7)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.industry-panel{animation:rise .4s var(--ease) both}
.industry-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;
  padding-bottom:32px;border-bottom:1px solid var(--grey-300)}
.blurb{font-size:16.5px;line-height:1.6;color:var(--grey-700);margin:29px 0 0;max-width:56ch}
.svc-card{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius);padding:22px;
  display:flex;flex-direction:column;gap:10px;
  transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.svc-card:hover{background:var(--grey-100);box-shadow:var(--shadow-featured);transform:translateY(-4px)}
.svc-card--auto{border-top:3px solid var(--orange)}
.split-list{border:1px solid var(--grey-700);border-radius:var(--radius);padding:28px}
.split-list--auto{border-top:3px solid var(--orange)}
.split-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.split-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--paper)}
.split-list li b{font-family:var(--font-mono);font-weight:400;color:var(--paper);flex-shrink:0}
.split-list--auto li b{color:var(--orange)}
.core-list{border-top:1px solid var(--grey-300)}
.core-row{display:grid;grid-template-columns:52px 26px 1fr 1.2fr;gap:20px;padding:22px 0;
  border-bottom:1px solid var(--grey-300);align-items:center;
  transition:background .2s var(--ease),padding-left .2s var(--ease)}
.core-row:hover{background:var(--white);padding-left:12px}
.flow{width:100%;height:auto;display:block;margin-bottom:40px}

/* ---------- blog ---------- */
.featured{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-featured);padding:32px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;
  align-items:center;animation:rise .5s var(--ease) both}
.featured__dek{font-size:15.5px;line-height:1.55;color:var(--grey-700);max-width:50ch;margin:0 0 16px}
.featured__links{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0 0 22px}
.featured__links a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;
  border-bottom:1px solid var(--grey-300);padding-bottom:2px;transition:border-color var(--dur-fast) var(--ease)}
.featured__links a:hover{border-bottom-color:var(--orange)}
.featured__foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.featured__art{width:100%;height:auto;display:block}
.post{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius);padding:22px;
  display:flex;flex-direction:column;gap:12px;min-height:190px;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.post:hover{background:var(--grey-100);border-color:var(--ink);box-shadow:var(--shadow-featured);transform:translateY(-4px)}
.post__head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.post__dot{width:7px;height:7px;background:var(--orange);flex-shrink:0}
.post__kw{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-text);margin:auto 0 0}
.post__meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--meta);margin:0;padding-top:10px;border-top:1px solid var(--grey-300)}
.empty-note{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--meta);margin:30px 0 0;text-align:center}
.subscribe{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius);padding:32px;
  display:grid;grid-template-columns:1fr .9fr;gap:44px;align-items:center}
.subscribe__form{display:flex;flex-direction:column;gap:14px}

/* ---------- contact ---------- */
.contact{max-width:var(--container-max);margin:0 auto;
  padding:calc(var(--sec-pad) * .95) var(--container-pad) var(--sec-pad);
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,4vw,56px);align-items:start}
.contact__facts{margin-top:34px;border-top:1px solid var(--grey-300)}
.contact__fact{padding:22px 0;border-bottom:1px solid var(--grey-300)}
.contact__email{font-family:var(--font-mono);font-size:18px;letter-spacing:.03em;margin:0}
.contact__art{width:100%;height:auto;display:block;margin-top:34px}
.draw-line{stroke-dasharray:520;animation:draw 1.1s var(--ease) both}
.contact__card{background:var(--white);border:1px solid var(--grey-300);border-top:3px solid var(--orange);
  border-radius:var(--radius);padding:32px;animation:rise .5s var(--ease) .1s both}
.contact__form{display:flex;flex-direction:column;gap:18px}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sent h2{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1.05;margin:0 0 12px}
.notfound{text-align:left}

/* ---------- CTA band ---------- */
.cta-band{position:relative;max-width:var(--container-max);margin:0 auto;
  padding:calc(var(--sec-pad) * .82) var(--container-pad);
  display:flex;gap:40px;align-items:center;flex-wrap:wrap}
/* min() so this cannot exceed the viewport on a 320px device — a bare
   320px min-width overflowed once the 20px gutters were subtracted. */
.cta-band__copy{flex:1;min-width:min(320px,100%)}
.cta-band h2{font-size:clamp(28px,3.4vw,42px);color:var(--paper);margin:14px 0 12px}
.cta-band .sub{font-size:15.5px;line-height:1.55;color:var(--meta-on-ink);max-width:42ch;margin:0}

/* ---------- reveal motion (JS-gated, so no-JS shows everything) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].is-in{animation:reveal .62s var(--ease) both}
/* Hidden with opacity only, never clip-path: a clipped element reports a
   zero-area intersection rect and IntersectionObserver would never fire.
   The clip lives in the keyframe instead, where it still does the reveal. */
.js [data-mask]{opacity:0}
.js [data-mask].is-in{animation:maskUp .76s var(--ease) both}

@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes maskUp{from{opacity:0;clip-path:inset(0 0 108% 0);transform:translateY(8px)}
                  to{opacity:1;clip-path:inset(0 0 -12% 0);transform:none}}
@keyframes wordUp{from{opacity:0;transform:translateY(102%)}to{opacity:1;transform:none}}
@keyframes offsetMove{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes draw{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}
@keyframes pulseNode{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- ambient graphics -------------------------------------------
   The brand is a printed-document identity: hairlines, registration marks
   and drawn structure rather than textures. These fill the wide empty
   fields at very low alpha so they read as paper, never as decoration. */

.section--marks{position:relative;overflow:hidden}
/* Two classes, so this still wins against `.section--grid>*` below — that
   rule lifts content above the column grid and would otherwise drop the
   marks back into normal flow, where a viewBox-only SVG expands to a
   square the width of the section. */
.section--marks>.crop-marks{position:absolute;display:block;
  inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);
  fill:none;stroke:var(--ink);stroke-width:.6;opacity:.16;pointer-events:none;
  vector-effect:non-scaling-stroke;z-index:0}
.section--ink .crop-marks{stroke:var(--paper);opacity:.22}

/* Faint printed column rules, aligned to the 1180px measure. Hidden below
   the breakpoint where they would crowd the content. */
.section--grid{position:relative}
.section--grid::before{content:"";position:absolute;inset:0;pointer-events:none;
  max-width:var(--container-max);margin:0 auto;
  background-image:repeating-linear-gradient(to right,
    rgba(27,26,24,.045) 0 1px, transparent 1px calc(100% / 6));
  background-position:var(--container-pad) 0;
  background-size:calc(100% - (var(--container-pad) * 2)) 100%;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.section--grid>*{position:relative;z-index:1}
@media (max-width:1024px){.section--grid::before{display:none}}

/* ---------- hero diagram ---------- */
.wires{stroke:var(--grey-300);stroke-width:1;stroke-linecap:square;fill:none}
.wire-flow{stroke:var(--orange);stroke-width:1.4;fill:none;stroke-linecap:round;
  stroke-dasharray:2 12;opacity:.55;animation:wireFlow 2.6s linear infinite}
/* Blink, not fade: steps() snaps the state so the squares read as activity
   lights on a patch panel. Each node carries its own delay, so they flicker
   around the ring rather than in unison. */
.hub-node{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;
  animation:nodeBlink 2.2s steps(1,end) infinite}
/* Wires pass behind the labels, so each one gets a paper halo drawn under
   the glyphs (paint-order:stroke) rather than a box that would clutter it. */
.hub-labels text{fill:var(--grey-700);paint-order:stroke;stroke:var(--white);
  stroke-width:3.5;stroke-linejoin:round}
.hub-disc{fill:var(--ink)}
.hub-ring{fill:none;stroke:var(--orange);stroke-width:2}
.hub-mark{pointer-events:none}
.orbit{stroke:var(--grey-300);stroke-width:1;fill:none;transform-origin:220px 152px;
  animation:spin 72s linear infinite}
.orbit--inner{animation:spin 48s linear infinite reverse;opacity:.7}
.pulse-rings circle{fill:none;stroke:var(--orange);stroke-width:1;opacity:0;
  transform-origin:220px 152px;animation:pulseRing 4.5s var(--ease) infinite}

@keyframes wireFlow{to{stroke-dashoffset:-14}}
@keyframes nodeBlink{
  0%,54%  {fill:var(--paper); stroke:var(--ink)}
  58%,66% {fill:var(--orange);stroke:var(--orange)}
  70%,78% {fill:var(--paper); stroke:var(--ink)}
  82%,90% {fill:var(--orange);stroke:var(--orange)}
  94%,100%{fill:var(--paper); stroke:var(--ink)}}
@keyframes pulseRing{0%{transform:scale(.62);opacity:0}
                     18%{opacity:.34}
                     100%{transform:scale(1.5);opacity:0}}

/* ---------- page transition (works on any static host) ---------- */
#wipe{position:fixed;inset:0;z-index:70;background:var(--orange);pointer-events:none;
  transform:scaleX(0);transform-origin:left center;will-change:transform}
.is-leaving #wipe{animation:wipeIn .34s var(--ease) forwards}
/* The exit wipe is pure CSS and self-starting: if app.js ever fails to load
   on the incoming page, the panel still clears itself instead of leaving the
   viewer staring at an orange screen. */
.is-entering #wipe{transform:scaleX(1);transform-origin:right center;
  animation:wipeOut .42s var(--ease) .04s forwards}
@keyframes wipeIn{from{transform:scaleX(0);transform-origin:left center}
                  to{transform:scaleX(1);transform-origin:left center}}
@keyframes wipeOut{from{transform:scaleX(1);transform-origin:right center}
                   to{transform:scaleX(0);transform-origin:right center}}


/* ---------- vertical rhythm --------------------------------------------
   Eyebrow -> heading -> supporting line. These were relying on utility
   classes that lost to `.mono{margin:0}` and `.page-head{padding:…}`,
   both declared later in the file, so the gaps silently collapsed to 0.
   Adjacent-sibling rules give the rhythm a home that does not depend on
   remembering a class in the markup. */
.mono + .h-display,
.mono + .h2,
.mono + h1,
.mono + h2{margin-top:var(--gap-eyebrow)}

.h-display + .mono,
.h2 + .mono,
.h-display + .lede,
.h2 + .lede,
.h-display + .blurb,
.h2 + .blurb,
.h-display + .ink-lede,
.h2 + .ink-lede,
.h-display + .body-md,
.h2 + .body-md{margin-top:var(--gap-sub)}

.lede + .chips,
.mono + .chips{margin-top:var(--gap-block)}

/* ---------- utilities --------------------------------------------------
   Last in the cascade on purpose: a utility must beat the component rule
   it is applied to, otherwise `pb-52` on `.page-head` does nothing. */
.pad-80{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.pt-60{padding-top:calc(var(--sec-pad) * .74)}
.pt-72{padding-top:calc(var(--sec-pad) * .88)}
.pb-52{padding-bottom:calc(var(--sec-pad) * .62)}
.pb-60{padding-bottom:calc(var(--sec-pad) * .74)}
.pb-72{padding-bottom:calc(var(--sec-pad) * .88)}
.pb-80{padding-bottom:var(--sec-pad)}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-30{margin-top:30px}.mt-32{margin-top:32px}.mt-34{margin-top:34px}
.mb-8{margin-bottom:8px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}
.mb-18{margin-bottom:18px}.mb-22{margin-bottom:22px}.mb-30{margin-bottom:30px}

/* ---------- responsive ---------- */
/* The ghost numeral lives in the page margin; hide it once the margin is
   too narrow to hold it rather than letting it collide with the heading. */
@media (max-width:1330px){.ghost-num{display:none}}

@media (max-width:1024px){
  .hero,.contact{grid-template-columns:1fr;gap:40px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .industry-head{grid-template-columns:1fr;gap:20px}
  .blurb{margin-top:0}
  .featured,.subscribe{grid-template-columns:1fr;gap:28px}
  .core-row{grid-template-columns:44px 26px 1fr;row-gap:8px}
  .core-row .body-sm{grid-column:3/-1}
}

@media (max-width:760px){
  :root{--container-pad:20px}
  .pad-80{padding-top:56px;padding-bottom:56px}
  .pt-60,.pt-72{padding-top:44px}
  .pb-52,.pb-60,.pb-72,.pb-80{padding-bottom:44px}
  .hero{padding:52px var(--container-pad) 44px}
  .page-head,.contact{padding:52px var(--container-pad) 40px}

  .navbar__nav{position:absolute;top:var(--nav-h);left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--grey-300);flex-direction:column;gap:0;
    padding:4px var(--container-pad) 14px;display:none;box-shadow:0 10px 24px rgba(27,26,24,.08)}
  .navbar__nav.is-open{display:flex}
  .navbar__link{padding:14px 0;border-bottom:1px solid var(--grey-150)}
  .navbar__link::after{display:none}
  .navbar__link.is-active{color:var(--orange-text)}
  .navbar__toggle{display:flex}
  .navbar__cta{display:none}

  .grid-4,.grid-3,.grid-2,.stats,.steps,.tiles,.contact__row{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--grey-300);padding:18px 0}
  .stats .stat:last-child{border-bottom:0}
  .step{border-right:0;border-bottom:1px solid var(--grey-300)}
  .steps .step:last-child{border-bottom:0}
  .tile{border-right:0}
  .core-row{grid-template-columns:44px 1fr;row-gap:6px}
  .core-row .dots{display:none}
  .core-row .body-sm{grid-column:2/-1}
  .featured,.subscribe,.contact__card,.split-list{padding:22px}
  .footer__top{gap:32px}
  .footer__bottom{flex-direction:column;gap:6px}
  .hero__actions .btn,.notfound .btn{flex:1 1 auto}
}

/* Coarse pointers get full 44px targets even where the design is tighter. */
@media (pointer:coarse){
  .tag{min-height:44px;padding:0 18px}
  .btn--sm{height:44px;padding:0 20px}
  .navbar__link{min-height:44px;display:flex;align-items:center}
  .footer__list a{padding:4px 0;display:inline-block}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal],.js [data-mask]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .btn:hover,.card:hover,.post:hover,.svc-card:hover{transform:none}
  /* The wipe never runs, so make sure it can never be left covering. */
  #wipe{display:none !important}
  .pulse-rings,.wire-flow{display:none}
  .hub-node{fill:var(--paper);stroke:var(--ink)}
}

@media print{
  .navbar,#progress,.marquee-wrap,.cta-band,.skip-link{display:none}
  .section,.section--ink{border:0}
  body{background:#fff;color:#000}
}