/* ==========================================================================
   SpineFM v3: "Forged"
   Dark steel substrate, machined copper, cut-corner plates and real depth.
   The palette still comes from the logo: navy, copper, sand, plus bone.
   ========================================================================== */

:root {
  --bg: #03101D;          /* deep navy-black */
  --bg-2: #020B14;        /* deepest, for bars and fields */
  --s1: #071B2E;          /* raised plate */
  --s2: #0B2439;          /* higher plate */
  --ink: #01213A;         /* logo navy */
  --tx: #EEE5D5;          /* bone text */
  --copper: #C6653A;
  --copper-hi: #E3875A;   /* copper that reads as small text on dark */
  --copper-lo: #8E3F1C;
  --sand: #DBB994;
  --signal: #4AF626;

  --muted: rgba(238, 229, 213, .62);
  --line: rgba(219, 185, 148, .12);
  --line-strong: rgba(219, 185, 148, .24);

  --metal: linear-gradient(180deg, #F4AE84 0%, #DB7646 42%, #B2572B 70%, #8E3F1C 100%);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .45);
  --cut: 14px;
  --gut: clamp(16px, 3.2vw, 48px);
  --head-h: 62px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-sans);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 3px; }
::selection { background: var(--copper); color: var(--bg); }

/* cut-corner plate: top-left and bottom-right corners sheared off */
.cut, .btn, .trade__photo, .trade__icon, .cell, .quote, .stress article, .form, .zone, .channel__icon, .actionbar a, .mnav .btn {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 400; background: var(--copper); color: var(--bg); padding: 12px 16px; font-weight: 600; }
.skip:focus { left: 16px; top: 16px; }

/* ---------- mark fills (flat depth version) ---------- */
.c-navy   { fill: var(--ink); }
.c-copper { fill: var(--copper); }
.c-sand   { fill: var(--sand); }
.c-paper  { fill: var(--tx); }
.pc--navy .pc__face   { fill: #EEE5D5; }  .pc--navy .pc__side   { fill: #8F877B; }
.pc--copper .pc__face { fill: #C6653A; }  .pc--copper .pc__side { fill: #6E3017; }
.pc--sand .pc__face   { fill: #DBB994; }  .pc--sand .pc__side   { fill: #8C6B48; }

/* ---------- type ---------- */
.kicker {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--copper-hi);
}
.kicker::before { content: ""; width: 18px; height: 2px; background: var(--copper); }
.kicker--sand { color: var(--sand); }
.pip { display: none; }

.mega, .macro {
  margin: 0;
  font-weight: 800; letter-spacing: -.058em; line-height: .92; text-wrap: balance;
  color: var(--tx);
}
.mega  { font-size: clamp(2.6rem, 5.6vw, 6rem); }
.macro { font-size: clamp(2.1rem, 4.4vw, 4.6rem); }
.mega .line { display: block; }
/* machined copper */
.is-copper, .is-copper .wi {
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.fig-cap { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- buttons: machined plates ---------- */
.btn {
  --h: 46px;
  --bg-a: #DA7A4B; --bg-b: #C6653A; --bg-c: #A9522A; --fg: #1A0B04;
  position: relative;
  display: inline-flex; align-items: stretch;
  height: var(--h); margin: 0; padding: 0; border: 0;
  --cut: 10px;
  background: linear-gradient(180deg, var(--bg-a), var(--bg-b) 55%, var(--bg-c));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .28);
  color: var(--fg);
  font-family: var(--f-sans); font-weight: 650; font-size: 15px; letter-spacing: -.01em; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: filter .2s, transform .2s var(--ease);
}
.btn:hover { filter: brightness(1.1) saturate(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); filter: brightness(.95); }
.btn__label { flex: 1; display: flex; align-items: center; padding: 0 18px; }
.btn__icon { display: grid; place-items: center; width: var(--h); border-left: 1px solid rgba(0, 0, 0, .22); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .15); }
.btn__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover .btn__icon svg { transform: translateX(3px); }
.btn--ink {
  --bg-a: #11304B; --bg-b: #0B2439; --bg-c: #071B2E; --fg: var(--tx);
  box-shadow: inset 0 1px 0 rgba(219, 185, 148, .25), inset 0 -2px 0 rgba(0, 0, 0, .4);
}
.btn--ink .btn__icon { border-left-color: rgba(219, 185, 148, .15); box-shadow: none; color: var(--copper-hi); }
.btn--xl { --h: 52px; font-size: 15.5px; }
.btn--xl .btn__label { padding: 0 22px; }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   TELEMETRY + MASTHEAD
   ========================================================================== */
.telemetry { background: var(--bg-2); color: var(--muted); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.telemetry__row { display: flex; align-items: stretch; }
.t-cell { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-right: 1px solid var(--line); white-space: nowrap; }
.t-cell output { font-weight: 600; color: var(--tx); }
.t-last { border-right: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px rgba(74, 246, 38, .7); animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .3; } }

.masthead {
  position: sticky; top: 0; z-index: 50;
  height: var(--head-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gut);
  background: rgba(3, 16, 29, .78);
  -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { height: 40px; width: auto; }
.brand__word { height: 22px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { position: relative; padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover { color: var(--tx); }
.nav a:hover::after { transform: scaleX(1); }
.masthead__cta { --h: 38px; font-size: 13.5px; }
.masthead__cta .btn__label { padding: 0 14px; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--metal); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; box-shadow: 0 0 12px rgba(227, 135, 90, .6); }

.menu-btn { display: none; width: 42px; height: 38px; margin-left: auto; padding: 0; border: 1px solid var(--line-strong); background: var(--s1); cursor: pointer; place-content: center; gap: 5px; }
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--tx); transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mnav {
  position: fixed; inset: var(--head-h) 0 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px var(--gut) calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 60% at 100% 100%, rgba(198, 101, 58, .18), transparent 60%), var(--bg);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s cubic-bezier(.76, 0, .24, 1);
}
.mnav[hidden] { display: flex; visibility: hidden; }
.mnav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mnav nav { display: grid; }
.mnav nav a {
  display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; text-decoration: none;
  opacity: 0; transform: translateY(18px); transition: opacity .4s, transform .5s var(--ease), color .2s;
}
.mnav nav a span { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--copper-hi); }
.mnav nav a:hover { color: var(--sand); }
.mnav.is-open nav a { opacity: 1; transform: none; }
.mnav.is-open nav a:nth-child(2) { transition-delay: .05s; }
.mnav.is-open nav a:nth-child(3) { transition-delay: .1s; }
.mnav.is-open nav a:nth-child(4) { transition-delay: .15s; }
.mnav.is-open nav a:nth-child(5) { transition-delay: .2s; }
.mnav__foot p { margin: 12px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; color: var(--muted); text-align: center; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  background:
    radial-gradient(60% 80% at 80% 45%, rgba(198, 101, 58, .16), transparent 65%),
    radial-gradient(50% 60% at 0% 0%, rgba(219, 185, 148, .05), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.6vw, 56px) var(--gut) clamp(24px, 2.6vw, 36px); }
.lede { max-width: 34em; margin: 22px 0 0; font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.5; color: var(--muted); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.specs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: clamp(24px, 2.6vw, 36px) 0 0;
}
.specs div {
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent), var(--s1);
  box-shadow: var(--bevel);
  --cut: 8px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.specs dt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 5px 0 0; font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -.02em; }
