/* ==========================================================================
   Argo Growth Solutions
   Construction yellow, black, concrete. Heavy type, stencil labels, no fluff.
   ========================================================================== */

:root {
  --yellow: #FFC20E;
  --yellow-deep: #E9AC00;
  --black: #0F0F0F;
  --black-2: #191919;
  --black-3: #262626;
  --bone: #F5F3EF;
  --concrete: #EEEBE4;
  --concrete-2: #E1DDD3;
  --white: #FFFFFF;
  --ink: #0F0F0F;
  --ink-soft: #46443F;
  --line: rgba(15, 15, 15, .16);
  --line-dark: rgba(255, 255, 255, .12);

  --f-head: "Archivo", "Arial Black", Impact, system-ui, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(80px, 10vw, 144px);
  --ease: cubic-bezier(.2, .7, .1, 1);

  --logo-ink: var(--black);
  --logo-accent: var(--yellow);
  --logo-bar: var(--black);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--concrete);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--black); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--black); color: var(--yellow); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 16px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.section-black { background: var(--black); color: var(--white); --logo-ink: var(--white); --logo-bar: var(--yellow); }
.section-concrete { background: var(--concrete); }
.section-light { background: var(--bone); }

/* ---------- Type ---------- */
.h2 {
  font-family: var(--f-head);
  font-weight: 850;
  font-variation-settings: "wdth" 112;
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hl { color: var(--ink); background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section-black .hl { color: var(--yellow); background: none; padding: 0; }

.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 24px; color: var(--ink);
}
.label::before { content: ""; width: 12px; height: 12px; background: var(--yellow); box-shadow: inset 0 0 0 2px var(--black); }
.section-black .label { color: var(--yellow); }
.section-black .label::before { box-shadow: none; }
.label-dark::before { background: var(--black); }

.lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); max-width: 36em; text-wrap: pretty; }
.section-black .lede { color: rgba(255, 255, 255, .72); }

.head { margin-bottom: clamp(44px, 6vw, 72px); max-width: 980px; }
.head-split { max-width: none; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 64px; align-items: end; }

/* ---------- Buttons ---------- */
.btn {
  min-height: 44px;
  --bg: var(--black); --fg: var(--yellow); --bd: var(--black); --sh: var(--black);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 22px;
  background: var(--bg); color: var(--fg); border: 2px solid var(--bd);
  font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 108;
  font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--sh); }
.btn:active { transform: none; box-shadow: none; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-black { --sh: var(--yellow); }
.btn-yellow { --bg: var(--yellow); --fg: var(--black); --bd: var(--yellow); --sh: var(--white); }
.btn-outline { --bg: transparent; --fg: var(--black); --bd: var(--black); --sh: var(--black); }
.btn-outline:hover { --bg: var(--black); --fg: var(--yellow); box-shadow: 3px 3px 0 var(--yellow); }
.btn-lg { padding: 18px 28px; font-size: 1rem; }
.btn-block { width: 100%; white-space: normal; text-align: center; }
.btn { max-width: 100%; }
.wo-body > * { min-width: 0; }

.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 108; text-transform: uppercase; letter-spacing: .05em; font-size: .92rem; color: var(--yellow); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 4px; }
.text-link:hover { color: var(--white); border-color: var(--white); }

/* ---------- Hazard stripes ---------- */
.hazard { height: 18px; background: repeating-linear-gradient(-45deg, var(--black) 0 16px, var(--yellow) 16px 32px); }
.hazard-thin { height: 10px; background: repeating-linear-gradient(-45deg, var(--black) 0 10px, var(--yellow) 10px 20px); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s var(--ease), box-shadow .3s; }
.site-header.is-scrolled { background: var(--black); --logo-ink: var(--white); box-shadow: 0 4px 0 var(--yellow); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 84px; transition: height .3s var(--ease); }
.is-scrolled .header-inner { height: 68px; }

.lockup { display: inline-flex; align-items: center; min-height: 48px; gap: 12px; text-decoration: none; color: var(--logo-ink); flex: none; }
.lockup-ship { height: 46px; width: auto; aspect-ratio: 2026 / 1705; transition: transform .4s var(--ease); }
.lockup:hover .lockup-ship { transform: translateY(-2px) rotate(-3deg); }
.lockup-text { display: flex; flex-direction: column; gap: 5px; }
.lockup-word { width: 104px; height: auto; aspect-ratio: 2507 / 527; }
.lockup-sub { font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 125; font-size: .5rem; letter-spacing: .32em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--logo-ink); }
.is-scrolled .lockup-sub { color: var(--yellow); }

.nav { margin-left: auto; }
.nav-list { display: flex; gap: 28px; }
.nav-list a:not(.btn) { text-decoration: none; font-weight: 700; font-size: .92rem; position: relative; color: var(--black); }
.is-scrolled .nav-list a:not(.btn) { color: var(--white); }
.nav-list a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.is-scrolled .nav-list a:not(.btn)::after { background: var(--yellow); }
.nav-list a:not(.btn):hover::after { transform: scaleX(1); }
.nav-cta-mobile { display: none; }
.header-cta { padding: 11px 18px; font-size: .82rem; }
.is-scrolled .header-cta { --bg: var(--yellow); --fg: var(--black); --bd: var(--yellow); }

