/* ============================================================
   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);

  /* Near-full-width by request: fills 94% of the viewport up to a 1800px
     ceiling, so the layout never sits as a narrow column in the middle of a
     large monitor. Long-form reading is unaffected -- .article__body carries
     its own 68ch cap regardless of how wide the shell gets. Overridden here
     rather than in the design system tokens so _ds stays the untouched source. */
  --container-max:min(94vw,1800px);

  --nav-h:68px;

  /* Vertical rhythm. Everything below derives from --sec-pad so the whole
     site retunes from one value. */
  --sec-pad:clamp(46px,4.4vw,68px);   /* ~15% tighter than the original 54/80 */
  --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}
/* Component rules like `.contact__form{display:flex}` outrank the UA default
   for [hidden], so JS setting el.hidden = true silently did nothing and the
   form stayed on screen underneath the success panel. */
[hidden]{display:none !important}

: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}
/* Success panel. The mark draws itself: ring, then eyes, then the smile,
   so it reads as something completing rather than a static tick. */
.sent{animation:rise .5s var(--ease) both}
.sent h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.2vw,36px);
  line-height:1.05;margin:0 0 12px}
.smiley{display:block;margin:0 0 24px;overflow:visible}
.smiley__ring{fill:none;stroke:var(--orange);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264;
  animation:smileyRing .72s var(--ease) .08s forwards}
.smiley__eye{fill:var(--ink);opacity:0;animation:smileyPop .34s var(--ease) .6s forwards}
.smiley__eye--r{animation-delay:.72s}
.smiley__mouth{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:smileyMouth .46s var(--ease) .86s forwards}

@keyframes smileyRing{to{stroke-dashoffset:0}}
@keyframes smileyPop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes smileyMouth{to{stroke-dashoffset:0}}
.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. */
/* Registration marks belong around the content, not around the viewport.
   Pinned to 22px from the section top and bottom, but centred and capped at
   the container width so they hug the copy on wide screens instead of
   floating hundreds of pixels away in the margin. */
.section--marks>.crop-marks{position:absolute;display:block;
  top:22px;bottom:22px;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 44px),var(--container-max));height:auto;
  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 container 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)}

/* ---------- article ------------------------------------------------------
   The site had no prose styling at all: .body-md caps at 44ch, .blurb sets a
   top-only margin, and there were no rules for ul/ol/blockquote/table/figure.
   Everything below is scoped to .article__body so it cannot leak into the
   card and grid furniture the marketing pages are built from.
   --measure-prose (68ch) is defined in the design system tokens and was, until
   now, referenced nowhere. This is what it was for. */

.article-head{padding-top:calc(var(--sec-pad) * .74)}
.article-head h1{margin:0}
.article__meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.article__meta .sep{color:var(--grey-300)}

/* Duotone hero. The source JPEGs stay untouched - desaturate, then push the
   brand orange back in as hue only. One place to retune the whole set. */
.article__hero{margin:0}
.article__shot{position:relative;overflow:hidden;background:var(--ink);border:1px solid var(--grey-300)}
.article__shot img{display:block;width:100%;aspect-ratio:40/21;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.96)}
.article__shot::after{content:"";position:absolute;inset:0;background:var(--orange);
  mix-blend-mode:color;opacity:.9;pointer-events:none}
.article__hero figcaption{margin-top:10px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.article__hero figcaption a{color:var(--meta);border-bottom:1px solid var(--grey-300)}
.article__hero figcaption a:hover{color:var(--orange-deep)}

/* Summary block. Doubles as the featured-snippet target and the social carousel. */
.summary{border:1px solid var(--ink);padding:var(--card-pad-lg);background:var(--white)}
.summary ul{margin:14px 0 0;padding:0;list-style:none}
.summary li{position:relative;padding-left:22px;margin-top:10px;font-size:15.5px;line-height:1.5;
  color:var(--grey-700)}
.summary li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--orange)}

/* Table of contents */
.article__toc{border-top:1px solid var(--grey-300);border-bottom:1px solid var(--grey-300);padding:20px 0}
.article__toc ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:toc}
.article__toc li{counter-increment:toc;margin-top:7px;font-size:15px;line-height:1.45}
.article__toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.1em;color:var(--meta);margin-right:12px}
.article__toc a{color:var(--ink);border-bottom:1px solid var(--grey-300)}
.article__toc a:hover{color:var(--orange-deep);border-color:var(--orange)}

/* ---------- prose ---------- */
/* Reading pages get their own shell. The marketing pages run near-full-width,
   but an article at 1800px would leave a narrow strip of text against a huge
   empty field, so every container inside an article's <main> is pulled in to
   1100px. The CTA band and footer sit outside <main> and stay full width. */
main:has(.article__body) .container,
main:has(.article__body) .article-head{max-width:min(94vw,1100px)}

/* 85ch is past the classic 68ch ideal but still comfortable, and centring it
   inside the 1100px shell keeps the space balanced rather than all on one side. */
.article__body{max-width:min(85ch,100%);margin-inline:auto}
.article__body>*:first-child{margin-top:0}

