/* KAYN — site system. DM Sans + DM Mono, self-hosted. No third-party requests. */
/* NOTE: filenames match the subsetted WOFF2 already in fonts/ (dm-sans-400 etc.),
   not the DMSans-Regular naming used in the design project. Do not "restore" those. */
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
--ink:#141619;--graphite:#1C1E22;--lift:#23262B;--offwhite:#EDEAE4;--paper:#E4E0D8;
--terra:#C87A5A;--steel:#7AADBD;
--fg:var(--offwhite);--fg-dim:rgba(237,234,228,0.58);--fg-faint:rgba(237,234,228,0.34);--rule:rgba(237,234,228,0.12);
--sans:'DM Sans',system-ui,-apple-system,'Helvetica Neue',sans-serif;
--mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
--r:6px;--rl:10px;--pill:999px;
/* tokens used by the app mocks (app-v3.css) */
--offwhite-dim:rgba(237,234,228,0.56);--offwhite-faint:rgba(237,234,228,0.32);--hair:rgba(200,122,90,0.28);--edge:rgba(237,234,228,0.1);--graphite-mock:#1C1E22;
--gut:clamp(22px,5vw,88px);--sec:clamp(84px,10vw,168px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--graphite);color:var(--fg);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--terra);outline-offset:4px;border-radius:2px}
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--gut);position:relative}
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:clamp(64px,7vw,110px)}
.ink{background:var(--ink)}
.graphite{background:var(--graphite)}
/* tonal panel — one step off graphite, no colour inversion */
.smoke{background:#212429}
.smoke .plinth{background:#191C20}

h1,h2,h3,h4{font-weight:500;margin:0;letter-spacing:-0.04em;line-height:0.96}
h1{font-size:clamp(3rem,8.6vw,8rem)}
h2{font-size:clamp(2.2rem,5.4vw,4.5rem);max-width:15ch}
h3{font-size:clamp(1.35rem,2vw,1.875rem);letter-spacing:-0.03em;line-height:1.12}
h4{font-size:1.125rem;letter-spacing:-0.02em}
p{margin:0;max-width:58ch;color:var(--fg-dim)}
.big{font-size:clamp(1.125rem,1.5vw,1.4375rem);line-height:1.5;color:var(--fg);max-width:40ch;letter-spacing:-0.012em}
.lede{font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.55;max-width:46ch}
.meta{font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.22em;color:var(--fg-faint)}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 11px;font-family:var(--mono);font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.22em;color:var(--fg-faint);margin:0 0 clamp(20px,2.6vw,34px)}
.eyebrow b{font-weight:400;color:var(--terra);white-space:nowrap}
.dot{width:9px;height:9px;border-radius:var(--pill);flex:none;display:inline-block}
.dot--sm{width:6px;height:6px}
.dot--terra{background:var(--terra)}
.dot--steel{background:var(--steel)}

.btn{display:inline-flex;align-items:center;gap:0.8em;font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.16em;padding:15px 26px;border:1px solid transparent;border-radius:var(--pill);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn--primary{background:var(--terra);color:var(--ink)}
.btn--primary:hover{background:var(--offwhite);color:var(--ink)}
.btn--ghost{border-color:var(--rule);color:var(--fg)}
.btn--ghost:hover{border-color:currentColor}
.arrowlink{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.16em;color:var(--terra);border-bottom:1px solid transparent;padding-bottom:4px;transition:border-color .18s,gap .18s}
.arrowlink:hover{border-bottom-color:currentColor;gap:18px}

/* header */
.head{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.head.solid{background:rgba(20,22,25,0.92);backdrop-filter:blur(10px);border-bottom-color:rgba(237,234,228,0.1)}
.head .wrap{display:flex;align-items:center;gap:clamp(16px,3vw,48px);height:74px;color:var(--offwhite)}
.mark{font-family:var(--mono);font-size:0.9375rem;letter-spacing:0.42em;text-transform:uppercase;margin-right:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.nav a{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(237,234,228,0.6);transition:color .18s}
.nav a:hover,.nav a[aria-current]{color:var(--offwhite)}
.nav .btn{color:var(--ink)}
.navtoggle{display:none;background:none;border:1px solid rgba(237,234,228,0.2);border-radius:var(--pill);color:var(--offwhite);font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;text-transform:uppercase;padding:9px 15px;cursor:pointer}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 0;overflow:hidden;background:var(--ink)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 55%;opacity:0.38;filter:saturate(0.8)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(85deg,var(--ink) 4%,rgba(20,22,25,0.82) 46%,rgba(20,22,25,0.35) 100%),linear-gradient(to top,var(--ink) 6%,transparent 46%)}
.hero__in{position:relative;z-index:2;width:100%;padding-bottom:clamp(96px,13vh,150px)}
.hero h1{max-width:11ch;margin:clamp(18px,2.2vw,30px) 0 clamp(22px,2.6vw,34px)}
.hero .big{color:var(--offwhite)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,40px)}
.rail{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid rgba(237,234,228,0.12);background:rgba(20,22,25,0.5);backdrop-filter:blur(8px)}
.rail .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(16px,2.4vw,34px);padding-block:16px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(237,234,228,0.58)}
.rail strong{font-weight:400;color:var(--terra);letter-spacing:0.2em}
.rail span{display:flex;align-items:center;gap:9px}

/* page hero (depth pages) */
.phero{padding:calc(74px + clamp(72px,10vw,140px)) 0 clamp(48px,6vw,88px);background:var(--ink);position:relative;overflow:hidden}
.phero h1{font-size:clamp(2.6rem,6.6vw,5.75rem);max-width:14ch}
.phero .big{margin-top:clamp(20px,2.4vw,32px)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.72fr);gap:clamp(24px,5vw,80px);align-items:end}