.specs dd[data-to] { font-size: 22px; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero__figure { position: relative; margin: 0; min-height: min(72svh, 640px); display: grid; grid-template-rows: 1fr auto; padding: 18px var(--gut) 16px; }
.glow { position: absolute; inset: 10% 5% 18%; background: radial-gradient(closest-side, rgba(227, 135, 90, .28), rgba(198, 101, 58, .08) 55%, transparent); filter: blur(10px); pointer-events: none; }
.sunburst { display: none; }
.logo3d { position: relative; min-height: 380px; cursor: grab; touch-action: pan-y; }
.logo3d:active { cursor: grabbing; }
.logo3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo3d__fallback { position: absolute; inset: 8% 0; margin: auto; height: 84%; width: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); transition: opacity .4s; }
.logo3d.is-3d .logo3d__fallback { opacity: 0; }
.legend {
  position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 8px; }
.legend li::before { content: ""; width: 14px; height: 6px; transform: skewY(15deg); background: var(--tone); }
.legend span { color: var(--tx); font-weight: 600; }
.t-copper { --tone: var(--copper); } .t-sand { --tone: var(--sand); } .t-bone { --tone: var(--tx); }
.hero__figure .fig-cap { text-align: right; }

/* ==========================================================================
   HAZARD STRIPES
   ========================================================================== */
.stripes {
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--copper) 0 12px, var(--bg-2) 12px 24px);
  background-size: 33.94px 100%;
  animation: stripes 1.4s linear infinite;
  box-shadow: 0 0 24px rgba(198, 101, 58, .25);
}
.stripes--rev { animation-direction: reverse; }
@keyframes stripes { to { background-position: 33.94px 0; } }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px); column-gap: 40px; align-items: end;
  padding: clamp(44px, 5vw, 76px) var(--gut) clamp(22px, 2.4vw, 34px);
}
.sec-head .kicker, .sec-head .macro { grid-column: 1; }
.sec-note { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-bottom: .4em; font-size: 1rem; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__body { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 10fr); gap: 0 12px; padding: 0 var(--gut) clamp(28px, 3vw, 44px) 0; }
.rail-sticky { position: sticky; top: calc(var(--head-h) + 28px); padding: 20px 0 0; }
.rail-mark { width: 64%; max-width: 124px; height: auto; margin: 0 auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.rail-read { margin: 18px 0 0; padding: 0 12px; text-align: center; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--copper-hi); }
.rail-mark .pc { transition: opacity .35s, transform .5s cubic-bezier(.2, 1.3, .4, 1); transform-box: fill-box; transform-origin: center; }
.rail-mark.is-live .pc[data-trade]:not(.is-active) { opacity: .18; }
.rail-mark.is-live .pc[data-frame] { opacity: .45; }
.rail-mark .pc.is-active { transform: translateX(-14%); }

