/* Fonts are self-hosted on the live site (no Google Fonts request). Variable files, latin subset,
   downloaded 2026-10-06 from Google Fonts: Fraunces (opsz 9-144, wght 400-600) and Jost (wght 400-500). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/fraunces-roman.woff2?v=5d28351743') 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:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;src:url('/assets/fonts/fraunces-italic.woff2?v=be1b7d1cec') 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:'Jost';font-style:normal;font-weight:400 500;font-display:swap;src:url('/assets/fonts/jost.woff2?v=41a72a3a0a') 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}
/* ------------------------------------------------------------------
   Kurd Barber — premium concept.
   Rules for this sheet: no border-radius anywhere, no filled cards,
   no pill buttons, no tricolour. Separation is whitespace and hairlines.
   ------------------------------------------------------------------ */
:root{
  --ink:#0A0A0B;
  --ink-2:#0E0E10;
  --bone:#E9E4DA;
  --bone-2:rgba(233,228,218,.72);
  --bone-3:rgba(233,228,218,.52);
  --brass:#C0A05C;
  --rule:rgba(233,228,218,.13);
  --display:'Fraunces',Georgia,serif;
  --body:'Jost',Helvetica,sans-serif;
  /* pipeline brand tokens, same values as the palette above */
  --brand-primary:#C0A05C;
  --brand-accent:#E9E4DA;
  --max:1320px;
  --pad:clamp(1.5rem,6vw,6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;padding:0;overflow-x:clip}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.65}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:500;font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0;margin:0;line-height:1.06;letter-spacing:-.014em}
p{margin:0 0 1.15em;max-width:56ch}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* small caps label, the only decorative device */
.label{font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin:0 0 1.6rem;display:block}
.label--bone{color:var(--bone-3)}

/* squared link-buttons, no fills unless primary */
.act{display:inline-flex;align-items:center;gap:.9rem;font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:1.15rem 2rem;border:1px solid var(--bone-3);color:var(--bone);transition:background-color .35s,color .35s,border-color .35s;min-height:52px}
.act:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.act--solid{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.act--solid:hover{background:transparent;color:var(--bone);border-color:var(--bone-3)}
.act--bare{border:0;padding:1.15rem 0;color:var(--brass)}
.act--bare:hover{background:none;color:var(--bone)}
.act--bare span{border-bottom:1px solid rgba(192,160,92,.45);padding-bottom:.35rem}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:1000;padding:1.6rem 0;transition:background-color .4s,padding .4s}
.nav.is-scrolled{background:rgba(10,10,11,.9);backdrop-filter:blur(10px);padding:1rem 0}
.nav__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:2rem}
.mark{display:flex;align-items:baseline;gap:.8rem;min-height:44px}
.mark b{font-family:var(--display);font-weight:600;font-size:1.24rem;letter-spacing:.14em;text-transform:uppercase}
.mark i{font-style:normal;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-3)}
.menu{display:flex;gap:2.6rem;list-style:none;margin:0;padding:0}
.menu a{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2);padding:.6rem 0;min-height:44px;display:inline-flex;align-items:center}
.menu a:hover{color:var(--bone)}
.tel{font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);border-bottom:1px solid var(--brass);padding-bottom:.3rem;min-height:44px;display:inline-flex;align-items:center}

/* hero: full-bleed footage, type sat low with real margins */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg video,.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.78) 34%,rgba(10,10,11,.30) 62%,rgba(10,10,11,.12) 100%),
    linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.10) 30%,rgba(10,10,11,.62) 76%,rgba(10,10,11,.92) 100%)}
.hero h1,.hero__sub{text-shadow:0 1px 30px rgba(10,10,11,.55)}
.hero__in{width:100%;padding-block:clamp(6rem,14vh,11rem) clamp(3.5rem,9vh,6rem)}
.hero h1{font-size:clamp(3rem,7.4vw,7rem);line-height:.98;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero__sub{font-size:clamp(1rem,1.35vw,1.18rem);color:var(--bone-2);max-width:44ch;margin:2rem 0 0}
.hero__acts{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:2.8rem}
.hero__foot{display:flex;flex-wrap:wrap;gap:3.4rem;margin-top:clamp(3rem,7vh,5rem);padding-top:1.9rem;border-top:1px solid var(--rule)}
.hero__foot div{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3)}
.hero__foot b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--bone);margin-bottom:.35rem}