.menu-toggle { display: none; width: 48px; height: 48px; background: var(--black); border: 0; cursor: pointer; position: relative; margin-left: auto; }
.is-scrolled .menu-toggle { background: var(--yellow); }
.menu-bars, .menu-bars::before, .menu-bars::after { position: absolute; left: 13px; right: 13px; height: 3px; background: var(--yellow); transition: transform .3s var(--ease), opacity .2s; }
.is-scrolled .menu-bars, .is-scrolled .menu-bars::before, .is-scrolled .menu-bars::after { background: var(--black); }
.menu-bars { top: 22.5px; }
.menu-bars::before, .menu-bars::after { content: ""; left: 0; right: 0; }
.menu-bars::before { top: -8px; }
.menu-bars::after { top: 8px; }
.menu-open .menu-bars { background: transparent !important; }
.menu-open .menu-bars::before { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-bars::after { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { background: var(--bone); padding-top: 120px; position: relative; overflow: hidden; --logo-bar: var(--yellow); }
.hero::before, .page-hero::before {
  /* faint blueprint grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(15,15,15,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15,15,15,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px 56px; align-items: center; padding-bottom: clamp(48px, 6vw, 80px); }
.tag { display: inline-flex; line-height: 1.3; align-items: center; gap: 10px; font-family: var(--f-mono); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; background: var(--black); color: var(--yellow); padding: 8px 14px; margin-bottom: 32px; }
.tag-dot { width: 8px; height: 8px; background: var(--yellow); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-title {
  font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 80;
  font-size: clamp(2.5rem, 5.5vw, 5.6rem); line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
}
.hero-title .line { display: block; white-space: nowrap; }
.hero-title .line-block, .page-title .line-block { display: inline-block; margin-top: .14em; background: var(--black); color: var(--yellow); padding: .08em .18em .1em; transform: rotate(-1.2deg); transform-origin: left; box-shadow: .12em .12em 0 var(--yellow); }
.hero-lede { margin-top: 32px; font-size: clamp(1.08rem, 1.45vw, 1.28rem); line-height: 1.55; max-width: 33em; font-weight: 500; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 36px; }
.hero-grid > * { min-width: 0; }

/* Dispatch ticket: one inquiry, start to booked estimate */
.dispatch { margin: 0; justify-self: end; width: 100%; max-width: 440px; background: var(--white); border: 3px solid var(--black); box-shadow: 12px 12px 0 var(--black); transform: rotate(1.5deg); }
.dispatch-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--black); color: rgba(255,255,255,.6); padding: 12px 20px; font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.dispatch-live { display: inline-flex; align-items: center; gap: 10px; color: var(--yellow); }
.dispatch-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: blink 1.6s steps(2) infinite; }
.dispatch-body { padding: 24px 24px 8px; }
.dispatch-job { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 108; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; }
.dispatch-meta { margin-top: 8px; font-family: var(--f-mono); font-weight: 500; font-size: .8rem; color: var(--ink-soft); }
.dispatch-log { margin-top: 24px; position: relative; }
.dispatch-log::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 40px; width: 2px; background: repeating-linear-gradient(var(--black) 0 4px, transparent 4px 8px); }
.dispatch-log li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 0 0 16px 28px; font-size: .95rem; line-height: 1.4; }
.dispatch-log li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; background: var(--white); border: 2px solid var(--black); }
.dispatch-log time { font-family: var(--f-mono); font-weight: 600; font-size: .78rem; color: var(--ink-soft); padding-top: 2px; }
.dispatch-log .is-booked { font-weight: 700; }
.dispatch-log .is-booked::before { background: var(--yellow); }
.dispatch-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 16px 24px 24px; border-top: 2px dashed rgba(17,17,16,.2); margin-top: 8px; }
.stamp { display: inline-block; padding: 8px 12px; border: 3px solid var(--black); background: var(--yellow); font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 110; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); }
.dispatch-note { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* steps arrive one after another once the ticket is in view */
.js .dispatch-log li, .js .dispatch-foot .stamp { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .dispatch.is-in .dispatch-log li, .js .dispatch.is-in .stamp { opacity: 1; transform: none; }
.js .dispatch.is-in .dispatch-log li:nth-child(1) { transition-delay: .5s; }
.js .dispatch.is-in .dispatch-log li:nth-child(2) { transition-delay: 1.1s; }
.js .dispatch.is-in .dispatch-log li:nth-child(3) { transition-delay: 1.7s; }
.js .dispatch.is-in .dispatch-log li:nth-child(4) { transition-delay: 2.3s; }
.js .dispatch.is-in .stamp { transform: rotate(-3deg); transition-delay: 2.9s; }
.js .dispatch-foot .stamp { transform: rotate(-3deg) scale(1.6); }
.logo-full { width: 100%; height: auto; aspect-ratio: 2527 / 2486; }

.hero-spec { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: linear-gradient(var(--black), var(--black)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 3px no-repeat; }
.hero-spec li { display: flex; align-items: baseline; gap: 14px; padding: 18px 0 22px; font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 112; font-size: clamp(1rem, 1.6vw, 1.35rem); text-transform: uppercase; letter-spacing: -.01em; }
.hero-spec li + li { padding-left: 24px; border-left: 3px solid var(--black); }
.hero-spec span { font-family: var(--f-mono); font-weight: 600; font-size: .78rem; letter-spacing: .1em; }

/* ---------- Ticker ---------- */
.ticker { background: var(--black); color: var(--yellow); overflow: hidden; padding: 18px 0; border-bottom: 1px solid var(--black-3); }
.ticker-track { display: flex; align-items: center; gap: 32px; width: max-content; animation: ticker 36s linear infinite; }
.ticker span { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 118; font-size: clamp(1.15rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.ticker b { width: 12px; height: 12px; background: var(--yellow); transform: rotate(45deg); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Problems ---------- */
.problems { padding: var(--section) 0; }
.tickets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ticket { color: var(--white); background: var(--black-2); border-top: 6px solid var(--yellow); padding: 26px 26px 32px; position: relative; transition: transform .3s var(--ease), background .3s; }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; top: 58px; border-top: 2px dashed var(--black-3); }
.ticket:hover { transform: translateY(-6px); background: var(--black-3); }
.ticket-no { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 40px; }
.ticket h3 { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 110; font-size: 1.45rem; line-height: 1.08; letter-spacing: -.015em; margin-bottom: 14px; }
.ticket p:last-child { color: rgba(255,255,255,.68); font-size: .98rem; }

/* ---------- Services ---------- */
.services { padding: var(--section) 0; }
.service-stack { display: grid; gap: 28px; }
.service { background: var(--white); border: 3px solid var(--black); box-shadow: 10px 10px 0 var(--black); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.service:hover { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--yellow-deep); }
.service-plate { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--black); color: var(--yellow); padding: 10px 22px 10px 42px; font-family: var(--f-mono); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; position: relative; }
.service-plate::before, .service-plate::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #5a5a5a; box-shadow: inset -1px -1px 0 #333; }
.service-plate::before { left: 18px; }
.service-plate::after { right: 8px; display: none; }
.service-main { display: grid; grid-template-columns: 150px 1.3fr 1fr; gap: 24px 48px; padding: clamp(28px, 4vw, 48px); align-items: start; }
.service-num { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(4rem, 8vw, 7rem); line-height: .8; letter-spacing: -.04em; color: var(--yellow); -webkit-text-stroke: 3px var(--black); paint-order: stroke fill; }
.service-body h3 { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 112; font-size: clamp(1.6rem, 2.8vw, 2.35rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 16px; text-wrap: balance; }
.service-body p { color: var(--ink-soft); }
.checks { display: grid; gap: 2px; align-self: center; }
.checks li { position: relative; padding: 10px 0 10px 36px; font-weight: 600; font-size: .98rem; border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; background: var(--yellow); border: 2px solid var(--black); }
.checks li::after { content: ""; position: absolute; left: 7px; top: 14px; width: 6px; height: 11px; border: solid var(--black); border-width: 0 3px 3px 0; transform: rotate(45deg); }

.straight { margin-top: 56px; display: grid; grid-template-columns: 200px 1fr; gap: 24px 48px; background: var(--black); color: var(--white); border: 3px solid var(--black); padding: clamp(28px, 4vw, 44px); position: relative; }
.straight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: repeating-linear-gradient(-45deg, var(--black) 0 10px, var(--yellow) 10px 20px); border-right: 3px solid var(--black); }
.straight-label { font-family: var(--f-mono); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding-left: 18px; color: var(--yellow); }
.straight h3 { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 14px; text-wrap: balance; }
.straight p { color: rgba(255,255,255,.72); max-width: 46em; }

/* ---------- Pipeline ---------- */
.pipeline { padding: var(--section) 0; overflow: hidden; }
.track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.stage { position: relative; padding: 46px 22px 0 0; }
.stage::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 6px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); transition-delay: var(--d, 0s); }
.stage.is-in::before { transform: scaleX(1); }
.stage-yours::before { background: var(--white); }
.stage-step { position: absolute; top: 0; left: 0; width: 34px; height: 34px; display: grid; place-items: center; background: var(--black); border: 3px solid var(--yellow); color: var(--yellow); font-family: var(--f-mono); font-weight: 600; font-size: .9rem; z-index: 1; }
.stage-yours .stage-step { border-color: var(--white); color: var(--black); background: var(--white); }
.stage h3 { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 112; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px; }
.stage p { color: rgba(255,255,255,.66); font-size: .96rem; }
.stage-yours h3 { color: var(--yellow); }
.lanes { display: grid; grid-template-columns: 4fr 1fr; margin-top: 44px; font-family: var(--f-mono); font-weight: 600; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.lane { padding-top: 12px; border-top: 2px dashed; }
.lane-ours { color: var(--yellow); margin-right: 22px; }
.lane-yours { color: var(--white); }

/* Reporting block */
.report { margin-top: 64px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px 64px; align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--black-2); border: 3px solid var(--yellow); box-shadow: 10px 10px 0 rgba(255, 194, 14, .18); }
.report-label { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; }
.report-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: blink 1.6s steps(2) infinite; }
.report h3 { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 110; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 16px; text-wrap: balance; }
.report-copy p:last-child { color: rgba(255,255,255,.7); max-width: 40em; }
.report-list { border-top: 2px solid var(--black-3); }
.report-list li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 2px solid var(--black-3); font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 108; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .01em; }
.report-list span { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; color: var(--yellow); }

/* ---------- Values ---------- */
.values { padding: 0 0 var(--section); --logo-ink: var(--black); }
.values .wrap { padding-top: var(--section); }
.values-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px 80px; align-items: start; }
.values-head .h2 { font-size: clamp(2.2rem, 5vw, 4.3rem); }
.values-head .lede { margin-top: 24px; font-weight: 500; }
.creed { border-top: 3px solid var(--black); }
.creed li { display: grid; grid-template-columns: 52px 1fr; column-gap: 20px; padding: 22px 0; border-bottom: 3px solid var(--black); }
.creed li::before { content: ""; grid-row: span 2; width: 40px; height: 40px; background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FFC20E' stroke-width='3.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 26px no-repeat; }
.creed h3 { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 115; font-size: clamp(1.25rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; }
.creed p { margin-top: 6px; color: var(--ink-soft); }
.creed-close { margin-top: clamp(56px, 7vw, 88px); background: var(--black); color: var(--white); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1fr; gap: 22px; box-shadow: 12px 12px 0 var(--yellow); }
.creed-big { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 112; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .96; letter-spacing: -.03em; text-transform: uppercase; color: var(--white); text-wrap: balance; }
.creed-big span { color: var(--yellow); }
.creed-small { font-size: 1.1rem; color: rgba(255,255,255,.78); max-width: 26em; }

/* ---------- Process ---------- */
.process { padding: var(--section) 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px solid var(--black); }
.step { padding: 32px 28px 8px 0; }
.step + .step { padding-left: 28px; border-left: 1px solid var(--line); }
.step-num { display: block; font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(3.2rem, 5.4vw, 4.8rem); line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--black); margin-bottom: 22px; transition: color .3s; }
.step:hover .step-num { color: var(--yellow); }
.step h3 { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 112; font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px; }
.step p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- Trades ---------- */
.trades { padding: var(--section) 0; }
.trades-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 80px; align-items: center; }
.trades .lede { margin-top: 24px; }
.trade-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trade-list li { border: 2px solid var(--black-3); padding: 18px 16px; font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 100; text-transform: uppercase; font-size: .95rem; letter-spacing: .01em; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.trade-list li:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); transform: translateY(-3px); }

