/* Highbridge — site styles. CI: ci/d-hybrid (Signal + Span). Logical properties throughout (RTL-ready). */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin.e3a28eade2.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/fonts/archivo-latin-ext.5717f37059.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/geist-latin.19f9c92546.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/geist-latin-ext.824f485b5d.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --chalk:#F1F0EB; --stone:#E3E1DA; --ink:#16181B; --graphite:#4A4F56;
  --signal:#F2512A; --signal-deep:#B5340F; --mist:#A9ADB3; --rule:#CFCCC3;
  --display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --text:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(16px, 3.2vw, 48px);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --section:clamp(72px, 9vw, 144px);
  --measure:62ch;
  --dirx:1;
}
[dir="rtl"]{--dirx:-1}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-block-start:88px}
body{margin:0; background:var(--chalk); color:var(--ink); font:400 17px/1.6 var(--text); -webkit-font-smoothing:antialiased; overflow-x:clip; caret-color:var(--signal-deep)}
::selection{background:var(--signal); color:var(--ink)}
img{display:block; max-width:100%}
picture{display:contents}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:3px solid var(--signal-deep); outline-offset:3px}
.on-ink a:focus-visible, .on-ink button:focus-visible, .on-signal a:focus-visible{outline-color:var(--chalk)}
.on-signal a:focus-visible{outline-color:var(--ink)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.tnum{font-variant-numeric:tabular-nums}
.vh{position:absolute!important; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.sprite{position:absolute; inline-size:0; block-size:0; overflow:hidden}
.accent{color:var(--signal)}
.skip{position:absolute; inset-inline-start:var(--gutter); inset-block-start:-80px; z-index:100; background:var(--ink); color:var(--chalk); padding:14px 18px; font:600 15px/1 var(--text); text-decoration:none}
.skip:focus{inset-block-start:12px}

/* ---------- wordmark ---------- */
.wm{display:block; block-size:auto; inline-size:100%; color:currentColor}
#wm .st{fill:none; stroke:currentColor; stroke-width:12}
#wm .dt{fill:var(--dot, var(--signal))}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-block-size:48px; border:0; border-radius:0; background:var(--ink); color:var(--chalk); font:600 15px/1 var(--text); padding:14px 20px; text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform .14s var(--ease), background-color .16s var(--ease)}
.btn--signal{background:var(--signal); color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; cursor:progress}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:#2A2D31} .btn--signal:hover{background:#F46A47} }
.btn svg, .arrow{inline-size:14px; block-size:14px; flex:none}
[dir="rtl"] .btn svg, [dir="rtl"] .arrow{transform:scaleX(-1)}
.link{display:inline-flex; align-items:center; min-block-size:44px; font:600 15px/1.2 var(--text)}

/* ---------- header ---------- */
.nav{position:relative; z-index:20; display:flex; align-items:center; gap:var(--s6); padding:var(--s4) var(--gutter)}
.nav .brand{margin-inline-end:auto; display:flex; align-items:center; min-block-size:44px; inline-size:clamp(122px, 11vw, 152px); color:var(--ink)}
.nav .brand .wm{inline-size:100%}
.menu ul{display:flex; gap:var(--s5); list-style:none; margin:0; padding:0; font:500 15px/1 var(--text)}
.menu a{display:inline-flex; align-items:center; min-block-size:44px; text-decoration:none; position:relative}
.menu a::after{content:""; position:absolute; inset-inline:0; inset-block-end:8px; block-size:2px; background:var(--signal); transform:scaleX(0); transform-origin:var(--origin, left); transition:transform .18s var(--ease)}
[dir="rtl"] .menu a::after{--origin:right}
@media (hover:hover) and (pointer:fine){ .menu a:hover::after{transform:scaleX(1)} }
.lang{display:flex; align-items:center; gap:2px; font:500 13px/1 var(--text); color:var(--graphite)}
.lang a, .lang span[aria-current]{display:inline-flex; align-items:center; justify-content:center; min-inline-size:44px; min-block-size:44px; text-decoration:none; letter-spacing:.04em}
.lang span[aria-current]{color:var(--ink); font-weight:700}
.lang a:hover{color:var(--ink); text-decoration:underline}
.menu-btn{display:none}

/* ---------- hero ---------- */
.hero{min-block-size:calc(100svh - 76px); display:flex; flex-direction:column; position:relative; overflow:hidden}
.hero-main{flex:1; display:flex; flex-direction:column; justify-content:center; padding:var(--s5) var(--gutter) var(--s7)}
.hero-title{font-family:var(--display); font-weight:780; font-stretch:112%; font-size:clamp(3.4rem, 9.3vw, 11rem); line-height:.9; letter-spacing:-.045em; margin:0}
.hero-title .line{display:flex; flex-wrap:wrap; align-items:center; column-gap:.16em; will-change:transform}
.hero-title .line + .line{margin-block-start:.06em}
.mask{display:inline-block; overflow:hidden; padding-block:.04em .1em; margin-block:-.04em -.1em}
.mask > span{display:inline-block}
.crop{display:inline-block; inline-size:1.75em; block-size:.72em; overflow:hidden; position:relative; background:var(--ink); align-self:center; transform:translateY(.02em)}
.crop img{position:absolute; inset:-16% 0; inline-size:100%; block-size:132%; max-inline-size:none; object-fit:cover; will-change:transform}
.crop--a img{object-position:50% 50%}
.crop--b img{inline-size:200%; inset-inline-start:-58%; object-position:50% 25%}
.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}

.hero-foot{position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:stretch}
.hero-foot::before{content:""; position:absolute; inset:0; background:var(--signal); clip-path:inset(0 0 0 0); z-index:0}
[dir="rtl"] .js:not(.ready) .hero-foot::before{clip-path:inset(0 0 0 100%)}
.hero-foot > *{position:relative; z-index:1}
.bridge{padding:var(--s6) var(--gutter)}
.bridge p{margin:0 0 var(--s5); font:500 clamp(18px, 1.55vw, 23px)/1.4 var(--text); max-inline-size:36ch; letter-spacing:-.005em}
.bridge .cta{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center}
.facts{display:flex; flex-direction:column; justify-content:flex-end; gap:6px; margin:0; padding:var(--s6) var(--gutter); font:500 14px/1.5 var(--text)}
.facts div{display:flex; justify-content:space-between; gap:var(--s4); border-block-start:1px solid rgba(22,24,27,.3); padding-block-start:8px}
.facts dt{margin:0}
.facts dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums; text-align:end}

