/* ============================================================================
   DELTA CARRIER GROUP — CINEMATIC DELTA (Design A, owner-selected 2026-07-29)
   Full-site design system grown from site/concepts/a.css.
   Dark editorial film: full-bleed photographic chapters, a fixed route spine,
   type set INTO the imagery, diagonal chapter cuts, and a bone "paper" surface
   for long-form reading (articles, FAQ, forms, legal).
   ============================================================================ */
:root {
  --asphalt: #131417; --ink: #0D0E10; --bone: #F2F1EC; --paper: #F2F1EC;
  --paper-ink: #1B1C1E; --paper-dim: #565C63; --paper-hair: #D9D6CD;
  --red: #E24854; --red-ink: #C2333F; --steel: #9AA6B0; --amber: #E7A83A;
  --hair: rgba(242,241,236,.14); --dim: #C9CBCE; --dim2: #B9BCC0;
  --disp: "Archivo Expanded", "Archivo", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--asphalt); color: var(--bone); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--red); color: #fff;
  font: 700 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 14px 20px;
  border-radius: 2px; transition: top .15s ease; }
.skip-link:focus-visible { top: 12px; }

/* ---------- photo strip that opens in place (owner correction C) ------------
   The strip figures look exactly like the linked frames they replaced; the
   difference is that the photograph opens over the page instead of taking the
   visitor away to the gallery. */
.frames--lightbox .frame { position: relative; }
.frames--lightbox .gal-open { display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; }
.frames--lightbox .gal-open img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frames--lightbox .gal-open:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.frames--lightbox .cap { pointer-events: none; }   /* it sat over the lower third of each photo */
.gviewer__gallery { margin-left: auto; margin-right: 14px; align-self: center;
  font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--red);
  padding-bottom: 3px; white-space: nowrap; }