/* ---------- FAQ ---------- */
.faq { padding: var(--section) 0; }
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 40px 80px; align-items: start; }
.faq-intro { position: sticky; top: 110px; }
.faq-intro .lede { margin-top: 24px; }
.faq-list { border-top: 3px solid var(--black); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 64px 24px 0; position: relative; font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 106; font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.3; letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: ""; position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; background: var(--yellow); border: 2px solid var(--black); transition: background .2s; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 36px; margin-top: -18px; line-height: 36px; text-align: center; font-weight: 900; font-size: 1.4rem; transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover::before { background: var(--black); }
.faq-list summary:hover::after { color: var(--yellow); }
.faq-list details p { padding: 0 64px 26px 0; color: var(--ink-soft); max-width: 44em; }

/* ---------- Book ---------- */
.book { padding: 0 0 var(--section); }
.book .wrap { padding-top: var(--section); }
.book-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px 80px; align-items: start; }
.book-grid > *, .values-grid > *, .trades-grid > *, .faq-grid > *, .hero-grid > *,
.ethics-grid > *, .creed-close > *, .ss-grid > *, .svc-grid > *, .cta-inner > *, .std-why-grid > * { min-width: 0; }
.book-copy .lede { margin-top: 24px; }
.book-points { margin-top: 36px; display: grid; gap: 14px; }
.book-points li { display: flex; gap: 14px; align-items: flex-start; font-weight: 600; }
.book-points li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230F0F0F' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px no-repeat; }