/* entrance (only with JS, never with reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .js:not(.ready) .mask > span{transform:translateY(108%)}
  .js:not(.ready) .crop{clip-path:inset(0 50% 0 50%)}
  .js:not(.ready) .hero-foot::before{clip-path:inset(0 100% 0 0)}
  .js:not(.ready) .bridge > *, .js:not(.ready) .facts{opacity:0; transform:translateY(10px)}
  .ready .mask > span{transition:transform .62s var(--ease) calc(var(--i,0) * 60ms)}
  .ready .crop{transition:clip-path .7s var(--ease) calc(160ms + var(--i,0) * 60ms)}
  .ready:not(.settled) .hero-foot::before{transition:clip-path .55s var(--ease) .3s}
  .ready .bridge > *, .ready .facts{transition:opacity .4s var(--ease) .5s, transform .5s var(--ease) .5s}
  /* section reveals */
  .js .rv{clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease)}
  .js .rv.in{clip-path:inset(0 0 0 0)}
  .js .up{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--ease)}
  .js .up.in{opacity:1; transform:none}
}

/* ---------- shared section heads ---------- */
.sec{padding:var(--section) var(--gutter) var(--s9)}
.h2{margin:0; font:760 clamp(2.6rem, 6.4vw, 6.4rem)/.95 var(--display); font-stretch:108%; letter-spacing:-.04em}
.lead{margin:var(--s5) 0 0; font-size:clamp(17px,1.3vw,19px); color:var(--graphite); max-inline-size:52ch}
.grid12{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5)}

/* ---------- what we do ---------- */
.what-head{margin-block-end:var(--s9)}
.what-head .h2{grid-column:1 / span 9}
.what-head .lead{grid-column:1 / span 6}
.area{border-block-start:2px solid var(--ink); padding-block:var(--s6) var(--s9); row-gap:var(--s5)}
.area h3{margin:0; font:800 clamp(2.2rem, 5vw, 5rem)/.92 var(--display); font-stretch:118%; letter-spacing:-.035em}
.for{font:600 13px/1.35 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--signal-deep); margin:0 0 var(--s3)}
.area .lede{font:500 clamp(18px,1.5vw,22px)/1.42 var(--text); margin:0 0 var(--s4); max-inline-size:40ch}
.area p{margin:0 0 var(--s3); max-inline-size:var(--measure)}
.area .small{color:var(--graphite); font-size:15px}
.area figure{margin:0; overflow:hidden; background:var(--ink); position:relative}
.area figure img{inline-size:100%; block-size:100%; object-fit:cover}
.ourrole{margin:var(--s5) 0 0!important; padding-block-start:var(--s3); border-block-start:1px solid var(--rule); font:500 15px/1.4 var(--text); color:var(--graphite)}
.ourrole b{color:var(--ink); font-weight:700}

