/* ==========================================================================
   WranglerX - Power-Linked Infrastructure
   Single stylesheet. Sections:
     1. Base reset
     2. Design tokens
     3. Global / header / footer
     4. Home page sections
     5. Contact page
     6. Responsive
     7. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE RESET
   -------------------------------------------------------------------------- */
*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
small{font-size:80%}
ol,ul,menu{list-style:none}
img,svg,video,canvas,iframe{vertical-align:middle;display:block}
img,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit;background-color:#0000;border-radius:0}
button,input:where([type=button],[type=reset],[type=submit]){appearance:button}
textarea{resize:vertical}
::placeholder{opacity:1}
[hidden]{display:none!important}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  --ink:#0d0e0f;
  --steel:#181b1d;
  --paper:#ede9df;
  --muted:#969a98;
  --line:#333739;
  --orange:#ff5a1f;
  --orange-deep:#bd3b0d;   /* --orange reads hot on --paper; this is the print-safe one */
  --blue:#8ba8bd;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* --------------------------------------------------------------------------
   3. GLOBAL / HEADER / FOOTER
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}

header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#0d0e0feb;justify-content:space-between;align-items:center;height:74px;padding:0 3vw;display:flex;position:sticky;top:0}

/* Wordmark - unchanged from the original build. */
.wordmark{align-items:center;gap:13px;display:flex}
/* One mark system shared across HC Capital, Energy Ranch and WranglerX: a square
   box, a border of 7% of the box, and a corner square pinned outside the lower
   right at 19.6% of the box. Everything derives from --box, so changing that one
   value rescales the whole mark. */
.wx{--box:44px;--stroke:calc(var(--box)*.07);--dot:calc(var(--box)*.196);
    border:var(--stroke) solid var(--paper);letter-spacing:-.1em;width:var(--box);height:var(--box);
    font-size:calc(var(--box)*.35);font-weight:700;flex:none;align-items:center;justify-content:center;display:flex;position:relative}
.wx:after{content:"";background:var(--orange);width:var(--dot);height:var(--dot);position:absolute;
    bottom:calc(var(--dot)*-.44);right:calc(var(--dot)*-.44)}
.wx span,.wordmark strong span{color:var(--orange)}
.wordmark>span:nth-child(2){flex-direction:column;display:flex}
.wordmark strong{letter-spacing:.13em;font-size:14px}
.wordmark small{font:8px var(--mono);letter-spacing:.16em;color:var(--muted);margin-top:3px}
.wordmark b{font-size:21px;font-weight:400}

nav{height:100%;display:flex}
nav a{border-left:1px solid var(--line);font:13px var(--mono);letter-spacing:.13em;text-transform:uppercase;place-items:center;padding:0 25px;display:grid;position:relative;transition:color .28s ease,background-color .28s ease}
nav a:last-child{border-right:1px solid var(--line);color:var(--orange)}

/* Hover / focus: a hairline of orange wipes in from the left along the header's
   baseline, sitting directly on the header's own bottom border, so it reads as
   that line lighting up under the active item. */