.work-order { background: var(--concrete); color: var(--ink); border: 3px solid var(--yellow); box-shadow: 12px 12px 0 var(--yellow); }
.wo-head { display: flex; justify-content: space-between; gap: 16px; background: var(--yellow); color: var(--black); padding: 12px 22px; font-family: var(--f-mono); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 3px solid var(--black); }
.wo-body { padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .field legend { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.field em { font-style: normal; opacity: .65; text-transform: none; letter-spacing: .02em; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; font-size: 1rem; padding: 12px 14px; background: var(--white); border: 2px solid var(--black); border-radius: 0; appearance: none; -webkit-appearance: none; font-weight: 500; transition: box-shadow .15s; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F0F0F' stroke-width='2.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--yellow); }
.field input.is-invalid, .field select.is-invalid { border-color: #C2361B; box-shadow: 4px 4px 0 rgba(194, 54, 27, .25); }
.chips { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0; margin-bottom: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--black); background: var(--white); font-weight: 700; font-size: .9rem; transition: background .15s, color .15s; }
.chips input:checked + span { background: var(--black); color: var(--yellow); }
.chips input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.work-order .btn-yellow { --sh: var(--black); border-color: var(--black); margin-top: 4px; }
.form-status { font-size: .92rem; font-weight: 600; min-height: 1.4em; }
.form-status.is-error { color: #B2301A; }
.form-done { text-align: center; padding: 40px 10px; }
.form-done svg { width: 110px; height: auto; margin: 0 auto 22px; aspect-ratio: 2026 / 1705; --logo-ink: var(--black); }
.form-done h3 { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 112; font-size: 2rem; text-transform: uppercase; margin-bottom: 10px; }
.form-done p { color: var(--ink-soft); max-width: 26em; margin: 0 auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); border-top: 1px solid var(--black-3); padding: 72px 0 28px; --logo-ink: var(--white); --logo-bar: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px 88px; align-items: center; padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); }
.footer-logo { width: 100%; max-width: 260px; }
.footer-line { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 112; font-size: clamp(1.8rem, 3.8vw, 3.2rem); line-height: 1; letter-spacing: -.025em; text-transform: uppercase; }
.footer-line span { color: var(--yellow); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 32px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; color: rgba(255,255,255,.75); }
.footer-nav a:hover { color: var(--yellow); }
.footer-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 24px; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .hero-title.reveal .line-block { transform: rotate(-1.2deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .header-cta { display: none; }
  .tickets { grid-template-columns: repeat(2, 1fr); }
  .service-main { grid-template-columns: 110px 1fr; }
  .checks { grid-column: 2; }
  .track { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stage { padding-right: 16px; }
  .stage h3 { font-size: 1.1rem; }
}

@media (max-width: 920px) {
  .menu-toggle { display: block; }
  .nav { position: fixed; inset: 0; z-index: -1; background: var(--black); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
  .nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(-45deg, var(--black) 0 16px, var(--yellow) 16px 32px); }
  .menu-open .nav { opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: center; gap: 24px; text-align: center; }
  .nav-list a:not(.btn), .is-scrolled .nav-list a:not(.btn) { color: var(--white); font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 115; text-transform: uppercase; font-size: clamp(1.4rem, 7vw, 1.9rem); letter-spacing: -.01em; }
  .nav-cta-mobile { display: block; margin-top: 16px; }
  .menu-open .site-header { background: transparent; box-shadow: none; --logo-ink: var(--white); }
  .menu-open .lockup-sub { color: var(--yellow); }
  .menu-open .menu-toggle { background: var(--yellow); }
  .menu-open .menu-bars::before, .menu-open .menu-bars::after { background: var(--black); }
  .menu-open { overflow: hidden; }

  .hero { padding-top: 104px; }
  .hero-grid { grid-template-columns: 1fr; }
  .dispatch { justify-self: start; max-width: 520px; transform: none; margin-top: 8px; }
  .head-split { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr; }
  .stage { padding: 0 0 34px 58px; }
  .stage::before { left: 14px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; transform: scaleY(0); transform-origin: top; }
  .stage.is-in::before { transform: scaleY(1); }
  .stage h3 { font-size: 1.25rem; padding-top: 4px; }
  .lanes { display: none; }
  .stage-yours { padding-bottom: 0; }
  .stage-yours::after { content: "Your lane"; display: inline-block; margin-top: 14px; font-family: var(--f-mono); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--black); background: var(--white); padding: 4px 8px; }
  .stage:not(.stage-yours):first-child::after { content: "Our lane →"; position: absolute; right: 0; top: 4px; font-family: var(--f-mono); font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
  .values-grid, .trades-grid, .faq-grid, .book-grid, .creed-close, .report { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .straight { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo { max-width: 200px; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .header-inner { height: 72px; gap: 12px; }
  .lockup-ship { height: 40px; }
  .lockup-word { width: 92px; }
  .tag { font-size: .68rem; letter-spacing: .05em; padding: 8px 10px; }
  .hero-title { font-size: clamp(2.2rem, 10.8vw, 3.2rem); }
  .hero-title .line { white-space: normal; }
  .dispatch { box-shadow: 6px 6px 0 var(--black); }
  .report { margin-top: 48px; box-shadow: 6px 6px 0 rgba(255, 194, 14, .18); }
  .report-list li { font-size: .95rem; }
  .dispatch-body { padding: 20px 20px 4px; }
  .dispatch-foot { padding: 16px 20px 20px; }
  .dispatch-log li { grid-template-columns: 64px 1fr; font-size: .9375rem; }
  .hero-spec { display: none; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { padding: 16px 20px; font-size: .92rem; letter-spacing: .04em; }
  .btn { white-space: normal; text-align: center; }
  .hero-spec { grid-template-columns: 1fr; }
  .hero-spec li { padding: 14px 0; }
  .hero-spec li + li { padding-left: 0; border-left: 0; border-top: 2px solid var(--black); }
  .tickets { grid-template-columns: 1fr; }
  .ticket-no { margin-bottom: 34px; }
  .service { box-shadow: 6px 6px 0 var(--black); }
  .service-plate { padding-left: 36px; font-size: .72rem; }
  .service-main { grid-template-columns: 1fr; gap: 18px; }
  .service-num { font-size: 4rem; }
  .checks { grid-column: auto; }
  .straight { padding-left: 34px; }
  .straight-label { padding-left: 0; }
  .creed li { grid-template-columns: 40px 1fr; column-gap: 16px; }
  .creed li::before { width: 34px; height: 34px; background-size: 22px; }
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 26px 0; border-left: 0; }
  .step + .step { border-top: 1px solid var(--line); }
  .trade-list { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .work-order { box-shadow: 6px 6px 0 var(--yellow); }
  .wo-head { flex-direction: column; gap: 4px; padding: 12px 16px; font-size: .72rem; }
  .faq-list summary { padding-right: 52px; }
  .faq-list details p { padding-right: 0; }
  .footer-base { flex-direction: column; gap: 4px; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 24px; }
  .site-footer { padding-top: 64px; }
  .footer-grid { padding-bottom: 40px; }
}


/* ==========================================================================
   Multi-page additions: page heroes, the interactive system, example mockups
   ========================================================================== */

.text-link-dark { color: var(--black); border-color: var(--black); }
.text-link-dark:hover { color: var(--black); border-color: var(--yellow-deep); }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--bone); padding-top: 136px; }
.page-hero .wrap { position: relative; padding-bottom: 56px; }
.page-title { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 80; font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; max-width: 15ch; }
.page-title .line-block { display: inline-block; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--black); background: var(--white); text-decoration: none; font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 106; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s; }
.jump span { font-family: var(--f-mono); font-weight: 600; font-size: .72rem; color: var(--ink-soft); }
@media (hover: hover) { .jump a:hover { background: var(--black); color: var(--yellow); } .jump a:hover span { color: var(--yellow); } }

/* ---------- The system (home) ---------- */
.system { padding: var(--section) 0; }
.system .head { margin-bottom: 40px; }
.sys { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.sys-tabs { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 110px; }
.sys-tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 14px 18px; border: 3px solid var(--black); background: var(--white); color: var(--black); cursor: pointer; text-align: left; font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 110; font-size: 1.05rem; letter-spacing: .01em; text-transform: uppercase; transition: background .2s, color .2s, transform .2s var(--ease); }
.sys-tab span { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; color: var(--ink-soft); }
.sys-tab[aria-selected="true"] { background: var(--black); color: var(--white); transform: translateX(6px); box-shadow: -6px 0 0 var(--yellow); }
.sys-tab[aria-selected="true"] span { color: var(--yellow); }
.sys-tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--yellow); }
.is-running .sys-tab[aria-selected="true"]::after { animation: sysbar var(--step, 6500ms) linear forwards; }
@keyframes sysbar { to { width: 100%; } }
.sys-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.sys-panel[hidden] { display: none; }
.sys-panel.is-active { animation: panelin .45s var(--ease) both; }
@keyframes panelin { from { opacity: 0; transform: translateX(16px); } }
.sys-visual { display: flex; justify-content: center; align-items: center; min-height: 520px; padding: 20px 12px 24px; }
.sys-caption h3 { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 14px; }
.sys-caption p { font-size: 1.1rem; color: var(--ink-soft); max-width: 24em; }
.sys-hint { display: none; }
.system .text-link { margin-top: 32px; }

/* ---------- Example mockups ---------- */
.mock { text-align: left; position: relative; width: 100%; max-width: 400px; background: var(--white); border: 3px solid var(--black); box-shadow: 10px 10px 0 var(--black); color: var(--ink); font-family: var(--f-body); }
.mock-tag { position: absolute; top: -15px; right: 14px; z-index: 3; background: var(--yellow); border: 2px solid var(--black); padding: 3px 8px; font-family: var(--f-mono); font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }

/* social feed ad (Facebook / Instagram) */
.mock-feed { padding: 0 0 14px; }
.fd-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.fd-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--black); color: var(--yellow); font-family: var(--f-head); font-weight: 900; font-size: .72rem; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--yellow); }
.fd-name { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.fd-name span { display: block; font-weight: 500; font-size: .74rem; color: #6B6862; }
.fd-more { margin-left: auto; font-weight: 900; letter-spacing: 1px; color: #6B6862; }
.fd-media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: linear-gradient(transparent 82%, #7E8F62 82%); --split: 50%; }
.fd-media::before { content: ""; position: absolute; inset: 0 0 18% 0; background: linear-gradient(#8FB3CC, #D5E4EC); }
.fd-wall { position: absolute; left: 16%; right: 16%; top: 54%; bottom: 18%; background: #E3DACB; border-bottom: 3px solid #B9AE9C; }
.fd-wall i { position: absolute; top: 22%; width: 18%; height: 34%; background: #5E7487; border: 3px solid #FFFFFF; }
.fd-wall i:nth-child(1) { left: 12%; } .fd-wall i:nth-child(2) { right: 12%; }
.fd-wall b { position: absolute; bottom: 0; left: 42%; width: 16%; height: 58%; background: #6B4F3A; }
.fd-roof { position: absolute; left: 8%; right: 8%; top: 16%; height: 40%; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.fd-before { background:
  radial-gradient(18% 10% at 30% 55%, rgba(160,150,130,.85), transparent 70%),
  radial-gradient(14% 9% at 68% 38%, rgba(150,140,120,.8), transparent 70%),
  radial-gradient(12% 8% at 52% 78%, rgba(170,160,140,.8), transparent 70%),
  repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.16) 18px 20px),
  repeating-linear-gradient(180deg, #8F897D 0 11px, #6C675E 11px 13px); }
.fd-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split)); }
.fd-after::before { content: none; }
.fd-new { background:
  repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.08) 18px 20px),
  repeating-linear-gradient(180deg, #34383D 0 11px, #1C1E21 11px 13px); }
.fd-label { position: absolute; bottom: 10px; z-index: 2; background: rgba(17,17,16,.85); color: var(--white); font-family: var(--f-mono); font-weight: 600; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; }
.fd-label-b { left: 10px; }
.fd-label-a { right: 10px; background: var(--yellow); color: var(--black); }
.fd-handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--split); width: 3px; margin-left: -1.5px; background: var(--white); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.fd-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 2px solid var(--black); font-weight: 900; font-size: .8rem; letter-spacing: -1px; }
@property --split { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.is-active .fd-media, .is-in > .mock-feed .fd-media { animation: reveal-split 4.5s .4s ease-in-out both; }
@keyframes reveal-split { 0% { --split: 92%; } 45% { --split: 12%; } 75%, 100% { --split: 50%; } }
.fd-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #F2F0EC; border-bottom: 1px solid #E4E1DA; }
.fd-cta p { font-weight: 700; font-size: .86rem; line-height: 1.2; }
.fd-cta p span { display: block; font-weight: 500; font-size: .74rem; color: #6B6862; }
.fd-btn { flex: none; padding: 8px 14px; background: var(--black); color: var(--yellow); font-family: var(--f-head); font-weight: 800; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.is-active .fd-btn, .is-in > .mock-feed .fd-btn { animation: tap 1.6s 3.2s ease-in-out 2; }
.fd-caption { padding: 10px 14px 0; font-size: .84rem; line-height: 1.4; }
.fd-actions { display: flex; gap: 18px; padding: 10px 14px 0; font-size: .78rem; font-weight: 600; color: #6B6862; }
.fd-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 14px 0; padding-top: 12px; border-top: 2px dashed #D9D6CF; }
.fd-platforms { font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.fd-pin { display: inline-flex; align-items: center; gap: 8px; background: var(--black); color: var(--yellow); font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; }
.fd-pin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,194,14,.3); }

/* phone frame */
.mock-phone { max-width: 290px; border-radius: 36px; padding: 10px; background: var(--black); }
.mock-phone .mp-screen { position: relative; min-height: 470px; overflow: hidden; border-radius: 26px; background: var(--white); }

/* landing page */
.ml-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 10px; border-bottom: 1px solid #ECEAE5; }
.ml-top b { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 110; font-size: .82rem; letter-spacing: .04em; }
.ml-top span { font-size: .72rem; font-weight: 700; background: var(--yellow); padding: 4px 10px; border-radius: 999px; }
.ml-hero { padding: 16px; background: var(--bone); }
.ml-kicker { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ml-head { margin-top: 6px; font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 96; font-size: 1.3rem; line-height: 1.02; text-transform: uppercase; }
.ml-stars { margin-top: 10px; font-size: .78rem; font-weight: 600; }
.ml-stars span { color: var(--yellow-deep); letter-spacing: 1px; }
.ml-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 16px 0; }
.ml-photos i { aspect-ratio: 1; background: repeating-linear-gradient(-45deg, #E6E3DC 0 6px, #EFEDE8 6px 12px); border-radius: 4px; }
.ml-form { display: grid; gap: 8px; padding: 14px 16px 76px; }
.ml-field { border: 1.5px solid #D9D6CF; border-radius: 6px; padding: 9px 10px; font-size: .78rem; color: #8A877F; }
.ml-btn { background: var(--black); color: var(--yellow); text-align: center; border-radius: 6px; padding: 11px; font-family: var(--f-head); font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.ml-sticky { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; font-family: var(--f-head); font-weight: 800; font-size: .78rem; text-transform: uppercase; text-align: center; }
.ml-sticky span { padding: 16px 6px; }
.ml-sticky span:first-child { background: var(--black); color: var(--white); }
.ml-sticky span:last-child { background: var(--yellow); }
.is-active .ml-btn, .is-in > .mock-landing .ml-btn { animation: tap 1.6s 1s ease-in-out 2; }
@keyframes tap { 50% { transform: scale(.95); box-shadow: 0 0 0 6px rgba(255,194,14,.45); } }

/* text thread */
.mock-sms .mp-screen { display: flex; flex-direction: column; gap: 8px; padding: 22px 12px 18px; background: #F7F6F3; }
.sms-sys { align-self: center; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #8A877F; margin-bottom: 4px; }
.sms { max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: .84rem; line-height: 1.35; }
.sms.out { align-self: flex-end; background: var(--black); color: var(--white); border-bottom-right-radius: 4px; }
.sms.in { align-self: flex-start; background: #E4E1DA; border-bottom-left-radius: 4px; }
.sms-booked { align-self: center; margin-top: 6px; padding: 7px 12px; border: 2.5px solid var(--black); background: var(--yellow); font-family: var(--f-head); font-weight: 900; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); }
.is-active .mock-sms .mp-screen > *, .is-in > .mock-sms .mp-screen > * { animation: msg .4s var(--ease) both; }
.mock-sms .mp-screen > :nth-child(2) { animation-delay: .5s !important; }
.mock-sms .mp-screen > :nth-child(3) { animation-delay: 1.1s !important; }
.mock-sms .mp-screen > :nth-child(4) { animation-delay: 1.7s !important; }
.mock-sms .mp-screen > :nth-child(5) { animation-delay: 2.3s !important; }
.mock-sms .mp-screen > :nth-child(6) { animation-delay: 2.9s !important; }
.mock-sms .mp-screen > :nth-child(7) { animation-delay: 3.5s !important; }
.mock-sms .mp-screen > :nth-child(8) { animation-delay: 4.1s !important; }
@keyframes msg { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* report */
.mock-report { padding: 26px 20px 18px; }
.mr-title { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 110; font-size: 1.1rem; text-transform: uppercase; }
.mr-funnel { display: grid; gap: 12px; margin-top: 16px; }
.mr-row { display: grid; gap: 6px; }
.mr-row span { font-size: .82rem; font-weight: 700; }
.mr-row em { font-style: normal; font-weight: 500; color: var(--ink-soft); }
.mr-row i { display: block; height: 16px; width: var(--w); background: var(--black); }
.mr-yours i { background: var(--yellow); outline: 2px solid var(--black); outline-offset: -2px; }
.is-active .mr-row i, .is-in > .mock-report .mr-row i { animation: grow 1s var(--ease) both; }
.mr-row:nth-child(2) i { animation-delay: .25s; } .mr-row:nth-child(3) i { animation-delay: .5s; }
@keyframes grow { from { width: 0; } }
.mr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 2px dashed #D9D6CF; }
.mr-k { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.mr-v { margin-top: 4px; font-weight: 700; font-size: .86rem; }
.mr-note { margin-top: 14px; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; color: #8A877F; }

/* ---------- Three numbers ---------- */
.numbers { padding: var(--section) 0; }
.numbers .head { margin-bottom: 40px; }
.num-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: n; }
.num-card { position: relative; padding: 24px; border: 3px solid var(--yellow); background: var(--black-2); }
.num-card:not(:last-child)::after { content: "→"; position: absolute; right: -32px; top: 50%; transform: translateY(-50%); color: var(--yellow); font-weight: 900; font-size: 1.4rem; }
.num-who { display: block; font-family: var(--f-mono); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.num-card b { display: block; margin-top: 10px; font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1; text-transform: uppercase; }
.num-card p { margin-top: 10px; color: rgba(255,255,255,.66); font-size: .98rem; }
.num-yours { background: var(--white); color: var(--black); border-color: var(--white); box-shadow: 8px 8px 0 var(--yellow); }
.num-yours .num-who { color: var(--black); }
.num-yours p { color: var(--ink-soft); }
.num-foot { margin-top: 32px; color: rgba(255,255,255,.72); font-size: 1.05rem; }

/* ---------- Problems on light ground ---------- */
.problems .ticket { box-shadow: 8px 8px 0 var(--yellow); }

/* ---------- Values (home, compact) ---------- */
.values-home { padding: var(--section) 0; }
.values-home .head { margin-bottom: 40px; }
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.badges li { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--white); border: 3px solid var(--black); font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 108; font-size: 1.05rem; line-height: 1.1; text-transform: uppercase; }
.badges li::before { content: ""; flex: none; width: 32px; height: 32px; background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23FFC20E' stroke-width='3.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 20px no-repeat; }
.values-home .creed-close { margin-top: 48px; }
.creed-close .text-link { margin-top: 8px; }

/* ---------- Trades ticker (light, reversed) ---------- */
.ticker-alt { background: var(--bone); color: var(--black); border-top: 3px solid var(--black); border-bottom: 3px solid var(--black); }
.ticker-alt .ticker-track { animation-direction: reverse; animation-duration: 48s; }
.ticker-alt b { background: var(--yellow); outline: 2px solid var(--black); }

/* ---------- CTA band ---------- */
.cta-band { padding: 0 0 var(--section); }
.cta-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px 80px; align-items: end; padding-top: var(--section); }
.cta-side .btn { margin-top: 32px; }

/* ---------- Services page ---------- */
.svc { padding: var(--section) 0; }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px var(--col-gap, 80px); align-items: center; }
.svc-flip .svc-visual { order: -1; }
.svc-num { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(3.5rem, 6vw, 5rem); line-height: .8; letter-spacing: -.04em; color: var(--yellow); -webkit-text-stroke: 3px var(--black); paint-order: stroke fill; margin-bottom: 24px; }
.svc .lede { margin-top: 24px; }
.svc .checks { margin-top: 28px; }
.svc-visual { display: flex; justify-content: center; padding: 16px 12px 24px; }
.checks-dark li { border-color: var(--line-dark); color: var(--white); }

/* ---------- Contact page ---------- */
.book-page { padding-bottom: var(--section); }
.book-page .wrap { padding-top: 136px; }
.book-page .lede { margin-top: 24px; }
.next-steps { margin-top: 32px; display: grid; gap: 12px; }
.next-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; font-weight: 600; }
.next-steps span { display: grid; place-items: center; width: 36px; height: 36px; background: var(--black); color: var(--yellow); font-family: var(--f-mono); font-size: .78rem; }

/* ---------- Responsive for the additions ---------- */
@media (max-width: 1100px) {
  .sys { grid-template-columns: 1fr; gap: 24px; }
  .sys-tabs { position: static; flex-direction: row; display: grid; grid-template-columns: repeat(4, 1fr); }
  .sys-tab { justify-content: center; flex-direction: column; gap: 2px; min-height: 64px; padding: 10px 6px; text-align: center; font-size: .9rem; }
  .sys-tab[aria-selected="true"] { transform: translateY(-4px); box-shadow: 0 6px 0 var(--yellow); }
  .badges { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .page-hero { padding-top: 104px; }
  .book-page .wrap { padding-top: 104px; }
  .sys-panel { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .sys-caption p { margin: 0 auto; }
  .sys-visual { min-height: 500px; }
  .num-row { grid-template-columns: 1fr; gap: 28px; }
  .num-card:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -28px; transform: translateX(-50%); font-size: 1.2rem; }
  .svc-grid, .cta-inner { grid-template-columns: 1fr; }
  .svc-flip .svc-visual { order: 0; }
}

@media (max-width: 600px) {
  .page-hero .wrap { padding-bottom: 40px; }
  .page-title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .jump { flex-wrap: nowrap; overflow-x: auto; margin: 32px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 8px; scrollbar-width: none; }
  .jump::-webkit-scrollbar { display: none; }

  .system .head, .numbers .head, .values-home .head { margin-bottom: 28px; }
  .sys-tabs { gap: 6px; }
  .sys-tab { font-size: .76rem; line-height: 1.1; min-height: 58px; border-width: 2.5px; font-variation-settings: "wdth" 92; overflow-wrap: anywhere; }
  .sys-tab span { font-size: .66rem; }
  .sys-visual { min-height: 470px; padding: 20px 4px 20px; }
  .sys-caption h3 { font-size: 1.45rem; margin-bottom: 8px; }
  .sys-caption p { font-size: 1rem; }
  .sys-hint { display: block; margin-top: 16px; text-align: center; font-family: var(--f-mono); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
  .is-manual .sys-hint { visibility: hidden; }
  .mock { box-shadow: 6px 6px 0 var(--black); }
  .mock-phone { max-width: 268px; }
  .mock-phone .mp-screen { min-height: 440px; }

  .num-card { padding: 18px 20px; }
  .num-card p { font-size: .95rem; }
  .num-foot { font-size: 1rem; margin-top: 28px; }

  .problems .tickets { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 16px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .problems .tickets::-webkit-scrollbar { display: none; }
  .problems .ticket { flex: 0 0 78%; scroll-snap-align: start; padding: 20px 20px 24px; }
  .problems .ticket-no { margin-bottom: 28px; }
  .problems .ticket { box-shadow: 5px 5px 0 var(--yellow); }

  .badges { gap: 8px; }
  .badges li { min-width: 0; padding: 14px 10px; gap: 10px; font-size: .86rem; font-variation-settings: "wdth" 80; overflow-wrap: anywhere; }
  .badges li::before { width: 26px; height: 26px; background-size: 16px; }
  .values-home .creed-close { margin-top: 32px; }

  .cta-side .btn { width: 100%; }
  .svc-num { font-size: 3.2rem; margin-bottom: 16px; }
  .svc-grid { gap: 32px; }
  .footer-logo { max-width: 132px; }
  .footer-line { font-size: 1.5rem; }
}


/* ==========================================================================
   Who we back
   ========================================================================== */
.values-home .lede { margin-top: 24px; }
.values-cta { margin-top: 32px; }

/* hero + amplifier */
.back-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px 64px; align-items: center; }
.back-hero .page-title { max-width: 14ch; }
.back-hero .lede { margin-top: 28px; }
.amp { position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; justify-self: center; display: grid; place-items: center; }
.amp-ring { position: absolute; inset: 22%; border: 3px solid var(--yellow); border-radius: 50%; animation: amp 3.6s cubic-bezier(.2,.6,.3,1) infinite; }
.amp-ring:nth-child(2) { animation-delay: 1.2s; }
.amp-ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes amp { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.amp-core { position: relative; z-index: 1; width: 52%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; background: var(--black); color: var(--white); border-radius: 50%; box-shadow: 8px 8px 0 var(--yellow); font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 100; font-size: clamp(.95rem, 1.6vw, 1.2rem); line-height: 1.05; text-transform: uppercase; padding: 12px; }
.amp-out { position: absolute; z-index: 2; background: var(--white); border: 2.5px solid var(--black); padding: 6px 10px; font-family: var(--f-mono); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.amp-a { top: 6%; left: 2%; }
.amp-b { top: 46%; right: -2%; }
.amp-c { bottom: 6%; left: 10%; }

/* the belief: one statement at a time */
.belief { padding: var(--section) 0; }
.beats { display: grid; gap: clamp(48px, 7vw, 96px); margin-top: 16px; }
.beat { display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: baseline; }
.beat span { font-family: var(--f-mono); font-weight: 600; font-size: .85rem; color: var(--yellow); letter-spacing: .1em; }
.beat p { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 108; font-size: clamp(1.75rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.beat em { font-style: normal; color: var(--yellow); }
.beat:last-child p { color: var(--yellow); }
.beat:last-child em { color: var(--white); background: none; }

/* standards as job sheets */
.standards { padding: var(--section) 0; }
.sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sheet { background: var(--white); border: 3px solid var(--black); box-shadow: 10px 10px 0 var(--black); }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; background: var(--black); color: var(--yellow); padding: 10px 20px; font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.sheet-body { padding: clamp(20px, 3vw, 32px); }
.sheet h3 { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 108; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.05; letter-spacing: -.015em; text-transform: uppercase; margin-bottom: 20px; text-wrap: balance; }
.sheet-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.sheet-k { font-family: var(--f-mono); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; color: var(--ink-soft); }
.sheet .checks li { font-size: .95rem; padding-top: 9px; padding-bottom: 9px; }
.xs li { position: relative; padding: 9px 0 9px 30px; font-size: .95rem; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(17,17,16,.35); border-bottom: 1px solid var(--line); }
.xs li:last-child { border-bottom: 0; }
.xs li::before, .xs li::after { content: ""; position: absolute; left: 4px; top: 20px; width: 16px; height: 3px; background: #B8331B; transform: rotate(45deg); }
.xs li::after { transform: rotate(-45deg); }

/* ambition */
.ambition { padding: var(--section) 0; }
.amb { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.amb-card { padding: clamp(24px, 3.5vw, 40px); background: var(--white); border: 3px solid var(--black); }
.amb-dark { background: var(--black); color: var(--white); box-shadow: 10px 10px 0 var(--yellow); }
.amb-k { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.amb-dark .amb-k { color: var(--yellow); }
.amb-card li { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 106; font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.2; text-transform: uppercase; padding: 12px 0; border-bottom: 2px solid var(--line); }
.amb-dark li { border-color: var(--line-dark); }
.amb-card li:last-child { border-bottom: 0; }
.amb-and { font-family: var(--f-head); font-weight: 900; font-size: clamp(4rem, 9vw, 8rem); line-height: 1; color: var(--yellow); -webkit-text-stroke: 3px var(--black); paint-order: stroke fill; }

/* the conviction */
.decline { padding: var(--section) 0; }
.decline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; align-items: start; }
.decline-title { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 80; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; }
.decline-title .line-block { display: inline-block; margin-top: .14em; background: var(--yellow); color: var(--black); padding: .08em .18em .1em; transform: rotate(-1.2deg); box-shadow: .12em .12em 0 var(--white); }
.decline-copy p { font-size: 1.12rem; color: rgba(255,255,255,.78); }
.decline-copy p + p { margin-top: 16px; }
.decline-copy .decline-q { margin-top: 36px; font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.qs { margin-top: 12px; border-top: 2px solid var(--black-3); }
.qs li { padding: 14px 0 14px 34px; position: relative; border-bottom: 2px solid var(--black-3); font-family: var(--f-head); font-weight: 800; font-variation-settings: "wdth" 104; font-size: 1.08rem; line-height: 1.3; }
.qs li::before { content: "?"; position: absolute; left: 0; top: 13px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--yellow); color: var(--black); font-weight: 900; font-size: .85rem; }

.back-close { padding: var(--section) 0; }
.back-close .creed-close { margin-top: 0; }
.back-close .btn { margin-top: 8px; justify-self: start; }

@media (max-width: 920px) {
  .back-hero-grid, .sheets, .decline-grid { grid-template-columns: 1fr; }
  .amp { max-width: 340px; }
  .amb { grid-template-columns: 1fr; gap: 8px; }
  .amb-and { text-align: center; font-size: 4.5rem; }
}
@media (max-width: 600px) {
  .amp { max-width: 300px; margin-top: 8px; }
  .amp-out { font-size: .66rem; padding: 5px 8px; }
  .amp-b { right: 0; }
  .beat { grid-template-columns: 1fr; gap: 8px; }
  .beat p { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  .beats { gap: 56px; }
  .sheet { box-shadow: 6px 6px 0 var(--black); }
  .sheet-cols { grid-template-columns: 1fr; gap: 12px; }
  .amb-dark { box-shadow: 6px 6px 0 var(--yellow); }
  .back-close .btn { width: 100%; }
}


/* ==========================================================================
   The Argo Standard
   ========================================================================== */
.hero-ethic { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 28px; font-weight: 600; font-size: .95rem; }
.hero-ethic .tag-dot { width: 8px; height: 8px; background: var(--yellow); outline: 2px solid var(--black); }
.hero-ethic a { font-weight: 800; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--yellow); }

/* stamps that land */
@keyframes stampin { 0% { opacity: 0; transform: rotate(-3deg) scale(1.3); } 70% { opacity: 1; transform: rotate(-3deg) scale(.94); } 100% { opacity: 1; transform: rotate(-3deg) scale(1); } }

/* hero */
.std-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px 72px; align-items: center; }
.std-hero .page-title { max-width: 12ch; font-size: clamp(2.8rem, 6.4vw, 6rem); }
.std-hero .lede { margin-top: 28px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink); max-width: 30em; }
.charter { margin: 0; background: var(--white); border: 3px solid var(--black); box-shadow: 12px 12px 0 var(--black); transform: rotate(-1deg); }
.charter-head { display: flex; justify-content: space-between; gap: 12px; background: var(--black); color: var(--yellow); padding: 12px 20px; font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.charter-head span:last-child { color: rgba(255,255,255,.6); }
.charter-list { padding: 16px 22px 6px; counter-reset: c; }
.charter-list li { counter-increment: c; position: relative; display: flex; align-items: baseline; gap: 14px; padding: 10px 34px 10px 0; border-bottom: 1px solid var(--line); font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 106; font-size: 1.02rem; line-height: 1.2; text-transform: uppercase; }
.charter-list li::before { content: counter(c, decimal-leading-zero); font-family: var(--f-mono); font-weight: 600; font-size: .72rem; color: var(--ink-soft); }
.charter-list li::after { content: ""; position: absolute; right: 2px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23111110' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px no-repeat; border: 2px solid var(--black); }
.charter-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding: 18px 22px 22px; }
.charter-note { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.js .charter-list li::after { opacity: 0; transform: scale(.4); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.js .charter.is-in .charter-list li::after { opacity: 1; transform: none; }
.js .charter.is-in .charter-list li:nth-child(1)::after { transition-delay: .5s; }
.js .charter.is-in .charter-list li:nth-child(2)::after { transition-delay: .8s; }
.js .charter.is-in .charter-list li:nth-child(3)::after { transition-delay: 1.1s; }
.js .charter.is-in .charter-list li:nth-child(4)::after { transition-delay: 1.4s; }
.js .charter.is-in .charter-list li:nth-child(5)::after { transition-delay: 1.7s; }
.js .charter.is-in .charter-list li:nth-child(6)::after { transition-delay: 2s; }
.js .charter.is-in .charter-list li:nth-child(7)::after { transition-delay: 2.3s; }
.js .charter .stamp { opacity: 0; }
.js .charter.is-in .stamp { animation: stampin .5s 2.8s var(--ease) both; }

/* why */
.std-why { padding: var(--section) 0; }
.std-why-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px 80px; align-items: center; }
.amp-dark .amp-core { background: var(--white); color: var(--black); }
.why-pair { margin-top: 32px; display: grid; gap: 12px; }
.why-pair li { display: grid; gap: 4px; padding: 18px 20px; border: 2px solid var(--black-3); background: var(--black-2); font-size: 1.1rem; }
.why-pair span { font-family: var(--f-mono); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.why-pair .why-bad { border-color: #5A2A1F; }
.why-pair .why-bad span { color: #FF7A5C; }
.why-close { margin-top: 28px; font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 100; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.05; text-transform: uppercase; color: var(--yellow); }

/* hard lines */
.lines { padding: var(--section) 0; }
.hard-lines { border-top: 3px solid var(--black); }
.hard { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 24px; align-items: center; padding: 22px 0; border-bottom: 2px solid var(--black); }
.hard-n { font-family: var(--f-mono); font-weight: 600; font-size: .8rem; color: var(--ink-soft); }
.hard h3 { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 100; font-size: clamp(1.5rem, 3.6vw, 2.8rem); line-height: 1; text-transform: uppercase; letter-spacing: -.015em; }
.hard s { text-decoration: none; background: linear-gradient(var(--yellow), var(--yellow)) 0 58% / var(--strike, 100%) 30% no-repeat; padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .hard s { --strike: 0%; transition: background-size .7s .25s var(--ease); }
.js .hard.is-in s { background-size: 100% 30%; }
.hard p { margin-top: 8px; color: var(--ink-soft); max-width: 46em; }
.hard-tag { padding: 7px 12px; border: 2.5px solid var(--black); background: var(--black); color: var(--yellow); font-family: var(--f-head); font-weight: 900; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2deg); white-space: nowrap; }

/* mirror */
.mirror { padding: var(--section) 0; }
.mirror-table { border-top: 3px solid var(--yellow); }
.mt-row { display: grid; grid-template-columns: 1fr 56px 1.5fr; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 2px solid var(--black-3); }
.mt-head { padding: 14px 0; font-family: var(--f-mono); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.mt-head span:last-child { color: var(--yellow); }
.mt-row > span:first-child:not([role="columnheader"]) { font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 106; font-size: 1.2rem; text-transform: uppercase; line-height: 1.15; }
.mt-row b { display: grid; place-items: center; width: 44px; height: 44px; background: var(--yellow); color: var(--black); font-weight: 900; font-size: 1.4rem; justify-self: center; }
.mt-row strong { display: block; color: var(--yellow); font-family: var(--f-head); font-weight: 850; text-transform: uppercase; font-size: 1.05rem; margin-bottom: 4px; }
.mt-row > span:last-child { color: rgba(255,255,255,.75); }

/* scenarios */
.calls { padding: var(--section) 0; }
.call-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.call { background: var(--white); border: 3px solid var(--black); box-shadow: 8px 8px 0 var(--black); padding: 24px; display: grid; gap: 14px; align-content: start; }
.call-k { font-family: var(--f-mono); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.call-s { font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.call-v { padding-top: 14px; border-top: 2px dashed var(--line); font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 104; font-size: 1.1rem; line-height: 1.25; }
.call-v span { display: inline-block; margin-right: 10px; padding: 3px 8px; background: var(--yellow); border: 2px solid var(--black); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }

/* home: ethics block */
.ethics-home { padding: var(--section) 0; }
.ethics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 80px; align-items: center; }
.ethics-home .lede { margin-top: 24px; color: var(--ink); }
.ethics-cta { margin-top: 32px; }
.ethics-card { position: relative; background: var(--black); color: var(--white); border: 3px solid var(--black); box-shadow: 12px 12px 0 var(--yellow); padding: 28px 28px 32px; }
.ethics-k { font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 10px; }
.ethics-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-dark); font-family: var(--f-head); font-weight: 850; font-variation-settings: "wdth" 104; font-size: 1.1rem; text-transform: uppercase; }
.ethics-card .stamp { position: absolute; right: 18px; bottom: -18px; }
.js .ethics-card .stamp { opacity: 0; }
.js .ethics-card.is-in .stamp { animation: stampin .5s .8s var(--ease) both; }

.contact-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-soft); max-width: 30em; }
.contact-note a { color: var(--ink); font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* contact: standard acknowledgement */
.standard-check { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 16px; background: var(--white); border: 2px solid var(--black); border-left: 8px solid var(--yellow); cursor: pointer; font-size: .95rem; line-height: 1.45; }
.standard-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--black); cursor: pointer; }
.standard-check input.is-invalid { outline: 3px solid #B8331B; outline-offset: 2px; }
.standard-check a { font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.book-page .lede a { font-weight: 700; color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

@media (max-width: 920px) {
  .std-hero-grid, .std-why-grid, .ethics-grid { grid-template-columns: 1fr; }
  .charter { max-width: 480px; transform: none; }
  .amp-dark { max-width: 260px; justify-self: start; }
  .call-grid { grid-template-columns: 1fr; }
  .mt-row { grid-template-columns: 1fr; gap: 10px; }
  .mt-head { display: none; }
  .mt-row b { justify-self: start; width: 36px; height: 36px; font-size: 1.1rem; }
}
@media (max-width: 600px) {
  .charter { box-shadow: 6px 6px 0 var(--black); }
  .charter-list { padding: 10px 16px 4px; }
  .charter-list li { font-size: .92rem; }
  .charter-foot { padding: 14px 16px 18px; }
  .hard { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .hard-tag { justify-self: start; margin-top: 6px; font-size: .7rem; }
  .hard h3 { font-size: clamp(1.45rem, 7.6vw, 2rem); }
  .call { box-shadow: 5px 5px 0 var(--black); padding: 20px; }
  .ethics-card { box-shadow: 6px 6px 0 var(--yellow); padding: 22px 20px 30px; }
  .ethics-list li { font-size: .98rem; }
  .ethics-cta { width: 100%; }
  .hero-ethic { font-size: .9rem; }
}


/* ==========================================================================
   Standard page — "Growth amplifies how you treat people" (scroll story)
   ========================================================================== */
.std-hero .wrap { padding-bottom: 48px; }
.std-hero .page-title { max-width: 14ch; }
.std-hero .lede { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 28em; color: var(--ink); }
.scroll-cue { margin-top: 32px; font-family: var(--f-mono); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.story-scroll { padding: 0; }
.ss-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 0 64px; }
.ss-stage { order: 2; position: sticky; top: 96px; height: calc(100vh - 128px); display: flex; align-items: center; }
.ss-map { margin: 0; width: 100%; }
.ss-frame { position: relative; background: var(--white); border: 3px solid var(--black); box-shadow: 10px 10px 0 var(--black); padding: 36px 14px 14px; }
.ss-k { position: absolute; top: 10px; left: 14px; line-height: 1.3; font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.town { width: 100%; height: auto; display: block; overflow: visible; }

/* houses */
.town .h-in { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; transform: scale(.5); transition: opacity .5s var(--ease), transform .5s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(var(--d) * 90ms); }
.town .h-wall { fill: var(--bone); stroke: var(--black); stroke-width: 2.2; transition: fill .4s; transition-delay: calc(var(--d) * 110ms); }
.town .h-roof { fill: var(--black); stroke: var(--black); stroke-width: 2.2; stroke-linejoin: round; transition: fill .4s; transition-delay: calc(var(--d) * 110ms); }
.town .h-win { fill: var(--white); stroke: var(--black); stroke-width: 1.6; transition: fill .4s; transition-delay: calc(var(--d) * 110ms); }
.town .h-door { fill: var(--black); }
.town .h-crack { fill: none; stroke: #111110; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.town .h-ok { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .3s, transform .35s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--d) * 110ms + .25s); }
.town .h-ok circle { fill: var(--black); }
.town .h-ok path { fill: none; stroke: var(--yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.town .link { stroke: var(--yellow-deep); stroke-width: 1.6; stroke-dasharray: 3 4; opacity: 0; transition: opacity .4s, stroke .4s; transition-delay: calc(var(--d) * 60ms); }
.town .rings circle { fill: none; stroke: var(--yellow); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.town .shop-sign { fill: var(--yellow); stroke: var(--black); stroke-width: 3; transition: fill .4s; }
.town .shop-door { fill: var(--yellow); transition: fill .4s; }

/* map label that always matches the step */
.ss-frame .ss-k { margin: 0; display: grid; right: 14px; }
.ss-k span { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.ss-k-bad { color: #C0361C; }
.ss-map[data-step="1"] [data-for="1"], .ss-map[data-step="2"] [data-for="2"], .ss-map[data-step="3"] [data-for="3"], .ss-map[data-step="4"] [data-for="4"], .ss-map[data-step="5"] [data-for="5"] { opacity: 1; transform: none; }

/* crew row */
.ss-crew { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--line); }
.ss-crew-k { font-weight: 600; font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.hat { width: 22px; height: 13px; background: var(--yellow); border: 2.5px solid var(--black); border-radius: 12px 12px 2px 2px; position: relative; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hat::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -4px; height: 3px; background: var(--black); }
.hat:nth-of-type(n) { transition-delay: calc(var(--i, 0) * 80ms); }
.hat:nth-of-type(2) { --i: 1; } .hat:nth-of-type(3) { --i: 2; } .hat:nth-of-type(4) { --i: 3; } .hat:nth-of-type(5) { --i: 4; } .hat:nth-of-type(6) { --i: 5; } .hat:nth-of-type(7) { --i: 6; } .hat:nth-of-type(8) { --i: 7; }

.ss-stamp { position: absolute; left: 50%; top: 46%; padding: 10px 14px; border: 3px solid var(--black); font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 104; font-size: clamp(.95rem, 2.4vw, 1.25rem); letter-spacing: .03em; text-transform: uppercase; white-space: normal; width: max-content; max-width: 86%; text-align: center; line-height: 1.15; opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(.7); transition: opacity .25s, transform .45s cubic-bezier(.3,1.8,.5,1); pointer-events: none; }
.ss-stamp-no { background: #C0361C; color: var(--white); }
.ss-stamp-yes { background: var(--yellow); color: var(--black); top: 76%; }

/* ---- step states ---- */
/* 1: the shop and its nearby customers */
.ss-map[data-step] .h-near .h-in { opacity: 1; transform: none; }
.ss-map[data-step="1"] .link-near { opacity: 1; }
.ss-map[data-step] .hat:nth-of-type(-n+2) { opacity: 1; transform: none; }

/* 2: our ads expand its reach across town */
.ss-map:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .h-in { opacity: 1; transform: none; }
.ss-map[data-step="2"] .link { opacity: 1; }
.ss-map:is([data-step="4"],[data-step="5"]) .link { opacity: .35; }
.ss-map:is([data-step="2"],[data-step="4"],[data-step="5"]) .rings circle { animation: ripple 3s cubic-bezier(.2,.6,.3,1) infinite; }
.ss-map .rings circle:nth-child(2) { animation-delay: 1s !important; }
.ss-map .rings circle:nth-child(3) { animation-delay: 2s !important; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.15); } }

/* 3: a dishonest owner — harm spreads, we refuse to amplify it, the rest of town is spared */
.ss-map[data-step="3"] .shop-sign, .ss-map[data-step="3"] .shop-door { fill: #C0361C; }
.ss-map[data-step="3"] .link-near { opacity: 1; stroke: #C0361C; }
.ss-map[data-step="3"] .link:not(.link-near) { animation: reach-cut 3.4s both; }
@keyframes reach-cut { 0%, 45% { opacity: 1; stroke: #C0361C; } 60%, 100% { opacity: 0; } }
.ss-map[data-step="3"] .h-near .h-wall { fill: #F4D9D1; }
.ss-map[data-step="3"] .h-near .h-roof { fill: #C0361C; }
.ss-map[data-step="3"] .h-near .h-crack { opacity: 1; transition: opacity .3s calc(var(--d) * 120ms); }
.ss-map[data-step="3"] .h:not(.h-near) .h-wall { animation: harm-wall 3.4s calc(var(--d) * 90ms) both; }
.ss-map[data-step="3"] .h:not(.h-near) .h-crack { animation: harm-crack 3.4s calc(var(--d) * 90ms) both; }
.ss-map[data-step="3"] .h:not(.h-near) .h-roof { animation: harm-roof 3.4s calc(var(--d) * 90ms) both; }
@keyframes harm-roof { 0% { fill: var(--black); } 20%, 50% { fill: #C0361C; } 70%, 100% { fill: var(--black); } }
@keyframes harm-wall { 0% { fill: var(--bone); } 20%, 50% { fill: #F4D9D1; } 70%, 100% { fill: var(--bone); } }
@keyframes harm-crack { 0% { opacity: 0; } 20%, 50% { opacity: 1; } 70%, 100% { opacity: 0; } }
.ss-map[data-step="3"] .rings circle { stroke: #C0361C; animation: ripple-cut 3.4s both; }
@keyframes ripple-cut { 0% { opacity: .9; transform: scale(.3); } 45% { opacity: .7; transform: scale(1); } 65%, 100% { opacity: 0; transform: scale(.35); } }
.ss-map .ss-stamp-no { top: 80%; }
.ss-map[data-step="3"] .ss-stamp-no { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg); transition-delay: 1.5s; }

/* 4–5: an honest owner — every home gets a new roof, done right */
.ss-map:is([data-step="4"],[data-step="5"]) .h-roof { fill: var(--yellow); }
.ss-map:is([data-step="4"],[data-step="5"]) .h-win { fill: var(--yellow); }
.ss-map:is([data-step="4"],[data-step="5"]) .h-ok { opacity: 1; transform: none; }
.ss-map:is([data-step="4"],[data-step="5"]) .hat:nth-of-type(-n+6) { opacity: 1; transform: none; }
.ss-map[data-step="5"] .hat { opacity: 1; transform: none; }
.ss-map[data-step="5"] .ss-stamp-yes { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg); transition-delay: .9s; }
.ss-map[data-step="5"] .ss-frame { box-shadow: 10px 10px 0 var(--yellow); transition: box-shadow .5s; }

/* text steps */
.ss-steps { order: 1; padding: 12vh 0 30vh; }
.ss-step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .4s var(--ease); }
.ss-step.is-active { opacity: 1; }
.ss-step span { font-family: var(--f-mono); font-weight: 600; font-size: .8rem; letter-spacing: .14em; color: var(--ink-soft); }
.ss-step span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--yellow); vertical-align: 1px; }
.ss-step h2 { margin-top: 12px; font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 96; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.ss-step p { margin-top: 14px; font-size: 1.1rem; color: var(--ink-soft); max-width: 26em; }
.ss-step-no span::before { background: #C0361C; }

@media (max-width: 919px) {
  .ss-grid { grid-template-columns: 1fr; }
  .ss-stage { order: 0; top: 72px; height: auto; z-index: 3; background: var(--bone); padding: 16px 0 14px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); box-shadow: 0 12px 16px -12px rgba(17,17,16,.25); }
  .ss-steps { order: 1; padding: 4vh 0 40vh; }
  .ss-step { min-height: 52vh; justify-content: flex-start; padding-top: 2vh; }
  .ss-step h2 { font-size: clamp(1.6rem, 7.6vw, 2.2rem); }
  .ss-step p { font-size: 1rem; }
}
@media (max-width: 600px) {
  .ss-frame { box-shadow: 6px 6px 0 var(--black); padding: 30px 8px 10px; }
  .ss-map[data-step="5"] .ss-frame { box-shadow: 6px 6px 0 var(--yellow); }
  .hat { width: 18px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-map .rings circle { animation: none !important; opacity: .5 !important; transform: scale(.9) !important; }
  .ss-step { opacity: 1; }
}

/* the line */
.lines.section-light { padding: clamp(64px, 9vw, 120px) 0; }
.line-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.line-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: var(--white); color: var(--black); border: 3px solid var(--black); font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 100; font-size: clamp(1rem, 1.6vw, 1.2rem); text-transform: uppercase; }
.line-chips s, .ethics-list s { text-decoration: none; }
.line-chips li::before, .ethics-list li::before { content: ""; flex: none; width: 22px; height: 22px; background: #C0361C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.line-foot { margin-top: 28px; font-size: 1.15rem; }
.line-foot strong { font-family: var(--f-head); font-weight: 900; text-transform: uppercase; background: var(--yellow); padding: 0 6px; }

/* same rules for Argo */
.mirror.section-black { padding: clamp(64px, 9vw, 120px) 0; }
.mirror-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.mirror-grid li { padding: 20px; border: 2px solid var(--black-3); border-top: 5px solid var(--yellow); background: var(--black-2); display: grid; gap: 8px; align-content: start; }
.mirror-grid b { font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 106; font-size: 1.15rem; text-transform: uppercase; color: var(--yellow); }
.mirror-grid span { color: rgba(255,255,255,.75); font-size: .95rem; }

@media (max-width: 919px) {
  .scene-head { flex-direction: column; align-items: stretch; }
  .scene-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--black); background: var(--white); }
  .scene-toggle button { min-height: 48px; border: 0; background: transparent; font-family: var(--f-head); font-weight: 900; font-variation-settings: "wdth" 106; font-size: 1rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; color: var(--black); }
  .scene-toggle button[aria-selected="true"] { background: var(--black); color: var(--yellow); }
  .scene-toggle .nudge { animation: nudge 1.2s ease-in-out infinite; }
  @keyframes nudge { 50% { background: var(--yellow); } }
  .calls-wrap { grid-template-columns: 1fr; }
  .story:not(.is-shown) { display: none; }
  .mirror-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .scene { padding: 40px 0 56px; }
  .scene-intro { font-size: .98rem; align-items: flex-start; }
  .story { box-shadow: 6px 6px 0 var(--black); }
  .bubbles { grid-template-columns: 1fr 30px 1fr; padding: 12px 10px 0; }
  .bub { min-height: 96px; padding: 8px 9px 10px; }
  .bub .st { font-size: .84rem; }
  .bub.say .st { font-size: .9rem; }
  .match { width: 26px; height: 26px; font-size: 1.05rem; }
  .owner { max-width: 280px; }
  .caption .st { font-size: 1.05rem; }
  .meter b { font-size: 1.5rem; }
  .line-chips li { padding: 10px 12px; font-size: .92rem; }
  .mirror-grid { grid-template-columns: 1fr; gap: 10px; }
  .mirror-grid li { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .owner-a .pupils, .scene-phone { animation: none; }
  .verdict { opacity: 1; }
}

@media (hover: none) {
  .btn:hover, .btn-outline:hover { transform: none; box-shadow: none; }
  .btn-outline:hover { --bg: transparent; --fg: var(--black); }
  .ticket:hover { transform: none; background: var(--black-2); }
  .service:hover { transform: none; box-shadow: 10px 10px 0 var(--black); }
  .trade-list li:hover { transform: none; background: transparent; color: inherit; border-color: var(--black-3); }
  .crew-card:hover { transform: none; }
}
@media (hover: none) and (max-width: 600px) {
  .service:hover { box-shadow: 6px 6px 0 var(--black); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .stage::before { transform: none !important; }
  .amp-ring { opacity: .7; transform: scale(1.12); }
  .amp-ring:nth-child(2) { opacity: .45; transform: scale(1.38); }
  .amp-ring:nth-child(3) { opacity: .22; transform: scale(1.64); }
  .js .hard s { --strike: 100%; background-size: 100% 30%; }
  .js .charter-list li::after, .js .charter .stamp, .js .ethics-card .stamp { opacity: 1; transform: none; }
  .js .charter .stamp, .js .ethics-card .stamp { transform: rotate(-3deg); }
}