/* section heads */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.78fr);gap:clamp(20px,5vw,80px);align-items:end}
.shead--solo{grid-template-columns:1fr}
.shead--wide{display:block}
.shead--wide h2{max-width:22ch}
.shead--wide .lede{max-width:64ch;margin-top:clamp(18px,2.2vw,28px);font-size:clamp(1.0625rem,1.35vw,1.25rem)}

/* packaged comparison panel */
.panel{border:1px solid var(--rule);border-radius:var(--rl);background:#1E2126;padding:clamp(20px,3vw,44px);margin-top:clamp(34px,4.4vw,68px)}
.panel .tue{margin-top:0}
.panel .tue__row:first-of-type{border-top:1px solid var(--rule)}
.panel .outs{margin-top:clamp(24px,3vw,40px);padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--rule);gap:clamp(22px,3.4vw,56px)}
.panel .out{border:0;border-top:2px solid var(--terra);border-radius:0;padding:20px 0 0}
.panel .out--b{border-top-color:var(--steel)}

/* the two Tuesdays */
.tue{margin-top:clamp(40px,5vw,72px)}
.tue__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,3vw,40px);padding-bottom:20px}
.tue__who{font-family:var(--mono);font-size:clamp(0.8125rem,1.1vw,0.9375rem);letter-spacing:0.22em;text-transform:uppercase}
.tue__who span{display:block;font-size:0.625rem;letter-spacing:0.14em;color:var(--fg-faint);margin-top:7px}
.tue__head>*:last-child{text-align:right}
.tue__focus{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--rule);border-radius:var(--pill);padding:10px 22px;font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--terra);white-space:nowrap}
.tue__focus b{font-weight:400;font-size:0.5625rem;letter-spacing:0.2em;color:var(--fg-faint)}
.tue__row{display:grid;grid-template-columns:1fr minmax(140px,0.46fr) 1fr;align-items:center;gap:clamp(12px,2.4vw,32px);padding-block:clamp(13px,1.5vw,20px);border-top:1px solid var(--rule)}
.tue__row:last-of-type{border-bottom:1px solid var(--rule)}
.tue__k{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-faint);text-align:center}
.tue__v{font-size:clamp(1rem,1.5vw,1.3125rem);letter-spacing:-0.02em;color:var(--fg-dim)}
.tue__v--b{text-align:right;color:var(--fg)}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:clamp(28px,3.4vw,48px)}
.out{border:1px solid var(--rule);border-radius:var(--rl);padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.out__tag{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-faint)}
.out p{font-size:0.9375rem;max-width:36ch}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:var(--pill);padding:7px 15px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--terra);margin-top:auto}
.chip--steel{color:var(--steel)}