/* generic section rhythm */
.sec{padding-block:clamp(6rem,15vh,12rem)}
.sec--tight{padding-block:clamp(4rem,9vh,7rem)}

/* editorial statement, the piece that carries the idea */
.statement{max-width:24ch;font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.1}
.statement em{font-style:italic;color:var(--brass)}
.aside{max-width:46ch;color:var(--bone-2);font-size:1.02rem}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(3rem,8vw,8rem);align-items:start}
.two--mid{align-items:center}

/* service list: names left, note right, hairlines only */
.list{border-top:1px solid var(--rule)}
.list__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,5rem);padding:2.2rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.list__row h3{font-size:clamp(1.55rem,2.7vw,2.2rem)}
.list__row p{margin:0;color:var(--bone-2);font-size:.98rem;max-width:50ch}
.list__row:hover h3{color:var(--brass)}
.list__row h3{transition:color .3s}

/* numbered ritual, no boxes */
.ritual{list-style:none;margin:0;padding:0;counter-reset:r}
.ritual li{counter-increment:r;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,3rem);padding:2rem 0;border-top:1px solid var(--rule)}
.ritual li::before{content:"0" counter(r);font-family:var(--display);font-size:.95rem;color:var(--brass);letter-spacing:.1em}
.ritual h3{font-size:1.42rem;font-weight:600;margin:0 0 .45rem}
.ritual p{margin:0;color:var(--bone-2);font-size:.97rem;max-width:46ch}

/* full-bleed footage band */
.band{position:relative;height:clamp(60vh,74vh,760px);overflow:hidden}
.band video,.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band video,.band img{filter:brightness(.62) contrast(1.06) saturate(.9)}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.55),rgba(10,10,11,.22) 34%,rgba(10,10,11,.80) 76%,rgba(10,10,11,.96) 100%)}
.band__in{position:absolute;left:0;right:0;bottom:0;padding-block:clamp(2.5rem,6vh,4.5rem);z-index:1}
.band h2{font-size:clamp(2rem,4vw,3.4rem)}
.band p{color:var(--bone-2);margin:.8rem 0 0}

/* quote, set large and given room */
.quote{max-width:22ch;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.16;margin:0}
.quote + .by{margin-top:2rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-3)}

/* people, plain */
.who{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);border-top:1px solid var(--rule);padding-top:2.4rem}
.who h3{font-size:2rem;margin:0 0 .2rem}
.who .role{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:.9rem}
.who p{color:var(--bone-2);font-size:.97rem;margin:0}

/* hours table */
.hours{border-top:1px solid var(--rule)}
.hours div{display:flex;justify-content:space-between;gap:2rem;padding:1.05rem 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.hours span:first-child{color:var(--bone-3);letter-spacing:.08em;text-transform:uppercase;font-size:.74rem;align-self:center}
.hours span:last-child{font-variant-numeric:tabular-nums}

.media{position:relative;overflow:hidden;background:var(--ink-2)}
.media video,.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:4/3}