nav a:before{content:"";background:var(--orange);transform-origin:0;transform:scaleX(0);transition:transform .4s cubic-bezier(.22,.61,.36,1);position:absolute;bottom:0;left:0;right:0;height:1px}
nav a:hover:before,nav a:focus-visible:before{transform:scaleX(1)}
nav a:hover,nav a:focus-visible{color:var(--orange);background:#ff5a1f0a;outline:none}

/* The one call to action inverts to a solid fill instead - the same treatment
   the inquiry button uses, keeping both primary actions consistent. */
nav a:last-child:before{display:none}
nav a:last-child:hover,nav a:last-child:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--ink)}
nav a[aria-current=page]{background:#ff5a1f12}
nav a[aria-current=page]:before{transform:scaleX(1)}

/* Menu button. Hidden until the tablet breakpoint, where the responsive section
   turns it on and converts <nav> into a panel. The bars cross into an X and the
   label swaps off the same aria-expanded attribute, so the visual state and the
   accessible state cannot drift apart. */
.menu-toggle{color:var(--paper);cursor:pointer;font:13px var(--mono);letter-spacing:.13em;text-transform:uppercase;background:none;border-left:1px solid var(--line);align-items:center;gap:13px;height:100%;padding:0 0 0 22px;transition:color .28s ease;display:none}
.menu-toggle .bars{flex:none;width:22px;height:12px;display:block;position:relative}
.menu-toggle .bars i{background:currentColor;transition:transform .34s cubic-bezier(.22,.61,.36,1);height:1px;position:absolute;left:0;right:0}
.menu-toggle .bars i:first-child{top:0}
.menu-toggle .bars i:last-child{bottom:0}
.menu-toggle .menu-label:before{content:"Menu"}
.menu-toggle:hover,.menu-toggle:focus-visible{color:var(--orange);outline:none}
.menu-toggle[aria-expanded=true]{color:var(--orange)}
.menu-toggle[aria-expanded=true] .bars i:first-child{transform:translateY(5.5px)rotate(45deg)}
.menu-toggle[aria-expanded=true] .bars i:last-child{transform:translateY(-5.5px)rotate(-45deg)}
.menu-toggle[aria-expanded=true] .menu-label:before{content:"Close"}

footer{grid-template-columns:1fr 1fr 1fr;align-items:end;padding:50px 3vw;display:grid}
footer p{color:var(--muted)}
footer>div:last-child{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;flex-direction:column;align-items:flex-end;gap:12px;display:flex}
footer>div:last-child a{transition:color .28s ease}
footer>div:last-child a:hover{color:var(--orange)}

/* --------------------------------------------------------------------------
   4. HOME PAGE SECTIONS
   -------------------------------------------------------------------------- */

/* Hero. The rotated mark lags the scroll while the headline leads it slightly,
   so the two read as separate planes. --parallax is set by assets/site.js; with
   no JS (or with reduced motion) it stays 0 and everything sits where the
   static layout puts it. */
.hero{background:linear-gradient(135deg,#8ba8bd09,#0000 40%);flex-direction:column;justify-content:space-between;min-height:calc(100vh - 74px);padding:40px 3vw 32px;display:flex;position:relative;overflow:hidden}
.rail{font:12px var(--mono);letter-spacing:.15em;color:var(--muted);justify-content:space-between;display:flex}
.hero-mark{border:1px solid var(--line);width:45vw;height:45vw;position:absolute;top:10vh;right:3vw;transform:translate3d(0,var(--parallax,0px),0) rotate(45deg);will-change:transform}
.hero-mark:before,.hero-mark:after{content:"";background:var(--line);position:absolute}
.hero-mark:before{width:1px;height:140%;top:-20%;left:50%}
.hero-mark:after{width:140%;height:1px;top:50%;left:-20%}
.hero-mark i{border:1px solid var(--line);position:absolute;inset:16%}
.hero-mark i:nth-child(2){border-color:var(--orange);inset:32%}
.hero-mark i:nth-child(3){background:var(--orange);inset:48%}

h1{letter-spacing:-.08em;margin:13vh 0 9vh;font-size:clamp(78px,13vw,195px);font-weight:400;line-height:.78;position:relative;transform:translate3d(0,var(--parallax,0px),0)}
h1 em{color:var(--orange);font-style:normal}
.hero-foot{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;align-items:end;padding-top:24px;display:grid;position:relative;transform:translate3d(0,var(--parallax,0px),0)}
.hero-foot p{letter-spacing:-.03em;max-width:700px;margin:0;font-size:clamp(19px,2.1vw,31px);line-height:1.25}
.hero-foot a{font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;justify-self:end;align-items:center;gap:35px;display:flex;transition:color .3s ease}
.hero-foot a span{color:var(--orange);font-size:24px;transition:transform .34s cubic-bezier(.22,.61,.36,1);display:inline-block}
.hero-foot a:hover,.hero-foot a:focus-visible{color:var(--orange);outline:none}
.hero-foot a:hover span,.hero-foot a:focus-visible span{transform:translateY(4px)}

/* Capability ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:92px;font:13px var(--mono);letter-spacing:.16em;justify-content:space-around;align-items:center;display:flex}
.ticker i{color:var(--orange);font-style:normal}

/* Shared section chrome */
.platform,.model,.projects,.belief{padding:120px 3vw}
.label{font:13px var(--mono);letter-spacing:.15em;color:var(--orange);margin-bottom:55px}
.intro{grid-template-columns:1.35fr .65fr;align-items:end;gap:8vw;margin-bottom:90px;display:grid}
h2{letter-spacing:-.065em;margin:0;font-size:clamp(50px,7.2vw,110px);font-weight:400;line-height:.92}
.intro p,.network-copy p,.belief p{color:var(--muted);margin:0;font-size:19px;line-height:1.55}

/* The four system cards. Each carries a soft wash of orange rising out of the
   bottom-left corner, layered over the flat card color - faint at the corner
   and gone well before mid-card, so it reads as light in the room rather than
   as a gradient. */
.system-grid{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(2,1fr);display:grid}
.system-grid article{background:radial-gradient(88% 62% at 0% 100%,#ff5a1f17 0%,#ff5a1f07 34%,#ff5a1f00 62%);border-right:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:column;min-height:360px;padding:30px;display:flex;position:relative}
.system-grid article>div{font:13px var(--mono);letter-spacing:.13em;color:var(--muted);justify-content:space-between;display:flex}
.system-grid article>div span{color:var(--orange)}
.system-grid h3{letter-spacing:-.05em;margin:auto 0 20px;font-size:48px;font-weight:400}
.system-grid p{color:var(--muted);max-width:520px;margin:0;line-height:1.5}
.system-grid b{color:var(--orange);font-size:20px;position:absolute;bottom:25px;right:28px}

/* Network map. The top and bottom edges are real borders, so both read as one
   straight rule. The pattern is split across two layers because only one of
   them can usefully move: vertical lines shifted vertically look identical, so
   they stay put and stay crisp, running edge to edge between the two rules. The
   horizontals are the layer that reads as parallax - and the layer that would
   otherwise drift into the bottom border and double it - so they fade out short
   of each rule. --grid-shift is set by assets/site.js. */
.network{background:var(--paper);color:var(--ink);padding:120px 3vw}
.network .label{color:var(--orange-deep)}
.network-map{background-image:linear-gradient(90deg,#d4d0c7 1px,#0000 1px);background-size:48px 48px;border-top:1px solid #d4d0c7;border-bottom:1px solid #d4d0c7;height:640px;margin:20px 0 90px;position:relative;overflow:hidden}
.network-map:before{content:"";pointer-events:none;background-image:linear-gradient(#d4d0c7 1px,#0000 1px);background-size:48px 48px;background-position:0 var(--grid-shift,0px);position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,#0000 0,#0000 16px,#000 54px,#000 calc(100% - 54px),#0000 calc(100% - 16px),#0000 100%);mask-image:linear-gradient(180deg,#0000 0,#0000 16px,#000 54px,#000 calc(100% - 54px),#0000 calc(100% - 16px),#0000 100%)}

.hub{background:var(--ink);width:230px;height:230px;color:var(--paper);z-index:2;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.hub span{letter-spacing:-.12em;font-size:65px}
.hub strong{font:12px var(--mono);letter-spacing:.15em;margin-top:8px}
.node{width:145px;height:145px;font:13px var(--mono);letter-spacing:.15em;background:var(--paper);border:1px solid #777;border-radius:50%;place-items:center;display:grid;position:absolute}
.node:after{content:"";z-index:-1;background:#777;width:220px;height:1px;position:absolute;top:50%}
.n1{top:12%;left:8%}
.n1:after{left:110px;transform:rotate(25deg)}
.n2{top:12%;right:8%}
.n2:after{right:110px;transform:rotate(-25deg)}
.n3{bottom:12%;left:8%}
.n3:after{left:110px;transform:rotate(-25deg)}
.n4{bottom:12%;right:8%}
.n4:after{right:110px;transform:rotate(25deg)}
.network-copy{grid-template-columns:1.35fr .65fr;align-items:end;gap:8vw;display:grid}
.network-copy h2{font-size:clamp(50px,6.5vw,96px)}
.network-copy p{color:#5f625f}

/* Inline links on the paper section: the body copy is a soft grey here, so the
   links take full ink plus a faint rule at rest, then resolve to the deeper
   orange on hover - the bright accent is close to unreadable on --paper. */
.network-copy p a,.intro p a{color:var(--ink);border-bottom:1px solid #0d0e0f40;transition:color .28s ease,border-color .28s ease}
.intro p a{color:var(--paper);border-bottom-color:#ede9df4d}
.network-copy p a:hover,.network-copy p a:focus-visible{color:var(--orange-deep);border-color:var(--orange-deep);outline:none}
.intro p a:hover,.intro p a:focus-visible{color:var(--orange);border-color:var(--orange);outline:none}

/* Execution model */
.model h2{margin-bottom:90px}
.model-list{border-top:1px solid var(--line)}
.model-list article{border-bottom:1px solid var(--line);grid-template-columns:90px 1fr 1.2fr;gap:25px;padding:30px 0;display:grid}
.model-list span{font:15px var(--mono);color:var(--orange)}
.model-list h3{letter-spacing:-.04em;margin:0;font-size:42px;font-weight:400}
.model-list p{color:var(--muted);max-width:470px;margin:4px 0 0;line-height:1.5}

/* Flagship project card */
.projects{background:var(--steel)}
.project-card{border:1px solid var(--line);grid-template-columns:1.2fr .8fr;min-height:520px;display:grid}
.project-card>div{flex-direction:column;padding:48px;display:flex}
.project-card>div:first-child{border-right:1px solid var(--line);background:radial-gradient(circle at 80% 20%,#ff5a1f26,#0000 40%),radial-gradient(88% 62% at 0% 100%,#ff5a1f1c 0%,#ff5a1f08 34%,#ff5a1f00 62%);justify-content:space-between}
.project-card span{font:13px var(--mono);letter-spacing:.14em;color:var(--orange)}
.project-card strong{letter-spacing:-.07em;font-size:clamp(66px,9vw,130px);line-height:.78}
.project-card>div:last-child{justify-content:flex-end}
.project-card p{color:var(--muted);font-size:21px;line-height:1.45}
.project-card a{border-bottom:1px solid var(--paper);font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;align-self:flex-start;align-items:center;gap:13px;margin-top:35px;padding-bottom:12px;display:inline-flex;transition:color .3s ease,border-color .3s ease}
.project-card a span{transition:transform .34s cubic-bezier(.22,.61,.36,1);display:inline-block}
.project-card a:hover,.project-card a:focus-visible{color:var(--orange);border-color:var(--orange);outline:none}
.project-card a:hover span,.project-card a:focus-visible span{transform:translate(4px,-4px)}

/* Belief */
.belief{flex-direction:column;justify-content:center;min-height:75vh;display:flex}
.belief h2{max-width:1200px}
.belief p{max-width:700px;margin:65px 0 0 50%}

/* Closing CTA band. There is no accent to shift to on an orange field, so the
   link borrows the nav's vocabulary: a solid ink bar wipes in over the existing
   hairline while the arrow steps the way it points. The bar is a positioned
   pseudo-element rather than a thicker border, so nothing reflows. */
.contact{background:var(--orange);color:var(--ink);justify-content:space-between;align-items:flex-end;padding:110px 3vw;display:flex}
.contact>div>span{font:15px var(--mono);letter-spacing:.15em}
.contact h2{margin-top:45px}
.contact h2 em{color:#6c260c;font-style:normal}
.contact>a{border-bottom:1px solid var(--ink);font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;align-items:center;gap:50px;padding:14px 0;display:flex;position:relative}
.contact>a:after{content:"";background:var(--ink);transform-origin:0;transform:scaleX(0);transition:transform .42s cubic-bezier(.22,.61,.36,1);position:absolute;bottom:-1px;left:0;right:0;height:2px}
.contact>a:hover:after,.contact>a:focus-visible:after{transform:scaleX(1)}
.contact>a span{transition:transform .34s cubic-bezier(.22,.61,.36,1);display:inline-block}
.contact>a:hover span,.contact>a:focus-visible span{transform:translate(4px,-4px)}
.contact>a:focus-visible{outline:none}

/* --------------------------------------------------------------------------
   5. CONTACT PAGE
   -------------------------------------------------------------------------- */
.page-contact{padding:110px 3vw 120px}
.contact-grid{grid-template-columns:1.05fr .95fr;align-items:start;gap:8vw;display:grid}
.contact-intro h1{margin:0 0 34px;font-size:clamp(50px,7.2vw,110px);letter-spacing:-.065em;line-height:.92;transform:none}
.contact-intro h1 em{color:var(--orange);font-style:normal}
.contact-intro>p{color:var(--muted);max-width:520px;margin:0 0 50px;font-size:20px;line-height:1.55}
.contact-detail{border-top:1px solid var(--line);flex-direction:column;gap:26px;padding-top:28px;display:flex}
.contact-detail div{gap:9px;display:grid}
.contact-detail span{font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-detail p{color:var(--paper);margin:0;font-size:16px;line-height:1.6}
.contact-detail a{border-bottom:1px solid #ede9df40;transition:color .28s ease,border-color .28s ease}
.contact-detail a:hover{color:var(--orange);border-color:var(--orange)}

.inquiry{border:1px solid var(--line);background:var(--steel);padding:40px}
.inquiry-label{font:13px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:34px}
.field{gap:10px;margin-bottom:28px;display:grid}
.field label{font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{background:#0000;border-bottom:1px solid var(--line);color:var(--paper);letter-spacing:-.01em;padding:10px 0;font-family:inherit;font-size:16px}
.field textarea{min-height:118px;line-height:1.5;resize:vertical}
.field input:focus,.field textarea:focus{border-bottom-color:var(--orange);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#5d605e}
.field input:invalid:not(:placeholder-shown){border-bottom-color:var(--orange-deep)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{background:var(--orange);color:var(--ink);font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;justify-content:space-between;align-items:center;gap:40px;width:100%;margin-top:6px;padding:20px 22px;display:flex;transition:background-color .28s ease}
.submit span{font-size:16px}
.submit:hover{background:var(--paper)}
.form-note{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:20px;line-height:1.8}

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   Four tiers, each narrowing what came before rather than restating it.
   -------------------------------------------------------------------------- */

/* ---- <=1180px : small laptop, large tablet landscape --------------------- */
@media (width<=1180px){
  .platform,.model,.projects,.belief,.network{padding:96px 4vw}
  .hero{padding:36px 4vw 30px}
  .intro,.network-copy{gap:5vw;margin-bottom:70px}
  .model-list article{grid-template-columns:80px 1fr 1.1fr;gap:22px}
  .contact,footer{padding-left:4vw;padding-right:4vw}
  .page-contact{padding:96px 4vw 100px}
  .contact-grid{gap:5vw}
}

/* ---- <=1024px : tablet - the nav becomes a menu -------------------------- */
@media (width<=1024px){
  .menu-toggle{display:flex}

  /* The same <nav>, restyled as a panel covering everything below the header.
     It stays in the DOM and in source order; only its presentation changes. */
  nav{visibility:hidden;opacity:0;background:var(--ink);border-top:1px solid var(--line);flex-direction:column;align-items:stretch;height:auto;transition:opacity .3s ease,transform .38s cubic-bezier(.22,.61,.36,1),visibility .3s;position:fixed;inset:74px 0 0;transform:translateY(-10px);z-index:19;overflow-y:auto}
  nav[data-open=true]{visibility:visible;opacity:1;transform:none}
  nav a{border-left:0;border-bottom:1px solid var(--line);justify-content:start;place-items:center start;padding:26px 4vw;font-size:14px;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease,color .28s ease,background-color .28s ease}
  nav a:last-child{border-right:0}
  nav[data-open=true] a{opacity:1;transform:none}
  nav[data-open=true] a:nth-child(1){transition-delay:.06s}
  nav[data-open=true] a:nth-child(2){transition-delay:.11s}
  nav[data-open=true] a:nth-child(3){transition-delay:.16s}
  nav[data-open=true] a:nth-child(4){transition-delay:.21s}
  nav a:last-child:before{display:block}
  nav a:last-child:hover,nav a:last-child:focus-visible{background:#ff5a1f0a;border-color:var(--line);color:var(--orange)}
  header:has(.menu-toggle[aria-expanded=true]){background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}

  .intro,.network-copy{grid-template-columns:1fr;gap:36px}
  .network-map{height:560px}
  .belief{min-height:0;padding-top:88px;padding-bottom:88px}
  .belief p{margin:48px 0 0 25%}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .contact-intro>p{max-width:none}
}

/* ---- <=820px : large phone, small tablet portrait ------------------------ */
@media (width<=820px){
  .system-grid{grid-template-columns:1fr}
  .system-grid article{min-height:320px}
  .network-map{height:520px}
  .hub{width:170px;height:170px}
  .hub span{font-size:48px}
  .node{width:100px;height:100px;font-size:11px}
  .node:after{width:120px}
  .n1,.n3{left:2%}
  .n2,.n4{right:2%}
  .project-card{grid-template-columns:1fr}
  .project-card>div{padding:32px}
  .project-card>div:first-child{border-right:0;border-bottom:1px solid var(--line);min-height:320px}
  .model-list article{grid-template-columns:70px 1fr;gap:18px}
  .model-list p{grid-column:2}
  .belief p{margin:44px 0 0}
  .contact{flex-direction:column;align-items:flex-start;gap:56px}
  footer{grid-template-columns:1fr;gap:30px}
  footer>div:last-child{align-items:flex-start}
}

/* ---- <=600px : phone ----------------------------------------------------- */
@media (width<=600px){
  header{padding:0 18px}
  .wordmark small,.wordmark b{display:none}
  nav{inset:74px 0 0}
  nav a{padding:22px 18px;font-size:13px}
  .hero{min-height:82vh;padding:28px 18px 24px}
  /* The rotated mark bled ~200px past the right edge on a phone. */
  .hero-mark{width:60vw;height:60vw;top:17vh;right:-20vw}
  .rail{flex-direction:column;gap:6px}
  /* "Infrastructure." is a single unbreakable word: at 23vw it overflowed its
     own box by ~118px and ran off the screen. 15.5vw is the largest size that
     holds it from 360px up. */
  h1{margin:11vh 0 8vh;font-size:15.5vw;line-height:.86}
  .hero-foot{grid-template-columns:1fr;gap:32px}
  .hero-foot a{justify-self:start}
  .ticker{white-space:nowrap;justify-content:flex-start;gap:28px;padding:0 18px;overflow:hidden}
  .platform,.model,.projects,.belief,.network{padding:78px 18px}
  .label{margin-bottom:38px}
  .system-grid article{min-height:280px;padding:26px}
  .system-grid h3{font-size:40px}
  .model-list article{grid-template-columns:1fr;gap:10px}
  .model-list p{grid-column:1}
  .contact{padding:75px 18px;gap:44px}
  .contact>a{display:inline-flex}
  footer{padding:45px 18px}

  /* Contact page */
  .page-contact{padding:70px 18px 90px}
  .contact-intro h1{font-size:16vw}
  .inquiry{padding:26px 22px}
}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION
   Hover states still change color and fill - they just arrive instantly, and
   the parallax is switched off in the script as well.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  nav,nav a,nav a:before,.menu-toggle,.menu-toggle .bars i,.hero-foot a,.hero-foot a span,.project-card a,.project-card a span,.contact>a:after,.contact>a span,.intro p a,.network-copy p a{transition:none}
  nav a:hover:before,nav a:focus-visible:before,nav a[aria-current=page]:before{transform:none;transition:none}
  nav[data-open=true] a{transition:none;transform:none}
  nav[data-open=true] a:nth-child(1),nav[data-open=true] a:nth-child(2),nav[data-open=true] a:nth-child(3),nav[data-open=true] a:nth-child(4){transition-delay:0s}
  h1,.hero-foot{transform:none}
  .hero-mark{transform:rotate(45deg)}
  .network-map:before{background-position:0 0}
  .hero-foot a:hover span,.project-card a:hover span,.contact>a:hover span{transform:none}
  html{scroll-behavior:auto}
}


/* --------------------------------------------------------------------------
   Form status + Turnstile
   Added alongside the /api/contact Worker endpoint. The status block is
   hidden until assets/site.js writes a sending / success / error message
   into it.
   -------------------------------------------------------------------------- */
.form-status{display:none;margin:0 0 20px;padding:12px 14px;border:1px solid;font-size:14px;line-height:1.5}
.form-status.is-visible{display:block}
.form-status.is-success{color:#7fe0a7;border-color:rgba(127,224,167,.4)}
.form-status.is-error{color:#ff8f8f;border-color:rgba(255,143,143,.4)}
.field--turnstile{margin:4px 0 20px}