.trades { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trade {
  position: relative;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(200px, 260px); gap: 6px 28px; align-items: center;
  padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 24px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--s1);
  box-shadow: var(--bevel);
  --cut: 18px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background-color .3s, transform .5s var(--ease);
}
.trade::before { content: ""; position: absolute; left: 0; top: var(--cut); bottom: 0; width: 3px; background: var(--metal); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.trade.is-active { background: linear-gradient(90deg, rgba(198, 101, 58, .14), transparent 55%), var(--s2); transform: translateX(6px); }
.trade.is-active::before { transform: scaleY(1); }
.trade__lead { display: grid; gap: 12px; align-self: start; justify-items: start; }
.trade__n { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--copper-hi); }
.trade__icon {
  --cut: 8px;
  display: grid; place-items: center; width: 50px; height: 50px;
  background: linear-gradient(180deg, #123350, #0A2338); box-shadow: var(--bevel);
  color: var(--copper-hi);
  transition: background .3s, color .3s, transform .5s cubic-bezier(.2, 1.3, .4, 1);
}
.trade__icon svg { width: 26px; height: 26px; fill: currentColor; }
.trade__icon .ic-hi { fill: var(--bg); }
.trade.is-active .trade__icon { background: linear-gradient(180deg, #DA7A4B, #A9522A); color: #1A0B04; transform: rotate(-6deg); }
.trade.is-active .trade__icon .ic-hi { fill: var(--sand); }
.trade__name { margin: 0 0 10px; font-weight: 800; letter-spacing: -.058em; line-height: .95; font-size: clamp(2rem, 3.8vw, 3.8rem); transition: color .3s; }
.trade.is-active .trade__name .wi { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trade__main p { margin: 0; max-width: 40em; font-size: 1rem; color: var(--muted); }
.tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 4px 10px; border: 1px solid var(--line-strong); font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.trade.is-active .tags li { border-color: rgba(227, 135, 90, .4); color: var(--tx); }

.duo { position: relative; margin: 0; overflow: hidden; background: var(--copper); isolation: isolate; }
.duo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.05); mix-blend-mode: multiply; }
.duo::after { content: ""; position: absolute; inset: 0; background: #03101D; mix-blend-mode: lighten; pointer-events: none; }
.trade__photo { --cut: 14px; aspect-ratio: 3 / 2; opacity: .55; transform: scale(.95); transition: opacity .4s, transform .6s var(--ease); }
.trade__photo img { transform: scale(1.12); transition: transform 1.2s var(--ease); }
.trade.is-active .trade__photo { opacity: 1; transform: none; }
.trade.is-active .trade__photo img { transform: scale(1); }

/* ==========================================================================
   HEAT
   ========================================================================== */
.heat { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-2); }
.heat__photo { position: absolute; inset: 0; z-index: -1; }
.heat__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: grayscale(1) contrast(1.3) sepia(.6) hue-rotate(-12deg) saturate(2.2); opacity: .32; }
.heat__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-2) 0%, rgba(2, 11, 20, .35) 50%, var(--bg-2) 100%); }
.heat__inner { padding: clamp(40px, 4.6vw, 68px) var(--gut) clamp(32px, 3.6vw, 52px); }
.heat__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.heat__title { font-size: clamp(2.3rem, 5.2vw, 5.4rem); max-width: 11ch; }
.heat__title .count { font-variant-numeric: tabular-nums; }
.heat__now {
  --cut: 8px; margin: 0 0 .5em; padding: 8px 14px;
  background: rgba(7, 27, 46, .8); box-shadow: var(--bevel);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted);
}
.heat__now output { color: var(--copper-hi); font-weight: 600; font-size: 1.15em; }
.stress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.stress article { display: flex; flex-direction: column; padding: 22px 22px 18px; background: rgba(7, 27, 46, .82); box-shadow: var(--bevel); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stress__k { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--sand); }
.stress h3 { margin: 12px 0 10px; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.stress article p { margin: 0; color: var(--muted); }
.stress article .stress__trade { margin-top: auto; padding-top: 16px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--copper-hi); }

/* ==========================================================================
   COVERAGE
   ========================================================================== */