/* footer */
.foot{border-top:1px solid var(--rule);padding-block:clamp(4rem,8vh,6rem) 2.5rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.foot h4{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-3);margin:0 0 1.4rem;font-weight:400;font-family:var(--body)}
.foot ul{list-style:none;margin:0;padding:0}
.foot ul a{color:var(--bone-2);font-size:.95rem;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.foot ul a:hover{color:var(--brass)}
.foot__end{margin-top:3.4rem;padding-top:1.5rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}
.foot__end a{color:var(--brass)}
.foot__end a:hover{color:var(--bone)}

.tag{position:fixed;left:0;right:0;bottom:0;z-index:1400;background:var(--bone);color:var(--ink);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;padding:.65rem 1rem;text-align:center}
.tag a{color:var(--ink);border-bottom:1px solid rgba(10,10,11,.4)}
body{padding-bottom:36px}

@media (max-width:900px){
  .two{grid-template-columns:1fr;gap:2.5rem}
  .who{grid-template-columns:1fr;gap:2.2rem}
  .foot__grid{grid-template-columns:1fr 1fr}
  .list__row{grid-template-columns:1fr;gap:.7rem}
  .menu{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero h1{font-size:clamp(2.4rem,11vw,3.6rem)}
  .statement{font-size:clamp(1.8rem,8vw,2.6rem);max-width:none}
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .act{justify-content:center}
  .hero__foot{gap:1.8rem}
  .foot__grid{grid-template-columns:1fr}
  .tel{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ==================================================================
   Full-site additions. Same rules apply: no radius, no filled cards.
   ================================================================== */

/* inner-page hero */
.phero{padding-block:calc(clamp(6rem,13vh,9rem)) clamp(2.5rem,6vh,4rem);border-bottom:1px solid var(--rule)}
.phero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:16ch}
.phero .aside{margin-top:1.6rem}
.phero--compact{padding-block:calc(var(--navh,80px) + clamp(2rem,4vh,3rem)) clamp(1.75rem,3vh,2.5rem)}

/* hamburger + overlay */
.burger{display:none;background:none;border:0;padding:.6rem;width:46px;min-width:46px;height:46px;flex:none;cursor:pointer;color:var(--bone)}
.burger span{display:block;width:22px;height:1px;background:currentColor;margin:6px 0;transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;background:var(--ink);z-index:940;display:flex;flex-direction:column;justify-content:center;
  gap:.4rem;padding:6rem var(--pad) 3rem;transform:translateY(-100%);transition:transform .45s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.drawer.is-open{transform:translateY(0)}
.drawer a{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,7vw,2.6rem);padding:.5rem 0;border-bottom:1px solid var(--rule)}
.drawer a:last-of-type{border-bottom:0}
.drawer .act{margin-top:2rem;justify-content:center}
body.is-locked{overflow:hidden}

/* forms */
.form{display:grid;gap:1.6rem}
.field label{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);margin-bottom:.6rem}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  color:var(--bone);font-family:var(--body);font-size:1.02rem;padding:.75rem 0;min-height:48px;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}
.field textarea{min-height:120px;resize:vertical}
.formnote{font-size:.84rem;color:var(--bone-3);margin:0}
.formerr{display:none;border:1px solid rgba(192,160,92,.5);padding:1rem 1.2rem;font-size:.92rem;color:var(--bone)}
.formerr.is-shown{display:block}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.grid figure{margin:0;position:relative;background:var(--ink);overflow:hidden}
.grid .fill{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-2)}
.grid .fill img,.grid .fill video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,0,.2,1)}
.grid figure:hover .fill img{transform:scale(1.04)}
.grid figcaption{padding:1.1rem 1.3rem 1.4rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3)}
.grid figure.wide{grid-column:span 2}
.grid figure.wide .fill{aspect-ratio:16/10}

/* prose for legal */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.75rem);margin:2.6rem 0 .9rem}
.prose p,.prose li{color:var(--bone-2);font-size:1rem}
.prose ul{padding-left:1.1rem;display:grid;gap:.5rem;margin:0 0 1.15em}
.prose a{color:var(--brass);border-bottom:1px solid rgba(192,160,92,.4)}

/* map */
.map{border:1px solid var(--rule);overflow:hidden}
.map iframe{display:block;width:100%;height:360px;border:0;filter:grayscale(1) invert(.92) contrast(.85)}

/* cookie banner */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--ink-2);border-top:1px solid var(--rule);
  padding:1.3rem var(--pad) calc(1.3rem + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:1.2rem;
  align-items:center;justify-content:space-between}
.cookie p{margin:0;font-size:.88rem;color:var(--bone-2);max-width:52ch}
.cookie div{display:flex;gap:.8rem;flex-wrap:wrap}
.cookie .act{padding:.8rem 1.4rem;min-height:44px;font-size:.72rem}