/* flip pair */
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px);max-width:1560px;margin:0 auto;padding-inline:clamp(10px,1.2vw,18px)}
.flip{perspective:1900px;display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flip__in{position:relative;height:min(70vh,620px);transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.75,.2,1)}
.flip[aria-pressed="true"] .flip__in,.flip:focus-within .flip__in{transform:rotateY(180deg)}
@media (hover:hover){.flip:hover .flip__in{transform:rotateY(180deg)}}
.flip__face{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--rl);overflow:hidden;background:var(--ink)}
.flip__face img{width:100%;height:100%;object-fit:cover}
.flip__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(60px,9vw,140px) clamp(20px,2.6vw,40px) clamp(22px,2.6vw,36px);display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:clamp(0.6875rem,1vw,0.8125rem);letter-spacing:0.2em;text-transform:uppercase;color:var(--offwhite);background:linear-gradient(to top,rgba(20,22,25,0.94),transparent)}
.flip__hint{margin-left:auto;color:rgba(237,234,228,0.5);font-size:0.625rem;letter-spacing:0.14em;border:1px solid rgba(237,234,228,0.16);border-radius:var(--pill);padding:6px 14px}
.flip__back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding:clamp(24px,3.6vw,56px);background:var(--lift);border:1px solid var(--rule)}
.flip__back--steel{border-color:rgba(122,173,189,0.3)}
.flip__back h3{font-size:clamp(1.5rem,2.6vw,2.25rem)}
.flip__back p{font-size:clamp(0.9375rem,1.1vw,1.0625rem);max-width:40ch}

/* generic column sets */
.cols{display:grid;gap:clamp(22px,3vw,48px);margin-top:clamp(40px,5vw,80px)}
.cols--2{grid-template-columns:1fr 1fr}
.cols--3{grid-template-columns:repeat(3,1fr)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.col{border-top:1px solid var(--rule);padding-top:20px}
.col__n{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.2em;color:var(--terra);display:block;margin-bottom:14px}
.col h3{font-size:1.1875rem;margin-bottom:10px;letter-spacing:-0.024em}
.col p{font-size:0.9375rem;line-height:1.55}
.col h4{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:400;margin-bottom:12px}

/* rows */
.rows{margin-top:clamp(36px,4.4vw,72px)}
.row{display:grid;grid-template-columns:minmax(170px,0.3fr) minmax(0,1fr);gap:12px clamp(24px,5vw,72px);padding-block:clamp(18px,2.4vw,30px);border-top:1px solid var(--rule);align-items:baseline}
.row:last-child{border-bottom:1px solid var(--rule)}
.row__label{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg)}
.row__label b{font-weight:400;color:var(--terra);font-size:0.6875rem;letter-spacing:0.2em}
.row p{font-size:1rem;max-width:62ch}

/* statement */
.statement{margin-top:clamp(48px,6vw,96px);padding-top:clamp(26px,3vw,44px);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.62fr);gap:clamp(18px,4vw,64px);align-items:baseline}
.statement p{font-size:clamp(1.6rem,3.4vw,2.875rem);line-height:1.04;letter-spacing:-0.042em;color:var(--fg);max-width:18ch}
.statement small{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-faint);max-width:44ch;line-height:2.1;display:block}
.statement--solo{grid-template-columns:1fr}