.valley__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; padding: 0 var(--gut) clamp(28px, 3vw, 44px); }
.map-wrap {
  padding: 18px 20px 14px;
  background: radial-gradient(70% 70% at 55% 50%, rgba(198, 101, 58, .08), transparent 70%), var(--s1);
  box-shadow: var(--bevel);
  --cut: 22px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.map { width: 100%; height: auto; overflow: hidden; }
.map .divider { stroke: var(--sand); stroke-width: 1.5; stroke-dasharray: 8 8; opacity: .35; }
.map .zone-label { font-family: var(--f-mono); font-size: 15px; letter-spacing: .06em; font-weight: 600; }
.map .ring { fill: none; stroke: var(--sand); stroke-width: 1.5; }
.map .phx { font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .05em; fill: var(--sand); }
.map .city .xh { stroke-width: 2.5; }
.map .city .box { stroke-width: 2.5; fill: var(--s1); }
.map .city--east .xh, .map .city--east .box { stroke: var(--copper-hi); }
.map .city--west .xh, .map .city--west .box { stroke: var(--tx); }
.map .city .name { font-family: var(--f-sans); font-weight: 700; font-size: 30px; letter-spacing: -.035em; fill: var(--tx); }
.map .city .coord { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .03em; fill: var(--tx); opacity: .5; }
.map .city { opacity: 0; transition: opacity .3s steps(3); }
.map.is-in .city { opacity: 1; transition-delay: calc(var(--i) * 90ms); }
.map .city .box { transform-box: fill-box; transform-origin: center; }
.map.is-in .city .box { animation: ping 1.2s ease-out calc(var(--i) * 90ms + .3s) both; }
@keyframes ping { 0% { transform: scale(2.6); } 100% { transform: scale(1); } }
.map .fwy { fill: none; stroke: var(--sand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .16; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.map.is-in .fwy { transition: stroke-dashoffset 2.2s cubic-bezier(.6, 0, .2, 1); stroke-dashoffset: 0; }
.map .fwy-shield rect { fill: var(--s2); stroke: var(--line-strong); }
.map .fwy-shield text { fill: var(--sand); font-family: var(--f-mono); font-size: 12px; font-weight: 600; }
.map .fwy-shield { opacity: 0; transition: opacity .4s 1.6s; }
.map.is-in .fwy-shield { opacity: 1; }

.zones { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.zone { padding: 22px 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%), var(--s1); box-shadow: var(--bevel); }
.zone--west { background: linear-gradient(180deg, rgba(198, 101, 58, .14), transparent 60%), var(--s2); }
.zone__code { margin: 0; font-weight: 800; font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: .85; letter-spacing: -.065em; }
.zone--east .zone__code { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zone--west .zone__code { color: var(--sand); }
.zone h3 { margin: 8px 0 12px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zone ul { list-style: none; margin: 0; padding: 0; }
.zone li { padding: 7px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }

/* ==========================================================================
   CREWS
   ========================================================================== */
.cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 var(--gut) clamp(28px, 3vw, 44px); }
.cell { position: relative; padding: 22px 22px 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%), var(--s1); box-shadow: var(--bevel); }
.cell--copper { background: linear-gradient(180deg, #D8784A, #C6653A 45%, #A04A22); color: #1A0B04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.cell__n { margin: 0 0 18px; font-weight: 800; font-size: clamp(2.6rem, 4vw, 3.8rem); line-height: .8; letter-spacing: -.06em; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .5s var(--ease); }
.cell--copper .cell__n { background: none; color: #1A0B04; }
.cell:hover .cell__n { transform: translateX(6px); }
.cell h3 { margin: 0 0 10px; font-weight: 700; font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.05; letter-spacing: -.035em; }
.cell p:last-child { margin: 0; color: var(--muted); }
.cell--copper p:last-child { color: rgba(26, 11, 4, .8); }

/* ==========================================================================
   TRUST
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 var(--gut); }
.quote { position: relative; margin: 0; padding: 28px 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%), var(--s1); box-shadow: var(--bevel); }
.quote::before { content: "“"; position: absolute; top: 8px; right: 18px; font-size: 5.5rem; font-weight: 800; line-height: 1; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .5; }
.quote blockquote { position: relative; z-index: 1; margin: 0; padding-right: 36px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 600; line-height: 1.38; letter-spacing: -.02em; }
.quote figcaption { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.quote figcaption strong { font-size: 14px; }
.quote figcaption span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.quote--ink { background: linear-gradient(180deg, rgba(198, 101, 58, .16), transparent 60%), var(--s2); }
.sectors { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 22px var(--gut) clamp(28px, 3vw, 44px); }
.sectors__k { margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-hi); }
.sectors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sectors li {
  --cut: 7px; padding: 7px 14px; background: var(--s1); box-shadow: var(--bevel); font-size: 14px; font-weight: 600;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .2s, color .2s;
}
.sectors li:hover { background: var(--copper); color: #1A0B04; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start;
  padding: clamp(44px, 5vw, 72px) var(--gut);
  background: radial-gradient(60% 70% at 100% 0%, rgba(198, 101, 58, .12), transparent 60%), var(--bg);
}
.contact__lede { max-width: 30em; margin: 20px 0 0; font-size: 1.02rem; color: var(--muted); }
.channels { list-style: none; margin: 26px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.channel { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
.channel__icon { --cut: 8px; flex: none; display: grid; place-items: center; width: 42px; height: 42px; background: linear-gradient(180deg, #123350, #0A2338); box-shadow: var(--bevel); transition: background .25s; }
.channel__icon svg { width: 19px; height: 19px; fill: none; stroke: var(--sand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.channel__text { display: grid; gap: 3px; }
.channel__text small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.channel__text strong { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.channel__text .channel__phone { font-size: clamp(1.45rem, 2.1vw, 1.85rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
a.channel:hover .channel__icon { background: linear-gradient(180deg, #DA7A4B, #A9522A); }
a.channel:hover .channel__icon svg { stroke: #1A0B04; }

.form { --cut: 24px; display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.2vw, 30px); background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 30%), var(--s1); box-shadow: var(--bevel); }
.form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 4px; }
.form__head h3 { margin: 0; font-size: clamp(1.4rem, 1.8vw, 1.65rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.form__head p { margin: 0; font-size: 13.5px; color: var(--muted); }
.req { color: var(--copper-hi); }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row--3 { grid-template-columns: 1fr 1.2fr 1fr; }
.field label, .field legend { padding: 0; font-size: 13px; font-weight: 600; color: var(--tx); }
.field legend { margin-bottom: 10px; }
.field input, .field select, .field textarea {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--bg-2); color: var(--tx);
  font: inherit; font-size: 15px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
  transition: border-color .15s, background-color .15s;
}
.field textarea { height: auto; min-height: 84px; padding: 11px 13px; resize: vertical; line-height: 1.5; }
.field ::placeholder { color: rgba(238, 229, 213, .3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(219, 185, 148, .4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--copper-hi); background: #031221; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 3px rgba(198, 101, 58, .22); }
.field select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23DBB994' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field select option, .field select optgroup { background: var(--bg-2); color: var(--tx); }
.field [aria-invalid="true"] { border-color: #FF6B5B; box-shadow: 0 0 0 3px rgba(255, 107, 91, .18); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  --cut: 7px;
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 14px; font-weight: 500;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .15s, color .15s;
}
.chips span::before { content: ""; width: 10px; height: 10px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: all .15s; }
.chips label:hover span { box-shadow: inset 0 0 0 1px rgba(219, 185, 148, .45); }
.chips input:checked + span { background: linear-gradient(180deg, #DA7A4B, #A9522A); color: #1A0B04; box-shadow: none; }
.chips input:checked + span::before { background: #1A0B04; box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--copper-hi); outline-offset: 2px; }
.form .btn { margin-top: 6px; }
.form__status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); }
.form__status.is-error { color: #FF8A7D; font-weight: 600; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--bg-2); padding: clamp(32px, 3.6vw, 52px) var(--gut) 22px; }
.foot__word { width: 100%; height: auto; }

.foot__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.foot__cols p { margin: 0; }
.foot__h { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sand); margin-bottom: 12px !important; }
.brand-name { text-transform: none; }
.foot__about p:not(.foot__h) { max-width: 30em; font-size: 14.5px; color: var(--muted); }
.foot__col { display: grid; align-content: start; gap: 8px; font-size: 14.5px; color: var(--muted); }
.foot__col a { text-decoration: none; width: fit-content; background: linear-gradient(var(--copper), var(--copper)) 0 100% / 0 1px no-repeat; transition: background-size .3s, color .2s; }
.foot__col a:hover { color: var(--tx); background-size: 100% 1px; }
.foot__col .foot__phone { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(238, 229, 213, .45); }
.foot__bar p { margin: 0; }
.foot__top { color: var(--copper-hi); text-decoration: none; }
.foot__top:hover { color: var(--sand); }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; background: radial-gradient(50% 50% at 50% 45%, rgba(198, 101, 58, .22), transparent 70%), var(--bg); cursor: pointer; }
.js-intro .intro { display: grid; animation: intro-lift .8s cubic-bezier(.76, 0, .24, 1) 2.15s forwards; }
.js-intro body { overflow: hidden; }
.intro__stage { display: grid; justify-items: center; gap: 28px; }
.intro__mark { height: min(46vh, 380px); width: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.intro__word { width: min(56vw, 320px); height: auto; opacity: 0; transform: translateY(14px); animation: intro-word .6s var(--ease) 1.25s forwards; }
.intro__mark .pc { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: ip-drop .8s cubic-bezier(.2, 1.25, .35, 1) forwards; animation-delay: calc(var(--d) * 95ms + 100ms); }
.intro__mark .pc[data-x="1"] { animation-name: ip-slide; }
@keyframes ip-drop  { from { transform: translateY(-220%) rotate(-12deg); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ip-slide { from { transform: translateX(200%); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes intro-word { to { opacity: 1; transform: none; } }
@keyframes intro-lift { to { transform: translateY(-100%); visibility: hidden; } }

/* ==========================================================================
   MOTION: reveals + 3D tilt
   ========================================================================== */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.wi { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--ease); transition-delay: calc(var(--wi, 0) * 70ms); }
.is-in .wi { transform: none; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform 1s var(--ease); transition-delay: calc(var(--ri, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }
.trade.reveal { transition: opacity .8s ease, transform 1s var(--ease), background-color .3s; }
.trade.reveal.is-in.is-active { transform: translateX(6px); }

[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt].is-in, [data-tilt]:not(.reveal) { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), opacity .8s ease; }
[data-tilt]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 220, 190, .12), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
[data-tilt]:hover::after { opacity: 1; }

.foot__word .fw-anim { transform-box: fill-box; transform: translateY(35%); opacity: 0; transition: transform 1.2s var(--ease), opacity .8s; }
.foot__word .fw-spine { transition-delay: .1s; }
.foot__word .fw-fm { transition-delay: .2s; }
.foot__word.is-in .fw-anim { transform: none; opacity: 1; }

.actionbar { display: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .masthead__cta { margin-left: 0; }
  .t-hide-md { display: none; }
  .legend { display: none; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero__figure { min-height: 0; }
  .logo3d { min-height: 420px; }
  .services__body { grid-template-columns: 1fr; padding-left: var(--gut); }
  .services__rail { display: none; }
  .valley__grid { grid-template-columns: 1fr; }
  .zones { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .cells { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .trade { grid-template-columns: 64px minmax(0, 1fr) 200px; }
}
@media (max-width: 720px) {
  :root { --head-h: 58px; }
  .brand__mark { height: 34px; }
  .brand__word { height: 19px; }
  .masthead { gap: 12px; }
  .masthead__cta { display: none; }
  .t-hide-sm { display: none; }
  .t-cell { padding: 6px 10px; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-note { grid-column: 1; grid-row: auto; margin-top: 16px; padding: 0; }
  .specs { grid-template-columns: 1fr 1fr; }
  .logo3d { min-height: 360px; }
  .trade { grid-template-columns: 1fr; }
  .trade__lead { grid-auto-flow: column; align-items: center; justify-content: start; gap: 14px; }
  .trade__icon { width: 44px; height: 44px; }
  .trade__photo { order: -1; aspect-ratio: 16 / 9; transform: none; opacity: 1; }
  .trade.is-active, .trade.reveal.is-in.is-active { transform: none; }
  .stress { grid-template-columns: 1fr; }
  .zones { grid-template-columns: 1fr; }
  .cells { grid-template-columns: 1fr; }
  .field-row, .field-row--3 { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
  .actionbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
    display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 6px;
    background: rgba(2, 11, 20, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--line);
    transform: translateY(140%); transition: transform .45s var(--ease);
  }
  .actionbar.is-shown { transform: none; }
  .actionbar a { --cut: 9px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; font-weight: 650; font-size: 15px; text-decoration: none; }
  .actionbar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .actionbar__call { background: var(--s2); color: var(--tx); box-shadow: var(--bevel); }
  .actionbar__req { background: linear-gradient(180deg, #DA7A4B, #C6653A 55%, #A9522A); color: #1A0B04; }
  .foot { padding-bottom: 96px; }
  .foot__cols { grid-template-columns: 1fr; gap: 26px; }
  .foot__bar { flex-direction: column; }
}
@media (max-width: 420px) {
  .foot__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-intro .intro { display: none; }
  .wi, .reveal, .foot__word .fw-anim { transform: none !important; opacity: 1 !important; }
  [data-tilt] { transform: none !important; }
  .map .fwy { stroke-dasharray: none; }
}
.stress article, .zone { position: relative; }
.hero__figure { grid-template-rows: 1fr auto auto; gap: 10px; }
.legend { position: static; transform: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
@media (max-width: 1100px) { .legend { display: flex; } }
.hero__figure .fig-cap { text-align: center; }
.map-wrap { display: grid; align-content: center; }
.field-row--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* bigger 3D mark */
@media (min-width: 961px) {
  .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .hero__figure { min-height: min(86svh, 800px); padding-top: 8px; }
}
.logo3d { min-height: 540px; }
.glow { inset: 4% 8% 14%; }
@media (max-width: 960px) { .logo3d { min-height: 520px; } }
@media (max-width: 720px) { .logo3d { min-height: 440px; } }

/* original logo colors: navy pieces stay navy, lifted by light behind the mark */
.pc--navy .pc__face { fill: #0B2D50; }
.pc--navy .pc__side { fill: #051A30; }
.brand__mark, .rail-mark, .intro__mark, .logo3d__fallback { filter: drop-shadow(0 0 1px rgba(238, 229, 213, .55)) drop-shadow(0 0 10px rgba(219, 185, 148, .22)); }
.glow { background: radial-gradient(closest-side, rgba(238, 222, 200, .30), rgba(227, 135, 90, .16) 45%, rgba(198, 101, 58, .05) 70%, transparent); }
.t-bone { --tone: #0B2D50; }
.legend li.t-bone::before { box-shadow: 0 0 0 1px rgba(238, 229, 213, .5); }
.intro { background: radial-gradient(40% 45% at 50% 42%, rgba(238, 222, 200, .22), rgba(198, 101, 58, .1) 55%, transparent 75%), var(--bg); }
.pc--navy .pc__face { fill: #123A63; stroke: rgba(238, 229, 213, .45); stroke-width: 3; stroke-linejoin: round; }
.pc--navy .pc__side { fill: #061C33; }
.brand__mark .pc--navy .pc__face { stroke-width: 6; }
/* header mark: original colors on a bone badge so the F and M read at small size */
.brand__mark {
  height: 46px; width: auto; padding: 5px 7px 4px 5px;
  background: linear-gradient(180deg, #F6EFE3, #E6DBC8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .15);
  filter: none;
  --cut: 7px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.brand__mark .pc--navy .pc__face { fill: #01213A; stroke: none; }
.brand__mark .pc--navy .pc__side { fill: #000C17; }
@media (max-width: 720px) { .brand__mark { height: 40px; padding: 4px 6px 3px 4px; } }
:root { --head-h: 68px; }
.brand__mark { height: 56px; padding: 5px 6px; }
.brand__mark .pc__side { display: none; }
.brand__word { height: 24px; }
@media (max-width: 720px) {
  :root { --head-h: 62px; }
  .brand__mark { height: 50px; padding: 4px 5px; }
  .brand__word { height: 20px; }
}

/* footer brand: spine + wordmark with depth, copper finish and a following light */
.foot__word { overflow: visible; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .5)); }
.fw-depth--bone use { fill: #6F685E; }
.fw-depth--copper use { fill: #5A2812; }
.fw-mark .pc__side { display: inline; }
.fw-light { opacity: 0; transition: opacity .5s; pointer-events: none; }
.fw-light__shade { mix-blend-mode: multiply; }
.fw-light__hot { mix-blend-mode: screen; }
.foot:hover .fw-light, .fw-light.is-idle { opacity: 1; }
/* bigger services rail mark */
@media (min-width: 961px) {
  .services__body { grid-template-columns: minmax(200px, 2.6fr) minmax(0, 9.4fr); }
  .rail-mark { width: 78%; max-width: 172px; max-height: calc(100svh - var(--head-h) - 140px); }
}
/* shorter, punchier headline can run larger */
.mega { font-size: clamp(2.8rem, 6vw, 6.4rem); }

/* the CSS glow follows the logo: it dims while the mark is apart */
.glow { will-change: opacity; transition: opacity .25s linear; }
/* softer glow so the beams read as distinct rays */
.glow { background: radial-gradient(closest-side, rgba(238, 222, 200, .17), rgba(227, 135, 90, .10) 45%, rgba(198, 101, 58, .03) 70%, transparent); }

/* ==========================================================================
   AUDIT FIXES
   ========================================================================== */

/* keyboard focus: clip-path cuts off outlines, so cut-corner elements get an inset ring */
.btn:focus-visible, .actionbar a:focus-visible, .mnav .btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--tx), inset 0 0 0 4px var(--bg), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.chips input:focus-visible + span { outline: none; box-shadow: inset 0 0 0 2px var(--copper-hi); }
a.channel:focus-visible { outline: none; }
a.channel:focus-visible .channel__icon { box-shadow: inset 0 0 0 2px var(--copper-hi); }
.menu-btn:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 2px; }

/* spam trap: off-screen, never seen by people */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__privacy { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
.form__privacy a { color: var(--copper-hi); }

/* city links in coverage + footer */
.zone li a { text-decoration: none; display: flex; justify-content: space-between; align-items: center; transition: color .2s; }
.zone li a::after { content: "→"; font-weight: 400; color: var(--copper-hi); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--ease); }
.zone li a:hover { color: var(--sand); }
.zone li a:hover::after { opacity: 1; transform: none; }
.foot__cities a, .foot__bar > a { text-decoration: none; }
.foot__cities a:hover, .foot__bar > a:hover { color: var(--tx); }

/* map coordinates are unreadable on phones: names only */
@media (max-width: 720px) { .map .city .coord { display: none; } }

/* shorter intro (~1.4s) */
.js-intro .intro { animation-duration: .6s; animation-delay: 1.3s; }
.intro__word { animation-duration: .5s; animation-delay: .75s; }
.intro__mark .pc { animation-duration: .6s; animation-delay: calc(var(--d) * 65ms + 60ms); }

/* ==========================================================================
   SUBPAGES: city pages + privacy
   ========================================================================== */
.subpage .nav--sub { display: flex; }
.sub-hero { padding: clamp(48px, 6vw, 96px) var(--gut) clamp(36px, 4vw, 56px); background: radial-gradient(60% 80% at 85% 30%, rgba(198, 101, 58, .14), transparent 65%), var(--bg); }
.sub-hero__title { font-size: clamp(2.6rem, 6vw, 6rem); max-width: 14ch; }
.sub-sec { padding-bottom: clamp(28px, 3vw, 44px); }
.cells--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sub-near { padding: 0 var(--gut) clamp(36px, 4vw, 56px); }
.near-list { display: flex; flex-wrap: wrap; gap: 10px; }
.near { --cut: 8px; padding: 10px 16px; background: var(--s1); box-shadow: var(--bevel); font-weight: 600; text-decoration: none; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background .2s, color .2s; }
.near:hover { background: var(--copper); color: #1A0B04; }
.near--all { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--copper-hi); }
.sub-cta { padding: clamp(44px, 5vw, 72px) var(--gut); background: radial-gradient(60% 70% at 0% 100%, rgba(198, 101, 58, .14), transparent 60%), var(--bg-2); }
.sub-cta .macro { max-width: 16ch; margin-bottom: 26px; }
.foot--sub .foot__bar { margin-top: 0; border-top: 0; padding-top: 0; }
.legal { max-width: 860px; }
.legal h2 { margin: 36px 0 10px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.legal p { color: var(--muted); max-width: 70ch; }
.legal a { color: var(--copper-hi); }
@media (max-width: 1100px) { .cells--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .subpage .nav--sub { display: none; } }
@media (max-width: 720px) { .cells--5 { grid-template-columns: 1fr; } .subpage .masthead__cta--sub { display: inline-flex; margin-left: auto; } .subpage .masthead__cta--sub .btn__label { padding: 0 12px; } }

/* 24/7 emergency */
.t-emergency { color: var(--tx); text-decoration: none; font-weight: 600; background: rgba(198, 101, 58, .14); }
.t-emergency:hover { background: rgba(198, 101, 58, .28); }
.t-siren { width: 7px; height: 7px; border-radius: 50%; background: #FF5A3C; box-shadow: 0 0 0 0 rgba(255, 90, 60, .6); animation: siren 1.6s ease-out infinite; }
@keyframes siren { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 60, .6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(255, 90, 60, 0); } }
.spec--hot { background: linear-gradient(180deg, rgba(198, 101, 58, .22), rgba(198, 101, 58, .06)), var(--s1) !important; }
.spec--hot dt { color: var(--copper-hi) !important; }
.form__urgent {
  --cut: 8px; display: block; padding: 10px 14px; margin-bottom: 2px;
  background: rgba(198, 101, 58, .12); box-shadow: inset 0 0 0 1px rgba(227, 135, 90, .35);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  font-size: 14px; color: var(--tx); text-decoration: none; transition: background .2s;
}
.form__urgent strong { color: var(--copper-hi); }
.form__urgent:hover { background: rgba(198, 101, 58, .22); }
.form__urgent:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--copper-hi); }
@media (max-width: 720px) { .t-emergency { margin-left: auto; } }
.telemetry { overflow: hidden; }
@media (max-width: 720px) { .t-cell { padding: 6px 8px; } }

/* ==========================================================================
   GLOBAL SCALE: everything at 80% on tablet/desktop; phones stay full size
   ========================================================================== */
@media (min-width: 721px) {
  body { zoom: .8; }
}


/* ==========================================================================
   SCROLL PERFORMANCE
   ========================================================================== */
/* stripes: move a layer with transform (GPU-only) instead of repainting the background every frame */
.stripes { position: relative; overflow: hidden; background: var(--bg-2); animation: none; }
.stripes::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40px; right: -40px;
  background: repeating-linear-gradient(-45deg, var(--copper) 0 12px, var(--bg-2) 12px 24px);
  background-size: 33.94px 100%;
  animation: stripes-move 1.4s linear infinite;
  will-change: transform;
}
.stripes--rev::before { animation-direction: reverse; }
@keyframes stripes-move { to { transform: translateX(33.94px); } }

/* live blur behind moving content is re-computed every scroll frame: use solid panels instead */
.masthead { background: rgba(3, 16, 29, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
.stress article { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(7, 27, 46, .94); }
@media (max-width: 720px) { .actionbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2, 11, 20, .97); } }

/* tilt cards don't need a permanent GPU layer */
[data-tilt] { will-change: auto; }

/* emergency dot: pulse with a transformed ring instead of an animated shadow */
.t-siren { position: relative; animation: none; box-shadow: none; }
.t-siren::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 90, 60, .55); animation: siren-ring 1.6s ease-out infinite; }
@keyframes siren-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .stripes::before, .t-siren::after { animation: none !important; } }
.logo3d__fallback { height: 67%; inset: 16% 0; }
.logo3d__fallback { height: 54%; inset: 23% 0; }
/* logo stage: 10% larger fallback to match, nudged 20 on-screen pixels lower
   (25 CSS px on tablet/desktop, where the page is zoomed to 80%) */
.logo3d__fallback { height: 59%; inset: 20.5% 0; }
.logo3d__canvas, .logo3d__fallback { transform: translateY(20px); }
@media (min-width: 721px) { .logo3d__canvas, .logo3d__fallback { transform: translateY(25px); } }
/* footer wordmark: a sign-off, not a billboard */
.foot__word { width: min(100%, 720px); }
@media (max-width: 720px) { .foot__word { width: min(100%, 420px); } }