/* contact split */
.cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.dl{border-top:1px solid var(--rule)}
.dl div{display:flex;justify-content:space-between;gap:1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--rule);font-size:.96rem}
.dl dt{color:var(--bone-3);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin:0;align-self:center}
.dl dd{margin:0;text-align:right}
.dl a:hover{color:var(--brass)}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cgrid{grid-template-columns:1fr;gap:3rem}
}
@media (max-width:767px){
  .menu{display:none}
  .burger{display:block}
  .tel{display:none}
  .grid{grid-template-columns:1fr}
  .grid figure.wide{grid-column:span 1}
  .cookie{flex-direction:column;align-items:stretch}
  .cookie div{flex-direction:column}
  .cookie .act{justify-content:center}
}
.mark__sun{width:19px;height:19px;flex:none;align-self:center;opacity:.95}
/* animations.js locks scroll with .menu-open */
body.menu-open{overflow:hidden;position:fixed;width:100%}

/* --- verify-gate fixes --- */
/* 44x44 minimum on the footer end row (Terms measured 37px wide, credit 17px tall) */
.foot__end a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:.35rem}
.foot__end{align-items:center}
/* cookie actions sat on a translucent ground and measured 4.2:1; make them opaque */
.cookie .act{background:var(--ink);border-color:var(--bone-3);font-size:.76rem}
.cookie .act:hover{background:var(--bone);color:var(--ink)}
.cookie .act--solid{background:var(--bone);color:var(--ink)}
.cookie .act--solid:hover{background:var(--ink);color:var(--bone)}
/* full-width primary actions on phones (gate is 480 so it covers 430px Pro Max) */
@media (max-width:480px){
  .hero__acts,.form>div{flex-direction:column;align-items:stretch;display:flex;gap:12px}
  .hero__acts .act,.form button[type="submit"],.act.btn{width:100%;justify-content:center}
}
/* invisible label so the facing column starts level with the heading, not the label */
.label--spacer{visibility:hidden}
/* the map reads better in its own colours than tinted to match the page */
.map iframe{filter:none}

/* live fixes 2026-10-06 */
/* gallery: a wide photo next to a short row left an empty grey cell on tablet and desktop */
.grid{grid-auto-flow:dense}
/* contact details: phone, WhatsApp and Instagram links were 22px tall on phones; 44px hit area, text unmoved */
.dl dd a{position:relative}
.dl dd a::before{content:"";position:absolute;inset:-11px -6px}
/* gallery, 3 columns: 12 single + 4 wide photos = 20 cells, one short of 7 full rows, which left an empty
   cell after the last photo. The last photo takes two cells on desktop only. Recheck if photos change. */
@media (min-width:901px){
  .grid figure:last-child:not(.wide){grid-column:span 2}
  .grid figure:last-child:not(.wide) .fill{aspect-ratio:16/10}
  .grid figure:last-child:not(.wide) .fill img{object-position:center 22%}
}
/* phones: sections had about 230px of empty space between them (padding on both edges, 15vh each).
   Cut to about 160px on phones only, approved by Avara 2026-10-06. Tablet and desktop unchanged. */
@media (max-width:767px){
  .sec{padding-block:clamp(3.5rem,8vh,4.5rem)}
  .sec--tight{padding-block:clamp(3rem,7vh,4rem)}
}
/* header + footer: the sun sat about 5px below the middle of the KURD BARBER capitals (Avara, 2026-10-06).
   On phones the header name wraps onto two lines and the sun centres on both, so leave that alone. */
.mark__sun{transform:translateY(-5px)}
@media (max-width:767px){.nav .mark__sun{transform:none}}
/* header: show which page you are on */
.menu a{position:relative}
.menu a[aria-current="page"]{color:var(--bone)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:.45rem;height:1px;background:var(--brass)}
.drawer a[aria-current="page"]{color:var(--brass)}
/* cookie banner: line its text and buttons up with the page edges instead of the screen edges */
.cookie{padding-inline:calc(max(0px, (100% - var(--max)) / 2) + var(--pad))}
@media (min-width:1024px){.cookie p{max-width:none}}
/* tablets and small laptops: from 768 to 900px there was no menu at all (links hidden, menu button not shown),
   and from 901 to 1099px the name wrapped onto two lines. Use the menu button up to 1099px. */