/* Brand Factory: name left, two crops stacked offset, text right */
.area--factory .name{grid-column:1 / span 7}
.area--factory .body{grid-column:8 / span 5; grid-row:1 / span 3; padding-block-start:var(--s2)}
.area--factory .fig-a{grid-column:1 / span 6; aspect-ratio:16/9}
.area--factory .fig-a img{object-position:50% 45%}
.area--factory .fig-b{grid-column:4 / span 3; aspect-ratio:1/1; margin-block-start:calc(var(--s9) * -1); z-index:1; box-shadow:0 24px 48px -24px rgba(22,24,27,.45)}
.area--factory .fig-b img{object-position:30% 50%}
.steps{display:flex; flex-wrap:wrap; gap:6px 0; margin:var(--s5) 0 0; padding:0; list-style:none; font:600 15px/1 var(--text)}
.steps li{padding:9px 14px; border:1.5px solid var(--ink); margin-inline-end:-1.5px}

/* Trade: narrow portrait left, name + goods list right */
.area--trade figure{grid-column:1 / span 3; grid-row:1 / span 2; aspect-ratio:3/4; align-self:start; background:var(--signal)}
.area--trade figure img{object-position:50% 20%}
.area--trade .name{grid-column:5 / span 8}
.area--trade .body{grid-column:5 / span 8}
.goods{list-style:none; margin:var(--s5) 0 var(--s4); padding:0}
.goods li{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--s5); padding-block:var(--s4); border-block-start:1px solid var(--rule)}
.goods li:last-child{border-block-end:1px solid var(--rule)}
.goods strong{font:700 clamp(18px,1.6vw,22px)/1.2 var(--display); font-stretch:104%; letter-spacing:-.01em}
.goods span{color:var(--graphite); font-size:16px; line-height:1.45}

/* Commercial operations: on stone, crop overlapping the rule */
.area--ops{background:var(--stone); border:0; margin-inline:calc(var(--gutter) * -1); padding:var(--s8) var(--gutter)}
.area--ops .name{grid-column:1 / span 6}
.area--ops .body{grid-column:1 / span 6}
.area--ops figure{grid-column:8 / span 5; grid-row:1 / span 2; aspect-ratio:4/5; margin-block-start:calc(var(--s9) * -1); box-shadow:0 24px 48px -24px rgba(22,24,27,.35)}
.area--ops figure img{object-position:20% 50%}
.quiet{margin:var(--s9) 0 0; font:650 clamp(24px,2.6vw,38px)/1.18 var(--display); font-stretch:106%; letter-spacing:-.02em; max-inline-size:30ch}
.quiet span{display:block; color:var(--signal-deep)}

/* ---------- divider band ---------- */
.band{position:relative; block-size:clamp(220px, 34vw, 460px); overflow:hidden; background:var(--ink); margin:0}
.band img{position:absolute; inset:-18% 0; inline-size:100%; block-size:136%; max-inline-size:none; object-fit:cover; object-position:50% 50%; will-change:transform}