.gviewer__gallery:hover { color: #fff; }
.gviewer__gallery:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
@media (max-width: 700px) {
  .gviewer__gallery { font-size: 11px; letter-spacing: .1em; margin-right: 8px; }
}

/* ---------- same-page legal document reader (owner AC04) --------------------
   The page underneath stays where it is, dimmed; the document scrolls inside
   its own panel on the cream reading surface, at a comfortable measure. */
.lreader { position: fixed; inset: 0; z-index: 520; display: flex;
  align-items: center; justify-content: center; padding: 4vh 3vw;
  background: rgba(6,7,8,.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lreader[hidden] { display: none; }
.lreader__panel { position: relative; display: flex; flex-direction: column;
  width: min(880px, 100%); max-height: 92vh; background: var(--paper); color: var(--paper-ink);
  border-radius: 3px; box-shadow: 0 40px 90px rgba(0,0,0,.6); overflow: hidden; }
.lreader__bar { display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 12px 14px; border-bottom: 1px solid var(--paper-hair); background: #E9E6DE; }
.lreader__back, .lreader__x { background: transparent; border: 1px solid transparent;
  color: var(--paper-ink); cursor: pointer; border-radius: 2px;
  font: 600 12px var(--body); letter-spacing: .1em; text-transform: uppercase;
  min-height: 40px; padding: 0 12px; }
.lreader__x { margin-left: auto; font-size: 15px; min-width: 44px; }
.lreader__back:hover, .lreader__x:hover { border-color: var(--paper-ink); }
.lreader__back:focus-visible, .lreader__x:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
.lreader__kind { margin: 0 auto 0 0; font: 500 11px var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--paper-dim); }
.lreader__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 34px clamp(20px, 5vw, 54px) calc(40px + env(safe-area-inset-bottom)); }
.lreader__scroll:focus-visible { outline: 3px solid var(--red-ink); outline-offset: -3px; }
.lreader__doc { max-width: 66ch; margin-inline: auto; }
.lreader__eyebrow { color: var(--red-ink); }
.lreader__title { font: 800 clamp(26px, 3.4vw, 40px)/1.05 var(--disp); text-transform: uppercase;
  letter-spacing: -.01em; margin: 8px 0 22px; }
.lreader.is-loading .lreader__body { opacity: .35; }
.lreader__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.lreader-open, html.treader-open { overflow: hidden; }
.treader__backdrop { position: absolute; inset: 0; }
.treader .lreader__panel { z-index: 1; }
@media (max-width: 700px) {
  .lreader { padding: 0; }
  .lreader__panel { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .lreader__kind { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lreader, .lreader__panel { transition: none; }
}

/* ---------- kinetic background (owner correction B) -------------------------
   A fixed layer behind the whole page, plus a canvas inside the dark editorial
   bands. Both sit behind their surface's own content and never take a pointer
   event. Sections that carry a photograph or the cream reading surface are left
   alone — motion belongs on the asphalt, not under the type on paper. */
/* there is no viewport-pinned kinetic layer: a fixed canvas stays put while the
   page scrolls, which makes its traffic read as a sheet dragged along with the
   visitor. Every canvas now sits inside its section, in normal flow. */
/* The canvas is parked over the stretch of its section that actually carries
   traffic — its top and height are set by kinetic-bg.js.

   Two things keep it feeling like atmosphere rather than an applied graphic: a
   whisper of blur, which takes the hard vector edge off the strokes so they
   settle into the section's grain, and a soft fade at the top and bottom of the
   strip, so the effect has no visible edge where it starts and stops. */
.kin-canvas { position: absolute; inset: 0 0 auto 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 0; overflow: hidden;
  clip-path: inset(0); filter: blur(.35px); }
[data-kin] { position: relative; isolation: isolate; }
[data-kin] > .kin-canvas { z-index: 0; }
[data-kin] > *:not(.kin-canvas) { position: relative; z-index: 1; }

/* ---------- route spine (the signature — now a real section rail) ----------
   One dot per section on the page, the current one filled, a red line that
   tracks how far down the page you are, and a label on hover or focus. The
   grey is deliberately neutral so the rail reads on the graphite sections and
   on the cream ones without changing colour. */
.spine { position: fixed; left: 34px; top: 0; bottom: 0; width: 2px; z-index: 40;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 21vh 0 15vh;
  background: linear-gradient(180deg, transparent 4%, rgba(138,141,146,.38) 12%, rgba(138,141,146,.38) 88%, transparent 96%); }
.spine[hidden] { display: none; }
.spine__fill { position: absolute; left: 0; top: 0; width: 2px; height: 0;
  background: linear-gradient(180deg, transparent, var(--red) 12%); }
.spine__dot { position: relative; flex: 0 0 auto; box-sizing: border-box; cursor: pointer;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--asphalt); border: 2px solid rgba(138,141,146,.9);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
/* owner correction H: the rail must read as a control, not decoration. It
   names itself and names the section you are in — but on its OWN vertical axis,
   never in a horizontal pill that would reach into the page and land on the
   copy (which is exactly what happened over the homepage hero). */
.spine__legend { position: absolute; left: -21px; top: 11vh; width: 13px; height: 62vh;
  transform: rotate(180deg); writing-mode: vertical-rl;
  display: flex; flex-direction: row; align-items: stretch;
  font: 500 9.5px var(--mono); letter-spacing: .28em; text-transform: uppercase;
  color: #F2F1EC; white-space: nowrap; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: -1px 0 #0D0E10, 0 1px #0D0E10, 1px 0 #0D0E10, 0 -1px #0D0E10,
    0 0 4px rgba(13,14,16,.95); }
.spine__legend-value { position: relative; flex: 1 1 auto; min-height: 0; min-inline-size: 0; overflow: hidden; }
.spine__legend-word { position: absolute; inset: 0; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .16s ease; }
.spine__legend-word.is-current { opacity: 1; }
.spine__legend-word.is-outgoing { opacity: .72; }
/* the rail crosses graphite AND cream sections, so the label may not use a
   colour that only works on one of them (review: white-on-cream, invisible) */
.spine__legend b { color: #FF6974; font-weight: 700; }
.spine__dot:hover, .spine__dot:focus-visible { border-color: var(--red); transform: scale(1.3); }
.spine__dot.on { background: var(--red); border-color: var(--red); }
.spine__dot:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.spine__tip { position: absolute; left: 22px; top: 50%; white-space: nowrap;
  transform: translateY(-50%) translateX(-5px);
  font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(13,14,16,.94); border: 1px solid rgba(242,241,236,.16);
  padding: 7px 11px; border-radius: 2px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; }
.spine__dot:hover .spine__tip, .spine__dot:focus-visible .spine__tip { opacity: 1; transform: translateY(-50%) translateX(0); }
main > section:focus { outline: none; }
main > section { scroll-margin-top: 150px; }
@media (max-width: 900px) { main > section { scroll-margin-top: 96px; } }
@media (max-width: 1100px) { .spine { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .spine__dot, .spine__tip { transition: none; }
  html:not([data-motion-proof="force"]) .spine__legend-word { transition: none; }
  .spine__dot:hover, .spine__dot:focus-visible { transform: none; }
}

/* ---------- header ---------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 26px;
  padding: 14px 44px 14px 70px;
  background: linear-gradient(180deg, rgba(13,14,16,.92), rgba(13,14,16,.55) 75%, transparent); }
/* owner correction: on phones and tablets the header gets out of the way when
   you read downward and comes back the moment you scroll up. Desktop keeps the
   header permanently visible. */
/* Once the page is scrolled, the header stops being a gradient over a
   photograph and becomes a solid bar. Without this the light nav text printed
   straight onto the cream reading sections on desktop. */
.hd.hd--solid { background: rgba(13,14,16,.96); box-shadow: 0 10px 30px rgba(6,7,8,.35); }
@media (max-width: 900px) {
  .hd { transition: transform .34s cubic-bezier(.22,.9,.32,1); will-change: transform; }
  .hd.hd--away { transform: translateY(-104%); }
}

/* ---------- final forms + in-office departments --------------------------- */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important;
  height: 1px !important; overflow: hidden !important; }
.field__error { margin: 7px 0 0; color: #9F1F2A; font: 700 12px/1.45 var(--body); }
.field.is-error input, .field.is-error select, .field.is-error textarea {
  border-color: #B92332; outline-color: #B92332; }
.form-status { min-height: 1.5em; margin: 4px 0 2px; font-weight: 700; }
.form-status:focus { outline: 3px solid var(--red); outline-offset: 4px; }
.form-a [aria-busy="true"] { cursor: wait; opacity: .72; }
/* Amendment 011 (2026-09-20): obvious submission outcome panels. */
.form-status--success, .form-status--error { display: block; margin: 12px 0 4px; padding: 24px 26px;
  border: 2px solid; border-radius: 2px; }
.form-status--success { border-color: #1E6B3A; background: #EAF6EE; color: #123F23; }
.form-status--error { border-color: #B92332; background: #FBECEE; color: #7A1520; }
.form-status--busy { color: var(--dim-ink); }
.form-status--success:focus { outline-color: #1E6B3A; }
.form-status__headline { display: block; font: 800 clamp(20px, 2.2vw, 24px)/1.3 var(--body); }
.form-status--success .form-status__headline::before { content: "\2713\00a0"; }
.form-status__detail { display: block; margin-top: 8px; font: 500 14px/1.5 var(--body); }
.form-a[data-submitted="true"] > :not([data-form-status]) { display: none !important; }
.dept-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 54px; background: var(--paper-hair); border: 1px solid var(--paper-hair); }
.dept-card { background: var(--paper); padding: 28px; min-height: 230px; }
.dept-card h3 { margin: 9px 0 12px; font: 800 clamp(20px, 2vw, 27px)/1.08 var(--disp); text-transform: uppercase; }
.dept-card p:not(.mono-k) { color: var(--dim-ink); }
.dept-card .dept-state { margin-top: 18px; font: 700 11px/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); }
@media (max-width: 1050px) { .dept-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dept-grid { grid-template-columns: 1fr; } .dept-card { min-height: 0; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .hd { transition: none; }
}
.hd .brand { display: inline-flex; }
/* owner Change 01: the header badge is the UNTOUCHED official asset with its
   full transparent canvas — never cropped, never masked, aspect preserved.
   History: 46px pre-change → 62 → 78 → 96 → 120px now. */
.hd .brand { overflow: visible; }
.hd .brand img { height: 120px; width: auto; object-fit: contain; display: block; }
.hd nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.hd .lnk, .hd .grp > .lnk { font: 600 13px/1 var(--body); letter-spacing: .09em; text-transform: uppercase;
  color: #D8D9DC; padding: 14px 13px; display: inline-block; }
.hd .lnk:hover, .hd .grp:hover > .lnk { color: #fff; }
.hd .lnk[aria-current="true"] { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.grp { position: relative; }
.grp > .lnk::after { content: "▾"; font-size: 9px; margin-left: 7px; color: var(--red); }
.panel { position: absolute; top: calc(100% - 4px); left: 0; min-width: 310px; padding: 14px;
  background: #17181C; border: 1px solid var(--hair);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .26s; }
.grp:hover > .panel, .grp:focus-within > .panel, .panel:hover {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
.panel a { display: block; padding: 12px 14px; border-left: 2px solid transparent; }
.panel a b { display: block; font: 700 15px/1.2 var(--disp); letter-spacing: .02em; }
.panel a span { display: block; font: 400 12.5px/1.45 var(--body); color: var(--steel); margin-top: 3px; }
.panel a:hover, .panel a:focus-visible { border-left-color: var(--red); background: rgba(226,72,84,.07); }
.cta-apply { font: 700 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  background: var(--red-ink); color: #fff; padding: 15px 24px; border-radius: 2px; margin-left: 10px;
  transition: transform .15s ease, box-shadow .15s ease; }
.cta-apply:hover { transform: translateY(-1.5px); box-shadow: 0 8px 22px rgba(226,72,84,.35); }

/* mobile menu button + drawer */
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--hair);
  color: var(--bone); font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 16px; border-radius: 2px; cursor: pointer; }
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(13,14,16,.98); padding: 92px 8vw 6vh;
  display: none; overflow-y: auto; }
.drawer.open { display: block; }
.drawer .dr-close { position: absolute; top: 20px; right: 20px; background: none; border: 1px solid var(--hair);
  color: var(--bone); font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 16px; border-radius: 2px; cursor: pointer; }
.drawer h5 { font: 500 11.5px var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber); margin: 34px 0 8px; }
.drawer h5:first-of-type { margin-top: 0; }
.drawer a { display: block; font: 800 clamp(24px, 6.4vw, 34px)/1.25 var(--disp); text-transform: uppercase;
  letter-spacing: -.01em; padding: 6px 0; }
.drawer a:active, .drawer a:hover { color: var(--red); }
.drawer .dr-apply { margin-top: 40px; display: inline-flex; }
.drawer .dr-tel { font: 500 15px var(--mono); text-transform: none; letter-spacing: .04em;
  color: var(--dim); margin-top: 26px; }

/* ---------- type ---------- */
.mono-k { font: 500 12px/1.7 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--amber); }
.mono-k a { color: inherit; } .mono-k a:hover { color: #fff; }
.mono-k [aria-current] { color: var(--bone); }
.eyebrow { font: 500 12px/1.7 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--amber); display: inline-block; }
/* over a photograph the small amber type needs help: a lighter amber, and a
   soft dark backing drawn behind the line itself (reported and confirmed twice
   in review at 360 and 390) */
.hero .eyebrow, .chap .eyebrow {
  color: #F3C25F; padding: 5px 10px; margin-left: -10px;
  background: rgba(13,14,16,.88); border-radius: 2px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.lead { color: var(--dim); font-size: 18px; max-width: 46ch; }
.ghost { position: absolute; z-index: -1; font: 800 clamp(120px, 22vw, 320px)/0.8 var(--disp); color: transparent;
  -webkit-text-stroke: 1px rgba(242,241,236,.1); user-select: none; pointer-events: none; }
.gnote { font-size: 14px; color: var(--dim2); max-width: 68ch; }
.paper .gnote { color: var(--paper-dim); }
.stag { display: inline-block; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); border: 1px solid currentColor; border-radius: 2px; padding: 4px 8px; }
.paper .stag { color: #8A6410; }

/* ---------- buttons + links ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; font: 700 14px/1 var(--body);
  letter-spacing: .07em; text-transform: uppercase; padding: 17px 30px; border-radius: 2px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 32%;
  transform: translateX(-180%) skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); pointer-events: none; }
.btn:hover::after, .btn:focus-visible::after { animation: sweepA .55s ease-out 1 both; }
@keyframes sweepA { to { transform: translateX(520%) skewX(-16deg); } }
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(.5px); }
.btn .ar { transition: transform .18s ease; }
.btn:hover .ar { transform: translateX(5px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { box-shadow: 0 10px 26px rgba(226,72,84,.3); }
.btn-ghost { border: 1.5px solid var(--bone); color: var(--bone); }
.btn-ghost:hover { background: rgba(242,241,236,.07); }
.paper .btn-ghost { border-color: var(--paper-ink); color: var(--paper-ink); }
.paper .btn-ghost:hover { background: rgba(27,28,30,.05); }
.line-link { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1 var(--body);
  letter-spacing: .09em; text-transform: uppercase; color: var(--bone); padding: 8px 0; position: relative; }
.line-link::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--red); transform: scaleX(.32); transform-origin: left; transition: transform .25s ease; }
.line-link:hover::before, .line-link:focus-visible::before { transform: scaleX(1); }
.line-link .ar { transition: transform .18s ease; }
.line-link:hover .ar { transform: translateX(5px); }
.paper .line-link { color: var(--paper-ink); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- chapters ---------- */
.chap { position: relative; isolation: isolate; }
.cut-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%); }
.cut-t { margin-top: -5vw; padding-top: calc(5vw + 60px); }
.hero .bg, .chap .bg, .door .bg, .division .bg { position: absolute; inset: 0; z-index: -1; }
.hero .bg img, .chap .bg img, .door .bg img, .division .bg img { width: 100%; height: 100%; object-fit: cover; }

/* home hero — full-viewport chapter with a slow 4-photo dissolve */
.hero { min-height: 100vh; display: grid; align-items: end; padding: 172px 6vw 11vh 9vw; }
/* z-index matters here: the photo frames carry z-index 1 and 2 so a crossfade
   cannot dip dark, which means this scrim must sit ABOVE them or the photograph
   simply paints over the protection the headline depends on. */
.hero .bg::after { content: ""; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(78deg, rgba(13,14,16,.92) 28%, rgba(13,14,16,.8) 46%, rgba(13,14,16,.46) 68%, rgba(13,14,16,.1) 90%),
              linear-gradient(0deg, rgba(13,14,16,.94) 6%, transparent 45%); }
/* five-photograph hero (owner finding 21): each frame carries its own focal
   point, and a second one for tall phone screens where the crop is much
   narrower. The crossfade is slow enough to read as a dissolve, not a cut. */
.hero .bg .xf { position: absolute; inset: 0; opacity: 0; z-index: 0;
  transition: opacity 1.15s cubic-bezier(.4,0,.2,1); will-change: opacity; }
/* the frame being replaced holds at full strength UNDERNEATH while the new one
   fades in over it — two half-transparent frames dipped darker than either */
.hero .bg .xf.was-on { opacity: 1; z-index: 1; transition: none; }
.hero .bg .xf.is-on { opacity: 1; z-index: 2; }
.hero .bg .xf img { object-position: var(--pos, 50% 45%); }
/* per-frame top-up of the scrim, sitting between the photograph and the copy */
.hero .bg .xf::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(13,14,16,var(--veil, 0)); }
@media (max-width: 900px) {
  .hero .bg .xf::after { background: rgba(13,14,16,var(--veil-m, var(--veil, 0))); }
}
@media (max-width: 700px) { .hero .bg .xf img { object-position: var(--pos-m, var(--pos, 50% 45%)); } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-proof="force"]) .hero .bg .xf { transition: none; }
}
/* phones and tablets: the copy runs the full width, so the scrim has to work
   vertically as well as diagonally (review: the red headline line dropped below
   large-text contrast over the two white trucks) */
@media (max-width: 900px) {
  .hero .bg::after {
    background:
      linear-gradient(180deg, rgba(13,14,16,.88) 0%, rgba(13,14,16,.66) 30%, rgba(13,14,16,.74) 62%, rgba(13,14,16,.95) 100%),
      linear-gradient(75deg, rgba(13,14,16,.84) 26%, rgba(13,14,16,.5) 66%, rgba(13,14,16,.26) 100%);
  }
}
.hero h1, .display-hero { font: 800 clamp(50px, 8.2vw, 122px)/0.92 var(--disp); text-transform: uppercase; letter-spacing: -.015em; }
.hero h1 em, .display-hero em, .display-hero .em { font-style: normal; color: var(--red); }
.display-hero .line { display: block; overflow: hidden; }
.display-hero .line > span { display: inline-block; }
/* small phones: keep the authored three lines as three lines */
@media (max-width: 430px) {
  .hero h1, .display-hero { font-size: clamp(34px, 9.4vw, 44px); letter-spacing: -.02em; }
}
.hero .sub, .hero .lead { max-width: 44ch; color: var(--dim); font-size: 18px; margin: 26px 0 34px; }
.hero .k { margin-bottom: 18px; }
.hero .cluster, .cluster { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* keep above the diagonal cut — clipped pixels don't render OR hit-test */
/* owner finding 22: the hero has no slideshow controls. The rules that styled
   the numbered boxes and the pause glyph are deleted with the markup so no
   empty container, border or gap can survive them. */
.ph-note { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin-top: 30px; }

/* page hero — shorter photographic chapter for interior pages */
.hero--page { min-height: 74vh; }
.hero--flat { min-height: 46vh; padding-top: 22vh; }
.hero--flat.noimg { background: var(--ink); }

/* ---------- doors ---------- */
.doors { display: flex; min-height: 78vh; background: var(--ink); }
.door { position: relative; flex: 1; display: grid; align-items: end; padding: 6vh 4vw;
  overflow: hidden; isolation: isolate; transition: flex .45s cubic-bezier(.22,.9,.32,1); }
.door .bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(13,14,16,.92) 10%, rgba(13,14,16,.25) 55%, rgba(13,14,16,.35)); }
.door:hover, .door:focus-visible { flex: 1.55; }
.door + .door { border-left: 2px solid var(--red); }
.door h2 { font: 800 clamp(30px, 3.6vw, 54px)/1 var(--disp); text-transform: uppercase; }
.door p { color: var(--dim); max-width: 38ch; margin: 12px 0 18px; }
@media (prefers-reduced-motion: reduce) { .door, .door:hover { flex: 1; transition: none; } }

/* ---------- numbered division bands ---------- */
.division { min-height: 66vh; display: grid; align-items: center; padding: 10vh 9vw; overflow: hidden; position: relative; isolation: isolate; }
.division .inner { position: relative; z-index: 1; max-width: 640px; }
.division .service-photo-trigger { position: absolute; inset: 0; z-index: 0; }
.division .service-photo-trigger:focus-visible { outline-offset: -5px; }
.division h2 { font: 800 clamp(40px, 5.4vw, 84px)/0.95 var(--disp); text-transform: uppercase; margin: 14px 0 18px; }
.division p { color: var(--dim); max-width: 46ch; margin-bottom: 26px; }
.division.flat { min-height: 44vh; }
.division .bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(86deg, rgba(13,14,16,.93) 26%, rgba(13,14,16,.55) 55%, rgba(13,14,16,.16)); }

/* ---------- graphite editorial (quote + columns) ---------- */
.diff { background: #1C1E22; padding: 14vh 9vw; }
.diff blockquote { font: 700 clamp(26px, 3.4vw, 52px)/1.2 var(--disp); max-width: 24ch; }
.diff blockquote::before { content: "“"; color: var(--red); }
.diff blockquote::after { content: "”"; color: var(--red); }
.diff cite { display: block; font: 500 13px var(--mono); letter-spacing: .18em; color: var(--steel);
  text-transform: uppercase; margin-top: 26px; font-style: normal; }
.diff .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 9vh; }
/* h2 here (not h3): these cards sit directly under the page H1, and skipping
   a level broke the heading hierarchy. Appearance is unchanged. */
.diff .cols h2, .diff .cols h3 { font: 700 17px var(--disp); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 8px; }
.diff .cols p { color: var(--dim2); font-size: 15px; }
.diff .cols .n { font: 800 15px var(--mono); color: var(--red); }
.diff.q-only { padding: 12vh 9vw; }
.diff .voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 8vh; }
.diff .voices blockquote { font: 600 17.5px/1.55 var(--body); max-width: none; text-transform: none; }
.diff .voices blockquote::before, .diff .voices blockquote::after { content: none; }
.diff .voices .q { display: block; font: 900 56px/0.6 var(--disp); color: var(--red); margin-bottom: 18px; }
.diff .voices footer { font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel); margin-top: 14px; }

/* ---------- filmstrip + gallery frames ---------- */
.strip { background: var(--ink); padding: 12vh 9vw; }
.strip h2, .h2 { font: 800 clamp(30px, 4vw, 56px)/1 var(--disp); text-transform: uppercase; }
.strip .strip-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 18px; margin-bottom: 7vh; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.frame { position: relative; aspect-ratio: 4/3; overflow: hidden; display: block; }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.frame:hover img { transform: scale(1.03); }
.frame figcaption, .frame .cap { position: absolute; inset: auto 0 0 0; padding: 40px 18px 14px;
  background: linear-gradient(0deg, rgba(13,14,16,.92), transparent);
  font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .frame img, .frame:hover img { transform: none; transition: none; } }
/* uniform grid — span cells left black voids in uneven rows */
.frames--gallery { grid-template-columns: repeat(3, 1fr); }

/* ---------- CTA chapter ---------- */
.endcta { position: relative; isolation: isolate; padding: 16vh 9vw; display: flex;
  align-items: center; justify-content: space-between; gap: 5vw; flex-wrap: wrap; }
.endcta .bg::after { content: ""; position: absolute; inset: 0; background: rgba(13,14,16,.82); }
.endcta h2 { font: 800 clamp(34px, 4.6vw, 72px)/1 var(--disp); text-transform: uppercase; max-width: 14ch; }
.endcta h2 em { font-style: normal; color: var(--red); }
.endcta .sub2 { color: var(--dim); max-width: 44ch; margin-top: 16px; }

/* ---------- data bands ---------- */
.specs { background: var(--ink); border-block: 1px solid var(--hair); display: grid;
  grid-template-columns: repeat(4, 1fr); padding-inline: 5vw; /* clear the fixed route spine */ }
.specs.n5 { grid-template-columns: repeat(5, 1fr); }
.specs div { padding: 34px 28px; border-left: 1px solid var(--hair); }
.specs div:first-child { border-left: 0; }
/* the value must fit the cell it is in — a phone number set at 26px was being
   cut off mid-number on phones */
.specs b { display: block; font: 800 clamp(19px, 4.6vw, 26px)/1.1 var(--disp); overflow-wrap: anywhere; }
.specs span { font: 500 11.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.specs span .nb { white-space: nowrap; }

/* ---------- requirements rows, steps and panel (owner final finding 09) ----
   Same restrained family, tuned for the paper surface: a small horizontal
   move, the red check brightens, the divider responds, the text gains
   contrast, and the other rows soften. Informational only. */
.req-live li { position: relative; color: #33363A;
  transition: transform .26s cubic-bezier(.2,.8,.3,1), color .26s ease, opacity .26s ease; }
.req-live li::before { transition: color .26s ease, transform .26s cubic-bezier(.2,.8,.3,1); }
.req-live li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--red-ink); transition: width .32s cubic-bezier(.2,.8,.3,1); }
.req-live:hover li:not(:hover):not(.pressed) { opacity: .68; }
.req-live li:hover, .req-live li.pressed { transform: translateX(6px); color: var(--paper-ink); }
.req-live li:hover::before, .req-live li.pressed::before { color: var(--red); transform: scale(1.12); }
.req-live li:hover::after, .req-live li.pressed::after { width: 100%; }
/* MC / DOT / recruiting panel: depth only, never implying clickability */
.panel-live { position: relative; overflow: hidden;
  transition: transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease, border-color .26s ease; }