/* the two Tuesdays — two facing sessions, not a table */
.vs{margin-top:clamp(34px,4.4vw,68px)}
.vs__top{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,26px);padding-bottom:clamp(16px,2vw,26px)}
.vs__top i{height:1px;background:var(--rule);flex:1}
.vs__focus{display:flex;align-items:baseline;gap:10px;border:1px solid var(--rule);border-radius:var(--pill);padding:9px 20px;font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--terra);white-space:nowrap}
.vs__focus b{font-weight:400;color:var(--fg-faint);font-size:0.5625rem;letter-spacing:0.2em}
.vs__pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--rl);overflow:hidden}
.vs__col{background:#1E2126;padding:clamp(22px,2.8vw,40px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);position:relative}
.vs__col::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--terra)}
.vs__col--b::before{background:var(--steel)}
.vs__day{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:0.8125rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--fg)}
.vs__day span{font-size:0.625rem;letter-spacing:0.14em;color:var(--fg-faint)}
.vs__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px) clamp(18px,2.4vw,32px)}
.vs__cell span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.5625rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:7px}
.vs__cell b{font-weight:400;font-size:clamp(1rem,1.35vw,1.1875rem);letter-spacing:-0.02em;color:var(--fg);display:block;line-height:1.25}
.vs__out{margin-top:auto;border-top:1px solid var(--rule);padding-top:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.vs__out h3{font-size:clamp(1.2rem,1.9vw,1.625rem)}
.vs__out p{font-size:0.9375rem;max-width:34ch}

/* mocks */
.twoup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);gap:clamp(32px,6vw,96px);align-items:center}
.twoup--media-first .twoup__media{order:-1}
.mock--phone{max-width:290px;margin-inline:auto}
.mock--wide{max-width:min(100%,900px)}
.plinth{background:#191C20;border:1px solid rgba(237,234,228,0.1);border-radius:var(--rl);padding:12px}
.plinth .ui{border-radius:var(--r)}
.cap{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--fg-faint);margin-top:14px;text-align:center}
.eng{border-radius:var(--rl);margin-inline:auto}

/* doors — links into the depth pages */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(40px,5vw,72px)}
.door{display:block;border-radius:var(--rl);overflow:hidden;background:var(--lift);border:1px solid var(--rule);transition:border-color .25s}
.door:hover{border-color:rgba(200,122,90,0.5)}
.door__img{height:clamp(200px,22vw,300px);overflow:hidden;background:var(--ink)}
.door__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.door:hover .door__img img{transform:scale(1.04)}
.door__body{padding:clamp(20px,2.2vw,30px);display:grid;gap:10px}
.door__body h3{font-size:1.3125rem}
.door__body p{font-size:0.9375rem;max-width:34ch}
.door__go{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--terra);margin-top:6px}

/* big image band */
.band{position:relative;height:clamp(320px,46vw,600px);overflow:hidden;border-radius:var(--rl)}
.band img{width:100%;height:100%;object-fit:cover}
.band__cap{position:absolute;inset:auto 0 0 0;padding:clamp(48px,7vw,110px) clamp(20px,2.6vw,40px) clamp(20px,2.4vw,32px);background:linear-gradient(to top,rgba(20,22,25,0.9),transparent);font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--offwhite);display:flex;align-items:center;gap:11px}

/* contact */
.contact{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
form{display:grid;gap:18px;max-width:520px}
label{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--fg-faint);display:block;margin-bottom:8px}
input[type=text],input[type=email],select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--fg);font-family:var(--sans);font-size:1.0625rem;padding:10px 2px}
select{appearance:none}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--terra)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:0.9375rem;color:var(--fg-dim)}
.consent input{width:16px;height:16px;margin-top:4px;accent-color:var(--terra)}
.consent a{color:var(--terra)}
form .btn{justify-self:start;margin-top:6px}