.article__body p{margin:0 0 20px;font-size:17px;line-height:1.65;color:var(--grey-700)}
.article__body p strong,.article__body li strong{color:var(--ink);font-weight:600}

.article__body h2{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(26px,3vw,34px);line-height:1.05;letter-spacing:var(--track-display);
  color:var(--ink);margin:52px 0 18px}
.article__body h3{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:21px;line-height:1.15;color:var(--ink);margin:36px 0 12px}
.article__body h2:first-child,.article__body h3:first-child{margin-top:0}

/* The navbar is sticky at 68px; without this every jump link lands underneath it. */
.article__body h2[id],.article__body h3[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* Inline links get an underline. Orange alone is a hue-only cue and fails
   WCAG 1.4.1 inside a paragraph. */
.article__body a{color:var(--orange-text);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.article__body a:hover{color:var(--orange-deep);text-decoration-thickness:2px}

.article__body ul,.article__body ol{margin:0 0 22px;padding-left:0;list-style:none}
.article__body li{position:relative;padding-left:24px;margin-bottom:11px;
  font-size:17px;line-height:1.6;color:var(--grey-700)}
.article__body ul>li::before{content:"";position:absolute;left:2px;top:12px;
  width:9px;height:1px;background:var(--orange)}
.article__body ol{counter-reset:step}
.article__body ol>li{counter-increment:step;padding-left:32px}
.article__body ol>li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:3px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--orange-text)}
.article__body li>ul,.article__body li>ol{margin:10px 0 0}

.article__body blockquote{margin:0 0 24px;padding:2px 0 2px 22px;border-left:2px solid var(--orange)}
.article__body blockquote p{font-size:18.5px;line-height:1.5;color:var(--ink);margin-bottom:0}
.article__body blockquote cite{display:block;margin-top:10px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);font-style:normal}

.article__body figure{margin:0 0 24px}
.article__body figcaption{margin-top:9px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}

.article__body hr{border:0;border-top:1px solid var(--grey-300);margin:40px 0}

/* Tables and pull-stats break out past the 68ch prose measure once there is
   room for it - they are the most liftable assets in a post. Below 1024px they
   stay in the column and scroll inside their own wrapper, never the page. */
@media (min-width:1024px){
  .article__body .table-wrap,.article__body .key-block{
    width:min(1100px,calc(100vw - 80px));margin-left:50%;transform:translateX(-50%)}
}
.table-wrap{margin:0 0 26px;overflow-x:auto;border:1px solid var(--grey-300);
  background:var(--white)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px}
.table-wrap caption{text-align:left;padding:14px var(--card-pad) 0;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.table-wrap th,.table-wrap td{text-align:left;padding:12px var(--card-pad);font-size:14.5px;
  line-height:1.45;border-bottom:1px solid var(--grey-150)}
.table-wrap th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--ink)}
.table-wrap td{color:var(--grey-700)}
.table-wrap tr:last-child td{border-bottom:0}

/* Pull-stat. Sized to be screenshot-able on its own. */
.key-block{margin:0 0 26px;border-left:2px solid var(--orange);
  background:var(--grey-100);padding:22px var(--card-pad-lg)}
.key-block__num{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--ink);margin:0}
.key-block p{margin:10px 0 0;font-size:15.5px;line-height:1.5}
.key-block__src{margin-top:12px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}

/* Sources + related */
.article__sources{border-top:1px solid var(--ink);padding-top:22px}
.article__sources ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:src}
.article__sources li{counter-increment:src;position:relative;padding-left:32px;margin-bottom:10px;
  font-size:14.5px;line-height:1.5;color:var(--grey-700)}
.article__sources li::before{content:counter(src,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--meta)}
.article__sources a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px}

.article__related{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack)}
.article__related a{display:block;border:1px solid var(--grey-300);background:var(--white);
  padding:var(--card-pad);color:var(--ink);transition:transform .18s ease,border-color .18s ease}
.article__related a:hover{transform:translateY(-2px);border-color:var(--ink);color:var(--ink)}
.article__related .r-kind{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-text);margin:0 0 8px}
.article__related .r-title{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:19px;line-height:1.15;margin:0}

@media (max-width:760px){
  .article__body p,.article__body li{font-size:16px}
  .article__body h2{margin-top:40px}
  .article__related{grid-template-columns:1fr}
  .summary,.key-block{padding:var(--card-pad)}
}


/* Post cards became real links when the nine posts landed. The stretched
   pseudo-element keeps the whole card clickable without nesting a block-level
   anchor inside the article. */
.post{position:relative}
.post .h3 a{color:var(--ink);text-decoration:none}
.post .h3 a::after{content:"";position:absolute;inset:0}
.post:hover .h3 a{color:var(--orange-deep)}
.post .h3 a:focus-visible{outline:none}
.post:has(.h3 a:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.featured .h2 a{color:var(--ink);text-decoration:none}
.featured .h2 a:hover{color:var(--orange-deep)}

/* ---------- 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}
}