.panel-live::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  transform: translateX(-190%) skewX(-16deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(27,28,30,.06), transparent); }
.panel-live:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(27,28,30,.10); border-color: #C9C5BA; }
.panel-live:hover::after { animation: statSweep .62s ease-out 1 both; }
.panel-live:hover .v { color: var(--red-ink); }
/* one-time two-column section entry */
.sect-enter .cols2 > div { opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.9,.32,1), transform .6s cubic-bezier(.22,.9,.32,1); }
.sect-enter .cols2 > div:nth-child(2) { transition-delay: .12s; }
.sect-enter.entered .cols2 > div { opacity: 1; transform: none; }
/* `backwards`, never `forwards`: a filled animation would keep winning the
   cascade after it ends and would silently kill the hover/press feedback. */
.sect-enter.entered .req-live li { animation: reqIn .45s cubic-bezier(.22,.9,.32,1) backwards; }
.sect-enter.entered .req-live li:nth-child(2) { animation-delay: .06s; }
.sect-enter.entered .req-live li:nth-child(3) { animation-delay: .12s; }
.sect-enter.entered .req-live li:nth-child(4) { animation-delay: .18s; }
.sect-enter.entered .req-live li:nth-child(5) { animation-delay: .24s; }
.sect-enter.entered .req-live li:nth-child(6) { animation-delay: .30s; }
@keyframes reqIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-proof="force"]) .req-live li,
  html:not([data-motion-proof="force"]) .req-live li:hover,
  html:not([data-motion-proof="force"]) .req-live li.pressed { transform: none; transition: color .2s ease, opacity .2s ease; }
  html:not([data-motion-proof="force"]) .req-live li::after { transition: none; }
  html:not([data-motion-proof="force"]) .panel-live,
  html:not([data-motion-proof="force"]) .panel-live:hover { transform: none; transition: box-shadow .2s ease, border-color .2s ease; }
  html:not([data-motion-proof="force"]) .panel-live::after { display: none; }
  html:not([data-motion-proof="force"]) .sect-enter .cols2 > div { opacity: 1; transform: none; transition: none; }
  html:not([data-motion-proof="force"]) .sect-enter.entered .req-live li { animation: none; }
}