/* ---------- how we work: the span (signature) ---------- */
.how-head{align-items:end; margin-block-end:var(--s8)}
.how-head .h2{grid-column:1 / span 7}
.how-head figure{grid-column:9 / span 4; margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--stone)}
.how-head figure img{inline-size:100%; block-size:100%; object-fit:cover}
.span{position:relative}
.truss{display:block; inline-size:100%; block-size:auto; overflow:visible}
[dir="rtl"] .truss{transform:scaleX(-1)}
.truss path{fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:square}
.truss .deck{stroke-width:8}
.truss .web{stroke:var(--graphite); stroke-width:2}
.js .truss path{stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw, 1))}
.piers{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0}
.piers li{position:relative; padding-block-start:var(--s5); padding-inline-end:var(--s5)}
.piers li::before{content:""; position:absolute; inset-block-start:0; inset-inline-start:0; inline-size:6px; block-size:var(--s5); background:var(--ink)}
.piers h3{display:flex; align-items:center; gap:var(--s3); margin:var(--s3) 0 var(--s3); font:780 clamp(24px,2.3vw,34px)/1 var(--display); font-stretch:112%; letter-spacing:-.025em}
.piers h3::before{content:""; inline-size:14px; block-size:14px; flex:none; background:var(--ink); transition:background-color .3s var(--ease), transform .3s var(--ease)}
.piers p{margin:0; color:var(--graphite); font-size:16px; line-height:1.5; max-inline-size:30ch}
.piers li.on h3::before{background:var(--signal); transform:scale(1.25)}
.js .piers li:not(.on) h3{color:var(--graphite)}
.js .piers li:not(.on) h3::before{background:var(--mist)}
.piers h3{transition:color .3s var(--ease)}
.js .truss .post{transition:stroke-dashoffset .5s var(--ease); stroke-dashoffset:1}
.js .truss .post.on{stroke-dashoffset:0}

/* ---------- who we work with ---------- */
.who .h2{margin-block-end:var(--s7)}
.who-list{list-style:none; margin:0; padding:0}
.who-list li{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5); align-items:baseline; padding-block:var(--s6); border-block-start:2px solid var(--ink); position:relative}
.who-list li:last-child{border-block-end:2px solid var(--ink)}
.who-list h3{grid-column:1 / span 4; margin:0; font:800 clamp(2.2rem,4.6vw,4.8rem)/.92 var(--display); font-stretch:120%; letter-spacing:-.04em}
.who-list p{grid-column:5 / span 5; margin:0; max-inline-size:52ch}
.who-list a{grid-column:10 / span 3; justify-self:end; display:inline-flex; align-items:center; gap:10px; min-block-size:44px; font:600 15px/1.25 var(--text); text-decoration:none; border-block-end:2px solid var(--signal); text-align:end}
.who-list a .arrow{transition:transform .18s var(--ease)}
@media (hover:hover) and (pointer:fine){ .who-list a:hover .arrow{transform:translateX(calc(4px * var(--dirx)))} [dir="rtl"] .who-list a:hover .arrow{transform:scaleX(-1) translateX(4px)} }

