/* AP Kozuń: kierunek "Na wymiar". Rysunek techniczny, miarka, fronty na zawiasach. */
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-medium.ttf') format('truetype');font-weight:500 700;font-style:normal;font-display:swap}

@property --mm{syntax:'<integer>';inherits:false;initial-value:0}

:root{
  --paper:#f3f4f2; --paper-2:#e7e9e5; --white:#fbfbfa;
  --ink:#151615; --ink-2:#2b2d2b; --muted:#585b57; --line:rgba(21,22,21,.14); --line-strong:rgba(21,22,21,.3);
  --accent:#f2b300; --accent-deep:#c98f00;
  --wall:#1b1c1b; --front:#ecedea; --front-edge:#d6d8d3;
  --mono:'JetBrains Mono','Cascadia Mono','SF Mono',ui-monospace,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-door:cubic-bezier(.65,.05,.2,1);
  --gutter:clamp(20px,4vw,56px); --max:1360px; --r:6px; --header:72px;
  --z-header:30; --z-progress:40; --z-intro:90;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header) + 24px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:500;line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
h1{font-size:clamp(46px,6.4vw,104px)}
h2{font-size:clamp(36px,4.6vw,72px)}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.025em;line-height:1.15}
p{color:var(--muted);text-wrap:pretty}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.on-dark :focus-visible,.footer :focus-visible{outline-color:var(--accent)}
.wrap{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(80px,11vw,152px)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.eyebrow::before{content:'';width:22px;height:9px;background:linear-gradient(90deg,var(--ink) 1px,transparent 1px) 0 100%/5px 5px repeat-x,linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.section-lead{font-size:18px;max-width:52ch;margin-top:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--ink);color:var(--white);padding:12px 16px;border-radius:var(--r)}
.skip:focus{top:12px}

/* Buttons. Pill for actions, 6px for surfaces. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:0 26px;border-radius:99px;border:1px solid var(--ink);background:var(--ink);color:var(--white);font-size:15px;font-weight:500;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.button>span{display:inline-block;transition:transform 240ms var(--ease-out)}
.button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.button:hover{background:var(--ink-2)}.button:hover>span{transform:translate(3px,-3px)}}
.button-accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.button-accent:hover{background:#ffc21a;border-color:#ffc21a}}
.button-ghost{background:transparent;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.button-ghost:hover{background:var(--ink);color:var(--white)}}
.on-dark .button-ghost{color:var(--white);border-color:rgba(255,255,255,.5)}
@media (hover:hover) and (pointer:fine){.on-dark .button-ghost:hover{background:var(--white);color:var(--ink)}}
.button-pair{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.text-link{display:inline-flex;align-items:center;gap:14px;padding:6px 0;font-size:15px;font-weight:500;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size 300ms var(--ease-out)}
.text-link>span{transition:transform 240ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.text-link:hover{background-size:0 1px;background-position:100% 100%}.text-link:hover>span{transform:translate(3px,-3px)}}

/* Scroll progress drawn as a measuring tape. Progressive: only where scroll timelines exist. */
.tape-progress{display:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .tape-progress{display:block;position:fixed;top:0;left:0;right:0;height:5px;z-index:var(--z-progress);pointer-events:none;transform-origin:0 50%;background:repeating-linear-gradient(90deg,rgba(21,22,21,.55) 0 1px,transparent 1px 8px) 0 0/100% 3px no-repeat,var(--accent);animation:grow linear both;animation-timeline:scroll(root)}
  }
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Header */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(243,244,242,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color 200ms ease;view-transition-name:site-header}
.site-header.scrolled{border-bottom-color:var(--line)}
.header-inner{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1520px,100% - var(--gutter)*2);margin-inline:auto}
.logo{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
.logo-svg{display:block;height:30px;width:auto;fill:currentColor;overflow:visible}
.logo-svg .logo-k path{transition:transform 500ms var(--ease-door)}
@media (hover:hover) and (pointer:fine){.logo:hover .k-top{transform:translate(14px,-14px)}.logo:hover .k-right{transform:translateX(24px)}.logo:hover .k-bottom{transform:translate(14px,14px)}}
.logo-tag{font-family:var(--mono);font-size:11px;color:var(--muted);padding-left:14px;border-left:1px solid var(--line-strong);line-height:1.2}
.site-header nav{display:flex;gap:4px}
.site-header nav a{position:relative;padding:10px 14px;font-size:14px;font-weight:500;border-radius:99px;transition:background-color 200ms ease}
.site-header nav a[aria-current]::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--accent)}
@media (hover:hover) and (pointer:fine){.site-header nav a:hover{background:var(--paper-2)}}
.nav-cta{min-height:44px;padding:0 20px;font-size:14px}
.menu-toggle{display:none;width:44px;height:44px;border:0;background:none;padding:10px}
.menu-toggle span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px 0;transition:transform 240ms var(--ease-out)}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* Intro: tape measure, then cabinet doors swing open. Home page, once per session. */
.intro{display:none}
html.play-intro .intro{display:block;position:fixed;inset:0;z-index:var(--z-intro);perspective:1800px;pointer-events:auto;animation:intro-hide 0s linear 2.35s forwards}
.intro-door{position:absolute;top:0;bottom:0;width:50.2%;background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 30%,rgba(0,0,0,.18)),repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.012) 3px 4px),var(--wall);backface-visibility:hidden}
.intro-door.l{left:0;transform-origin:0 50%;animation:door-l 1s var(--ease-door) 1.3s forwards;border-right:1px solid #000}
.intro-door.r{right:0;transform-origin:100% 50%;animation:door-r 1s var(--ease-door) 1.3s forwards;background:linear-gradient(270deg,rgba(255,255,255,.035),transparent 30%,rgba(0,0,0,.18)),var(--wall)}
.intro-door::after{content:'';position:absolute;top:50%;width:4px;height:120px;margin-top:-60px;border-radius:2px;background:linear-gradient(90deg,#8d908b,#e2e4e0 45%,#7c7f7a)}
.intro-door.l::after{right:28px}.intro-door.r::after{left:28px}
.intro-tape{position:absolute;left:8vw;right:8vw;top:50%;margin-top:-22px;height:44px;transform-origin:0 50%;transform:scaleX(0);animation:tape-out .95s var(--ease-io) .15s forwards,fade-out .3s ease 1.15s forwards;background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 12px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 60px) 0 0/100% 20px no-repeat,var(--accent);border-radius:2px}
.intro-readout{position:absolute;left:8vw;top:calc(50% + 40px);font-family:var(--mono);font-size:14px;color:#cfd1cc;letter-spacing:.04em;counter-reset:mm var(--mm);animation:count 1s var(--ease-io) .15s forwards,fade-out .3s ease 1.15s forwards}
.intro-readout::before{content:'od ' counter(mm) ' roku'}
@keyframes count{to{--mm:1997}}
@keyframes tape-out{to{transform:scaleX(1)}}
@keyframes fade-out{to{opacity:0}}
@keyframes door-l{to{transform:rotateY(-104deg)}}
@keyframes door-r{to{transform:rotateY(104deg)}}
@keyframes intro-hide{to{visibility:hidden;pointer-events:none}}
html.play-intro{--enter-delay:1.75s}

/* Split headings: words rise out of a mask. */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.js [data-split] .w>span{display:inline-block;transform:translateY(105%);transition:transform 900ms var(--ease-out);transition-delay:calc(var(--enter-delay,0s) + var(--wi,0) * 55ms)}
.js [data-split].is-in .w>span{transform:none}

/* Generic reveals */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal=veneer]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1100ms var(--ease-io);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal=veneer].is-in{clip-path:inset(0)}

/* Dimension line: |<---- label ---->| */
.dimline{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:36px;max-width:520px}
.dimline::before,.dimline::after{content:'';flex:1;height:1px;background:var(--line-strong);transform-origin:var(--o,100%) 50%}
.dimline::after{--o:0%}
.dimline>i{position:absolute;top:50%;width:1px;height:14px;margin-top:-7px;background:var(--ink)}
.dimline>i:first-child{left:0}.dimline>i:last-of-type{right:0}
.js .dimline::before,.js .dimline::after{transform:scaleX(0);transition:transform 900ms var(--ease-io) .2s}
.js .dimline.is-in::before,.js .dimline.is-in::after{transform:scaleX(1)}

/* ---------- HOME: hero ---------- */
/* Full-bleed room photo, copy on a fading scrim, thin line along the bottom timing the slideshow. */
.hero{position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto auto;min-height:clamp(600px,calc(100svh - var(--header) - 152px),1080px);overflow:hidden;background:var(--wall);color:var(--white)}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.scene{position:absolute;inset:0;overflow:hidden}
.scene img{position:absolute;top:0;left:0;width:calc(100% * var(--zoom,1));max-width:none;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
/* display:none, not visibility: hidden slides would still count as on-screen and lazy-load at once. */
.scene:not(.is-active):not(.is-entering){display:none}
.scene.is-entering{z-index:2}
@media (prefers-reduced-motion:no-preference){
  .scene.is-active img,.scene.is-entering img{transform-origin:70% 50%;animation:settle 11s var(--ease-out) both}
}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
.door-edge{position:absolute;top:0;bottom:0;left:0;width:14px;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.28) 50%,rgba(0,0,0,.3));box-shadow:-30px 0 60px rgba(0,0,0,.4);opacity:0;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(21,22,21,.62),rgba(21,22,21,.2) 14%,rgba(21,22,21,0) 26%),linear-gradient(90deg,rgba(21,22,21,.94) 0%,rgba(21,22,21,.88) 22%,rgba(21,22,21,.66) 36%,rgba(21,22,21,.3) 49%,rgba(21,22,21,.08) 60%,rgba(21,22,21,0) 68%)}
.hero .wrap{width:min(1640px,100% - var(--gutter)*2)}
.hero-body{display:flex;align-items:center;padding-block:clamp(40px,6vh,80px)}
.hero h1{font-size:clamp(56px,6.5vw,124px);letter-spacing:-.055em;line-height:.98}
.hero h1 .nw{white-space:nowrap}
.hero-lead{font-size:clamp(17px,1.4vw,21px);color:#e3e4e0;max-width:34ch;margin:28px 0 36px}
.hero .text-link{color:var(--white)}
.js .hero-copy .hero-lead,.js .hero-copy .button-pair{opacity:0;transform:translateY(16px);animation:rise 900ms var(--ease-out) forwards;animation-delay:calc(var(--enter-delay,0s) + .35s)}
.js .hero-copy .button-pair{animation-delay:calc(var(--enter-delay,0s) + .5s)}
@keyframes rise{to{opacity:1;transform:none}}
.hero-bar{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding-bottom:18px;font-size:14px}
.hero-bar>a{font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-controls{display:flex;align-items:center;gap:8px}
.hero-counter{font-family:var(--mono);font-size:12px;margin-right:8px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-controls button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(21,22,21,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);display:grid;place-items:center;padding:0;transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.hero-controls button:active{transform:scale(.94)}
.hero-controls svg{width:12px;height:12px;fill:currentColor}
[data-scene-pause] .i-play,[data-scene-pause][aria-pressed=true] .i-pause{display:none}
[data-scene-pause][aria-pressed=true] .i-play{display:block}
@media (hover:hover) and (pointer:fine){.hero-controls button:hover{background:var(--white);color:var(--ink)}}
.hero-tape{height:2px;background:rgba(255,255,255,.16)}
.hero-tape i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;background:rgba(255,255,255,.7)}

/* Key figures, continuing the dark hero. */
.facts-strip{background:var(--ink);color:var(--white)}
.facts-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);width:min(1640px,100% - var(--gutter)*2)}
.facts-strip .wrap>div{padding:clamp(22px,2.4vw,34px) 12px clamp(22px,2.4vw,34px) clamp(18px,2.4vw,36px);border-left:1px solid rgba(255,255,255,.16)}
.facts-strip .wrap>div:first-child{border-left:0;padding-left:0}
.facts-strip strong{display:flex;align-items:baseline;gap:.22em;font-weight:500;font-size:clamp(38px,4.2vw,72px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.facts-strip strong small{font-size:.4em;letter-spacing:-.02em;color:var(--accent)}
.facts-strip span{display:block;margin-top:10px;font-size:14px;color:#c3c5c0;line-height:1.35}

/* ---------- HOME: cabinet wall (gallery entry) ---------- */
.wall-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;margin-bottom:56px}
.wall{--gap:6px;background:var(--wall);padding:var(--gap);border-radius:var(--r);box-shadow:0 40px 80px -40px rgba(21,22,21,.45)}
.wall-row{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.wall-row.upper .front{height:clamp(170px,17vw,240px)}
.wall-row.lower .front{height:clamp(240px,24vw,340px)}
.worktop{height:16px;margin:var(--gap) calc(var(--gap) * -1);background:linear-gradient(180deg,#5b5e5a,#3a3c3a 40%,#2a2b2a);position:relative}
.worktop::after{content:'';position:absolute;inset:auto 0 -10px;height:10px;background:linear-gradient(rgba(0,0,0,.45),transparent)}
.wall-gap{height:clamp(40px,5vw,72px);background:repeating-linear-gradient(90deg,#222322 0 60px,#262726 60px 61px)}
.plinth{height:22px;margin:var(--gap) calc(var(--gap) * -1) calc(var(--gap) * -1);background:#111211;border-radius:0 0 var(--r) var(--r)}
.span-2{grid-column:span 2}
.front{position:relative;display:block;perspective:1600px;background:#0f100f;border-radius:2px;outline-offset:6px}
.front:hover,.front:focus-visible,.front.is-open{z-index:2}
.front-inside{position:absolute;inset:0;overflow:hidden;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.front-inside img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1100ms var(--ease-out)}
.front-inside::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 35%,transparent 55%,rgba(0,0,0,.65)),linear-gradient(90deg,rgba(0,0,0,.35),transparent 18%)}
.inside-label{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;color:var(--white);opacity:0;transform:translateY(8px);transition:opacity 300ms ease .15s,transform 500ms var(--ease-out) .15s}
.inside-label b{font-weight:500;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.02em;line-height:1.15}
.inside-label small{font-family:var(--mono);font-size:11px;white-space:nowrap;opacity:.85}
.leaf{position:absolute;top:0;bottom:0;left:0;width:100%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 850ms var(--ease-door);background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 40%),linear-gradient(180deg,var(--front),#e2e4df);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -1px 0 1px var(--front-edge)}
.leaf::after{content:'';position:absolute;inset:0;border-radius:2px;background:#cfd1cc;transform:rotateY(180deg) translateZ(1px);backface-visibility:hidden}
.double .leaf-l{width:50%}
.double .leaf-r{left:50%;width:50%;transform-origin:100% 50%}
.leaf-num{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:11px;color:var(--muted);backface-visibility:hidden}
.leaf-name{position:absolute;left:16px;right:16px;bottom:16px;font-size:clamp(15px,1.25vw,18px);font-weight:500;letter-spacing:-.02em;line-height:1.2;backface-visibility:hidden}
.handle{position:absolute;border-radius:2px;background:linear-gradient(90deg,#8b8e89,#eef0ec 45%,#7d807b);box-shadow:0 2px 3px rgba(0,0,0,.25);backface-visibility:hidden}
.upper .handle{left:50%;bottom:14px;width:64px;height:4px;margin-left:-32px;background:linear-gradient(180deg,#8b8e89,#eef0ec 45%,#7d807b)}
.upper .double .leaf-l .handle{left:auto;right:14px;margin:0;width:44px}
.upper .double .leaf-r .handle{left:14px;margin:0;width:44px}
.lower .handle{top:16px;right:14px;width:4px;height:72px}
.lower .double .leaf-r .handle{right:auto;left:14px}
.upper .leaf-name{bottom:30px}
.front:focus-visible .leaf-l,.front.is-open .leaf-l{transform:rotateY(-106deg)}
.front:focus-visible .leaf-r,.front.is-open .leaf-r{transform:rotateY(106deg)}
.front:focus-visible .inside-label,.front.is-open .inside-label{opacity:1;transform:none}
.front:focus-visible .front-inside img,.front.is-open .front-inside img{transform:scale(1)}
@media (hover:hover) and (pointer:fine){
  .front:hover .leaf-l{transform:rotateY(-106deg)}
  .front:hover .leaf-r{transform:rotateY(106deg)}
  .front:hover .inside-label{opacity:1;transform:none}
  .front:hover .front-inside img{transform:scale(1)}
}
.wall.peek .leaf-l{animation:peek-l 1.1s var(--ease-io) both;animation-delay:calc(var(--i) * 90ms)}
.wall.peek .leaf-r{animation:peek-r 1.1s var(--ease-io) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes peek-l{40%{transform:rotateY(-34deg)}}
@keyframes peek-r{40%{transform:rotateY(34deg)}}
.wall-foot{display:flex;justify-content:flex-end;align-items:center;gap:24px;margin-top:28px;flex-wrap:wrap}
.wall-foot p{margin:0;font-size:14px}

/* ---------- HOME: manifesto (scroll-filled words) ---------- */
.wall-section{padding-bottom:clamp(40px,4.5vw,64px)}
.manifesto{padding-block:clamp(56px,8vw,128px) clamp(48px,6.5vw,104px)}
.drawers-section{padding-top:clamp(56px,7.5vw,120px)}
.manifesto p{font-size:clamp(32px,4.4vw,68px);line-height:1.08;letter-spacing:-.045em;color:var(--ink);font-weight:500;max-width:22ch;text-wrap:balance}
.manifesto em{font-style:normal;background:linear-gradient(transparent 62%,var(--accent) 62%,var(--accent) 88%,transparent 88%)}
.js .manifesto .w{opacity:.16;transition:opacity 500ms ease}
.js .manifesto.is-in .w{opacity:1;transition-delay:calc(var(--wi) * 35ms)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .js .manifesto .w{transition:none;animation:word-in linear both;animation-timeline:--manifesto;animation-range:cover calc(15% + var(--wi) * 1.4%) cover calc(22% + var(--wi) * 1.4%)}
    .manifesto{view-timeline-name:--manifesto}
  }
}
@keyframes word-in{from{opacity:.16}to{opacity:1}}
.manifesto .dimline{max-width:none;margin-top:56px}

/* ---------- HOME: chest of drawers (offer) ---------- */
.drawers-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:start}
.drawers-aside{position:sticky;top:calc(var(--header) + 32px)}
.drawers-aside .lead{margin:24px 0 32px}
.drawers-aside img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
.chest{background:var(--wall);padding:6px;border-radius:var(--r);display:grid;gap:6px;box-shadow:0 40px 80px -40px rgba(21,22,21,.45)}
.drawer{position:relative;perspective:1200px}
.drawer-front{position:relative;z-index:1;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:18px;width:100%;min-height:96px;padding:0 28px;border:0;border-radius:2px;text-align:left;background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 40%),linear-gradient(180deg,var(--front),#e2e4df);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);transition:transform 500ms var(--ease-out),box-shadow 500ms var(--ease-out)}
.drawer-front .mono{color:var(--muted)}
.drawer-name{font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.pull{position:relative;width:120px;height:14px;border-radius:7px;background:linear-gradient(180deg,#8b8e89,#eef0ec 45%,#7d807b);box-shadow:0 3px 4px rgba(0,0,0,.2);transition:background 300ms ease}
.drawer.is-open .drawer-front{transform:translateY(-3px) scale(1.012);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 18px 30px -12px rgba(0,0,0,.6)}
.drawer.is-open .pull{background:linear-gradient(180deg,var(--accent-deep),#ffd257 45%,var(--accent-deep))}
@media (hover:hover) and (pointer:fine){.drawer:not(.is-open) .drawer-front:hover{transform:translateY(-2px)}}
.drawer-front:active{transform:translateY(0) scale(.995)}
.drawer-box{display:grid;grid-template-rows:1fr}
.js .drawer-box{grid-template-rows:0fr;transition:grid-template-rows 650ms var(--ease-io)}
.js .drawer.is-open .drawer-box{grid-template-rows:1fr}
.drawer-box>div{overflow:hidden}
.drawer-inner{margin:0 10px;padding:28px 28px 32px;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 22px),#d9dbd6;border-radius:0 0 2px 2px;box-shadow:inset 6px 0 10px -6px rgba(0,0,0,.35),inset -6px 0 10px -6px rgba(0,0,0,.35)}
.js .drawer-inner{transform-origin:50% 0;transform:rotateX(-16deg) translateY(-18px);opacity:0;transition:transform 650ms var(--ease-out),opacity 300ms ease}
.js .drawer.is-open .drawer-inner{transform:none;opacity:1;transition-delay:120ms}
.drawer-inner p{margin:0 0 20px;color:var(--ink-2);max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.chips li{padding:7px 12px;border-radius:4px;background:var(--white);font-size:13px;box-shadow:0 1px 0 rgba(0,0,0,.08)}

/* ---------- Process: tape measure ---------- */
.tape-section{position:relative;background:var(--white);border-block:1px solid var(--line)}
.tape-head{padding-top:clamp(64px,8vw,112px)}
.tape-head h2{font-size:clamp(36px,4vw,60px)}
.tape-head p{max-width:46ch;margin-top:20px}
.tape-viewport{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;padding:48px 0 56px;scrollbar-width:thin}
.tape-track{position:relative;display:grid;grid-template-columns:repeat(4,min(380px,100vw - var(--gutter)*2 - 16px));gap:0;width:max-content;min-width:100%;padding:0 calc(var(--gutter) + 12px) 0 var(--gutter)}
.tape-band{position:absolute;left:0;right:12px;top:0;height:48px;overflow:hidden;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 50px) 0 0/100% 18px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 100px) 0 0/100% 26px no-repeat,var(--accent);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.tape-track::after{content:'';position:absolute;top:-6px;right:0;width:12px;height:60px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#7d807b,#e2e4e0 50%,#8b8e89);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.tape-band span{position:absolute;bottom:4px;font-family:var(--mono);font-size:11px;font-weight:500;transform:translateX(4px)}
.tape-step{position:relative;padding:96px 24px 0 0;scroll-snap-align:start;min-width:0}
.tape-step::before{content:'';position:absolute;left:0;top:48px;width:1px;height:40px;background:var(--ink)}
.tape-step .mono{display:block;color:var(--muted);margin-bottom:16px}
.tape-step h3{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.035em}
.tape-step p{margin:14px 0 0;max-width:36ch}
.step-list{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:40ch}
.step-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.step-list li::before{content:'';position:absolute;left:0;top:.45em;width:10px;height:10px;background:linear-gradient(var(--accent),var(--accent)) 0 0/100% 3px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0/3px 100% no-repeat}
.tape-step .step-you{margin-top:22px;padding-top:14px;border-top:1px dashed var(--line-strong);font-size:14px;color:var(--ink);max-width:40ch}
.step-you .mono{display:block;margin-bottom:4px}
.tape-case{display:none}
@supports (animation-timeline:view()){
  @media (min-width:900px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
    .tape-section{height:300vh;view-timeline-name:--tape}
    /* Auto margins centre the content, but collapse to zero when it is taller than the screen,
       so on short screens the heading starts below the site header instead of sliding under it. */
    .tape-sticky{position:sticky;top:var(--header);height:calc(100dvh - var(--header));display:flex;flex-direction:column;overflow:hidden;padding-top:clamp(16px,3vh,40px)}
    .tape-head{padding-top:0;margin-top:auto}
    .tape-viewport{margin-bottom:auto;flex:none;overflow:visible;display:flex;align-items:flex-start;padding:var(--tape-gap,72px) 0 0}
    .tape-track{flex:none;width:auto;grid-template-columns:repeat(4,46vw);padding-left:calc(var(--gutter) + 300px);padding-right:8vw;animation:pan linear both;animation-timeline:--tape;animation-range:contain 12% contain 92%}
    .tape-case{display:grid;position:absolute;z-index:2;left:var(--gutter);top:calc(var(--tape-gap,72px) + 24px - var(--case,190px) / 2);width:var(--case,190px);height:var(--case,190px);place-content:center;text-align:center;border-radius:36px;background:radial-gradient(circle at 50% 50%,#2c2e2c 0 34%,transparent 35%),var(--wall);color:var(--white);box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 6px #262826}
    .tape-viewport::before{content:'';position:absolute;z-index:1;left:0;top:calc(var(--tape-gap,72px) + 48px);bottom:0;width:calc(var(--gutter) + 250px);background:linear-gradient(90deg,var(--white) calc(100% - 60px),transparent)}
    .tape-viewport::after{content:'';position:absolute;z-index:1;left:0;top:var(--tape-gap,72px);height:48px;width:calc(var(--gutter) + 95px);background:var(--white)}
    .tape-case::after{content:'';position:absolute;right:-10px;top:50%;width:16px;height:60px;margin-top:-30px;background:linear-gradient(90deg,var(--wall),#0d0e0d);border-radius:0 6px 6px 0;box-shadow:inset -3px 0 0 #050505}
    .tape-readout{font-family:var(--mono);font-size:13px;counter-reset:mm var(--mm);animation:count-tape linear both;animation-timeline:--tape;animation-range:contain 12% contain 92%;position:relative;z-index:1}
    .tape-readout::before{content:counter(mm) ' mm'}
    .tape-case small{display:block;font-family:var(--mono);font-size:10px;opacity:.6;margin-top:6px;position:relative;z-index:1}
  }
  /* Shorter screens: the pinned panel must fit between the header and the bottom edge, so tighten it. */
  @media (min-width:900px) and (min-height:600px) and (max-height:880px) and (prefers-reduced-motion:no-preference){
    .tape-section{--tape-gap:58px;--case:128px}
    .tape-sticky{padding-top:clamp(12px,2.5vh,28px)}
    .tape-head h2{font-size:clamp(32px,5vh,46px)}
    .tape-head h2 br{display:none}
    .tape-head p{margin-top:8px;font-size:15px}
    .tape-step{padding-top:72px}
    .tape-step::before{height:24px}
    .tape-step .mono{margin-bottom:8px}
    .tape-step h3{font-size:clamp(22px,4vh,30px)}
    .tape-step p{margin-top:8px;font-size:15px}
    .step-list{margin-top:12px;gap:4px}
    .step-list li{font-size:14px}
    .tape-step .step-you{margin-top:12px;padding-top:10px}
  }
}
@keyframes pan{to{transform:translateX(calc(-100% + 100vw))}}
@keyframes count-tape{to{--mm:4000}}

/* ---------- Reach map (local SEO hub) ---------- */
.reach-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.reach-copy .lead{margin:24px 0 32px}
.near-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:0 0 36px;padding:0;list-style:none}
.near-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-weight:500;transition:padding 240ms var(--ease-out)}
.near-list a .mono{color:var(--muted);font-weight:400}
@media (hover:hover) and (pointer:fine){.near-list a:hover{padding-left:8px}.near-list a:hover .mono{color:var(--ink)}}
.reach-map{position:relative;aspect-ratio:1;max-width:680px;width:100%;justify-self:end}
.reach-map svg{width:100%;height:100%;overflow:visible}
.ring{fill:none;stroke:var(--line-strong);stroke-width:.25;stroke-dasharray:.8 .8}
.ring-label{font-family:var(--mono);font-size:2.1px;fill:var(--muted)}
.js .reach-map .ring{transform:scale(.2);opacity:0;transform-origin:0 0;transition:transform 1200ms var(--ease-out),opacity 600ms ease;transition-delay:calc(var(--d) * 140ms)}
.js .reach-map.is-in .ring{transform:none;opacity:1}
.js .reach-map .town{opacity:0;transition:opacity 500ms ease;transition-delay:calc(600ms + var(--d) * 40ms)}
.js .reach-map.is-in .town{opacity:1}
.axis{stroke:var(--line);stroke-width:.3}
.town circle{fill:var(--ink);transition:r 200ms var(--ease-out),fill 200ms ease}
.town text{font-size:2.35px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:.9px;opacity:0;transition:opacity 200ms ease}
.town.labelled text,.town:hover text,.town:focus-visible text,.town.is-current text{opacity:1}
.town:hover circle,.town:focus-visible circle{fill:var(--accent-deep);r:1.6}
.town.is-current circle{fill:var(--accent);stroke:var(--ink);stroke-width:.4;r:1.9}
.town:focus-visible{outline:none}
.town .km{font-family:var(--mono);font-size:1.9px;font-weight:400;fill:var(--muted)}
.hq circle{fill:var(--accent);stroke:var(--ink);stroke-width:.6}
.hq text{font-size:2.7px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:.9px}
.route{stroke:var(--accent-deep);stroke-width:.6;stroke-dasharray:2 1.4}
.reach-section .reach-map .town text{stroke:var(--paper)}

/* ---------- CTA + footer ---------- */
.cta-band{padding-block:clamp(96px,12vw,176px);text-align:left}
.cta-band h2{font-size:clamp(44px,7vw,120px);letter-spacing:-.055em;max-width:14ch}
.cta-band p{font-size:18px;max-width:44ch;margin:28px 0 36px}
.footer{background:var(--wall);color:#e7e9e5;padding:72px 0 28px}
.footer p{color:#a9aca7}
.footer-top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer .logo{color:#e7e9e5}.footer .logo-svg{height:40px}
.footer .logo-tag{color:#a9aca7;border-color:rgba(255,255,255,.2)}
.footer-big{font-size:clamp(56px,11vw,180px);font-weight:500;letter-spacing:-.06em;line-height:.85;color:#e7e9e5}
.footer-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px;padding:48px 0 56px}
.footer-grid .mono{display:block;color:#8b8e89;margin-bottom:18px}
.footer-grid a,.footer-grid p{display:block;padding:4px 0;font-size:14px;margin:0}
.footer-grid a{color:#e7e9e5;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){.footer-grid a:hover{color:var(--accent)}}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:11px;color:#8b8e89}

/* ---------- Interior pages ---------- */
.page-hero{padding:clamp(24px,3vw,40px) 0 clamp(56px,7vw,96px)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:clamp(40px,6vw,88px)}
@media (hover:hover) and (pointer:fine){.breadcrumbs a:hover{color:var(--ink)}}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:end}
.page-hero-grid.no-image{grid-template-columns:minmax(0,1fr)}
.page-hero-grid.no-image h1{max-width:16ch}
.page-hero .eyebrow{margin-bottom:24px}
.page-hero .lead{margin-top:28px}
.page-hero-grid:not(.no-image) h1{font-size:clamp(44px,5.2vw,88px)}
.page-hero-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.intro-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,6vw,96px)}
.intro-section>div:only-child{grid-column:1/-1;max-width:860px}
.intro-section h2{font-size:clamp(34px,3.6vw,56px)}
.intro-section .lead{margin-top:24px}
.intro-section .text-link,.intro-section .button{margin-top:28px}
.side-note{font-size:15px;max-width:36ch;margin:20px 0 28px}
.facts-band{background:var(--white);border-block:1px solid var(--line);padding:clamp(48px,6vw,80px) 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.facts strong{display:block;font-size:clamp(40px,4.6vw,72px);font-weight:500;letter-spacing:-.05em;line-height:1}
.facts span{display:block;margin-top:12px;color:var(--muted);font-size:14px}
.section-heading{margin-bottom:48px}
.section-heading h2{max-width:18ch}
.section-heading .eyebrow{margin-bottom:20px}
.section-heading p{margin-top:20px;max-width:56ch}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--wall);padding:6px;border-radius:var(--r)}
.process-grid>div{background:var(--front);padding:28px;border-radius:2px;min-height:240px;display:flex;flex-direction:column}
.process-grid .mono{color:var(--muted)}
.process-grid h3{margin-top:auto}
.process-grid p{font-size:14px;margin:12px 0 0}
.offer-editorial{display:grid;gap:0}
.offer-row{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 32px;gap:32px;align-items:center;padding:36px 0;border-top:1px solid var(--line);position:relative}
.offer-row:last-child{border-bottom:1px solid var(--line)}
.offer-row::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform 500ms var(--ease-io)}
@media (hover:hover) and (pointer:fine){.offer-row:hover::before{transform:scaleX(1)}.offer-row:hover>span:last-child{transform:translate(4px,-4px)}}
.offer-row>span:last-child{font-size:24px;transition:transform 240ms var(--ease-out)}
.offer-number{font-family:var(--mono);font-size:12px;color:var(--muted)}
.offer-row h2{font-size:clamp(26px,2.6vw,40px)}
.offer-row .mono{display:block;color:var(--muted);margin-bottom:8px}
.offer-row p{margin:0;font-size:15px}
.category-links{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 40px;margin-top:24px}
.category-links .text-link{justify-content:space-between;padding:14px 0;background-size:100% 1px;background-image:linear-gradient(var(--line),var(--line))}
.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--wall);padding:6px;border-radius:var(--r)}
.detail-list article{background:var(--front);padding:28px;border-radius:2px}
.detail-list article h2{font-size:24px;letter-spacing:-.03em;margin-top:28px}
.detail-list article p{margin:10px 0 0;font-size:15px}
.detail-list article:last-child:nth-child(odd){grid-column:span 2}
.preparation{background:var(--white);border-block:1px solid var(--line);padding-block:clamp(64px,8vw,112px)}

/* Gallery */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px}
.filters button{min-height:44px;padding:0 20px;border-radius:99px;border:1px solid var(--line-strong);background:transparent;font-size:14px;font-weight:500;transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--ease-out)}
.filters button:active{transform:scale(.97)}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.filters button span{font-family:var(--mono);font-size:11px;margin-left:8px;opacity:.7}
.category-grid,.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 28px}
.project-image{position:relative;display:block;aspect-ratio:5/4}
.project-image .ph{position:absolute;inset:0;overflow:hidden;border-radius:var(--r);background:var(--paper-2)}
.project-image img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.brackets{position:absolute;inset:-10px;pointer-events:none;opacity:0;transform:scale(.97);transition:opacity 250ms ease,transform 500ms var(--ease-out);background:linear-gradient(var(--ink),var(--ink)) 0 0/16px 1.5px,linear-gradient(var(--ink),var(--ink)) 0 0/1.5px 16px,linear-gradient(var(--ink),var(--ink)) 100% 0/16px 1.5px,linear-gradient(var(--ink),var(--ink)) 100% 0/1.5px 16px,linear-gradient(var(--ink),var(--ink)) 0 100%/16px 1.5px,linear-gradient(var(--ink),var(--ink)) 0 100%/1.5px 16px,linear-gradient(var(--ink),var(--ink)) 100% 100%/16px 1.5px,linear-gradient(var(--ink),var(--ink)) 100% 100%/1.5px 16px;background-repeat:no-repeat}
.image-arrow{position:absolute;right:14px;bottom:14px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--white);font-size:18px;transition:transform 300ms var(--ease-out),background-color 200ms ease}
@media (hover:hover) and (pointer:fine){
  .project-card:hover .brackets{opacity:1;transform:none}
  .project-card:hover .project-image img{transform:scale(1.04)}
  .project-card:hover .image-arrow{background:var(--accent);transform:rotate(45deg)}
}
.project-caption{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:20px}
.project-caption .mono{display:block;color:var(--muted);margin-bottom:6px}
.project-caption h3{font-size:24px}
.project-count{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.no-photo{position:absolute;inset:0;display:grid;place-content:center;text-align:center;border-radius:var(--r);background:var(--wall);color:var(--white)}
.no-photo span{font-size:64px;letter-spacing:-.08em;font-weight:500}
.no-photo p{color:#a9aca7;font-size:13px;margin:4px 0 0}
.category-summary{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;margin-bottom:48px}
.category-summary ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.category-summary li{padding:8px 12px;border-radius:4px;background:var(--white);font-size:14px;border:1px solid var(--line)}
.photo-grid{columns:3 280px;column-gap:16px}
.gallery-photo{position:relative;display:block;margin-bottom:16px;border-radius:var(--r);overflow:hidden;break-inside:avoid;background:var(--paper-2)}
.gallery-photo img{width:100%;transition:transform 700ms var(--ease-out)}
.photo-zoom{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--white);opacity:0;transform:translateY(6px);transition:opacity 200ms ease,transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gallery-photo:hover img{transform:scale(1.035)}.gallery-photo:hover .photo-zoom{opacity:1;transform:none}}
.gallery-more{text-align:center;margin-top:40px}
.gallery-more p{margin:0 0 16px;font-family:var(--mono);font-size:12px}
.empty-gallery{border-radius:var(--r);padding:clamp(32px,5vw,64px);background:var(--white);border:1px solid var(--line)}
.empty-gallery h2{margin-top:20px}
.empty-gallery p{max-width:52ch;margin:20px 0 28px}

/* FAQ: drawer-like rows */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;list-style:none;cursor:pointer;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary>span{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:18px;transition:transform 300ms var(--ease-out),background-color 200ms ease}
.faq details[open] summary>span{transform:rotate(45deg);background:var(--accent);border-color:var(--accent)}
.faq details p{margin:0 0 28px;max-width:66ch}

/* Contact */
.contact-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-phone{display:block;margin:20px 0 6px;font-size:clamp(34px,4vw,56px);font-weight:500;letter-spacing:-.045em}
.contact-email{font-size:20px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.contact-block{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.contact-block h2{font-size:24px;letter-spacing:-.03em}
.contact-block p{margin:12px 0}
.caption{font-size:13px}
.contact-form-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,48px)}
.contact-form-box h2{font-size:clamp(28px,2.8vw,40px)}
.contact-form-box>p{margin:14px 0 32px;font-size:15px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;margin-bottom:22px;font-size:13px;font-weight:500}
label>span{font-weight:400;color:var(--muted)}
input,select,textarea{display:block;width:100%;margin-top:8px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);font-size:15px;transition:border-color 200ms ease,box-shadow 200ms ease}
input::placeholder,textarea::placeholder{color:#6e716d}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(242,179,0,.45)}
input:user-invalid,textarea:user-invalid{border-color:#b3261e}
textarea{resize:vertical;min-height:120px}
.form-note{font-size:13px;margin:6px 0 24px}
.legal-text{max-width:820px}
.legal-text h2{font-size:clamp(22px,2vw,28px);margin:48px 0 14px}
.legal-text h2:first-child{margin-top:0}
.legal-text p,.legal-text li{max-width:68ch}
.legal-text p+p{margin-top:12px}
.legal-text ul{margin:12px 0 0;padding-left:1.2em;display:grid;gap:8px}
.legal-text .caption{margin-top:48px}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{margin:0 0 18px;padding:12px 16px;border-left:3px solid #b3261e;background:rgba(179,38,30,.06);color:#8c1d18;font-size:14px}
.form-error[hidden],.form-sent[hidden]{display:none}
.contact-form button:disabled{opacity:.6;cursor:progress}
.form-sent{padding:8px 0;outline:none}
.form-sent h3{font-size:clamp(26px,2.4vw,34px)}
.form-sent h3::before{content:"";display:block;width:44px;height:3px;background:var(--accent);margin-bottom:22px}
.form-sent p{margin-top:14px}
.email-draft{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.email-draft h3{font-size:26px}
.email-draft .button{margin:20px 0 24px}
.room-pick{border:0;margin:0 0 22px;padding:0}
.room-pick legend{padding:0;margin-bottom:10px;font-size:13px;font-weight:500}
.room-pick legend span{font-weight:400;color:var(--muted)}
.room-pick>div{display:flex;flex-wrap:wrap;gap:8px}
.room-pick label{margin:0;font-weight:400}
.room-pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.room-pick label>span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:99px;border:1px solid var(--line-strong);background:var(--paper);font-size:14px;cursor:pointer;transition:background-color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.room-pick label>span:active{transform:scale(.97)}
.room-pick input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.room-pick input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.room-pick input:not(:checked)+span:hover{border-color:var(--ink)}}
.contact-home{background:var(--white);border-top:1px solid var(--line)}
.contact-home-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-home-copy{position:sticky;top:calc(var(--header) + 32px)}
.contact-home-copy .lead{margin:24px 0 8px}
.contact-home .contact-form-box{background:var(--paper)}
.contact-home .contact-form-box input,.contact-home .contact-form-box textarea{background:var(--white)}
.contact-meta{margin-top:16px;font-size:14px}
.contact-meta a{text-decoration:underline;text-underline-offset:3px}

/* City and local pages */
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--wall);padding:6px;border-radius:var(--r)}
.city-grid>a{position:relative;display:flex;flex-direction:column;min-height:150px;padding:22px 24px;background:var(--front);border-radius:2px;transition:background-color 200ms ease}
.city-grid .mono{color:var(--muted)}
.city-grid h3{margin-top:auto;font-size:24px}
.city-grid>a>span:last-child{position:absolute;right:20px;top:18px;transition:transform 240ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.city-grid>a:hover{background:var(--white)}.city-grid>a:hover>span:last-child{transform:translate(3px,-3px)}}
.distance{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-top:40px;font-weight:500;max-width:560px}
.distance>i{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.distance>i:last-child{background:var(--accent);box-shadow:0 0 0 2px var(--ink)}
.distance .dimline{margin:0;max-width:none}
.distance-names{display:flex;justify-content:space-between;max-width:560px;margin-top:10px;font-size:14px;color:var(--muted)}
.local-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.local-split .reach-map{max-width:520px}
.local-split .lead{margin-top:24px}
.services-strip{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--wall);padding:6px;border-radius:var(--r);margin-top:40px}
.services-strip a{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:24px;padding:10px 24px 10px 10px;background:var(--front);border-radius:2px;font-size:20px;font-weight:500;letter-spacing:-.02em}
.services-strip img{width:120px;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
@media (hover:hover) and (pointer:fine){.services-strip a:hover{background:var(--white)}}
.cutlist{counter-reset:cut;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px;background:var(--wall);padding:6px;border-radius:var(--r);margin:0;list-style:none}
.cutlist li{counter-increment:cut;background:var(--front);padding:24px;border-radius:2px;min-height:180px;display:flex;flex-direction:column}
.cutlist li::before{content:'Pozycja ' counter(cut,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--muted)}
.cutlist strong{display:block;margin-top:auto;font-weight:500;font-size:20px;letter-spacing:-.02em}
.cutlist span{display:block;margin-top:8px;color:var(--muted);font-size:14px}
.strip-photos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:12px}
.strip-photos a{display:block;border-radius:var(--r);overflow:hidden}
.strip-photos a:first-child{grid-row:span 2}
.strip-photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform 700ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.strip-photos a:hover img{transform:scale(1.04)}}
.gallery-note{margin-top:24px;font-size:13px}

/* Lightbox */
.lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:72px 80px;border:0;background:#111211;color:var(--white)}
.lightbox::backdrop{background:#111211}
.lightbox[open]{display:grid;grid-template-columns:48px 1fr 48px;grid-template-rows:1fr auto;gap:16px;align-items:center;animation:lb-in 260ms var(--ease-out)}
@keyframes lb-in{from{opacity:0}}
.lightbox-toolbar{position:absolute;top:18px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px}
.lightbox button{min-width:48px;min-height:48px;padding:0 16px;border:1px solid #4a4d49;border-radius:99px;background:transparent;color:var(--white);transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.lightbox button:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.lightbox button:hover{background:#2a2c2a}}
.lightbox>img{justify-self:center;max-width:100%;max-height:calc(100dvh - 180px);width:auto;object-fit:contain;border-radius:4px}
.lightbox-prev,.lightbox-next{padding:0!important}
.lightbox-caption{grid-column:1/-1;margin:0;text-align:center;color:#c9ccc7;font-size:13px}
body.dialog-open{overflow:hidden}

/* Page transitions: a sliding wardrobe door. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-old 620ms var(--ease-io) both}
  ::view-transition-new(root){animation:vt-new 620ms var(--ease-io) both;box-shadow:-40px 0 80px rgba(21,22,21,.28)}
  ::view-transition-group(site-header){animation-duration:0s}
  ::view-transition-group(*){animation-duration:620ms;animation-timing-function:var(--ease-io)}
}
@keyframes vt-old{to{transform:translateX(-14%);filter:brightness(.82)}}
@keyframes vt-new{from{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .site-header nav a{padding-inline:10px}
  .category-grid,.featured-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--header:64px}
  .menu-toggle{display:block}
  .nav-cta{margin-left:auto}
  .site-header nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;gap:2px;padding:12px var(--gutter) 28px;background:var(--paper);border-bottom:1px solid var(--line);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path 420ms var(--ease-io),visibility 0s linear 420ms}
  .site-header nav.is-open{clip-path:inset(0);visibility:visible;transition:clip-path 420ms var(--ease-io)}
  .site-header nav a{font-size:22px;padding:12px 0;border-radius:0;border-bottom:1px solid var(--line)}
  .site-header nav a[aria-current]::after{left:auto;right:0;top:50%;bottom:auto;width:10px;height:10px;border-radius:50%;margin-top:-5px}
  .hero{min-height:max(620px,calc(100svh - var(--header)))}
  .hero-body{align-items:flex-end;padding-block:96px 24px}
  .scene{background:var(--wall)}
  .scene img{width:100%;height:62%;object-position:var(--pos-m,50% 50%)}
  .hero-scrim{background:linear-gradient(180deg,rgba(27,28,27,0) 28%,rgba(27,28,27,.55) 40%,rgba(27,28,27,.92) 52%,var(--wall) 60%)}
  .hero-bar{justify-content:space-between}
  .facts-strip .wrap{grid-template-columns:1fr 1fr}
  .facts-strip div:nth-child(3){border-left:0;padding-left:0}
  .facts-strip div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .wall-head{grid-template-columns:1fr}
  .drawers-grid,.reach-grid,.contact-layout,.contact-home-grid,.page-hero-grid,.intro-section,.local-split{grid-template-columns:1fr}
  .drawers-aside,.contact-home-copy{position:static}
  .drawers-aside [data-reveal=veneer]{display:none}
  .drawers-aside .lead{margin-bottom:0}
  .manifesto{padding-block:56px 40px}
  .manifesto .dimline{margin-top:32px}
  .reach-map{justify-self:center}
  .offer-row{grid-template-columns:40px 1fr 24px;gap:20px}
  .offer-row p{grid-column:2;grid-row:2}
  .offer-row>span:last-child{grid-column:3;grid-row:1}
  .city-grid{grid-template-columns:1fr 1fr}
  .category-links{grid-template-columns:1fr 1fr}
  .services-strip{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wall-row{grid-template-columns:1fr 1fr}
  .wall-row .front{grid-column:span 1}
  .wall-row .front.span-2{grid-column:span 2}
  .wall-row.upper .front,.wall-row.lower .front{height:200px}
  .wall-row .front.span-2{height:220px}
  .wall-row{overflow:hidden}
  .front{overflow:hidden}
  .inside-label{flex-direction:column;align-items:flex-start;gap:4px;left:22px;right:22px}
  .double .inside-label{left:26px}
  .wall-gap{height:28px}
  .detail-list{grid-template-columns:1fr}
  .detail-list article:last-child:nth-child(odd){grid-column:auto}
  .strip-photos{grid-template-columns:1fr 1fr}
  .strip-photos a:first-child{grid-column:span 2;grid-row:auto}
}
@media (max-width:600px){
  .nav-cta{display:none}
  .logo-svg{height:26px}
  .logo-tag{display:none}
  .hero h1{font-size:clamp(48px,14vw,68px)}
  .hero-counter{display:none}
  .frame-caption{flex-wrap:wrap}
  .category-grid,.featured-grid,.city-grid,.category-links,.process-grid,.form-row,.near-list,.facts,.footer-grid{grid-template-columns:1fr}
  .form-row{gap:0}
  .drawer-front{grid-template-columns:32px 1fr;padding:0 18px;min-height:84px}
  .pull{display:none}
  .drawer-inner{padding:22px 18px 24px;margin:0 6px}
  .services-strip a{grid-template-columns:80px 1fr auto;font-size:17px;gap:16px}
  .services-strip img{width:80px}
  .lightbox{padding:72px 12px}
  .lightbox[open]{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto}
  .lightbox>img{grid-column:1/-1;grid-row:1}
  .lightbox-prev{grid-row:2;justify-self:end}.lightbox-next{grid-row:2;justify-self:start}
  .lightbox-caption{grid-row:3}
}

/* ---------- Realisations ---------- */
.home-featured{padding-block:clamp(24px,4vw,64px) clamp(32px,5vw,80px)}
.feature-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,4vw,64px) clamp(16px,2vw,28px)}
.feature-card{grid-column:span 6}
.feature-card:nth-child(4n+1){grid-column:span 7}.feature-card:nth-child(4n+2){grid-column:span 5}
.feature-card:nth-child(4n+3){grid-column:span 5}.feature-card:nth-child(4n+4){grid-column:span 7}
.feature-card>a{display:block}
.feature-photo{position:relative;display:block;height:clamp(280px,31vw,520px)}
.feature-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);transition:filter 400ms ease}
.feature-text{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:18px}
.feature-title{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
@media (hover:hover) and (pointer:fine){
  .feature-card a:hover .brackets{opacity:1;transform:none}
  .feature-card a:hover .image-arrow{background:var(--accent);transform:rotate(45deg)}
  .album:hover img{transform:scale(1.04)}
}
.gallery-block+.gallery-block{margin-top:clamp(56px,7vw,96px)}
.gallery-label{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;margin-bottom:28px}
.album-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.album{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--paper-2);isolation:isolate}
.album img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
.album-meta{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:32px 12px 10px;background:linear-gradient(0deg,rgba(21,22,21,.72),rgba(21,22,21,0));color:var(--white);font-size:14px}
.album-meta b{font-weight:500}
.album-meta small{font-family:var(--mono);font-size:11px;white-space:nowrap}
.case-head{padding-top:clamp(24px,3vw,40px)}
.case-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:end;margin-block:clamp(28px,4vw,48px)}
.case-intro h1{font-size:clamp(40px,5.2vw,88px);line-height:1}
.case-chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.case-chips li{padding:7px 12px;border-radius:4px;background:var(--white);border:1px solid var(--line);font-size:14px}
.case-cover{height:min(82svh,62vw);min-height:320px}
.case-cover img{width:100%;height:100%;object-fit:cover}
.case-photos{padding-top:clamp(16px,2vw,28px)}
.case-row{display:flex;gap:clamp(10px,1.2vw,16px);margin-bottom:clamp(10px,1.2vw,16px)}
.case-row .gallery-photo{margin:0}
.case-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(32px,4vw,56px)}
.case-next{border-block:1px solid var(--line)}
.case-next a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 24px;padding-block:clamp(32px,4vw,56px)}
.case-next .mono{grid-column:1/-1;color:var(--muted)}
.case-next-title{font-size:clamp(28px,3.6vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.case-next a>span:last-child{font-size:clamp(24px,3vw,44px);transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.case-next a:hover>span:last-child{transform:translate(6px,-6px)}}
@media (max-width:900px){
  .album-grid{grid-template-columns:repeat(2,1fr)}
  .case-intro{grid-template-columns:1fr}
  .feature-card,.feature-card:nth-child(n){grid-column:1/-1}
  .feature-photo{height:62vw}
}
@media (max-width:600px){
  .case-row{flex-direction:column}
  .case-row>div{flex:none!important}
  .album-meta{padding:24px 8px 8px;font-size:13px}
  .album-meta small{display:none}
  .feature-text{flex-direction:column;gap:4px}
  .case-cover{height:72vw;min-height:0}
}

/* ---------- Product landings ---------- */
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.type-photo{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--paper-2);margin-bottom:18px}
.type-photo img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.type-photo:hover img{transform:scale(1.04)}}
.type-card h3{font-size:clamp(19px,1.5vw,22px)}
.type-card p{font-size:15px;margin-top:8px}
.landing-albums{margin-top:clamp(28px,3vw,44px)}
.landing-more{margin-top:32px}
@media (max-width:900px){.type-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.type-grid{grid-template-columns:1fr}}

/* ---------- 3D fittings ---------- */
.fit3d-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:6px;background:var(--wall);padding:6px;border-radius:var(--r)}
.fit3d-stage canvas{display:block;width:100%;height:clamp(360px,44vw,620px);background:radial-gradient(120% 90% at 50% 20%,#fbfbfa,#e7e9e5);border-radius:2px;touch-action:pan-y}
@media (hover:hover) and (pointer:fine){.fit3d-stage canvas{cursor:grab}.fit3d-stage canvas:active{cursor:grabbing}}
.fit3d-ui{display:flex;flex-direction:column;gap:24px;padding:28px;background:var(--front);border-radius:2px}
.fit3d-tabs{display:flex;flex-wrap:wrap;gap:8px}
.fit3d-tabs button{min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--line-strong);background:transparent;font-size:14px;font-weight:500;transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--ease-out)}
.fit3d-tabs button:active{transform:scale(.97)}
.fit3d-tabs button[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.fit3d-ui p{font-size:16px;color:var(--ink-2);margin:0}
.fit3d-control{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px}
.fit3d-control label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.fit3d-control input{width:100%;accent-color:var(--ink);min-height:28px}
@media (max-width:900px){.fit3d-stage{grid-template-columns:1fr}.fit3d-stage canvas{height:min(78vw,460px)}}

/* Reduced motion: keep fades, drop movement. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}
  .js [data-split] .w>span,.js [data-reveal]{transform:none!important;clip-path:none!important;opacity:1!important}
  html.play-intro .intro{display:none}
}
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:18px 20px;background:var(--wall);color:#e8e9e6;border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.28);font-size:14px;line-height:1.5}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;flex:1;color:inherit}
.cookie-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-bar .button{min-height:44px;padding:0 20px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
@media (hover:hover) and (pointer:fine){.cookie-bar .button:hover{background:#fff;color:var(--ink);border-color:#fff}}
.cookie-bar .button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:640px){.cookie-bar{flex-direction:column;align-items:stretch;gap:14px;left:12px;right:12px;bottom:12px}.cookie-actions .button{flex:1;justify-content:center}}
.footer-link{all:unset;cursor:pointer}
.footer-link:hover{color:#fff}
.footer-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}