/* footer */
.foot{border-top:1px solid rgba(237,234,228,0.1);background:var(--ink);padding-block:clamp(40px,5vw,72px)}
.foot .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(24px,4vw,64px)}
.foot h4{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(237,234,228,0.34);font-weight:400;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{font-size:0.9375rem;color:rgba(237,234,228,0.62)}
.foot a:hover{color:var(--offwhite)}
.foot__mark{font-family:var(--mono);font-size:0.9375rem;letter-spacing:0.42em;text-transform:uppercase;color:var(--offwhite)}
.foot__note{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(237,234,228,0.34);margin-top:16px;line-height:2;max-width:32ch}
.foot__base{border-top:1px solid rgba(237,234,228,0.1);margin-top:clamp(32px,4vw,56px);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(237,234,228,0.34)}

/* next page */
.next{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.next a{border:1px solid var(--rule);border-radius:var(--rl);padding:clamp(22px,3vw,40px);display:grid;gap:10px;transition:border-color .25s,background .25s}
.next a:hover{border-color:rgba(200,122,90,0.5);background:rgba(237,234,228,0.02)}
.next h3{font-size:1.375rem}

/* motion */
.rise{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s ease}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.flip__in,.door__img img{transition:none}html{scroll-behavior:auto}}

@media (max-width:1080px){
.shead,.phero__grid,.twoup,.contact{grid-template-columns:1fr;gap:clamp(22px,4vw,40px);align-items:start}
.twoup--media-first .twoup__media{order:0}
.cols--4{grid-template-columns:1fr 1fr}
.doors{grid-template-columns:1fr}
.door__img{height:clamp(180px,34vw,260px)}
.foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
.nav{display:none}
.nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:18px;padding:24px var(--gut) 30px;background:rgba(20,22,25,0.97);backdrop-filter:blur(10px);border-bottom:1px solid rgba(237,234,228,0.1)}
.navtoggle{display:inline-block}
.hero__bg{object-position:68% 45%}
.diptych{grid-template-columns:1fr}
.flip__in{height:min(62vh,460px)}
.cols--2,.cols--3,.cols--4,.outs,.next{grid-template-columns:1fr}
.vs__pair{grid-template-columns:1fr}
.statement{grid-template-columns:1fr;gap:16px}
.tue__head{grid-template-columns:1fr 1fr;gap:14px}
.tue__focus{grid-column:1/-1;order:-1;justify-self:start;flex-direction:row;align-items:baseline;gap:10px}
.tue__row{grid-template-columns:1fr;gap:4px;text-align:center;padding-block:15px}
.tue__k{order:-1}
.tue__v,.tue__v--b{text-align:center}
.row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:600px){
:root{--sec:clamp(64px,14vw,100px)}
.mock--phone{max-width:252px}
.rail span:nth-child(n+6){display:none}
.statement p{font-size:1.65rem}
.foot .wrap{grid-template-columns:1fr}
}

/* legal pages — Impressum / Datenschutz */
.legal{padding-block:calc(74px + clamp(46px,7vw,104px)) clamp(64px,8vw,120px)}
.legal h1{font-size:clamp(2.2rem,5vw,3.75rem);margin-bottom:clamp(22px,3vw,38px)}
.legal h2{font-size:clamp(1.0625rem,1.5vw,1.3125rem);max-width:none;letter-spacing:-0.02em;line-height:1.3;margin:clamp(32px,4vw,50px) 0 12px;color:var(--fg)}
.legal p,.legal li{font-size:1rem;line-height:1.7;color:var(--fg-dim);max-width:74ch}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:18px;display:grid;gap:7px}
.legal a{color:var(--terra);border-bottom:1px solid transparent;transition:border-color .18s}
.legal a:hover{border-bottom-color:currentColor}
.legal strong{color:var(--fg);font-weight:500}