@media (max-width:1099px){.menu{display:none}.burger{display:block}.tel{margin-left:auto}}
/* the open menu sits above the cookie banner, so the banner never covers the menu's Call button */
.cookie{z-index:930}/* ---- phone fixes from Avara's iPhone check, 2026-10-06 ---- */
:root{--kbnav:96px}
@media (max-width:767px){
  :root{--kbnav:68px}
  /* header: one line, name and menu button level, PULBOROUGH dropped on phones */
  .nav{padding:.7rem 0}
  .nav.is-scrolled{padding:.55rem 0}
  .nav .mark{align-items:center}
  .mark i{display:none}
  .mark b{white-space:nowrap;font-size:clamp(1rem,4.6vw,1.24rem)}
  /* hero: the whole hero, stats included, fits the first screen at every phone size */
  .hero{min-height:100svh;align-items:stretch}
  .hero__in{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;
    padding-block:calc(var(--kbnav) + clamp(.5rem,2.5svh,1.5rem)) clamp(1rem,3.5svh,2rem)}
  .hero .label{margin-bottom:clamp(.6rem,2svh,1.2rem)}
  .hero h1{font-size:clamp(2.05rem,min(10.6vw,6.4svh),2.75rem);line-height:1}
  .hero__sub{margin-top:clamp(.6rem,2svh,1.4rem);font-size:1rem;line-height:1.5}
  .hero__acts{margin-top:clamp(.9rem,2.8svh,1.8rem);gap:.2rem}
  .hero__acts .act--solid{padding-block:clamp(.85rem,2svh,1.15rem)}
  .hero__acts .act--bare{padding-block:.7rem;min-height:44px}
  .hero__foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:clamp(.9rem,2.6svh,1.8rem);padding-top:clamp(.8rem,2svh,1.2rem)}
  .hero__foot div{font-size:.56rem;letter-spacing:.12em;line-height:1.35}
  .hero__foot b{font-size:1.15rem;margin-bottom:.2rem}
  /* cookie banner: compact, buttons side by side, so it covers far less of the first screen */
  .cookie{padding:.9rem var(--pad) calc(.9rem + env(safe-area-inset-bottom));gap:.7rem}
  .cookie p{font-size:.8rem;line-height:1.45}
  .cookie div{flex-direction:row}
  .cookie .act{flex:1;padding:.75rem .5rem;font-size:.68rem;letter-spacing:.12em}
}
/* open menu: sized to the screen, links scale with its height, Call button keeps button styling */
@media (max-width:1099px){
  .drawer{height:100svh;height:100dvh;bottom:auto;justify-content:flex-start;gap:0;
    padding:calc(var(--kbnav) + clamp(.5rem,3svh,2rem)) var(--pad) calc(clamp(1rem,4svh,2.5rem) + env(safe-area-inset-bottom))}
  .drawer a:not(.act){font-size:clamp(1.5rem,min(7.5vw,5.2svh),2.4rem);padding:clamp(.45rem,1.6svh,.9rem) 0}
  .drawer a.act{font-family:var(--body);font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;
    border:1px solid var(--bone);padding:1.1rem 1.4rem;margin-top:clamp(1rem,4svh,2.5rem);justify-content:center;text-align:center}
}
/* videos: no native play button over the poster when autoplay is blocked; taps pass through to the page,
   and site.js starts the videos on the first tap */
video{pointer-events:none}
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls{display:none!important}
/* videos stay hidden until they are actually playing (site.js), so the iPhone's own play button never shows;
   the still image sits underneath in the same place */
.vid-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js-vid video{opacity:0;transition:opacity .4s}
.js-vid video.is-playing{opacity:1}
/* footer: company details */
.foot__legal{margin:1.2rem 0 0;font-size:.7rem;line-height:1.6;color:var(--bone-3);max-width:none}