/* ---------- editorial item feedback (owner final findings 07 + 08) ----------
   Same restrained family as the approved benefit rows: a small lift, the red
   number brightens, the heading and paragraph gain a little contrast, a line
   extends under the number, and the siblings soften slightly. Informational
   only — no pointer cursor, no focus stop, no navigation. */
.cols-live > div { position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease; }
.cols-live > div .n { position: relative; display: inline-block; padding-bottom: 8px;
  transition: color .28s ease; }
.cols-live > div .n::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 26px;
  background: var(--red); transition: width .3s cubic-bezier(.2,.8,.3,1); }
.cols-live > div h3, .cols-live > div h2 { transition: color .28s ease, letter-spacing .28s ease; }
.cols-live > div p { transition: color .28s ease; }
.cols-live:hover > div:not(:hover):not(.pressed) { opacity: .72; }
.cols-live > div:hover, .cols-live > div.pressed { transform: translateY(-4px); }
.cols-live > div:hover .n, .cols-live > div.pressed .n { color: #FF6B76; }
.cols-live > div:hover .n::after, .cols-live > div.pressed .n::after { width: 64px; }
.cols-live > div:hover h3, .cols-live > div.pressed h3,
.cols-live > div:hover h2, .cols-live > div.pressed h2 { color: #fff; letter-spacing: .035em; }
.cols-live > div:hover p, .cols-live > div.pressed p { color: #E7E9EB; }
.paper .cols-live > div:hover h2, .paper .cols-live > div.pressed h2 { color: var(--red-ink); }
.paper .cols-live > div:hover p, .paper .cols-live > div.pressed p { color: var(--paper-ink); }
@media (prefers-reduced-motion: reduce) {
  .cols-live > div, .cols-live > div:hover, .cols-live > div.pressed { transform: none; transition: none; }
  .cols-live > div .n, .cols-live > div .n::after, .cols-live > div h3, .cols-live > div h2, .cols-live > div p { transition: none; }
  .cols-live > div:hover h3, .cols-live > div.pressed h3,
  .cols-live > div:hover h2, .cols-live > div.pressed h2 { letter-spacing: .02em; }
}

/* ---------- large review rotator (owner final finding 05) ----------
   One review at a time, quote + name + attribution always together. The stage
   is a grid with every review stacked in the same cell, so its height is the
   tallest review and never shifts when the copy changes. */
.rrot { position: relative; }
.rrot__stage { display: grid; }
/* owner correction A: the review does not just appear, it arrives — a short
   rise and fade as it comes in, once per change, never a loop. */
/* visibility has no transition, so hiding it on the same tick cut the outgoing
   review out instantly and left the block blank for a moment — hold visibility
   until the fade has finished, and the two reviews genuinely cross-fade */
.rrot__item { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.9,.32,1), visibility 0s linear .55s; }
.rrot__item.is-on { opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0s; }
.rrot__item blockquote { transition: opacity .5s ease .06s; }
.rrot__item figcaption { opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease .18s, transform .45s cubic-bezier(.22,.9,.32,1) .18s; }
.rrot__item.is-on figcaption { opacity: 1; transform: none; }
.rrot__item blockquote { margin: 0; }
.rrot__item figcaption { font: 500 12px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--steel); margin-top: 18px; }
.rrot__ctl { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.rrot__btn { background: transparent; border: 1px solid var(--hair); color: var(--dim);
  width: 44px; height: 44px; font-size: 17px; cursor: pointer; border-radius: 2px;
  transition: color .2s ease, border-color .2s ease; }
.rrot__btn:hover { color: var(--red); border-color: var(--red); }
.rrot__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.rrot__count { font: 500 11.5px var(--mono); letter-spacing: .18em; color: var(--steel); }
@media (prefers-reduced-motion: reduce) {
  /* .is-on carries its own transition for the cross-fade, and it is more
     specific — it has to be named here or reduced motion is ignored */
  html:not([data-motion-proof="force"]) .rrot__item,
  html:not([data-motion-proof="force"]) .rrot__item.is-on,
  html:not([data-motion-proof="force"]) .rrot__item figcaption {
    transition: none; transform: none; }
}

/* ---------- persistent Apply button on phones and tablets -------------------
   Owner final correction: compact and detached, never a viewport dock. */
.afab { display: none; }
.dcg-scroll { display: contents; }
@media (max-width: 900px) {
  /* owner finding 27: always visible while scrolling, softly transparent at
     rest, solid Delta red the instant it is touched, hovered or focused, and
     eased back afterwards without needing a second tap. */
  .afab { display: inline-flex; align-items: center; gap: 10px; position: fixed; z-index: 45;
    right: max(16px, calc(10px + env(safe-area-inset-right)));
    bottom: max(18px, calc(12px + env(safe-area-inset-bottom)));
    min-height: 48px; padding: 0 18px; border-radius: 4px;
    background: rgba(226,72,84,.68); border: 1px solid rgba(255,255,255,.34);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    color: #fff; text-decoration: none;
    font: 700 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(6,7,8,.5);
    box-shadow: 0 8px 20px rgba(6,7,8,.34);
    transition: transform .2s cubic-bezier(.2,.8,.3,1), opacity .2s ease,
      background-color .18s ease, box-shadow .2s ease; }
  .afab:hover, .afab:focus-visible, .afab.is-touched {
    background: var(--red); border-color: rgba(255,255,255,.5); box-shadow: 0 10px 26px rgba(6,7,8,.45); }
  .afab .ar { transition: transform .22s cubic-bezier(.2,.8,.3,1); }
  .afab:active { transform: translateY(1px); background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(6,7,8,.4); }
  /* room at the foot of the surfaces a thumb works in, so the button never has
     to hide to stay out of the way (owner finding 27) */
  .dcg-shell main > section:last-of-type { padding-bottom: calc(9vh + 64px); }
  .form-a { margin-bottom: 76px; }
  .lreader__scroll { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .jreader__scroll, .frames--gallery { padding-bottom: 72px; }
  .afab:active .ar { transform: translateX(3px); }
  .afab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .afab--off { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
  }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .afab, .afab .ar { transition: none; }
  .afab--off { transform: none; }
}
/* room at the very bottom of the page so the floating button never covers the
   last line of the footer */
@media (max-width: 900px) {
  .dcg-shell .ft { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* the staging notice is the last thing on the page while this build is in
     review, so it needs the same clearance the footer has */
  .dcg-shell .staging-foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* four-across editorial items (owner final finding 11 — the About values).
   The mobile rules live here so they keep the same specificity as the base. */
.diff .cols.n4 { grid-template-columns: repeat(4, 1fr); gap: 34px; }
@media (max-width: 1200px) { .diff .cols.n4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .diff .cols.n4 { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Why Delta: three reviews at a time (owner final finding 10) ------
   Each rotator item is a whole set of three cards, and every set is stacked in
   the same grid cell, so the block is as tall as the tallest set and the page
   never moves when the reviews change. On phones the layout collapses and only
   the leading card of each set is shown — one review at a time, and the
   rolling window means all eight are still seen across a cycle. */
.diff .vrot { margin-top: 8vh; }
.diff .vrot .voices { margin-top: 0; }
.voice-live > div { position: relative;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease; }
.voice-live > div .q { transform-origin: left top; transition: color .28s ease, transform .28s ease; }
.voice-live > div blockquote { color: var(--dim); transition: color .28s ease; }
.voice-live > div footer { transition: color .28s ease; }
.voice-live:hover > div:not(:hover):not(.pressed) { opacity: .72; }
.voice-live > div:hover, .voice-live > div.pressed { transform: translateY(-4px); }
.voice-live > div:hover .q, .voice-live > div.pressed .q { color: #FF6B76; transform: scale(1.1); }
.voice-live > div:hover blockquote, .voice-live > div.pressed blockquote { color: #fff; }
.voice-live > div:hover footer, .voice-live > div.pressed footer { color: var(--bone); }
@media (max-width: 900px) {
  .diff .vrot .voices > div + div { display: none; }      /* one review at a time */
}
@media (prefers-reduced-motion: reduce) {
  .voice-live > div, .voice-live > div:hover, .voice-live > div.pressed { transform: none; transition: color .2s ease, opacity .2s ease; }
  .voice-live > div .q, .voice-live > div:hover .q, .voice-live > div.pressed .q { transform: none; }
}

/* ---------- identity / authority stat cells (owner final finding 04) ----------
   Informational cells only: no pointer cursor, no focus stop, no role — just a
   restrained depth response so the authority numbers feel considered. */
.stat-live > div { position: relative; overflow: hidden;
  transition: transform .26s cubic-bezier(.2,.8,.3,1), border-color .26s ease, background-color .26s ease; }
.stat-live > div::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  transform: translateX(-190%) skewX(-16deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242,241,236,.10), transparent); }
.stat-live > div:hover::after, .stat-live > div.pressed::after { animation: statSweep .62s ease-out 1 both; }
@keyframes statSweep { to { transform: translateX(260%) skewX(-16deg); } }
.specs.stat-live > div:hover, .specs.stat-live > div.pressed {
  transform: translateY(-3px); background: rgba(242,241,236,.035); }
.specs.stat-live > div:hover b, .specs.stat-live > div.pressed b { color: #fff; }
.specs.stat-live > div:hover span, .specs.stat-live > div.pressed span { color: var(--bone); }
.idband.stat-live > div:hover, .idband.stat-live > div.pressed {
  transform: translateY(-3px); border-color: var(--paper-ink); background: #fff; }
.idband.stat-live > div:hover .v, .idband.stat-live > div.pressed .v { color: var(--red-ink); }
@media (prefers-reduced-motion: reduce) {
  /* must match the per-band selectors' specificity to win */
  .stat-live > div,
  .specs.stat-live > div:hover, .specs.stat-live > div.pressed,
  .idband.stat-live > div:hover, .idband.stat-live > div.pressed { transform: none; transition: none; }
  .stat-live > div::after { display: none; }
}

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 62vh; }
.split.rev { grid-template-columns: .9fr 1.1fr; }
.split .txt { padding: 10vh 5vw 10vh 9vw; align-self: center; }
.split.rev .txt { padding: 10vh 9vw 10vh 5vw; }
.split .txt h2 { font: 800 clamp(28px, 3.4vw, 50px)/1 var(--disp); text-transform: uppercase; margin: 12px 0 16px; }
.split .txt p { color: var(--dim); max-width: 50ch; margin-bottom: 14px; }
.split .pic { position: relative; }
.split .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split .pic .cap { position: absolute; left: 0; bottom: 0; right: 0; padding: 40px 18px 14px;
  background: linear-gradient(0deg, rgba(13,14,16,.88), transparent);
  font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- checklist / waypoint list (dark) ---------- */
.wp-list { list-style: none; padding: 0; display: grid; gap: 22px; max-width: 62ch; }
.wp-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: baseline; }
.wp-list .n { font: 800 14px var(--mono); color: var(--red); border-top: 2px solid var(--red); padding-top: 8px; }
.wp-list b { font: 700 17px var(--disp); letter-spacing: .02em; text-transform: uppercase; display: block; }
.wp-list p { color: var(--dim2); font-size: 15px; margin-top: 4px; }

/* ---------- PAPER surface (long-form reading, forms, FAQ, legal) ---------- */
.paper { background: var(--paper); color: var(--paper-ink); padding: 11vh 9vw; }
.paper .mono-k, .paper .eyebrow { color: var(--red-ink); }
.paper h2 { font: 800 clamp(26px, 3vw, 44px)/1.05 var(--disp); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 18px; }
.paper .wrapn { max-width: 1160px; margin-inline: auto; }
.paper .cols2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 5vw; align-items: start; }
.req-list { list-style: none; padding: 0; margin: 26px 0 0; max-width: 62ch; }
.req-list li { padding: 16px 0 16px 40px; border-top: 1px solid var(--paper-hair); position: relative; font-size: 16.5px; }
.req-list li:last-child { border-bottom: 1px solid var(--paper-hair); }
.req-list li::before { content: "✓"; position: absolute; left: 6px; top: 15px; color: var(--red-ink); font-weight: 700; }
.paper p { color: #33363A; }
.paper .dimp { color: var(--paper-dim); }

/* article body (blog posts, legal) */
.article-shell { max-width: 760px; margin-inline: auto; }
.article-body { font-size: 17.5px; line-height: 1.75; }
.article-body p { margin: 0 0 20px; color: #26282B; }
.article-body h2, .article-body h3 { font: 800 clamp(21px, 2.2vw, 28px)/1.2 var(--disp); text-transform: uppercase; margin: 40px 0 14px; }
.article-body h2::before, .article-body h3::before { content: "— "; color: var(--red-ink); }
.article-body ul { margin: 0 0 20px 22px; color: #26282B; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong { color: var(--paper-ink); }

/* the legal reader carries the same prose typography under its own name, so
   the journal's .article-body stays a single element on a page */
.lreader__body { font-size: 17.5px; line-height: 1.75; }
.lreader__body p { margin: 0 0 20px; color: #26282B; }
.lreader__body h2, .lreader__body h3 { font: 800 clamp(21px, 2.2vw, 28px)/1.2 var(--disp); text-transform: uppercase; margin: 40px 0 14px; }
.lreader__body h2::before, .lreader__body h3::before { content: "— "; color: var(--red-ink); }
.lreader__body ul { margin: 0 0 20px 22px; color: #26282B; }
.lreader__body li { margin-bottom: 8px; }
.lreader__body a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.lreader__body strong { color: var(--paper-ink); }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12px var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.paper .article-meta { color: var(--paper-dim); }

/* ---------- FAQ (native details, +/- glyphs) ---------- */
.faq { max-width: 820px; }
.faq details { border-top: 1px solid var(--paper-hair); }
.faq details:last-of-type { border-bottom: 1px solid var(--paper-hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px;
  align-items: baseline; padding: 20px 4px; font: 700 17px/1.4 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 24px/1 var(--mono); color: var(--red-ink); flex: 0 0 auto; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 4px 22px; color: #33363A; max-width: 68ch; }

/* ---------- forms (paper, DEMO only) ---------- */
.form-a { display: grid; gap: 20px; max-width: 680px; }
.form-a .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-a label { display: block; font: 500 11.5px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-dim); margin-bottom: 7px; }
.form-a input, .form-a select, .form-a textarea { width: 100%; padding: 14px 14px; font: 400 16px var(--body);
  color: var(--paper-ink); background: #FBFAF7; border: 1px solid #C9C5BA; border-radius: 2px; }
.form-a input:focus, .form-a select:focus, .form-a textarea:focus { border-color: var(--red-ink); outline-offset: 0; }
.form-a textarea { min-height: 140px; resize: vertical; }
.form-a .req::after { content: " *"; color: var(--red-ink); }
.form-a .hint { font-size: 13px; color: var(--paper-dim); margin-top: 6px; }
.form-a button[type="submit"] { justify-self: start; border: 0; cursor: pointer; }
.form-note { border: 1px solid #C9C5BA; border-left: 3px solid var(--amber); background: #FBFAF7;
  padding: 14px 18px; font-size: 14px; color: #4A4E53; max-width: 680px; margin-bottom: 26px; }

/* ---------- journal (dark strip rows + paper index) ---------- */
.jrow { display: grid; grid-template-columns: 130px 1fr auto; gap: 26px; align-items: baseline;
  padding: 24px 4px; border-top: 1px solid var(--paper-hair); }
.jrow:last-of-type { border-bottom: 1px solid var(--paper-hair); }
.jrow time { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--paper-dim); }
.jrow b { font: 700 19px/1.35 var(--disp); letter-spacing: .01em; }
.jrow:hover b { color: var(--red-ink); }
.jrow .cat { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.jrow p { font-size: 14.5px; color: var(--paper-dim); margin-top: 5px; max-width: 62ch; }
.feature-post { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4vw; align-items: center; }
.feature-post .fp-img { position: relative; overflow: hidden; }
.feature-post .fp-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.feature-post h2 a:hover { color: var(--red-ink); }

/* ---------- tutorials ---------- */
.tut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tut-cat { background: #FBFAF7; border: 1px solid var(--paper-hair); padding: 22px 20px; }
.tut-cat h3 { font: 700 15.5px var(--disp); text-transform: uppercase; letter-spacing: .03em; }
.tut-cat .tut-n { display: block; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-dim); margin-top: 8px; }
/* ---------- Delta Journal article reader (owner Change 10) ----------
   Large editorial reader over a dimmed Journal page: its own vertical scroll,
   measured line length, paper surface consistent with the article routes. */
.feature-post .fp-sum { color: inherit; display: inline; padding: 0; }
.jreader { position: fixed; inset: 0; z-index: 480; background: rgba(6,7,8,.9);
  display: grid; place-items: center; padding: 3vh 3vw; }
.jreader[hidden] { display: none; }
.jreader__panel { background: var(--paper); color: var(--paper-ink);
  width: min(1080px, 100%); height: min(94vh, 100%);
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.jreader__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--paper-hair); background: #FBFAF7; }
.jreader__back, .jreader__x { background: transparent; border: 1px solid #C9C5BA; color: var(--paper-ink);
  font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  min-height: 44px; padding: 0 16px; cursor: pointer; }
.jreader__x { min-width: 44px; padding: 0 12px; font-size: 15px; }
.jreader__back:hover, .jreader__x:hover { background: rgba(27,28,30,.06); border-color: var(--paper-ink); }
.jreader :focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
.jreader__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 0 0 46px; scroll-behavior: auto; }
.jreader__article { max-width: 68ch; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.jreader__hero { margin: 0 0 26px; aspect-ratio: 16 / 9; overflow: hidden; background: #E8E4DA; }
.jreader__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jreader__cat { color: var(--red-ink); padding-top: 26px; }
.jreader__hero + .jreader__cat { padding-top: 0; }
.jreader__title { font: 800 clamp(26px, 3.4vw, 44px)/1.08 var(--disp); text-transform: uppercase;
  letter-spacing: -.01em; margin: 10px 0 14px; }
.jreader__summary { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: #33363A; margin-bottom: 16px; }
.jreader__meta { color: var(--paper-dim); }
.jreader__body { margin-top: 26px; }
.jreader__nav { max-width: 68ch; margin: 44px auto 0; padding: 0 clamp(18px, 4vw, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jreader__pn { text-align: left; background: #FBFAF7; border: 1px solid var(--paper-hair);
  color: var(--paper-ink); padding: 16px 18px; min-height: 64px; cursor: pointer; display: grid; gap: 6px; }
.jreader__pn--next { text-align: right; }
.jreader__pn:hover { border-color: var(--paper-ink); }
.jreader__pn .k { font: 500 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); }
.jreader__pn .t { font: 700 15px/1.3 var(--disp); }
.jreader__related { max-width: 68ch; margin: 44px auto 0; padding: 0 clamp(18px, 4vw, 40px); }
.jreader__related .mono-k { color: var(--red-ink); }
.jreader__rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 14px; }
.jreader__rel { text-align: left; background: none; border: 1px solid var(--paper-hair); color: var(--paper-ink);
  padding: 0 0 14px; cursor: pointer; display: grid; gap: 10px; }
.jreader__rel:hover { border-color: var(--paper-ink); }
.jreader__rel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.jreader__rel b { font: 700 14.5px/1.32 var(--disp); padding: 0 12px; }
.jreader__rel span { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-dim); padding: 0 12px; }
.jreader__live { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
/* Shown for the moment between the tap and the article arriving, so a slow
   connection never feels like a dead click. */
.jreader--loading .jreader__scroll > * { visibility: hidden; }
.jreader--loading .jreader__scroll::before {
  content: "Loading article…"; display: block; padding: 26vh 0 0;
  font: 500 12px var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-dim); text-align: center; }
.jreader__article, .jreader__nav, .jreader__related { transition: opacity .22s ease; }
.jreader--swap .jreader__article, .jreader--swap .jreader__nav, .jreader--swap .jreader__related { opacity: 0; }
@media (max-width: 760px) {
  .jreader { padding: 0; }
  .jreader__panel { width: 100%; height: 100dvh; box-shadow: none; }
  .jreader__bar { padding: max(8px, env(safe-area-inset-top)) 14px 8px; }
  .jreader__back { padding: 0 12px; font-size: 11px; }
  .jreader__scroll { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .jreader__title { font-size: clamp(23px, 7vw, 30px); }
  .jreader__nav { grid-template-columns: 1fr; }
  .jreader__pn--next { text-align: left; }
  .jreader__rel-grid { grid-template-columns: 1fr; }
  .jreader__rel { grid-template-columns: 110px 1fr; align-items: center; padding: 0 0 0 0; }
  .jreader__rel img { aspect-ratio: 1 / 1; }
  .jreader__rel b, .jreader__rel span { padding: 0 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jreader__article, .jreader__nav, .jreader__related { transition: none; }
  .jreader--swap .jreader__article, .jreader--swap .jreader__nav, .jreader--swap .jreader__related { opacity: 1; }
}

/* ---------- gallery filters + full-screen viewer (owner Change 09) ---------- */
.gal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.gal-filters button { background: transparent; border: 1px solid var(--hair); color: var(--dim);
  font: 500 11.5px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 16px; min-height: 44px; border-radius: 2px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.gal-filters button:hover { color: var(--bone); border-color: var(--steel); }
.gal-filters button[aria-pressed="true"] { color: #fff; border-color: var(--red); background: rgba(226,72,84,.12); }
.gal-filters button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.gal-count { font: 500 11.5px var(--mono); letter-spacing: .16em; color: var(--steel); align-self: center; margin-left: 6px; }
.frames--gallery .frame { margin: 0; }
.frames--gallery .frame button.gal-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.frames--gallery .frame button.gal-open:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.frames--gallery .frame[hidden] { display: none; }

.gviewer { position: fixed; inset: 0; z-index: 500; background: rgba(6,7,8,.985);
  display: grid; grid-template-rows: auto 1fr auto; }
.gviewer[hidden] { display: none; }
.gviewer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px 8px; }
.gviewer__meta { color: var(--dim); font: 500 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.gviewer__meta b { display: block; color: var(--bone); font: 700 15px var(--disp); letter-spacing: .04em; margin-bottom: 3px; }
.gviewer__idx { color: var(--red); }
.gviewer__bits { color: var(--dim); }
/* min-height:0 is load-bearing: a 1fr grid track defaults to minmax(auto,1fr),
   so a portrait photo would grow the stage past the viewport and push the
   control bar (and the X) off-screen. */
.gviewer__stage { position: relative; overflow: hidden; touch-action: none; display: grid; place-items: center; min-height: 0; }
/* The photo is absolutely anchored to the stage box: a percentage max-height
   cannot resolve against an indefinite 1fr grid track (a tall photo then
   overflowed and pushed the controls off-screen in landscape). inset:0 with
   object-fit:contain letterboxes without ever distorting the image. */
.gviewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none; transform-origin: center center; will-change: transform; }
.gviewer__img.zoomed { cursor: grab; }
.gviewer__img.dragging { cursor: grabbing; }
.gviewer__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(13,14,16,.7); border: 1px solid var(--hair); color: var(--bone);
  min-width: 52px; min-height: 52px; font-size: 20px; cursor: pointer; }
.gviewer__nav:hover { background: rgba(13,14,16,.92); border-color: var(--steel); }
.gviewer__nav--prev { left: 10px; }
.gviewer__nav--next { right: 10px; }
.gviewer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px 16px; }
.gviewer__bar button { background: transparent; border: 1px solid var(--hair); color: var(--bone);
  min-width: 48px; min-height: 48px; padding: 0 12px; font: 600 13px var(--mono); cursor: pointer; }
.gviewer__bar button:hover { border-color: var(--steel); }
.gviewer__bar button[aria-pressed="true"] { border-color: var(--red); color: var(--red); }
.gviewer__zoomval { font: 500 12px var(--mono); color: var(--steel); min-width: 56px; text-align: center; }
.gviewer__close { background: transparent; border: 1px solid var(--hair); color: var(--bone);
  min-width: 48px; min-height: 48px; font-size: 18px; cursor: pointer; flex: 0 0 auto; }
.gviewer__close:hover { border-color: var(--steel); color: #fff; }
.gviewer button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.gviewer__live { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
@media (max-width: 720px) {
  .gviewer { background: #07080A; }        /* edge-to-edge on phones: fully opaque */
  .gviewer__nav { min-width: 46px; min-height: 46px; }
  .gviewer__bar { gap: 6px; padding: 10px 8px 14px; }
  .gviewer__bar button { min-width: 46px; min-height: 46px; padding: 0 8px; font-size: 12px; }
  .gviewer__meta { font-size: 11px; }
  .gviewer__meta b { font-size: 13px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  .gviewer__top { padding: 6px 12px 2px; }
  .gviewer__bar { padding: 6px 10px 8px; }
  .gviewer__bar button, .gviewer__close { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .gviewer__img { transition: none !important; }
  .gal-filters button { transition: none; }
}

/* ---------- tutorial cards + video modal (owner Change 07) ----------
   Premium hover/press feedback on the category cards; Coming-Soon tiles keep
   a default cursor and no play affordance (they never fake an opening).
   Approved videos open in the in-page player modal below. */
.tut-cat { position: relative; cursor: default;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), border-color .28s ease, box-shadow .28s ease; }
.tut-cat::after { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0;
  background: var(--red-ink); transition: width .3s cubic-bezier(.2,.8,.3,1); }
/* .tut-grid prefix outranks the later `.reveal.in { transform:none }` rule */
.tut-grid .tut-cat:hover, .tut-grid .tut-cat.pressed { transform: translateY(-3px); border-color: #C9C5BA;
  box-shadow: 0 12px 26px rgba(27,28,30,.12); }
.tut-cat:hover::after, .tut-cat.pressed::after { width: 100%; }
.tut-cat:hover h3, .tut-cat.pressed h3 { color: var(--red-ink); }
.tut-cat h3 { transition: color .28s ease; }
.tut-cat--video { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.tut-cat--video h3 { padding-left: 20px; position: relative; }
.tut-cat--video h3::before { content: "\25B6"; position: absolute; left: 0; top: 2px; font-size: 11px; color: var(--red-ink); }
.tut-cat--video:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
.vmodal { position: fixed; inset: 0; z-index: 420; display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw; background: rgba(8, 9, 10, .82); }
.vmodal[hidden] { display: none; }
.vmodal__panel { background: #101114; color: var(--bone); width: min(960px, 100%); max-height: 94vh;
  display: flex; flex-direction: column; border: 1px solid var(--hair); overflow-y: auto; }
.vmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px 12px; }
.vmodal__kicker { color: var(--red); }
.vmodal__title { font: 800 clamp(17px, 2vw, 24px)/1.15 var(--disp); text-transform: uppercase; margin-top: 4px; }
.vmodal__close { background: none; border: 1px solid var(--hair); color: var(--steel); min-width: 42px; min-height: 42px;
  font-size: 17px; cursor: pointer; flex: 0 0 auto; }
.vmodal__close:hover { color: #fff; border-color: var(--steel); }
.vmodal__close:focus-visible, .vmodal__controls :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.vmodal__stage { background: #000; position: relative; }
.vmodal__video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.vmodal__stage.loading::after { content: "LOADING…"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 13px var(--mono); letter-spacing: .3em; color: var(--steel); background: rgba(8, 9, 10, .55); pointer-events: none; }
.vmodal__error { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center;
  background: rgba(8, 9, 10, .92); padding: 20px; }
.vmodal__error[hidden] { display: none; }
.vmodal__error p { color: var(--dim); font-size: 15px; }
.vmodal__error button { background: none; border: 1px solid var(--hair); color: var(--bone);
  min-height: 42px; padding: 0 18px; font: 600 13px var(--mono); cursor: pointer; justify-self: center; }
.vmodal__error button:hover { border-color: var(--steel); }
.vmodal__video::cue { background: rgba(8, 9, 10, .85); color: #fff; font-size: 18px; }
.vmodal__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
.vmodal__controls button { background: none; border: 1px solid var(--hair); color: var(--bone);
  min-width: 42px; min-height: 42px; padding: 0 10px; font: 600 13px var(--mono); cursor: pointer; }
.vmodal__controls button:hover { border-color: var(--steel); }
.vmodal__controls button[aria-pressed="true"] { border-color: var(--red); color: var(--red); }
.vmodal__time { font: 500 12.5px var(--mono); letter-spacing: .06em; color: var(--steel); white-space: nowrap; }
.vmodal__controls input[type="range"] { accent-color: var(--red); min-height: 42px; }
.vmodal__controls [data-vc="seek"] { flex: 1 1 150px; }
.vmodal__controls [data-vc="vol"] { width: 86px; }
.vmodal__transcript { padding: 6px 18px 18px; border-top: 1px solid var(--hair); }
.vmodal__transcript h3 { font: 700 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin: 10px 0 8px; }
.vmodal__lines { list-style: none; padding: 0; max-height: 24vh; overflow-y: auto; }
.vmodal__lines li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 5px 0; font-size: 14.5px; color: var(--dim); }
.vmodal__lines li span { font: 500 12px var(--mono); color: var(--red); padding-top: 2px; }
@media (max-width: 700px) {
  .vmodal { padding: 0; align-items: stretch; }
  .vmodal__panel { width: 100%; max-height: 100dvh; border: 0; }
  .vmodal__controls button { min-width: 46px; min-height: 46px; }
  .vmodal__controls [data-vc="vol"] { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-cat, .tut-grid .tut-cat:hover, .tut-grid .tut-cat.pressed { transform: none; transition: none; }
  .tut-cat::after, .tut-cat h3 { transition: none; }
}

.tut-slot { border: 1px dashed #B9B5AA; padding: 22px 24px; font: 500 12.5px var(--mono);
  letter-spacing: .06em; color: var(--paper-dim); }
.filter-in { width: min(420px, 100%); padding: 13px 14px; font: 400 15px var(--body); color: var(--paper-ink);
  background: #FBFAF7; border: 1px solid #C9C5BA; border-radius: 2px; }

/* ---------- trust / identity band ---------- */
.idband { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--paper-hair); background: #FBFAF7; }
.idband div { flex: 1 1 180px; padding: 22px 22px; border-left: 1px solid var(--paper-hair); }
.idband div:first-child { border-left: 0; }
.idband .k { display: block; font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.idband .v { display: block; font: 800 19px/1.2 var(--disp); margin-top: 6px; }

/* ---------- footer ---------- */
.ft { background: var(--ink); border-top: 1px solid var(--hair); padding: 9vh 9vw 5vh; }
.ft .row { display: flex; flex-wrap: wrap; gap: 6vw 5vw; justify-content: space-between; }
/* owner footer fix (2026-07-29): the width="560" attribute + fixed height
   stretched the badge to 560x60; width:auto restores the true aspect ratio.
   One complete logo image remains the sole in-flow sizing layer, keeping the
   original full-colour flags and their poles rigidly aligned with the badge. */
.ft-logo-toggle { display: block; width: max-content; max-width: 100%; padding: 0; border: 0;
  border-radius: 2px; color: inherit; background: transparent; cursor: pointer;
  appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ft-logo-rotor { position: relative; display: block; transform-origin: 50% 50%;
  backface-visibility: hidden; }
.ft-logo-toggle img { image-rendering: auto; user-select: none; -webkit-user-drag: none; }
.ft-logo-body { display: block; width: auto; height: 148px; }
.ft-logo-toggle.is-spinning .ft-logo-rotor { animation: ft-logo-spin .66s cubic-bezier(.22,.8,.25,1) both;
  will-change: transform; }
.ft-logo-toggle:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
@keyframes ft-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-proof="force"]) .ft-logo-toggle.is-spinning .ft-logo-rotor {
    animation: none !important; transform: none !important;
  }
}
.ft .nap { font: 500 13px/1.9 var(--mono); color: var(--dim2); margin-top: 16px; }
.ft .nap a { display: inline; padding: 0; }
.ft h2 { font: 700 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--steel); margin-bottom: 14px; }
.ft a { display: block; color: var(--dim); padding: 5px 0; font-size: 14.5px; }
.ft a:hover { color: #fff; }
/* social profiles: icon buttons (owner final finding 03). One size, one
   weight, light monochrome; restrained lift + Delta red on hover; touch
   target stays >=44px on every device. */
.ft .socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ft .socials .soc { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair); border-radius: 2px;
  color: var(--dim); background: transparent;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), color .2s ease, border-color .2s ease; }
.ft .socials .soc svg { display: block; }
.ft .socials .soc:hover { color: var(--red); border-color: var(--red); transform: translateY(-2px); }
.ft .socials .soc:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; color: var(--red); }
@media (max-width: 900px) { .ft .socials { gap: 12px; } .ft .socials .soc { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .ft .socials .soc { transition: color .2s ease, border-color .2s ease; }
  .ft .socials .soc:hover { transform: none; }
}
.ft .legal { margin-top: 7vh; padding-top: 22px; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between;
  font: 500 12px var(--mono); letter-spacing: .1em; color: var(--steel); }
.ft .legal a { display: inline; padding: 0; color: var(--steel); }
.ft .legal a:hover { color: #fff; }
.staging-foot { background: var(--asphalt); text-align: center; padding: 14px 20px 26px; }

/* ---------- moving value banner (owner Change 04) ----------
   Slow, continuous, seamless leftward marquee (duplicated track, -50% loop).
   Each item stacks a bold headline over a small explanation; reduced motion
   gets a static horizontally-scrollable strip with the duplicate removed. */
.vband { background: var(--ink); border-block: 1px solid var(--hair); position: relative; }
.vband__sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; margin: 0; }
.vband__viewport { overflow: hidden; }
.vband__track { display: flex; width: max-content; animation: vband-move 72s linear infinite; will-change: transform; }
.vband__half { display: flex; align-items: center; }
.vband__item { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 19px 30px; white-space: nowrap; text-align: center; }
.vband__item b { font: 800 21px/1 var(--disp); letter-spacing: .01em; }
.vband__item span { font: 500 10px/1 var(--mono); letter-spacing: .2em; color: var(--steel); }
.vband__sep { color: var(--red); font-size: 8px; align-self: center; padding: 0 4px; }
@keyframes vband-move { to { transform: translateX(-50%); } }
/* owner final finding 01: the visible pause control is removed. Motion is
   interrupted ONLY by reduced motion, being fully offscreen, or a hidden tab —
   never by hover, focus, touch or pointer movement. */
.vband--paused .vband__track { animation-play-state: paused; }
@media (max-width: 900px) {
  .vband__item { padding: 15px 20px; gap: 6px; }
  .vband__item b { font-size: 17px; }
  .vband__item span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-proof="force"]) .vband__track { animation: none; width: auto; }
  html:not([data-motion-proof="force"]) .vband__half--dup { display: none; }
  html:not([data-motion-proof="force"]) .vband__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- benefit-row feedback (owner Change 03) ----------
   Applies to every numbered benefit-row list carrying .wp-live — originally
   the "What running with Delta means" rows, extended per the owner's
   Change-05 review (2026-07-29) to the brokers / shippers / safety lists.
   Informational rows: no navigation, no pointer cursor, no focusability. */
.wp-live li { transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease; }
.wp-live .n { border-top: 0; position: relative; padding-top: 8px; }
.wp-live .n::before { content: ""; position: absolute; top: 0; left: 0; height: 2px;
  width: 44px; background: var(--red); transition: width .3s cubic-bezier(.2,.8,.3,1), background-color .3s ease; }
.wp-live .n, .wp-live b, .wp-live p { transition: color .28s ease, letter-spacing .28s ease; }
/* desktop hover */
.wp-live:hover li:not(:hover):not(.pressed) { opacity: .74; }
.wp-live li:hover, .wp-live li.pressed { transform: translateX(8px); }
.wp-live li:hover .n::before, .wp-live li.pressed .n::before { width: 84px; background: var(--red); }
.wp-live li:hover .n, .wp-live li.pressed .n { color: #FF6B76; }
.wp-live li:hover b, .wp-live li.pressed b { letter-spacing: .045em; }
.wp-live li:hover p, .wp-live li.pressed p { color: #E7E9EB; }
/* reduced motion: color, line length and contrast only — no translation */
@media (prefers-reduced-motion: reduce) {
  .wp-live li, .wp-live li:hover, .wp-live li.pressed { transform: none; transition: none; }
  .wp-live .n::before, .wp-live .n, .wp-live b, .wp-live p { transition: none; }
  .wp-live li:hover b, .wp-live li.pressed b { letter-spacing: .02em; }
}

/* ---------- image-detail modal (owner Change 02) ----------
   Ordinary image links open this instead of navigating; the page stays
   beneath, darkened. Underlying routes remain for direct links and no-JS. */
.imodal { position: fixed; inset: 0; z-index: 90; display: none; }
.imodal.open { display: grid; place-items: center; padding: 4vh 4vw; }
.imodal__backdrop { position: absolute; inset: 0; background: rgba(10, 11, 13, .78); }
.imodal__panel { position: relative; width: min(880px, 100%); max-height: 92vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #17181C; border: 1px solid var(--hair);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.imodal.open .imodal__panel { animation: imodal-in .22s cubic-bezier(.2,.8,.3,1) both; }
@keyframes imodal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.imodal__close { position: absolute; top: 12px; right: 12px; z-index: 3;
  background: rgba(13,14,16,.72); border: 1px solid var(--hair); color: var(--bone);
  font: 700 15px/1 var(--body); min-width: 44px; min-height: 44px; border-radius: 2px; cursor: pointer; }
.imodal__close:hover { border-color: var(--red); color: #fff; }
.imodal__body { display: none; }
.imodal__body.active { display: block; }
.imodal__pic { position: relative; aspect-ratio: 16/9.5; overflow: hidden; background: var(--ink); }
.imodal__pic img { width: 100%; height: 100%; object-fit: cover; }
.imodal__cap { position: absolute; inset: auto 0 0 0; padding: 34px 22px 12px;
  background: linear-gradient(0deg, rgba(13,14,16,.9), transparent);
  font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.imodal__txt { padding: 26px 28px 30px; }
.imodal__txt .mono-k { color: var(--amber); }
.imodal__txt h2 { font: 800 clamp(24px, 3vw, 38px)/1.05 var(--disp); text-transform: uppercase; margin: 10px 0 12px; }
.imodal__txt .desc { color: var(--dim); max-width: 60ch; }
.imodal__facts { list-style: none; padding: 0; margin: 20px 0 0; }
.imodal__facts li { padding: 11px 0 11px 26px; border-top: 1px solid var(--hair);
  position: relative; font-size: 15px; color: var(--dim2); }
.imodal__facts li::before { content: ""; position: absolute; left: 4px; top: 19px;
  width: 8px; height: 2px; background: var(--red); }
.imodal__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
html.imodal-lock { overflow: hidden; }
@media (max-width: 700px) {
  .imodal.open { padding: 0; }
  .imodal__panel { width: 100%; height: 100%; max-height: none; border: 0; }
  .imodal__pic { aspect-ratio: 16/10; }
}
@media (prefers-reduced-motion: reduce) {
  .imodal.open .imodal__panel { animation: none; }
}

/* ---------- narrow-phone overflow fixes (final consolidated verification,
   2026-07-30). Both were pre-existing base-layout defects found at 360-390px;
   neither belongs to an approved change and neither alters wider layouts.
   1. The 2-up data band could not fit a 26px display word inside a 162px
      column at 360px (e.g. "Conestoga" on /services/flatbed) — it becomes a
      single column below 560px.
   2. A one-word page-hero H1 ("Accessibility") is unbreakable and exceeded
      the 7vw-padded content box at 360px — the display size steps down below
      400px only. ---------- */
@media (max-width: 560px) {
  .specs, .specs.n5 { grid-template-columns: 1fr; }
  .specs div, .specs div:nth-child(even) { border-left: 0; border-top: 1px solid var(--hair); padding: 26px 20px; }
  .specs div:first-child { border-top: 0; }
  .specs b { font-size: 23px; }
}
@media (max-width: 400px) {
  .hero--page h1, .hero--flat h1 { font-size: clamp(30px, 9.2vw, 42px) !important; }
}

/* ---------- reveals + reduced motion ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.9,.32,1), transform .7s cubic-bezier(.22,.9,.32,1); }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-proof="force"]) .reveal { opacity: 1; transform: none; }
  html:not([data-motion-proof="force"]) .reveal.in { transition: none; }
  html:not([data-motion-proof="force"]) .btn:hover::after { animation: none; }
  html:not([data-motion-proof="force"]) .btn:hover,
  html:not([data-motion-proof="force"]) .btn:hover .ar,
  html:not([data-motion-proof="force"]) .line-link:hover .ar,
  html:not([data-motion-proof="force"]) .cta-apply:hover { transform: none; box-shadow: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hd { padding-left: 44px; }
}
@media (max-width: 900px) {
  .hd { padding: 10px 18px; }
  .hd .brand img { height: 84px; }
  .hd nav .grp, .hd nav .lnk.top, .hd nav .cta-apply { display: none; }
  .menu-btn { display: inline-block; }
  /* clear the fixed header — tall hero content otherwise starts underneath it */
  .hero { padding: 138px 7vw 9vh; min-height: 92vh; }
  .hero--page { min-height: 62vh; }
  /* photography recedes further on small screens so copy stays readable */
  .hero .bg::after { background:
    linear-gradient(75deg, rgba(13,14,16,.94) 26%, rgba(13,14,16,.66) 58%, rgba(13,14,16,.3)),
    linear-gradient(0deg, rgba(13,14,16,.95) 10%, transparent 55%); }
  .division .bg::after { background: linear-gradient(0deg, rgba(13,14,16,.95) 22%, rgba(13,14,16,.66) 62%, rgba(13,14,16,.38)); }
  .door .bg::after { background: linear-gradient(0deg, rgba(13,14,16,.94) 12%, rgba(13,14,16,.4) 60%, rgba(13,14,16,.4)); }
  .endcta .bg::after { background: rgba(13,14,16,.9); }
  .doors { flex-direction: column; }
  .door { min-height: 46vh; }
  .door + .door { border-left: 0; border-top: 2px solid var(--red); }
  .division { padding: 9vh 7vw; min-height: 54vh; }
  .diff { padding: 10vh 7vw; }
  .diff .cols, .diff .voices { grid-template-columns: 1fr; gap: 30px; }
  .strip { padding: 9vh 7vw; }
  .frames, .frames--gallery { grid-template-columns: 1fr; }
  .frames--gallery .frame:nth-child(6n+1) { grid-column: auto; }
  .endcta { padding: 12vh 7vw; }
  .specs, .specs.n5 { grid-template-columns: 1fr 1fr; }
  .specs div { border-left: 0; border-top: 1px solid var(--hair); }
  .specs div:nth-child(-n+2) { border-top: 0; }
  .specs div:nth-child(even) { border-left: 1px solid var(--hair); }
  /* Owner-approved accessibility amendment 001 (2026-08-08).
     A `1fr` track carries the automatic min-content floor that grid
     items get from min-width:auto. At a 320px viewport that floor
     computes to 321.875px, pushing documentElement.scrollWidth to 322 —
     a real page-level horizontal reflow on /company/safety. minmax(0,
     1fr) removes the floor; min-width:0 relieves the items. Measured to
     change nothing at 360px and above. */
  .split, .split.rev { grid-template-columns: minmax(0, 1fr); }
  .split > *, .split.rev > * { min-width: 0; }
  .split .txt, .split.rev .txt { padding: 8vh 7vw; }
  .split .pic { min-height: 46vh; }
  .split .pic img { position: relative; height: 46vh; }
  .paper { padding: 9vh 7vw; }
  .paper .cols2 { grid-template-columns: 1fr; gap: 40px; }
  .form-a .row2 { grid-template-columns: 1fr; }
  .feature-post { grid-template-columns: 1fr; }
  .jrow { grid-template-columns: 1fr; gap: 6px; }
  .tut-grid { grid-template-columns: 1fr 1fr; }
  .ft { padding: 8vh 7vw 4vh; }
  .ft .row { gap: 40px; }
}
@media (max-width: 560px) {
  .tut-grid { grid-template-columns: 1fr; }
  .idband div { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--paper-hair); }
  .idband div:first-child { border-top: 0; }
}

/* Delta red emphasis: the visual editor's "Delta red emphasis" control wraps
   selected words in <span class="rd">. Amendment 002 (2026-08-25): the class
   was preserved end-to-end by every sanitizer but painted by no stylesheet,
   so the control read as a dead button in the Owner retest. Inert for all
   existing content: no frozen shell or governed override carries the class
   until the Owner uses the control. */
.rd { color: var(--red); }

/* Postlaunch form correction: keep focused controls below the sticky header. */
.form-a input, .form-a select, .form-a textarea, .form-status { scroll-margin-top: 160px; }
.human-verification { margin: 24px 0; padding: 20px; border: 1px solid var(--steel); }
.human-verification [data-verification-question] { display: block; margin-top: 8px; }
.human-verification input { max-width: 12rem; }
.human-verification button { margin-top: 12px; padding: 10px 14px; background: transparent; color: inherit; border: 1px solid currentColor; cursor: pointer; }
.form-a button:disabled { opacity: .65; cursor: not-allowed; }
@media (max-width: 900px) { .form-a input, .form-a select, .form-a textarea, .form-status { scroll-margin-top: 106px; } }

.tut-description { display: block; margin-top: 12px; font: 400 16px/1.6 var(--body); text-transform: none; letter-spacing: normal; }
.tut-open { display: block; margin-top: 18px; font-weight: 700; text-decoration: underline; }