/* v5.css: the cleaned hero and everything below the valve stem seals. Direction: DIRECTION.md (repo root). */
:root{
  --ground:#E4E8EC; --ink:#0E1114; --steel:#6E7884; --far:#8A95A1; --navy:#10305C; --gold:#E3B341; --head-red:#E3101E;
  --hair:rgba(14,17,20,.14); --ease5:cubic-bezier(.2,.7,.2,1);
}
.st{color:var(--steel)}
.code{font-variant-numeric:tabular-nums;white-space:nowrap}
.ln{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block}
html.v5-on .ln>span{transform:translate3d(0,108%,0);transition:transform .48s cubic-bezier(.2,.7,.2,1) calc(var(--li,0) * 60ms)}
html.v5-on .ln.in>span{transform:none}

/* ===== header: fewer things, calmer ===== */
.site-header .bar{height:92px;gap:52px}
.lockup img{height:58px}
.nav{gap:30px;font-size:15px}
.site-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(var(--pg,0));transform-origin:0 50%;pointer-events:none;opacity:0;transition:opacity .3s}
html.past-cta .site-prog{opacity:1}

/* ===== hero: copy on the left, the deck with room around it, the picker as three plain words ===== */
.hero .hero-grid{padding-top:112px;padding-bottom:56px}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(54px,min(6.1vw,10.6vh),96px);line-height:.95}
.hero h1 .accent{font-size:1.4em;line-height:.92;letter-spacing:-.005em}   /* sized so WHOLESALE ends level with ENGINE GASKETS: the headline reads as one block */
@media (max-width:359px){.hero h1{font-size:calc((100vw - 40px)/5.95)}}   /* the narrowest phones: ENGINE GASKETS stays on one line */
.hero .lede{margin-top:28px;max-width:29em;font-size:clamp(17px,1.24vw,20px);line-height:1.45;color:#3E4750}
.hero .lede b{font-weight:600;color:var(--navy);white-space:nowrap}
.hero .cta-row{margin-top:32px}
/* the action row: the button, then the number and the hours beside it as plain text (the hours are information, not a second button) */
.hero .cta-row .btn-wa{min-height:58px;padding:0 30px;font-size:17px;gap:11px}
.hero .cta-row .btn-wa svg{width:22px;height:22px}
.cta-contact{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hero .cta-contact .status,.hero .cta-contact .status.is-open{gap:9px;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:17px}
.hero .cta-contact>.status-time{padding-left:19px;font:500 14.5px/1 var(--body)}
.hero .cta-contact>.status-time::before{content:none}
/* the credential: a large 25, its words stacked beside it, a hairline, then the two brands on one line */
.hero .hero-brands-label{display:flex;align-items:center;gap:9px;margin:0;color:var(--navy)}
.hero .hero-brands-label b{font:600 68px/.86 var(--display);color:var(--navy)}
.hero .hero-brands-label span{font:600 19px/1.02 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--navy)}
@media (min-width:901px){
  .hero .cta-row{flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:36px}
  .hero .lede{white-space:nowrap;max-width:none}
  .hero .hero-brands{display:flex;align-items:center;column-gap:24px;width:max-content;margin:0 0 26px}
  .hero .hero-brands-label::after{content:"";width:1px;height:58px;margin-left:13px;background:rgba(16,48,92,.3)}
  .hero .hero-brands img.hb-thg{height:clamp(68px,9.3vh,88px)}
  .hero .hero-brands img.hb-takoma{height:clamp(40px,5.5vh,52px)}
}
/* phones: one thumb-wide button, the number and hours under it; the hero keeps room below them so nothing is clipped */
@media (max-width:900px){
  .hero{padding-bottom:32px}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:10px;transform:none!important}   /* the scroll drift pushed this last row past the hero's clipped bottom edge */
  .hero .cta-row .btn-wa{justify-content:center;min-height:54px}
  .hero h1 .accent{font-size:min(1.4em,calc((100vw - 40px) / 4.15))}   /* never wider than the phone */
  .hero .hero-brands{row-gap:6px}
  .hero .hero-brands-label{align-items:baseline;gap:7px}
  .hero .hero-brands-label b{font-size:30px;line-height:1}
  .hero .hero-brands-label span{font-size:18px}
  .hero .hero-brands-label br{display:none}
}
/* phones: the whole hero, hours line included, fits one 390x844 screen (it ran 41px over and the fold cut the hours line) */
@media (max-width:760px){
  .hero{padding-bottom:20px}
  .hero .hero-copy>.hero-brands{margin-top:84px}
  .hero .hero-copy>.lede{margin-top:12px}
  .hero .hero-copy>.cta-row{margin-top:20px}
}
:root{--fit:calc(100svh - 65px)}   /* the window below the header: sections that are one composition fit inside it */
/* the bore heading is capped by the window's height, like Sold worldwide; --bore-t is the height of heading plus sub-line, which the Engines landing and the plate's overlap are measured from */
:root{--bore-h:clamp(60px,min(12.2vw,19vh),176px);--bore-t:calc(var(--bore-h) * .9 + clamp(14px,2.4vh,26px) + clamp(17px,1.5vw,22px) * 1.4)}
.hero-foot,html[data-theme=silver] .hero-foot{position:absolute;left:0;right:0;bottom:0;background:none!important;border:0!important}
/* the brushed steel dissolves into the plain silver of the next section, so the hero has no bottom edge */
html[data-theme=silver] .hero{background:#DDE1E5}
html[data-theme=silver] .hero::after{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - clamp(160px,32vh,320px)),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - clamp(160px,32vh,320px)),transparent)}
.gx-dock{position:relative;bottom:auto;padding:0 0 clamp(22px,4vh,40px)}
.gx-k{display:none!important}
.gx-row{gap:clamp(24px,2.8vw,44px)}
.gx button,.gx button:hover,.gx button[aria-pressed=true]{display:grid;grid-template-columns:auto auto;column-gap:13px;row-gap:4px;align-items:center;background:none;border:0;box-shadow:none;padding:8px 0 11px;min-width:0;color:#1E252C;transform:none;border-radius:0}
.gx-sw{grid-row:1/3;width:32px;height:32px}
.gx button[aria-pressed=true] .gx-sw{box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px var(--gold)}
.gx button b{grid-column:2;font:600 16.5px/1.05 var(--body);letter-spacing:.005em;text-transform:none}
.gx button span{grid-column:2;display:block;font:500 11.5px/1.1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#56606B}
.gx button[aria-pressed=true]{color:var(--navy)}
.gx button[aria-pressed=true] span{color:#3E4A58}
.gx button::after{background:var(--gold);opacity:1;transform:scaleX(0)}
.gx button[aria-pressed=true]::after{transform:scaleX(1)}
.gx.is-auto button[aria-pressed=true]::after{transform:scaleX(var(--gx-p,0))}
@media (max-width:900px){
  .hero-foot{position:relative}
  .hero-copy>h1{margin-top:16px}
}

/* ===== shared section base ===== */
.v5{position:relative;background:var(--ground);color:var(--ink);overflow:clip;isolation:isolate;font:400 18px/1.5 var(--body)}
.bore h2,.ship h2{margin:0;font:600 clamp(60px,12.2vw,176px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.008em}
.bore h2 .st,.ship h2 .st,.ct5 .ct-title .st{color:var(--head-red);font-style:italic;font-weight:700}
.bore h2,.ship h2{color:var(--navy)}
html.v5-on body{background:var(--ground)}
html.v5-on .v5,html.v5-on .bore{background:transparent}
html.v5-on .bore:not(.is-static){background:var(--ground)}
.tl{display:inline-flex;align-items:center;gap:14px;font:600 16px/1 var(--body);color:var(--navy);text-decoration:none}
.tl svg{width:24px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .35s var(--ease5)}
.tl:hover svg{transform:translateX(7px)}
.tl:focus-visible,.ft a:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

/* ===== bore: readable static layout by default; the flight only applies once v5.js is running ===== */
.bore{position:relative;background:var(--ground);color:var(--ink);padding:0;margin-top:-1px}
.bore-stage{padding:clamp(90px,16vh,170px) 0 clamp(30px,5vh,50px)}
.bore-cv{display:none}
.bore-title{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad)}
.bore-title h2{white-space:nowrap}
.bore-title p{margin:clamp(14px,2.4vh,26px) 0 0;font:400 clamp(17px,1.5vw,22px)/1.4 var(--body);color:#3E4750}
.bore-anchor{position:absolute;left:0;top:0}
html.v5-on .bore:not(.is-static)::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(150px,26vh,260px);z-index:3;pointer-events:none;background:linear-gradient(#0F1014 0,rgba(15,16,20,.9) 12%,rgba(15,16,20,.62) 34%,rgba(15,16,20,.28) 62%,rgba(15,16,20,.07) 86%,rgba(15,16,20,0))}
html.v5-on .bore:not(.is-static){height:128vh}
html.v5-on .bore:not(.is-static) .bore-stage{position:absolute;inset:0;padding:0}
html.v5-on .bore:not(.is-static):not(.is-ready) .bore-stage{background:#0E1013}
html.v5-on .bore:not(.is-static):not(.is-ready) .bore-title{visibility:hidden}
html.v5-on .bore:not(.is-static) .bore-cv{display:block;position:sticky;top:0;width:100%;height:100vh;height:100svh;z-index:2}
html.v5-on .bore:not(.is-static) .bore-title{position:absolute;left:0;right:0;top:0;will-change:transform}
html.v5-on .bore:not(.is-static) .bore-anchor{top:auto;bottom:100vh;bottom:100svh}
/* the Engines link lands where the flight has ended and the heading sits 24px under the header, with the plate already in the window */
@media (min-width:961px){ .bore h2{font-size:var(--bore-h)} html.v5-on .bore:not(.is-static) .bore-anchor{top:calc(80.64vh - var(--bore-t) / 2 - 89px);bottom:auto} }
@media (max-width:760px){ .bore-title h2{white-space:normal} html.v5-on .bore:not(.is-static){height:125vh} .ship-head{padding-top:36px} }

/* ===== engines we cover: a sheet of brushed steel carrying whole rows of codes, the make list on a plate laid over it ===== */
.eng{--pw:clamp(560px,41vw,760px);--cl:clamp(28px,3.6vh,38px);--rowh:clamp(46px,min(6.6vw,calc((var(--fit) - 6.25vw - 80px) / 7)),118px);--slant:6.25vw;--lm:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));--cut:clamp(56px,7vw,120px);position:relative;overflow:clip;background:#C8CDD4 url(../assets/v5/steel_stripe.webp) center/cover no-repeat!important;padding:calc(var(--rowh)*.42) 0 calc(var(--slant) + var(--rowh)*.42)}
.eng::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(#fff,rgba(255,255,255,.3));pointer-events:none;z-index:2}
html.v5-on .bore:not(.is-static)+.eng{margin-top:calc(-47.36vh + var(--bore-t) / 2 + 56px);z-index:3}   /* the plate starts 56px under the sub-line once the flight has ended */
.eng-field{position:relative;display:flex;flex-direction:column;pointer-events:none}
.eng-row{display:flex;align-items:center;height:var(--rowh);gap:.42em;white-space:nowrap;will-change:transform}
.eng-row b{font:600 calc(var(--rowh)*.98)/var(--rowh) var(--display);letter-spacing:.005em;color:transparent;-webkit-text-stroke:1.4px rgba(16,48,92,.36);transition:color .22s linear,-webkit-text-stroke-color .22s linear}
.eng-row b.on{color:var(--navy);-webkit-text-stroke-color:var(--navy)}
.eng-plate-w{position:absolute;z-index:1;left:0;top:0;bottom:0;width:calc(var(--lm) + var(--pw) + 30px + var(--cut));filter:drop-shadow(9px 0 15px rgba(14,24,38,.34))}
.eng-plate-w::before{content:"";position:absolute;inset:0 -2px 0 0;background:#fff;clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}
.eng-plate{position:relative;height:100%;display:flex;align-items:center;background:#EDF0F3;clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);padding-bottom:var(--slant)}
.eng-panel{width:calc(var(--lm) + var(--pw));box-sizing:border-box;padding-left:var(--lm)}
.eng-makes{display:flex;flex-wrap:wrap;gap:3px 2px;margin-left:-9px}
.eng-makes button{all:unset;box-sizing:border-box;height:clamp(34px,4.4vh,46px);padding:0 9px;display:inline-flex;align-items:center;cursor:pointer;border-radius:2px;font:600 clamp(15px,1.7vh,18px)/1 var(--body);letter-spacing:.05em;text-transform:uppercase;color:#1E252C;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .12s linear,background-color .12s linear,color .12s linear}
.eng-makes button:hover{color:var(--navy);box-shadow:inset 0 -2px 0 0 rgba(16,48,92,.4)}
.eng-makes button[aria-pressed=true]{background:var(--navy);color:#fff;box-shadow:inset 0 -2px 0 0 var(--gold)}
.eng-makes button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.eng-name{margin:clamp(24px,3.6vh,36px) 0 0;height:clamp(44px,min(4.5vw,8.4vh),84px);display:flex;align-items:flex-end;white-space:nowrap;font:600 clamp(44px,min(4.5vw,8.4vh),84px)/1 var(--display);text-transform:uppercase;color:var(--navy)}
.eng-rule{display:block;width:56px;height:2px;background:var(--gold);margin:12px 0 16px}
.eng-codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0 8px;min-height:calc(var(--cl) * 7);font:500 clamp(16px,1.85vh,20px)/var(--cl) var(--mono);font-variant-numeric:tabular-nums;color:#1E252C;transition:opacity .14s linear;align-content:start}
.eng-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0 0;font-size:clamp(16px,1.7vh,18px);color:#3E4750}
@media (max-width:960px){
  .eng{--rowh:58px;padding:14px 0 0;background:#EDF0F3 url(../assets/v5/steel_stripe_m.webp) 50% 0/auto 380px no-repeat!important}
  .eng-field{height:calc(var(--rowh)*5);overflow:hidden}
  .eng-row:nth-child(n+6){display:none}
  .eng-plate-w{position:relative;width:auto;filter:none;margin-top:14px}
  .eng-plate-w::before{display:none}
  .eng-plate{clip-path:polygon(0 30px,100% 0,100% 100%,0 100%);padding:58px 0 calc(var(--slant) + 44px)}
  .eng-panel{width:auto;min-width:0;padding:0 var(--pad)}
  .eng-makes button{height:44px;padding:0 13px}
  .eng-codes{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));min-height:0;font-size:15px;line-height:27px}
  .eng-foot{flex-direction:column;align-items:flex-start}
  html.v5-on .bore:not(.is-static)+.eng{margin-top:-30vh}
}
/* phones: the heading rests higher in the opened bore (bore.js) and the plate follows 44px under its sub-line, so there is no empty screen between them */
@media (max-width:760px){ html.v5-on .bore:not(.is-static)+.eng{margin-top:calc(-57.5vh + 132px)} }

/* ===== 25 years: a wall of real packs, the number on a navy plate cut across it ===== */
.years{--slant:6.25vw;--lm:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)));position:relative;z-index:4;overflow:visible;margin-top:calc(var(--slant) * -1)}
.years-sh{position:absolute;left:0;width:100%;top:calc(var(--slant) - 20px);height:20px;background:linear-gradient(to top,rgba(14,24,38,.3),rgba(14,24,38,0));transform-origin:0 100%;transform:skewY(-3.576deg);pointer-events:none}
.years-panel{--x:calc(var(--lm) + 610px);position:relative;display:flex;align-items:center;min-height:clamp(640px,80vh,840px);overflow:hidden;color:#fff;background:var(--navy);clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
.years-wall{position:absolute;inset:0 -4%;will-change:transform}
.years-wall img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.years-sc{position:absolute;inset:0;clip-path:polygon(0 0,calc(var(--x) - 70px + 3px) 0,calc(var(--x) + 70px + 3px) 100%,0 100%);background:rgba(255,255,255,.75)}
.years-sc i{position:absolute;inset:0;background:var(--navy);clip-path:polygon(0 0,calc(var(--x) - 70px) 0,calc(var(--x) + 70px) 100%,0 100%)}
.years-in{position:relative;z-index:2;padding:calc(var(--slant) + 40px) var(--pad) 72px var(--lm)}
.years-n{margin:0;font:700 clamp(170px,21vw,330px)/.84 var(--display);letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:#fff}
.years-t{margin:clamp(14px,2.4vh,24px) 0 0;font:600 clamp(36px,4.5vw,64px)/.98 var(--display);text-transform:uppercase;color:#9DB2D1}
.years-t b{display:block;font-weight:600;font-size:clamp(48px,6.7vw,96px);color:#fff}
@media (max-width:760px){
  .years-panel{--x:100vw;display:block;min-height:0;padding-top:64vw;clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
  .years-wall{inset:0 -4% auto;height:96vw}
  .years-sc{inset:auto 0 0;top:60vw;clip-path:polygon(0 34px,100% 0,100% 100%,0 100%)}
  .years-sc i{clip-path:polygon(0 36px,100% 2px,100% 100%,0 100%)}
  .years-in{padding:44px var(--pad) 60px}
  .years-n{font-size:150px}
  .years-t b{font-size:52px}
}

/* ===== where we ship ===== */
.ship{height:clamp(640px,122vh,1200px);display:block}
/* wide: the whole globe shows. The section is half a slant taller than the window, so Contact's slanted edge passes under the globe instead of through it;
   the globe's box ends above that edge and the film band ends inside the globe, so the globe breaks out of the band above and below. */
@media (min-width:761px){.ship{--ship-h:clamp(60px,min(12.2vw,19vh),176px);--ship-top:clamp(56px,9vh,140px);--ship-b:calc(3.125vw + clamp(14px,2.4vh,26px));height:clamp(560px,calc(var(--fit) + 3.125vw),1200px);display:block} .ship h2{font-size:var(--ship-h)} .ship-head{padding-top:var(--ship-top)} .ship .ship-globe{bottom:var(--ship-b);height:calc(100% - var(--ship-top) - var(--ship-h) * .9 - 62px - var(--ship-b))} .ship .ship-band{top:calc(var(--ship-top) + var(--ship-h) * .9 + 76px);height:auto;bottom:calc(3.125vw + clamp(34px,6.4vh,72px))}}
.ship-head{position:relative;z-index:2;padding-top:clamp(70px,13vh,140px);text-align:center}
.ship-regions{margin:clamp(12px,2vh,22px) 0 0;font:400 clamp(17px,1.5vw,22px)/1.4 var(--body);color:#3E4750}
.ship-globe{position:absolute;left:0;right:0;bottom:0;height:74%;z-index:1;pointer-events:none}
.ship-globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ship-l{position:absolute;left:0;top:0;padding:7px 11px 6px;background:rgba(248,250,252,.94);border-radius:2px;box-shadow:0 0 0 1px rgba(16,48,92,.18);font:600 14px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);white-space:nowrap;opacity:0;will-change:transform}
.ship-hub{background:var(--navy);color:#fff;box-shadow:inset 2px 0 0 var(--gold)}

.ship{--lm:max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad)))}
.ship-band{--sk:5vw;position:absolute;left:0;right:0;top:calc(clamp(70px,13vh,140px) + clamp(60px,12.2vw,176px) * .9 + 84px);height:clamp(280px,48vh,500px);z-index:0;background:linear-gradient(#fff 55%,var(--ground) 55%);clip-path:polygon(0 clamp(20px,3.2vw,48px),100% 0,100% calc(100% + 4px),0 calc(100% + 4px))}
.ship-film{position:absolute;top:0;bottom:0;margin:0;overflow:hidden}
.ship-film img,.ship-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ship-film video{opacity:0;transition:opacity .5s linear}
.ship-film video.ready{opacity:1}
.sf-a{left:0;width:calc(50% + var(--sk) / 2 - 2px);clip-path:polygon(0 0,100% 0,calc(100% - var(--sk)) 100%,0 100%)}
.sf-b{right:0;width:calc(50% + var(--sk) / 2 - 2px);clip-path:polygon(var(--sk) 0,100% 0,100% 100%,0 100%)}
.ship-film figcaption{position:absolute;top:clamp(46px,5.4vw,78px);padding:7px 11px 6px;background:rgba(248,250,252,.94);border-radius:2px;box-shadow:0 0 0 1px rgba(16,48,92,.18);font:600 14px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);white-space:nowrap;z-index:1}
.sf-a figcaption{left:var(--lm)} .sf-b figcaption{right:var(--lm)}
.ship-haze{position:absolute;left:0;right:0;bottom:-4px;height:68%;z-index:2;background:linear-gradient(to top,var(--ground) 7%,rgba(228,232,236,.86) 22%,rgba(228,232,236,.42) 56%,rgba(228,232,236,.1) 84%,rgba(228,232,236,0))}
@media (max-width:760px){
  .ship-band{--sk:7vw;top:auto;position:relative;height:52vw;margin-top:22px}
  .ship-film figcaption{top:28px;font-size:11.5px;letter-spacing:.04em}
  .sf-a figcaption{left:12px} .sf-b figcaption{right:12px}
}

/* ===== contact: the number is the object ===== */
html.v5-on .ct5,.ct5{--slant:6.25vw;background:var(--ground);box-shadow:none;position:relative;z-index:3;margin-top:calc(var(--slant) * -1);padding-top:calc(var(--l4-sec) + var(--slant));clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}
.ship::after{content:"";position:absolute;left:0;width:100%;bottom:0;height:46px;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(14,24,38,.3),rgba(14,24,38,.08) 48%,rgba(14,24,38,0));transform-origin:0 100%;transform:skewY(-3.576deg)}
.ct5 .ct-title{font-size:clamp(56px,7.2vw,124px);line-height:.95;color:var(--navy)}
.ct5 .ct-num{font-size:clamp(52px,6.6vw,112px)!important;line-height:.95;letter-spacing:-.008em}
@media (min-width:761px){html.v5-on .ct5,.ct5{padding-top:calc(clamp(24px,calc(9vh - 36px),128px) + var(--slant))}}
.ct5 .ct-label{color:var(--ink);font-size:14px}
/* contact fits the window below the header: type and spacing tighten with the window's height */
@media (min-width:1101px){.ct5{padding-bottom:clamp(20px,3.4vh,72px)} .ct5 .ct-title{font-size:clamp(56px,min(7.2vw,13.8vh),124px)} .ct5 .ct-phone{margin-top:clamp(12px,2.6vh,56px)} .ct5 .ct-num{font-size:clamp(52px,min(6.6vw,13.2vh),112px)!important} .ct5 .ct-label{margin-bottom:clamp(6px,1.2vh,12px)} .ct5 .ct-row .ct-label{margin:5px 0 0} .ct5 .ct-actions{margin-top:clamp(12px,2vh,26px)} .ct5 .ct-dl{margin-top:clamp(12px,2.4vh,48px)} .ct5 .ct-row{padding:clamp(7px,1.3vh,20px) 0} .ct5 .ct-dl dd{font-size:clamp(17px,2.6vh,19px);line-height:clamp(23px,3.6vh,28px)} .ct5 .ct-status{margin-top:clamp(5px,1vh,12px)} .ct5 .ct-maplink{margin-top:clamp(4px,.9vh,12px)}}
/* short windows: Hours and Address side by side, the languages under them */
@media (min-width:1101px) and (max-height:860px){.ct5 .ct-dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px} .ct5 .ct-row{grid-template-columns:minmax(0,1fr);row-gap:3px} .ct5 .ct-row .ct-label{margin:0} .ct5 .ct-row:nth-child(1){grid-column:1;grid-row:1} .ct5 .ct-row:nth-child(3){grid-column:2;grid-row:1} .ct5 .ct-row:nth-child(2){grid-column:1/-1;grid-row:2;grid-template-columns:112px minmax(0,1fr);column-gap:24px;align-items:baseline} .ct5 .ct-nw{white-space:normal}
  .ct5 .ct-row{align-content:start}   /* the shorter of the two side-by-side rows keeps its label tight to its lines */
  .ct5 .ct-dl dd .ct-line{text-wrap:balance}   /* the opening hours break as two even lines, not one long and one orphan */
  .ct5 .ct-pocket{min-height:min(640px,calc(96.6vh - 94px))}}   /* the map ends inside the window with the details */
/* the title and the number never run wider than their own column (the column stops growing at 497px) */
@supports (width:1cqw){
  .ct5 .ct-info{container-type:inline-size}
  .ct5 .ct-title{font-size:min(clamp(56px,7.2vw,124px),23.6cqw)}
  .ct5 .ct-num{font-size:min(clamp(52px,6.6vw,112px),18.5cqw)!important}
  @media (min-width:1101px){.ct5 .ct-title{font-size:min(clamp(56px,min(7.2vw,13.8vh),124px),23.6cqw)} .ct5 .ct-num{font-size:min(clamp(52px,min(6.6vw,13.2vh),112px),18.5cqw)!important}}
}

/* ===== footer: the machined plate and navy bar ===== */
.ft-plate{background-image:url(../assets/lower4/contact/milled_plate.webp)}

#brands{scroll-margin-top:72px}
.site-header .btn-wa{margin-left:auto}
.site-header.scrolled .btn-wa{padding:10px 14px;font-size:14px}
/* one green button per view: while the hero's own WhatsApp button is on screen the header's is a navy outline */
.site-header .btn-wa{transition:transform .26s cubic-bezier(.3,1.4,.5,1),background-color .2s linear,color .2s linear,box-shadow .2s linear}
html.v5-on:not(.past-hero) .site-header .btn-wa{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
html.v5-on:not(.past-hero) .site-header .btn-wa:hover{background:var(--navy);color:#fff}
html{scroll-behavior:auto}
.site-header.scrolled{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--ground)!important}
html.over-dark .site-header.scrolled{background:rgb(15,18,21)!important}
.nav a.cur::after{transform:scaleX(1);height:1px;background:var(--gold)}
.btn{transition:transform .26s cubic-bezier(.3,1.4,.5,1)}
.btn:active{transform:scale(.97);transition-duration:.09s}
@media (max-width:760px){ .site-header .bar{gap:12px} .site-header:not(.scrolled) .lockup img{height:42px;width:auto} .site-header .btn-wa{padding:9px 12px;font-size:13px} }
.ct-zoom{position:absolute;right:14px;top:14px;z-index:6;display:flex;flex-direction:column;border-radius:4px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.7),0 6px 16px -8px rgba(16,28,44,.55)}
.ct-zoom button{width:38px;height:38px;border:0;margin:0;padding:0;background:rgba(244,246,248,.96);color:#10305C;font:500 22px/1 var(--body);cursor:pointer;transition:background .15s linear}
.ct-zoom button+button{border-top:1px solid rgba(16,48,92,.16)}
.ct-zoom button:hover{background:#fff}
.ct-zoom button[aria-disabled=true]{color:#9AA5B1;cursor:default}
.ct-zoom button:focus-visible{outline:2px solid #10305C;outline-offset:-2px}
.ct-pocket.is-zoomable{cursor:zoom-in}
.ct-pocket.is-wheel{cursor:ns-resize}
.ct-hint{position:absolute;left:50%;bottom:16px;z-index:6;transform:translateX(-50%);padding:7px 11px 6px;background:rgba(16,48,92,.92);color:#fff;font:500 11.5px/1 var(--mono);letter-spacing:.04em;border-radius:3px;white-space:nowrap;opacity:0;transition:opacity .2s linear;pointer-events:none}
.ct-hint.show.on{opacity:1}
@media (max-width:760px){ .ship{height:clamp(620px,94vh,800px)} .ship-globe{height:72%} }
@media (min-width:761px) and (max-width:900px){ .site-header .bar{gap:14px;height:72px} .site-header .lockup img{height:40px;width:auto} .nav{gap:14px;font-size:12.5px;letter-spacing:.04em;margin-left:0} .site-header .btn-wa{padding:9px 12px;font-size:13px;margin-left:auto} }
.ship-l.on{background:var(--navy);color:#fff;box-shadow:inset 2px 0 0 var(--gold)}
.ship-l{transition:background-color .25s linear,color .25s linear}
.ct-gm iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:#D9DEE4}
.ct-gm.on iframe{pointer-events:auto}
.ct-gm-on{position:absolute;inset:0;z-index:4;border:0;padding:0 0 22px;background:transparent;cursor:pointer;touch-action:pan-y;display:flex;align-items:flex-end;justify-content:center}
.ct-gm-on span{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--navy);padding:11px 15px 10px;border-radius:2px;box-shadow:inset 2px 0 0 var(--gold),0 8px 20px rgba(16,28,44,.28)}
.ct-gm-on:hover span,.ct-gm-on:focus-visible span{background:#0E2750}
.ct-gm.on .ct-gm-on{display:none}
.ct-gm-off{position:absolute;right:12px;bottom:30px;z-index:6;border:0;cursor:pointer;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--navy);padding:11px 15px 10px;border-radius:2px;box-shadow:inset 2px 0 0 var(--gold)}
.ct-gm-off[hidden]{display:none}
@media (max-width:620px){ .ship-l{font-size:11px;padding:5px 7px 4px;letter-spacing:.05em} .ship-l[data-r=europe]{display:none} }

/* header logo: the wide lockup (aspect 7.69) gets the room; below 1200px the WhatsApp button goes icon-only so the whole logo still fits */
.site-header .bar .lockup img{height:56px;width:auto}
.site-header.scrolled .bar .lockup img{height:46px}
@media (max-width:1199px){
  .site-header .bar,.site-header.scrolled .bar{gap:20px}
  .site-header .nav{margin-left:0}
  .site-header .btn-wa,.site-header.scrolled .btn-wa{flex:none;width:46px;height:46px;padding:0;gap:0;font-size:0;justify-content:center}
  .site-header .btn-wa svg,.site-header.scrolled .btn-wa svg{width:24px;height:24px;margin:0}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(33px,calc((100vw - 640px)/7.7),46px)}
}
@media (max-width:900px){
  .site-header .bar,.site-header.scrolled .bar{gap:14px}
  .site-header .nav{gap:14px}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(33px,calc((100vw - 500px)/7.7),46px)}
}
/* 1200 to 1339px: the full button stays, the gaps and the logo give way so the bar never runs past the window (a scrollbar's width is allowed for at every step) */
@media (min-width:1200px) and (max-width:1339px){
  .site-header .bar{gap:32px}
  .site-header .nav{margin-left:0}
  .site-header .bar .lockup img{height:clamp(48px,calc((100vw - 808px)/7.7),56px)}
}
@media (max-width:760px){
  .site-header .bar,.site-header.scrolled .bar{gap:12px}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(28px,calc((100vw - 100px)/7.7),46px)}
}

/* header actions: the Instagram glyph sits beside the WhatsApp button as quiet ink, never a second button */
.site-header .hd-act{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.site-header .hd-act .btn-wa{margin-left:0}
.hd-ig{display:grid;place-items:center;width:40px;height:40px;flex:none;color:inherit;opacity:.8;border-radius:4px;transition:opacity .18s linear,color .18s linear}
.hd-ig svg{width:22px;height:22px;display:block}
.hd-ig:hover{opacity:1;color:var(--navy)}
html.over-dark .site-header.scrolled .hd-ig:hover{color:#fff}
html.over-dark .site-header.scrolled .hd-ig:focus-visible{outline-color:#fff}
/* room for the glyph: at each step the nav gaps and the logo give way, and a scrollbar's 17px is still spare */
@media (min-width:1340px) and (max-width:1399px){ .site-header .nav{margin-left:0} }
@media (min-width:1200px) and (max-width:1289px){
  .site-header .bar{gap:28px}
  .site-header .nav{gap:20px}
  .site-header .bar .lockup img{height:clamp(48px,calc((100vw - 830px)/7.7),56px)}
}
@media (min-width:901px) and (max-width:1199px){
  .site-header .hd-act{gap:8px}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(33px,calc((100vw - 688px)/7.7),46px)}
}
@media (min-width:901px) and (max-width:1023px){
  .site-header .nav{gap:18px}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(31px,calc((100vw - 658px)/7.7),46px)}
}
@media (min-width:761px) and (max-width:900px){
  .site-header .hd-act{gap:6px}
  .site-header .nav{gap:12px}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(29px,calc((100vw - 532px)/7.7),46px)}
}
@media (max-width:760px){
  .site-header .hd-act{gap:4px}
  .hd-ig{height:46px}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(28px,calc((100vw - 144px)/7.7),46px)}
}
/* narrower than 360px there is no room beside the logo: the glyph stays in the footer only */
@media (max-width:359px){
  .hd-ig{display:none}
  .site-header .bar .lockup img,.site-header.scrolled .bar .lockup img{height:clamp(28px,calc((100vw - 100px)/7.7),46px)}
}

/* footer logo: same wide lockup, sized so the descriptor line reads */
.l4-foot .ft-logo img{width:460px;height:auto}
@media (max-width:760px){ .l4-foot .ft-logo img{width:min(calc(100vw - 40px),420px)} }
@media (min-width:1024px) and (max-width:1199px){ .l4-foot .ft-top{gap:24px} .l4-foot .ft-logo img{width:min(460px,calc(100vw - 692px))} }
.l4-foot .ft-nav a,.l4-foot .ft-dist-l{font-size:14px}
/* narrowest phones: the two brand marks scale together to stay inside the margins */
@media (max-width:375px){ .l4-foot .ft-marks .ft-thg{height:calc((100vw - 68px)/4.044)} .l4-foot .ft-marks .ft-tak{height:calc((100vw - 68px)/9.04)} }

/* where each section start sits when it is reached: just under the scrolled header. Anchors and the settle in v5.js both read these, so they are the only copy. */
@media (min-width:1101px) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  #hero{scroll-margin-top:0}
  #seals,.eng,.years,#thg,#takoma,.tko-stage,#ship{scroll-margin-top:65px}
  #contact{scroll-margin-top:calc(65px - var(--slant))}
}