/* ---------- company (ink) ---------- */
.company{background:var(--ink); color:var(--chalk); padding:var(--s9) var(--gutter) var(--s8)}
.company .h2{color:var(--chalk)}
.company .lead{color:var(--mist); margin-block-end:var(--s8)}
.ledger{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr) minmax(0,2fr); gap:var(--s5); align-items:end; margin:0}
.ledger div{border-block-start:1px solid #3A3E44; padding-block-start:var(--s3)}
.ledger dt{font:500 14px/1.3 var(--text); color:var(--mist); margin-block-end:var(--s2)}
.ledger dd{margin:0; font:800 clamp(2.4rem, 6.2vw, 6.6rem)/.9 var(--display); font-stretch:110%; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.ledger .num dd{color:var(--signal)}
.ledger div:not(.num) dd{font-size:clamp(2rem, 4.2vw, 4.4rem)}
.ledger2{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:0 var(--s5); margin:var(--s8) 0 0; font-size:16px}
.ledger2 dt, .ledger2 dd{margin:0; padding-block:var(--s3); border-block-start:1px solid #3A3E44}
.ledger2 dt{color:var(--mist)}
.company .fine{display:flex; flex-wrap:wrap; gap:0 var(--s6); margin-block-start:var(--s6)}
.company .fine a{color:var(--chalk)}

/* ---------- contact (stone) ---------- */
.contact{background:var(--stone); padding:var(--section) var(--gutter) var(--s9)}
.contact-intro{grid-column:1 / span 4}
.contact-intro .lead{color:var(--graphite)}
.mail{margin-block-start:var(--s7); font-size:15px; color:var(--graphite)}
.mail a{display:inline-flex; align-items:center; min-block-size:44px; color:var(--ink); font:700 clamp(20px,1.8vw,26px)/1.2 var(--display); font-stretch:104%; letter-spacing:-.01em; word-break:break-word}
.form{grid-column:6 / span 7; display:grid; gap:var(--s5)}
.field{display:grid; gap:6px; align-content:start}
.field label, .fs legend, .lbl{font:600 15px/1.3 var(--text)}
.req{color:var(--graphite); font-weight:400; font-size:13px}
.hint{font-size:14px; color:var(--graphite); margin:0}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
input[type=text], input[type=email], select, textarea{inline-size:100%; min-block-size:48px; padding:12px 14px; border:1.5px solid var(--ink); border-radius:0; background:var(--chalk); color:var(--ink); font:400 16px/1.4 var(--text); appearance:none}
select{background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-inline-end:40px}
[dir="rtl"] select{background-position:20px 50%, 15px 50%}
textarea{min-block-size:140px; resize:vertical}
[aria-invalid="true"]{border-color:var(--signal-deep)!important; box-shadow:inset 0 0 0 1.5px var(--signal-deep)}
.err{margin:0; font:600 14px/1.4 var(--text); color:var(--signal-deep)}
.err:empty{display:none}
.fs{border:0; margin:0; padding:0; min-inline-size:0}
.fs legend{padding:0; margin-block-end:8px}
.seg{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
.seg label{position:relative; display:flex; align-items:center; justify-content:center; text-align:center; min-block-size:52px; padding:8px 10px; border:1.5px solid var(--ink); margin-inline-start:-1.5px; font:600 14px/1.25 var(--text); cursor:pointer; background:var(--chalk); transition:background-color .14s var(--ease)}
.seg label:first-of-type{margin-inline-start:0}
.seg input{position:absolute; opacity:0; inline-size:1px; block-size:1px}
.seg label:has(input:checked){background:var(--ink); color:var(--chalk)}
.seg label:has(input:focus-visible){outline:3px solid var(--signal-deep); outline-offset:2px; z-index:1}
.seg.invalid label{border-color:var(--signal-deep)}
.brandq{display:grid; min-inline-size:0; gap:var(--s5); padding:var(--s5); border:1.5px dashed var(--graphite); background:rgba(241,240,235,.55)}
.brandq[hidden]{display:none}
.brandq > .lbl{margin:0; padding:0; float:inline-start; inline-size:100%}
.consent{font-size:14px; color:var(--graphite); margin:0}
.submit{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4)}
.status{margin:0; font:600 15px/1.45 var(--text)}
.status:empty{display:none}
.status.ok{padding:var(--s4) var(--s5); background:var(--ink); color:var(--chalk)}
.status.bad{padding:var(--s4) var(--s5); border:1.5px solid var(--signal-deep); color:var(--signal-deep); background:var(--chalk)}
.hp{position:absolute!important; inset-inline-start:-9999px; inline-size:1px; block-size:1px; overflow:hidden}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:var(--mist); padding:var(--s8) var(--gutter) var(--s6); font-size:14px; line-height:1.6}
.foot-top{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr); gap:var(--s6); align-items:start}
.foot .brand{display:block; inline-size:140px; color:var(--chalk)}
.foot p{margin:0 0 var(--s2); max-inline-size:70ch}
.foot strong{color:var(--chalk); font-weight:600}
.foot a{color:var(--chalk)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li a{display:inline-flex; align-items:center; min-block-size:44px}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4); margin-block-start:var(--s7); padding-block-start:var(--s4); border-block-start:1px solid #2C3035}
.foot .lang{color:var(--mist)}
.foot .lang span[aria-current]{color:var(--chalk)}
.foot .lang a:hover{color:var(--chalk)}

/* ---------- simple pages (legal, privacy, thanks, 404) ---------- */
.page{padding:var(--s8) var(--gutter) var(--section)}
.page-head{border-block-start:2px solid var(--ink); padding-block-start:var(--s5); margin-block-end:var(--s8)}
.page h1{margin:0; font:800 clamp(2.6rem, 7vw, 7rem)/.92 var(--display); font-stretch:114%; letter-spacing:-.045em}
.page .intro{margin:var(--s5) 0 0; font:500 clamp(18px,1.5vw,22px)/1.42 var(--text); max-inline-size:52ch}
.legal-dl{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:0 var(--s5); margin:0; max-inline-size:1100px}
.legal-dl dt, .legal-dl dd{margin:0; padding-block:var(--s4); border-block-start:1px solid var(--rule)}
.legal-dl dt{font-weight:600}
.legal-dl dd a{display:inline-flex; min-block-size:44px; align-items:center}
.legal-note{max-inline-size:var(--measure); color:var(--graphite); margin:var(--s6) 0 0; font-size:15px}
.prose{max-inline-size:var(--measure)}
.prose h2{margin:var(--s7) 0 var(--s3); font:760 clamp(22px,2vw,28px)/1.15 var(--display); font-stretch:106%; letter-spacing:-.015em}
.prose p{margin:0 0 var(--s4)}
.back{margin-block-start:var(--s8)}
.page--short{min-block-size:60svh; display:flex; flex-direction:column; justify-content:center}
.page--short .page-head{border-color:var(--signal); border-block-start-width:10px}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .menu ul{gap:var(--s4)}
  .nav{gap:var(--s4)}
}
@media (max-width: 980px){
  .menu-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-inline-size:48px; min-block-size:48px; padding:0 12px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); font:600 14px/1 var(--text); cursor:pointer}
  .menu-btn span{display:block; inline-size:18px; block-size:2px; background:currentColor; box-shadow:0 6px 0 currentColor, 0 -6px 0 currentColor}
  .no-js .menu-btn{display:none}
  .nav{flex-wrap:wrap; row-gap:0}
  .menu{order:5; flex-basis:100%}
  .menu ul{flex-wrap:wrap; gap:0 var(--s5)}
  .js .menu{display:none}
  .js .nav.open .menu{display:block; padding-block:var(--s3) var(--s4); border-block-start:1px solid var(--rule); margin-block-start:var(--s3)}
  .js .nav.open .menu ul{flex-direction:column; gap:0}
  .js .nav.open .menu a{font:700 26px/1 var(--display); font-stretch:110%; letter-spacing:-.02em; min-block-size:52px}
  .nav .btn--signal{display:none}
  .hero-foot{grid-template-columns:1fr}
  .hero-foot{--grow:1 !important}
  .facts{padding-block:var(--s5) var(--s6)}
  .what-head .h2, .what-head .lead, .how-head .h2, .how-head figure{grid-column:1 / -1}
  .area > *{grid-column:1 / -1 !important; grid-row:auto !important}
  .area--factory .fig-b{display:none}
  .area--trade figure{aspect-ratio:16/9}
  .area--trade figure img{object-position:50% 15%}
  .area--ops figure{margin-block-start:0; aspect-ratio:16/10}
  .piers{grid-template-columns:1fr; gap:0}
  .truss{display:none}
  .piers li{padding-block:var(--s4) var(--s5); padding-inline-start:var(--s6); border-inline-start:6px solid var(--ink)}
  .js .piers li{border-inline-start-color:var(--stone)}
  .js .piers li.on{border-inline-start-color:var(--ink)}
  .piers li::before{display:none}
  .piers h3{margin-block-start:0}
  .who-list h3, .who-list p, .who-list a{grid-column:1 / -1; justify-self:start; text-align:start}
  .who-list li{row-gap:var(--s4)}
  .ledger{grid-template-columns:1fr 1fr}
  .ledger .num{grid-column:1 / -1}
  .contact-intro, .form{grid-column:1 / -1}
  .contact-intro{margin-block-end:var(--s6)}
  .foot-top{grid-template-columns:1fr}
}
@media (max-width: 700px){
  body{font-size:16px}
  .nav .lang{margin-inline-start:auto}
  .nav .brand{margin-inline-end:0}
  .hero{min-block-size:auto}
  .hero-main{padding-block:var(--s7)}
  .hero-title{font-size:16.4vw; font-stretch:104%; letter-spacing:-.04em; line-height:.92}
  .hero-title .line + .line{margin-block-start:.12em}
  .crop{inline-size:1.5em; block-size:.68em}
  .goods li{grid-template-columns:1fr; gap:4px}
  .ledger{grid-template-columns:1fr}
  .ledger2, .legal-dl{grid-template-columns:1fr}
  .ledger2 dd, .legal-dl dd{border-block-start:0; padding-block-start:0}
  .row2{grid-template-columns:1fr}
  .seg{grid-template-columns:1fr 1fr}
  .seg label{margin-inline-start:0; margin-block-start:-1.5px}
  .seg label:nth-of-type(even){margin-inline-start:-1.5px}
  .seg label:nth-of-type(-n+2){margin-block-start:0}
  .quiet{margin-block-start:var(--s7)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
  .hero-foot{--grow:1 !important}
  .crop img, .band img, .hero-title .line{transform:none!important}
  .js .truss path{stroke-dashoffset:0}
  .js .piers li h3{color:var(--ink)!important}
  .js .truss .post{stroke-dashoffset:0}
  .js .piers li h3::before{background:var(--signal)}
}
@media print{
  .nav, .menu-btn, .band, .form, .hero-foot::before{display:none!important}
  body{background:#fff}
}