/* ===========================================================
   AtomicNorth site stylesheet
   Single source of truth for every page. Brand book 2026:
   Montserrat, red #CC0000, blues #92C4E0 / #D9EEFA,
   greys #F0F0F0 / #979797 / #666666 / #323232.
   =========================================================== */

/* Single-theme enterprise dark, painted explicitly so it holds on any ground.
   Brand book 2026: red #CC0000 primary; #92C4E0 and #D9EEFA secondary;
   #F0F0F0, #979797, #666666, #323232 tints and shades. */
:root{
  --ink-950:#2B2D31;
  --ink-900:#323438;
  --ink-850:#383A3F;
  --ink-800:#404247;
  --ink-700:#4B4E54;
  --line:#5A5D64;
  --line-soft:#46494F;

  --fg:#FFFFFF;
  --fg-mid:#BFC2C7;
  --fg-dim:#A3A7AE;
  --fg-faint:#9095A0;

  --orange:#CC0000;
  --blue:#92C4E0;        /* brand secondary */
  --blue-pale:#D9EEFA;   /* brand secondary */
  --grey:#979797;        /* brand tint */
  --grey-deep:#323232;   /* brand shade */
  --blue:#92C4E0;
  --violet:#D9EEFA;
  --green:#979797;

  --light-bg:#F0F0F0;
  --light-fg:#000000;
  --light-mid:#666666;
  --light-line:#E4E4E4;

  --brand-soft:#D9EEFA;   /* alias, brand secondary */
  --brand-deep:#CC0000;   /* alias, brand primary */

  --font:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --shell:1320px;
  --gutter:46px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink-950);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font);line-height:1.05;text-wrap:balance}
canvas{display:block}

/* The page gutter, named once. .shell is the usual way to get it, but a few
   sections set their own padding shorthand for vertical reasons and threw
   the horizontal half away with it. Those can now ask for the same value
   rather than hardcoding a guess that drifts from .shell at two of the
   three breakpoints. */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:900px){:root{--gutter:24px}}
@media(max-width:520px){:root{--gutter:18px}}

.eyebrow{font-size:13px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--fg)}
.label{font-size:12.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}

.skip{position:absolute;left:-9999px;background:var(--orange);color:#fff;padding:10px 16px;font-weight:700;font-size:13px;z-index:99}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:2px solid var(--blue-pale);outline-offset:3px}

/* ===================== header ===================== */
/* header floats over the hero plate so the cable fan runs behind it,
   then solidifies once the hero is scrolled past */
.hdr{position:fixed;top:0;left:0;right:0;z-index:70;background:transparent;border-bottom:1px solid transparent;transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease}
.hdr.solid{background:rgba(43,45,49,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.hdr-in{display:flex;align-items:center;gap:30px;height:66px}
section[id]{scroll-margin-top:78px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.logo svg{width:24px;height:24px;flex:none}
.logo b{font-size:16.5px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.logomark{display:block;height:26px;width:172px;flex:none;
  background:url("../img/logo.png") left center/contain no-repeat}
@media(max-width:520px){.logomark{height:22px;width:146px}}
.nav{display:flex;gap:26px;align-items:stretch}
@media(max-width:1180px){.nav{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14.5px;font-weight:600;text-decoration:none;height:44px;padding:0 22px;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-lg{height:54px;padding:0 30px;font-size:15.5px}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink-900)}
.btn-orange{background:#666666;border-color:#666666;color:#fff;font-weight:700}
.btn-orange:hover,.btn-orange:focus-visible{background:#fff;border-color:#fff;color:var(--ink-900)}
/* "Get in Touch" buttons: brand red, white on hover. */
.btn-git{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:700}
.btn-git:hover,.btn-git:focus-visible{background:#fff;border-color:var(--orange);color:var(--orange)}
.btn-dark{border-color:var(--light-fg);color:var(--light-fg)}
.btn-dark:hover{background:var(--light-fg);color:var(--light-bg)}

/* ---- nav links, mega panels, progress, burger, mobile sheet ---- */
.navlink{background:none;border:0;font-family:var(--font);font-size:13.5px;font-weight:600;
  color:var(--fg-mid);cursor:pointer;text-decoration:none;height:66px;
  display:inline-flex;align-items:center;gap:7px;padding:0;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.navlink:hover,.navlink[aria-expanded="true"]{color:#fff}
.navlink[aria-current="true"]{color:#fff;border-bottom-color:var(--orange)}
.navlink svg{width:9px;height:6px;transition:transform .22s}
.navlink[aria-expanded="true"] svg{transform:rotate(180deg)}
.navitem{position:relative}

.mega{position:fixed;left:0;right:0;top:66px;background:rgba(40,42,46,.975);backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);
  box-shadow:0 28px 54px rgba(0,0,0,.5)}
.mega[hidden]{display:none}
.mega-in{display:grid;gap:4px 24px;padding:26px 0 32px}
.mega-3{grid-template-columns:repeat(3,1fr)}
.mega-4{grid-template-columns:repeat(4,1fr)}
.mega-5{grid-template-columns:repeat(5,1fr)}
.mmi{display:block;text-decoration:none;padding:15px 17px;border:1px solid transparent;transition:background .18s,border-color .18s}
.mmi:hover{background:var(--ink-850);border-color:var(--line-soft)}
.mmi b{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:#fff}
.mmi b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--orange));flex:none}
.mmi span{display:block;margin-top:7px;font-size:13.5px;color:var(--fg-dim);line-height:1.5}
.mega-foot{grid-column:1/-1;margin-top:14px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mega-foot p{font-size:14px;color:var(--fg-dim);max-width:62ch}

/* There is no scroll progress bar under the header.
   A full-width line spanning the header competed with the one mark that
   carries meaning there: the rule under the subnav link whose section is on
   screen. Two horizontal red lines a few pixels apart, one of them moving on
   every scroll event, and only one of them answering "where am I" -- so the
   bar went and the link underline is the only position indicator left.
   That underline is .navlink[aria-current="true"] in chrome.css, driven by
   the IntersectionObserver in site.js.
   The scroll handler that drove the bar still runs: it also adds .solid to
   the header past 60px, and every write to the bar is behind a null check,
   so removing the element was the whole change. No JavaScript was touched,
   which is why the ten page bundles did not need rebuilding. */

.burger{display:none;background:none;border:1px solid var(--line);width:44px;height:44px;
  align-items:center;justify-content:center;cursor:pointer;flex:none}
.burger:hover{border-color:var(--fg-faint)}
.burger i{display:block;width:18px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;transition:transform .22s,top .22s}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

.sheet{position:fixed;inset:66px 0 0;z-index:65;background:var(--ink-950);overflow-y:auto;
  padding:14px 0 56px;display:none}
.sheet.open{display:block}
.sgroup{border-bottom:1px solid var(--line-soft)}
.sgroup > button{width:100%;background:none;border:0;padding:18px 0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--font);font-size:17px;font-weight:700;color:#fff;text-align:left}
.sgroup > button i{font-style:normal;font-size:22px;line-height:1;color:var(--orange);transition:transform .2s}
.sgroup.open > button i{transform:rotate(45deg)}
.ssub{display:none;padding-bottom:12px}
.sgroup.open .ssub{display:block}
.ssub a{display:block;padding:10px 0;font-size:15px;color:var(--fg-mid);text-decoration:none}
.ssub a:hover{color:#fff}
.sflat{display:block;padding:18px 0;border-bottom:1px solid var(--line-soft);
  font-size:17px;font-weight:700;color:#fff;text-decoration:none}
.sheet .btn{margin-top:28px;width:100%}

@media(max-width:1180px){
  .burger{display:flex}
  .hdr-cta{display:none}
}
@media(min-width:1181px){
  .sheet{display:none !important}
}
@media(prefers-reduced-motion:reduce){
  .navlink svg,.burger i,.burger i::before,.burger i::after,.sgroup > button i{transition:none}
}

/* ===================== hero ===================== */
.hero{position:relative;overflow:hidden;background:#404247;border-bottom:1px solid var(--line-soft)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
/* light enough that the fan reads across the full width, dark enough
   under the headline to hold contrast */
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(43,45,49,.72) 0%,rgba(43,45,49,.56) 30%,rgba(43,45,49,.20) 62%,rgba(43,45,49,.06) 100%),
  linear-gradient(to bottom,rgba(43,45,49,.26) 0%,rgba(43,45,49,0) 20%)}
.hero-in{position:relative;padding:150px 0 58px;max-width:830px}
@media(max-width:900px){.hero-in{padding:126px 0 52px}}
.hero h1{font-size:clamp(32px,5.2vw,66px);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:1.02}
.hero h1 .o{color:var(--orange)}
.hero-lead{margin-top:26px;max-width:56ch;font-size:18.5px;color:#D3D6DA}
.hero-bold{margin-top:18px;max-width:56ch;font-size:18.5px;font-weight:700;color:#fff}
.hero-btns{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* ============ gap stage: one pinned panel, scroll advances 01 to 04 ============
   The eyebrow, background and rail never move. Only the number, headline,
   copy and accent colour cross-fade as the track scrolls past. */
.gapstage{position:relative;background:var(--ink-900)}
.gapstage-track{height:400vh}
.gapstage-pin{position:sticky;top:0;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:stretch}
.gapstage-pin canvas{position:absolute;inset:0;width:100%;height:100%}
.gap-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,45,49,.95) 0%,rgba(43,45,49,.80) 34%,rgba(43,45,49,.34) 66%,rgba(43,45,49,.62) 100%)}
.gap-in{position:relative;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) 158px;
  grid-template-rows:auto minmax(0,1fr);
  column-gap:54px;row-gap:24px;padding-top:104px;padding-bottom:76px}
/* padding-top/bottom, not a shorthand: .gap-in shares its element with .shell,
   and a shorthand zeroed the shell gutter, so between 1041px and the shell's
   max width the stage text sat hard against the window edge and out of line
   with the header. */
.gap-eyebrow{grid-column:1;grid-row:1}

.gap-slides{grid-column:1;grid-row:2;position:relative}
.gap-slide{position:absolute;inset:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  column-gap:54px;row-gap:22px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .34s ease,transform .34s ease;pointer-events:none}
.gap-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}

.gap-title{grid-column:1;grid-row:1}
.gap-title span{display:block;font-size:clamp(36px,5.4vw,72px);font-weight:800;text-transform:uppercase;letter-spacing:-.038em;line-height:.94}
.gap-title .acc{color:var(--acc);transition:color .3s ease}
.gap-left{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:15px;max-width:50ch}
.gap-left p{font-size:17px;color:#D2D5D9;line-height:1.58}
.gap-left p.strong{font-weight:700;color:#fff}
.gap-right{grid-column:2;grid-row:1/3;align-self:start;padding-top:6px;display:flex;flex-direction:column;gap:15px;max-width:52ch;padding-bottom:4px}
.gap-right .label{color:var(--acc);transition:color .3s ease}
.gap-right h3{font-size:clamp(21px,2.3vw,28px);font-weight:800;letter-spacing:-.012em;margin-top:4px}
.gap-right p{font-size:17px;color:#D2D5D9;line-height:1.58}
.gap-right p.strong{font-weight:700;color:#fff}

.rail{grid-column:2;grid-row:1/3;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:26px;z-index:2}
.rail-num{font-size:clamp(46px,5.2vw,72px);font-weight:800;line-height:.86;letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums;transition:color .3s ease}
.rail-list{display:flex;flex-direction:column;align-items:flex-end;gap:16px;padding-right:22px;border-right:1px solid var(--line);position:relative}
.rail-list button{background:none;border:0;padding:0;font-family:var(--font);font-size:12.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--fg-faint);cursor:pointer;transition:color .2s;line-height:1.3;text-align:right}
.rail-list button:hover{color:var(--fg-mid)}
.rail-list button[aria-current="true"]{color:#fff}
.rail-mark{position:absolute;right:-1px;top:0;width:2px;height:17px;background:#fff;transition:transform .3s ease}

@media(prefers-reduced-motion:reduce){
  .gap-slide{transform:none;transition:opacity .01s}
  .rail-mark{transition:none}
}

/* ---------- the gutter, where a shorthand threw it away ----------------
   .hero-in, .fam-in and .gap-in each set a padding shorthand for a vertical
   reason, which zeroes the horizontal half. On most pages that is harmless:
   the element sits inside a .shell that already provides the gutter, and
   the shorthand only affects the inner box.

   It is not harmless where the same element carries both classes, as
   `<div class="shell hero-in">` does on the legal pages and the sitemap,
   and `<div class="shell fam-in">` does on the practices stage. There the
   shorthand is overwriting the gutter it was supposed to inherit, and the
   text sits hard against the bezel.

   The compound selector matches only that case, so a .hero-in nested inside
   a .shell is left alone and does not end up with the gutter twice. Applied
   below 1040px, because above it the shell box is narrower than the window
   and the margin either side comes from that instead.

   Only the three classes that actually set a padding shorthand are listed.
   .cta-in, .facts-in, .subnav-in and .art-shell set padding-block or no
   padding at all, so they already inherit .shell's gutter; adding them here
   would set the same value twice and suggest to the next reader that they
   needed the rescue. If a shorthand is ever added to one of them, add it
   here in the same edit. */
@media(max-width:1040px){
  .shell.hero-in, .shell.fam-in, .shell.gap-in{
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }
}

@media(max-width:1040px){
  /* pinning off: the rail becomes tappable tabs and the panel sits in flow */
  .gapstage-track{height:auto}
  .gapstage-pin{position:static;height:auto;min-height:0}

  /* Two bugs lived in the line below, and both showed on a phone.

     It was `padding:56px 0 64px`, a shorthand, which threw away the
     horizontal padding .shell had just set. Every line in the panel then
     started hard against the left edge of the screen with nothing either
     side. The longhands keep the vertical change and leave .shell's gutter
     alone.

     And .gap-in is a flex item of .gapstage-pin, so its min-width:auto
     resolved to its own min-content size. The rail inside it is a row of
     four uppercase words at 0.19em letter-spacing, which does not fit in
     390px, so the panel refused to shrink and sat 443px wide inside a 390px
     box that clips. Fifty-three pixels of every paragraph were cut off, mid
     word, with no way to scroll to them. min-width:0 is what lets a flex or
     grid item be narrower than its contents; the rail scrolls on its own. */
  .gap-in{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:22px;
    padding:56px var(--gutter) 64px;min-width:0}
  .gap-eyebrow{grid-column:1;grid-row:1}
  .rail{grid-column:1;grid-row:2;justify-self:start;flex-direction:row;align-items:center;gap:20px;width:100%;min-width:0}
  .rail-num{font-size:38px}
  .rail-list{flex-direction:row;align-items:center;gap:18px;padding:0 0 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;flex:1;min-width:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail-list::-webkit-scrollbar{display:none}
  .rail-list button{white-space:nowrap}
  .rail-mark{display:none}
  .gap-slides{grid-column:1;grid-row:3;position:static}
  .gap-slide{position:static;display:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;transform:none;opacity:1;visibility:visible;min-width:0}
  .gap-slide.is-active{display:grid}
  .gap-title{grid-column:1;grid-row:1}
  .gap-left{grid-column:1;grid-row:2}
  .gap-right{grid-column:1;grid-row:3;align-self:auto;max-width:56ch}
}

/* ===================== solutions family ===================== */
.sec{padding:96px 0;position:relative}
.sec-900{background:var(--ink-900)}
.sec-850{background:var(--ink-850)}
.sec-head{max-width:70ch;margin-bottom:48px}
.sec-head .label{color:var(--grey);display:block;margin-bottom:16px}
.h2{font-size:clamp(26px,3.3vw,42px);font-weight:800;text-transform:uppercase;letter-spacing:-.032em;line-height:1.06}
.h2 em{font-style:normal;color:var(--orange)}
.sec-head p{margin-top:18px;color:var(--fg-mid);max-width:62ch}

/* ---- solutions family: left column pinned, pillars advance on scroll.
   Same mechanic as the gap stage. The left half never moves; the right
   column slides so the active pillar sits at a fixed height, and the one
   below it stays visible but dimmed. ---- */
.famstage{position:relative;background:var(--ink-900)}
.famstage-track{height:300vh}
.famstage-pin{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;display:flex}
.fam-in{position:relative;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  column-gap:64px;height:100%;padding:100px 0 72px}
.fam-rule{background:var(--line);align-self:stretch}

.fam-left{align-self:center}
.fam-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:#fff}
.fam-mark{margin-top:16px;font-size:clamp(21px,2.3vw,29px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;line-height:1}
.famname{margin-top:12px;font-size:clamp(46px,6.2vw,84px);font-weight:900;letter-spacing:-.05em;line-height:.94;text-transform:uppercase;color:var(--orange)}
.famname sup{font-size:.30em;font-weight:800;vertical-align:super;letter-spacing:0}
.famsub{margin-top:28px;font-size:20px;font-weight:800}
.famtext{margin-top:14px;color:var(--fg-mid);max-width:44ch}
.famtext b{color:#fff;font-weight:700}

.fam-right{position:relative;overflow:hidden;align-self:stretch;display:flex;align-items:flex-start;padding-top:7vh}
.fam-list{width:100%;display:flex;flex-direction:column;gap:112px;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.fam-item{opacity:.26;transition:opacity .45s ease}
.fam-item.on{opacity:1}
.fam-item svg{width:54px;height:54px;display:block}
.fam-item .label{display:block;margin:24px 0 10px;color:var(--fg-dim)}
.fam-item.on .label{color:var(--fg-mid)}
.fam-item h3{font-size:clamp(30px,4.1vw,56px);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1;color:var(--fg-faint);transition:color .45s ease}
.fam-item.on h3{color:#fff}
.fam-item p{margin-top:18px;color:var(--fg-mid);max-width:46ch}

@media(prefers-reduced-motion:reduce){
  .fam-list,.fam-item,.fam-item h3{transition:none}
}
@media(max-width:1000px){
  .famstage-track{height:auto}
  .famstage-pin{position:static;height:auto;min-height:0}
  .fam-in{grid-template-columns:minmax(0,1fr);row-gap:44px;padding:64px var(--gutter) 68px;min-width:0}
  .fam-rule{display:none}
  .fam-right{overflow:visible;padding-top:0}
  .fam-list{gap:52px;transform:none !important}
  .fam-item{opacity:1}
  .fam-item h3{color:#fff}
  .fam-item .label{color:var(--fg-mid)}
}

/* ---- delivery: three cards, coloured connectors, then the Govern row.
   Card titles are sentence case at a lighter weight than the section
   headings, so this block reads as a diagram rather than more headline. ---- */
.deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dcard{background:var(--ink-850);border:1px solid var(--line);padding:34px 34px 36px;display:flex;flex-direction:column;gap:22px}
.dcard h4{font-size:clamp(23px,2.1vw,27px);font-weight:600;letter-spacing:-.012em;color:#fff;text-transform:none}
.dcard p{color:var(--fg-mid);font-size:16.5px;line-height:1.56}
.dcard .out{margin-top:auto;padding-top:24px;border-top:1px solid var(--line);font-size:16.5px;font-weight:700;color:#fff;line-height:1.56}

/* connector band: one faint rule per card edge, plus a glowing drop line
   from each card centre carrying that gap's accent colour */
.dlink{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;height:104px}
.dlink-cell{position:relative;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft)}
.dlink-cell::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line-soft)}
.dlink-cell i{position:absolute;left:50%;top:0;width:3px;height:58px;transform:translateX(-1px);border-radius:2px;
  background:linear-gradient(to bottom,var(--c),color-mix(in srgb,var(--c) 30%,transparent) 45%,transparent);
  box-shadow:0 0 16px 3px color-mix(in srgb,var(--c) 45%,transparent)}

.dwide{background:var(--ink-850);border:1px solid var(--line);padding:34px 28px;display:grid;
  grid-template-columns:minmax(0,.68fr) minmax(0,1.42fr) minmax(0,1.05fr);align-items:stretch}
.dwide-cell{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:10px 34px}
.dwide-cell + .dwide-cell{border-left:1px solid var(--line)}
.dwide h4{font-size:clamp(23px,2.1vw,27px);font-weight:600;letter-spacing:-.012em;color:#fff;text-transform:none}
.dwide p{color:var(--fg-mid);font-size:16.5px;line-height:1.56}
.dwide p.out{font-weight:700;color:#fff}

@media(max-width:1000px){
  .deliv{grid-template-columns:1fr;gap:18px}
  .dlink{display:none}
  .dwide{grid-template-columns:1fr;margin-top:18px;padding:28px 22px}
  .dwide-cell{padding:16px 0;gap:16px}
  .dwide-cell + .dwide-cell{border-left:0;border-top:1px solid var(--line)}
}

/* ===================== statement ===================== */
.stmt{padding:104px 0;background:var(--ink-950)}
.stmt h2{font-size:clamp(28px,4.1vw,52px);font-weight:800;text-transform:uppercase;letter-spacing:-.038em;line-height:1.05;max-width:22ch}
.stmt h2 em{font-style:normal;color:var(--orange)}
.stmt-sub{margin-top:26px;font-size:clamp(18px,2vw,24px);font-weight:800;text-transform:uppercase;letter-spacing:.01em;max-width:26ch}
.stmt-sub em{font-style:normal;color:var(--orange)}
.stmt p{margin-top:24px;color:var(--fg-mid);max-width:64ch}
.stmt p + p{margin-top:14px}

/* ===================== light section ===================== */
.light{background:var(--light-bg);color:var(--light-fg);padding:96px 0}
.light .h2{color:var(--light-fg)}
.light .label{color:var(--light-mid)}
.lightgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
@media(max-width:960px){.lightgrid{grid-template-columns:1fr;gap:36px}}
.light p{color:var(--light-mid)}
.light-lead{margin-top:20px;font-size:17px}
.quote{border-left:3px solid var(--orange);padding:6px 0 6px 26px}
.quote blockquote{margin:0;font-size:19px;line-height:1.5;color:var(--light-fg);font-style:italic}
.quote-by{display:flex;align-items:center;gap:14px;margin-top:22px}
.avatar{width:46px;height:46px;border-radius:50%;flex:none;background:#DCDCD8;border:1px solid var(--light-line);display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.08em;color:#8A8C90}
.quote-by b{display:block;font-size:15px;font-weight:800;color:var(--light-fg)}
.quote-by span{font-size:14px;color:var(--light-mid)}
.slotnote{margin-top:16px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--orange)}

/* ===================== industries ===================== */
/* ---- spotlight on industries: tab row, full-bleed plate, overlapping card.
   Each industry carries its own accent, set as --c on the tab and panel. ---- */
.indtabs{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0;margin-bottom:0}
.indtabs button{background:none;border:0;margin:0;padding:0 0 10px;font-family:var(--font);
  font-size:14.5px;font-weight:700;color:var(--fg-faint);cursor:pointer;position:relative;
  transition:color .18s;white-space:nowrap}
.indtabs button:hover{color:var(--fg-mid)}
.indtabs button[aria-selected="true"]{color:#fff}
.indtabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c,var(--orange))}
.indtabs .sep{color:#4C5057;padding:0 18px 10px;font-size:14px;user-select:none}

/* The plate bleeds to the right edge with calc(-50vw + 50%). 100vw includes the
   vertical scrollbar on desktop, so the plate overshot the page by half the
   scrollbar width and forced a horizontal scrollbar. Clip the section at the
   page edge. `clip` (not `hidden`) keeps it from becoming a scroll container. */
#industries{overflow-x:hidden;overflow-x:clip}
.indstage{margin-top:46px}
.indpanel{position:relative}
.indpanel[hidden]{display:none}
.indplate{position:relative;margin-left:23%;margin-right:calc(-50vw + 50%);
  height:clamp(340px,42vw,580px);overflow:hidden;background:#46494F}
.indplate canvas,.indplate img{position:absolute;inset:0;width:100%;height:100%}
.indplate img{object-fit:cover;object-position:center;
  filter:grayscale(.14) contrast(1.03) brightness(.93) saturate(.95)}
/* keeps the white card readable where it overlaps the photograph,
   and grades the plate back toward the section ground */
.indplate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,45,49,.60) 0%,rgba(43,45,49,.20) 26%,rgba(43,45,49,.04) 52%,rgba(43,45,49,.28) 100%)}
.indcard{position:absolute;left:0;top:10%;z-index:2;width:min(430px,44%);
  background:#fff;color:#323438;padding:44px 42px 46px}
.indcard h3{font-size:clamp(27px,3.1vw,40px);font-weight:800;text-transform:uppercase;
  letter-spacing:-.026em;line-height:1.02;color:#323438}
.indcard p{margin-top:20px;font-size:16px;line-height:1.62;color:#4B4D53}
.indcard p.strong{font-weight:700;color:#323438}
.indcard .btn{margin-top:28px;background:#404247;color:#fff;border-color:#404247;align-self:flex-start}
.indcard .btn:hover{background:var(--c,var(--orange));color:#fff;border-color:var(--c,var(--orange))}
.indpanel[data-onlight="1"] .indcard .btn:hover{color:#323438}

@media(max-width:1000px){
  .indcard{position:static;width:100%;padding:32px 26px 34px}
  .indplate{margin-left:0;margin-right:calc(-50vw + 50%);height:300px}
  .indstage{margin-top:34px}
}
@media(max-width:640px){
  .indtabs{gap:0}
  .indtabs .sep{padding:0 11px 10px}
  .indtabs button{font-size:13.5px}
  .indplate{height:230px}
}

/* ============ ecosystem: continuous right-to-left marquee ============
   Two identical sets sit side by side and the track slides exactly one
   set width, so the loop has no seam. Gap is margin-right rather than
   flex gap, otherwise the -50% shift lands mid-gap and visibly jumps. */
.marquee{position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.marquee-track{display:flex;width:max-content;animation:eco-slide 48s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes eco-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.eco-set{display:flex;flex:none}
.eco-box{flex:none;width:278px;height:176px;margin-right:20px;
  border:1px solid var(--line);background:var(--ink-850);
  display:grid;place-items:center;padding:22px;transition:border-color .2s,background .2s}
.eco-box:hover{border-color:var(--fg-faint);background:var(--ink-800)}
.eco-box span{font-size:25px;font-weight:700;letter-spacing:-.022em;color:#fff;text-align:center;line-height:1.15}
@media(max-width:640px){
  .eco-box{width:198px;height:128px;margin-right:14px;padding:16px}
  .eco-box span{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .marquee-track{animation:none}
}

/* ===================== final cta ===================== */
.cta{position:relative;overflow:hidden;background:var(--ink-950);padding:112px 0}
.cta canvas{position:absolute;inset:0;width:100%;height:100%}
.cta-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,45,49,.92),rgba(43,45,49,.58) 60%,rgba(43,45,49,.86))}
.cta-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:end}
@media(max-width:900px){.cta-in{grid-template-columns:1fr;align-items:start}}
.cta h2{font-size:clamp(34px,5.6vw,72px);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:1.0;color:var(--orange);max-width:16ch}
.cta h2 span{color:#fff;display:block}
.cta p{margin-top:20px;color:var(--fg-mid);max-width:48ch}

/* ===================== footer ===================== */
.ftr{background:var(--ink-900);border-top:1px solid var(--line-soft);padding:64px 0 30px}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr));gap:38px}
@media(max-width:1000px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr h5{font-size:12px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ftr ul{display:flex;flex-direction:column;gap:10px}
.ftr a{font-size:14.5px;color:var(--fg-dim);text-decoration:none;transition:color .16s}
.ftr a:hover{color:var(--blue-pale)}
.ftr-about p{margin-top:16px;font-size:15.5px;color:var(--fg-dim);max-width:38ch}
.ftr-legal{margin-top:52px;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--fg-faint)}
.ftr-legal div{display:flex;gap:22px;flex-wrap:wrap}


/* baseline reset (the hosted preview supplies this; kept here for standalone use) */
:root{color-scheme:dark}
img,video{max-width:100%;height:auto}
[hidden]{display:none!important}

/* family pages link their delivery cards through to the child page */
.dcard h4 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .18s,border-color .18s}
.dcard h4 a:hover{color:var(--blue-pale);border-color:var(--blue-pale)}


/* ============ managed IT services page: sub-page hero, fact band,
   coverage table, commercial list and FAQ. Everything else is the
   shared AtomicNorth system. ============ */
.hero-sub .hero-in{padding:128px 0 56px;max-width:880px}
.hero-sub h1{font-size:clamp(32px,5vw,64px)}
.crumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:24px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.crumb a{color:var(--fg-mid);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb span[aria-hidden]{color:var(--fg-faint)}
.crumb span[aria-current]{color:#fff}
.dcard[id]{scroll-margin-top:92px}

.facts{background:var(--ink-850);border-bottom:1px solid var(--line-soft)}
.facts-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:34px 28px;border-left:1px solid var(--line-soft)}
.fact:first-child{border-left:0;padding-left:0}
.fact .label{display:block;color:var(--fg-faint);margin-bottom:12px}
.fact b{display:block;font-size:clamp(19px,1.9vw,24px);font-weight:800;letter-spacing:-.018em;line-height:1.1}
.fact p{margin-top:11px;font-size:14.5px;color:var(--fg-dim);line-height:1.5}
@media(max-width:900px){
  .facts-in{grid-template-columns:1fr 1fr}
  .fact{padding:26px 22px}
  .fact:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:560px){
  .facts-in{grid-template-columns:1fr}
  .fact{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--line-soft)}
  .fact:first-child{border-top:0}
}

/* coverage table: scrolls in its own container so the page never
   scrolls sideways on a phone */
.tblwrap{overflow-x:auto;border:1px solid var(--line);background:var(--ink-850)}
.tbl{width:100%;border-collapse:collapse;min-width:840px;font-size:15.5px}
.tbl th,.tbl td{text-align:left;padding:16px 20px;vertical-align:top;line-height:1.52;
  border-bottom:1px solid var(--line-soft)}
.tbl thead th{background:var(--ink-800);border-bottom:1px solid var(--line);
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.tbl tbody th{width:21%;color:#fff;font-weight:700}
.tbl td{color:var(--fg-mid)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff;font-weight:700}
.tblnote{margin-top:16px;font-size:14px;color:var(--fg-faint);max-width:74ch}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.checks{display:flex;flex-direction:column;gap:22px}
.checks li{padding-left:22px;border-left:3px solid var(--light-line)}
.checks li:first-child{border-left-color:var(--orange)}
.checks li b{display:block;margin-bottom:7px;font-size:15.5px;font-weight:800;color:var(--light-fg)}
.checks li span{display:block;font-size:15.5px;line-height:1.55;color:var(--light-mid)}

.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:24px 46px 24px 0;
  font-size:clamp(16.5px,1.7vw,19px);font-weight:700;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-soft)}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;translate:0 -50%;
  font-size:26px;line-height:1;font-weight:400;color:var(--orange);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 46px 26px 0;max-width:80ch}
.faq-body p{font-size:16.5px;color:var(--fg-mid)}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* hero text column: kept clear of the plate at every width.
   51.5vw is where the widest plate starts painting; the max() term is
   the shell's own left inset, which stops growing once the shell hits
   its 1320px cap. Below 1000px there is no room for two columns and
   the plate is a backdrop instead. */
@media(min-width:1000px){
  .hero-in,.hero-sub .hero-in{
    max-width:min(830px,calc(51.5vw - max(46px,(100vw - 1320px)/2 + 46px) - 20px))}
  .hero h1{font-size:clamp(30px,4.3vw,58px)}
  .hero-sub h1{font-size:clamp(30px,4.1vw,56px)}
}
/* the 404's list of most-asked-for pages */
.nf-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.nf-list a{display:block;padding:16px 2px;color:var(--fg-mid);
  border-bottom:1px solid var(--line);font-size:17px;text-decoration:none;
  transition:color .18s,border-color .18s}
.nf-list a:hover{color:#fff;border-color:var(--brand-deep)}
/* a headline is set in one long word often enough that it has to be
   allowed to break rather than push past the column it was given */
.hero h1{overflow-wrap:break-word}