/* Room by Room theme. Tokens first; motion is gated by html[data-motion] and prefers-reduced-motion. */
:root{
  --paper:#EFEBE3;--paper-2:#E6E0D5;--paper-3:#F6F3EE;--ink:#1D1C19;--soft:#56524A;--green:#2F3B33;--green-2:#25302A;--deep:#1C2320;--timber:#9A6534;--timber-ink:#7A4F27;--brass:#B08A4E;
  --line:rgba(29,28,25,.15);--line-light:rgba(236,230,218,.18);
  --serif:"Young Serif",Georgia,"Times New Roman",serif;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --g:clamp(20px,4.2vw,64px);--gap:clamp(16px,2vw,28px);--max:1600px;
  --s1:clamp(48px,6vw,96px);--s2:clamp(32px,4vw,60px);
  --ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --hd:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
address{font-style:normal}
:focus-visible{outline:2px solid var(--timber);outline-offset:3px}
main:focus{outline:none}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo-bar{background:var(--ink);color:#D9D3C7;font-size:13.5px;line-height:1.4;text-align:center;padding:7px var(--g)}
.db-short{display:none}
.soft{color:var(--soft)}
.lbl{font:600 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 14px}
.wrap{padding-inline:var(--g);max-width:var(--max);margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--green);color:#F4F0E8;text-decoration:none;font:500 16px/1 var(--sans);padding:15px 22px;border-radius:2px;border:1px solid var(--green);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--deep);border-color:var(--deep)}
.btn-lg{padding:18px 26px;font-size:16.5px}
.btn-light{background:#F4F0E8;color:var(--ink);border-color:#F4F0E8}.btn-light:hover{background:#fff;border-color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.ln{font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease)}
.ln:hover{background-size:0 1px;background-position:100% 100%}
.arrow::after{content:"→";display:inline-block;margin-left:.45em;transition:transform .35s var(--ease)}
a:hover .arrow::after,.arrow:hover::after{transform:translateX(4px)}
.tag{display:inline-block;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--timber-ink);border:1px solid var(--timber);padding:6px 8px;border-radius:2px}
.credit{position:absolute;right:8px;bottom:8px;font:400 11.5px/1.25 var(--sans);color:#F4F0E8;background:#23221E;padding:3px 6px;border-radius:2px;pointer-events:none;z-index:2;max-width:calc(100% - 16px)}
.ph{position:relative;overflow:hidden;background:var(--paper-2);margin:0}
.dark .ph,.hero .ph{background:#2a2a25}
.ph img{width:100%;height:100%;object-fit:cover}

/* Header */
.hd{position:sticky;top:0;z-index:40;height:var(--hd);display:flex;align-items:center;gap:28px;padding-inline:var(--g);background:rgba(239,235,227,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,transform .45s var(--ease)}
.hd.is-scrolled{border-bottom-color:var(--line)}
.logo{font:400 24px/1 var(--serif);text-decoration:none;letter-spacing:-.015em;display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap}
.logo span{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.logo-light span{color:#A9A294}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:clamp(16px,1.8vw,30px)}
.nav a{font-size:16.5px;text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.nav a:hover,.nav a[aria-current]{background-size:100% 1px}
.hd-tel{font-size:16.5px;text-decoration:none;white-space:nowrap}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:10px;background:none;border:0;font:500 16.5px var(--sans);color:var(--ink);padding:10px 2px;cursor:pointer}
.menu-icon{width:22px;height:10px;position:relative}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-icon::before{top:0}.menu-icon::after{top:8.5px}
.menu-btn[aria-expanded=true] .menu-icon::before{top:4.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-icon::after{top:4.25px;transform:rotate(-45deg)}
.menu{position:fixed;inset:var(--hd) 0 0 0;z-index:39;background:var(--paper);overflow:auto;overscroll-behavior:contain}
.menu[hidden]{display:none}
.menu-in{display:grid;grid-template-columns:1.2fr 1fr;gap:40px var(--gap);padding:36px var(--g) 48px;min-height:100%}
.menu ul{list-style:none}
.menu-big a{display:block;font:400 clamp(30px,6vw,48px)/1.12 var(--serif);text-decoration:none;padding:6px 0;transition:color .25s,transform .4s var(--ease)}
.menu-big a:hover{color:var(--timber-ink);transform:translateX(6px)}
.menu-rooms a{display:block;font:400 20px/1.3 var(--serif);text-decoration:none;padding:7px 0}
.menu-small a{font:500 16px/1.4 var(--sans)}
.menu-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;border-top:1px solid var(--line);padding-top:24px;align-self:end}
.menu-foot p{margin:0;color:var(--soft);font-size:16px}
.menu-tel{font:400 22px var(--serif);text-decoration:none}
.menu-open{overflow:hidden}

/* Home hero: one full-bleed photograph with a title-block panel */
.hero{position:relative}
.hero-media{position:relative;height:min(calc(100svh - var(--hd) - 34px),920px);min-height:540px}
.hero-media .ph{position:absolute;inset:0}
.hero-panel{position:absolute;left:var(--g);bottom:0;z-index:3;width:min(660px,calc(100% - 2 * var(--g)));background:var(--deep);color:#ECE6DA;padding:clamp(26px,3vw,46px) clamp(24px,3vw,46px) 0}
.hero-panel .lbl{color:#A8A193}
.hero h1{font-size:clamp(42px,5.4vw,88px);line-height:.98;letter-spacing:-.022em;max-width:11ch;margin-bottom:20px}
.hero .lede{color:#C9C2B5;max-width:40ch;font-size:clamp(16.5px,1.2vw,19px)}
.hero-acts{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:10px}
.hero-panel .ln{color:#F4F0E8}
.tb{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:clamp(24px,3vw,40px) calc(-1 * clamp(24px,3vw,46px)) 0;border-top:1px solid var(--line-light)}
.tb li{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#B9B2A5;padding:15px 0 16px clamp(24px,3vw,46px)}
.tb li+li{border-left:1px solid var(--line-light);padding-left:14px}
/* Rooms strip under the hero */
.rooms{display:grid;grid-template-columns:auto 1fr;gap:20px clamp(24px,3vw,48px);align-items:center;padding-block:clamp(22px,2.6vw,36px)}
.rooms-h{font:600 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.rooms ul{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.rooms li+li{border-left:1px solid var(--line)}
.rooms a{display:block;padding:6px 16px;text-decoration:none;font:400 clamp(17px,1.35vw,21px)/1.2 var(--serif);transition:color .25s,transform .4s var(--ease)}
.rooms a small{display:block;font:400 15px/1.3 var(--sans);color:var(--soft);margin-top:4px}
.rooms a:hover,.rooms a:focus-visible{color:var(--timber-ink);transform:translateX(4px)}

/* Drawings: one set in a shared 320-unit space. --k matches line weight and type to the size a drawing is shown at:
   cards (about 360-420px) use 1, small thumbnails .dk-mini, large single drawings .dk-lg */
.drw{--k:1;display:block;width:100%;height:auto;color:var(--ink);overflow:visible}
.drw path,.drw rect,.drw circle{fill:none;stroke:currentColor;stroke-width:calc(1.3 / var(--k));stroke-linecap:round;stroke-linejoin:round}
.drw .f{stroke-width:calc(.85 / var(--k))}
.drw .dm{stroke:var(--timber)}
.drw text{fill:var(--timber-ink);font:500 calc(11.5px / var(--k)) var(--sans);letter-spacing:.01em}
.drw .co circle{fill:var(--paper-3);stroke:var(--timber);stroke-width:calc(.9 / var(--k))}
.drw .co text{fill:var(--ink);font:600 calc(9.5px / var(--k)) var(--sans)}
.dk-mini{--k:.42}.dk-mini text,.dk-mini .co,.dk-mini .dm{display:none}
.dk-lg{--k:1.75}
.ph.sheet{background:var(--paper-3);display:grid;place-items:center;padding:5%}
.ph.sheet .drw{width:100%;height:100%;max-height:100%}
.ph.sheet-dark{background:#232B27}
.sheet-dark .drw{color:#E6DFD2}.sheet-dark .drw .dm{stroke:#C99A62}.sheet-dark .drw text{fill:#D8B88A}
.svc-media .sheet .drw{max-width:360px;max-height:360px}
.sheet-plain{background:var(--paper-3);padding:clamp(20px,3vw,44px)}
.sheet-plain .drw{max-width:600px;margin-inline:auto}

/* Sections */
.sec{padding-block:var(--s1)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:end;margin-bottom:var(--s2)}
.sec-head h2{font-size:clamp(30px,3vw,46px);line-height:1.1;max-width:18ch}
.sec-head p{color:var(--soft);max-width:52ch;margin:0}
.dark{background:var(--deep);color:#ECE6DA}
.dark .lbl{color:#A39C8F}
.dark p{color:#C3BCAF}
.dark a{color:#F4F0E8}

/* Process: one editorial section (photograph + four compact stages) */
.proc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:start}
.proc-photo{aspect-ratio:4/5;max-height:min(74vh,700px);width:100%}
.proc-steps{list-style:none;border-top:1px solid var(--line)}
.proc-steps li{display:grid;grid-template-columns:44px minmax(0,1fr) 116px;gap:4px 22px;align-items:start;padding:clamp(16px,2.2vh,24px) 0;border-bottom:1px solid var(--line)}
.proc-steps .n{font:600 13px/1 var(--sans);letter-spacing:.08em;color:var(--timber-ink);padding-top:12px}
.proc-steps h3{font-size:clamp(24px,2vw,30px);line-height:1.15;margin-bottom:6px}
.proc-steps p{color:var(--soft);margin:0;max-width:46ch}
.proc-d{width:116px;aspect-ratio:1/1;background:var(--paper-3)}
/* panels swap with a wipe (no half-transparent text at any moment): the old one goes at once, the new one wipes in */
.svc-media .ph{position:absolute;inset:0;visibility:hidden;clip-path:inset(0 0 0 100%)}
.svc-media .ph.is-on{visibility:visible;clip-path:inset(0);transition:clip-path .8s var(--ease-io)}

/* Feature project */
.feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;gap:0 var(--gap)}
.feature .fa{grid-column:1/8;grid-row:1/3;aspect-ratio:4/3}
.feature .fb{grid-column:9/12;grid-row:1;aspect-ratio:4/5}
.feature .ft-txt{grid-column:9/13;grid-row:2;align-self:end;padding-top:32px}
.feature.one .ft-txt{grid-row:1/3;align-self:center;padding-top:0}
.feature h2,.feature h3{font-size:clamp(26px,2.3vw,36px);line-height:1.12;margin:16px 0 14px}
.feature p{color:var(--soft);max-width:42ch}

/* Services index */
.svc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:start}
.svc-list{list-style:none;border-top:1px solid var(--line-light)}
.svc-list a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-light);text-decoration:none;transition:padding .45s var(--ease)}
.svc-list .n{font:500 14px var(--sans);color:#8F887B}
.svc-list .t{font:400 clamp(28px,3.1vw,48px)/1.08 var(--serif)}
.svc-list .s{display:block;font:400 16.5px/1.5 var(--sans);color:#B3AC9F;margin-top:8px;max-width:44ch}
.svc-list .go{font:500 15.5px var(--sans);color:#B3AC9F;white-space:nowrap;transition:color .25s}
.svc-list a:hover,.svc-list a:focus-visible,.svc-list a.is-on{padding-left:12px}
.svc-list a:hover .go,.svc-list a.is-on .go{color:#F4F0E8}
.svc-media{position:sticky;top:calc(var(--hd) + 24px);aspect-ratio:4/5}

/* Workshop band */
.ws{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gap);align-items:center}
.ws .txt{grid-column:1/6}
.ws h2{font-size:clamp(30px,3vw,46px);line-height:1.1;margin-bottom:18px}
.ws .i1{grid-column:6/10;aspect-ratio:4/5}
.ws .i2{grid-column:10/13;aspect-ratio:3/4;align-self:end;transform:translateY(16%)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;font-size:16.5px;margin:22px 0 26px}
.hours dt{color:var(--soft)}.hours dd{margin:0}

/* Quote band */
.qband{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:end}
.qband h2{font-size:clamp(32px,3.4vw,52px);line-height:1.06}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-block;text-decoration:none;border:1px solid #B5AEA1;border-radius:40px;padding:11px 17px;font-size:16.5px;background:var(--paper-3);transition:background .25s,color .25s,border-color .25s}
.chips a:hover{background:var(--green);border-color:var(--green);color:#F4F0E8}

/* Room / page hero */
.crumbs{font-size:15px;color:var(--soft);padding:22px var(--g) 0}
.crumbs ol{list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.phero{position:relative;padding:22px var(--g) 0}
.phero .ph{height:min(62vh,640px);min-height:320px}
.phero-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,4vw,72px);align-items:start}
.phero-row>:not(.phero-card){margin-top:24px}
.phero-card{position:relative;z-index:2;margin:-110px 0 0 0;max-width:700px;background:var(--paper);padding:32px 40px 0 0}
.phero-card h1{font-size:clamp(40px,4.6vw,68px);line-height:1;margin:12px 0 16px}
.phero-card p{color:var(--soft);max-width:46ch;font-size:18px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap)}
.split h2{font-size:clamp(28px,2.6vw,40px);line-height:1.12}
.prose p{max-width:62ch}
.make{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap);border-top:1px solid var(--line);margin-top:28px}
.make li{padding:16px 0;border-bottom:1px solid var(--line)}
.make b{display:block;font:400 21px/1.25 var(--serif);font-weight:400;margin-bottom:4px}
.make span{color:var(--soft);font-size:16.5px}
.example{font-size:15px;color:var(--soft);margin-top:14px}
.example::before{content:"Example content";font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:4px 6px;margin-right:8px;border-radius:2px}

/* Gallery */
.gal{position:relative}
.gal-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);padding:0 var(--g) 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.gal-track::-webkit-scrollbar{display:none}
.gal-item{flex:0 0 auto;scroll-snap-align:start;margin:0}
.gal-item button{all:unset;display:block;cursor:zoom-in;position:relative;overflow:hidden;height:min(64vh,620px)}
.gal-item button:focus-visible{outline:2px solid var(--timber);outline-offset:3px}
.gal-item img{height:100%;width:auto;max-width:none;transition:transform .9s var(--ease)}
.gal-item button:hover img{transform:scale(1.03)}
.gal-item figcaption{font-size:15.5px;color:var(--soft);margin-top:10px;max-width:46ch}
.gal-ctl{display:flex;justify-content:space-between;align-items:center;padding:20px var(--g) 0;font-size:15.5px}
.gal-ctl .btns{display:flex;gap:8px}
.icon-btn{width:46px;height:46px;border:1px solid var(--ink);background:transparent;border-radius:50%;font:400 18px var(--sans);color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.icon-btn:hover{background:var(--ink);color:var(--paper)}
.icon-btn:disabled{cursor:default;background:transparent;color:var(--soft);border-color:rgba(29,28,25,.18)}
.gal-progress{flex:1;height:1px;background:var(--line);margin:0 24px;position:relative}
.gal:not(.ready) .gal-progress i,.gal:not(.ready) .icon-btn{transition:none}
.gal-progress i{position:absolute;left:0;top:0;height:1px;background:var(--ink);width:0;transition:width .3s}

/* Lightbox */
.lightbox{border:0;padding:0;margin:auto;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:rgba(17,17,15,.96);color:#E9E4DA}
.lightbox::backdrop{background:rgba(17,17,15,.9)}
.lightbox[open]{display:grid;grid-template-rows:1fr auto}
.lightbox figure{margin:0;display:grid;grid-template-rows:1fr auto;min-height:0;padding:24px var(--g) 0}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain;min-height:0}
.lightbox figcaption{display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-size:15.5px;color:#BDB6A9}
.lb-ctl{display:flex;gap:10px;justify-content:flex-end;padding:0 var(--g) 22px}
.lb-ctl button{background:transparent;border:1px solid rgba(233,228,218,.5);color:#F4F0E8;font:500 15px var(--sans);padding:11px 16px;border-radius:2px;cursor:pointer;min-width:46px}
.lb-ctl button:hover{background:rgba(255,255,255,.1)}

/* Project page */
.ptag{background:var(--paper-2);border-left:3px solid var(--timber);padding:14px 18px;font-size:16.5px;max-width:70ch}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;font-size:16.5px;border-top:1px solid var(--line);padding-top:18px;margin:0}
.facts dt{color:var(--soft)}.facts dd{margin:0}
.seq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s2) var(--gap)}
.seq figure{margin:0}
.seq figcaption{margin-top:12px;font-size:16.5px;color:var(--soft);max-width:44ch}
.seq figcaption b{display:block;font:400 21px/1.2 var(--serif);color:var(--ink);margin-bottom:4px}
.seq .a{grid-column:1/8}.seq .b{grid-column:9/13;align-self:end}.seq .c{grid-column:3/7}.seq .d{grid-column:8/13}.seq .e{grid-column:1/13}
.seq .a .ph{aspect-ratio:4/3}.seq .b .ph{aspect-ratio:4/5}.seq .c .ph{aspect-ratio:4/5}.seq .d .ph{aspect-ratio:4/3}.seq .e .ph{aspect-ratio:21/9}

/* Kitchen: anatomy drawing, project card, FAQ + quote band */
.anat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s2) var(--gap);align-items:center}
.anat h2{font-size:clamp(30px,3vw,46px);line-height:1.1;margin-bottom:18px}
.make .num{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--timber);border-radius:50%;font:600 12px var(--sans);color:var(--timber-ink);margin-right:10px;vertical-align:3px}
.pcard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:center;border-top:1px solid var(--line);padding-top:var(--s2)}
.pcard .ph{aspect-ratio:4/3}
.pcard h2{font-size:clamp(26px,2.4vw,38px);line-height:1.12;margin:16px 0 14px}
.pcard p{color:var(--soft);max-width:46ch}
.endgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s2) clamp(32px,5vw,96px);align-items:start}
.endgrid h2{font-size:clamp(28px,2.6vw,40px);line-height:1.12;margin-bottom:20px}
.qcard{background:var(--deep);color:#ECE6DA;padding:clamp(28px,3vw,46px);position:sticky;top:calc(var(--hd) + 24px)}
.qcard p{color:#C9C2B5}.qcard a:not(.btn){color:#F4F0E8}
.qcard h2{font-size:clamp(30px,3vw,46px)}
/* Project: title block */
.tblock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ink);margin:0}
.tblock div{padding:14px 16px;border-left:1px solid var(--ink)}
.tblock div:first-child{border-left:0}
.tblock dt{font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.tblock dd{margin:0;font:400 18px/1.3 var(--serif)}
.seq3{grid-template-columns:repeat(3,minmax(0,1fr))}.seq3>*{grid-column:auto}
/* project page: details strip sits closer to the introduction */
.p-details{padding-top:clamp(28px,3.2vw,52px)}
.seq-h{font-size:clamp(28px,2.6vw,40px);line-height:1.12;margin:0 0 var(--s2)}

/* Services page: one kitchen feature, then a composed group of three */
.svc-feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:end;padding-bottom:var(--s1)}
.svc-feature .ph{aspect-ratio:3/2}
.svc-feature h2{font-size:clamp(36px,4vw,64px);line-height:1;margin:6px 0 18px}
.svc-feature-txt p:not(.lbl){color:var(--soft);max-width:44ch}
.svc-group{border-top:1px solid var(--line)}
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.svc-card .ph{aspect-ratio:1/1;margin-bottom:20px}
.svc-card h3{font-size:clamp(26px,2.2vw,34px);line-height:1.1;margin-bottom:10px}
.svc-card p:not(.lbl){color:var(--soft);max-width:36ch}
.svc-card .lbl{margin-bottom:8px}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:400 21px/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--sans);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;color:var(--soft);max-width:62ch}

/* Forms */
.qform{display:grid;gap:26px}
.field label,.field legend{display:block;font:500 16.5px var(--sans);margin-bottom:8px;padding:0}
.field .hint{display:block;font-size:15.5px;color:var(--soft);margin:-4px 0 8px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{width:100%;font:400 17px var(--sans);color:var(--ink);background:var(--paper-3);border:1px solid #A9A194;border-radius:2px;padding:13px 14px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(47,59,51,.22)}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.pick{display:flex;flex-wrap:wrap;gap:10px}
.pick label{position:relative;margin:0;font:400 16px var(--sans)}
.pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick span{display:inline-block;border:1px solid #A9A194;background:var(--paper-3);border-radius:40px;padding:11px 17px;transition:background .25s,color .25s,border-color .25s}
.pick input:checked+span{background:var(--green);border-color:var(--green);color:#F4F0E8}
.pick input:focus-visible+span{outline:2px solid var(--timber);outline-offset:3px}
.pick input:hover+span{border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.err{display:none;color:#8B2E1F;font-size:15.5px;margin-top:8px}
.field.has-err .err{display:block}
.field.has-err input,.field.has-err textarea{border-color:#8B2E1F}
.field.has-err .pick span{border-color:#8B2E1F}
.err-sum{border:2px solid #8B2E1F;padding:16px 20px;background:#F6ECE6}
.err-sum h2{font:600 17px var(--sans);margin-bottom:8px}
.err-sum ul{padding-left:20px}
.err-sum a{color:#8B2E1F}
.note{font-size:15.5px;color:var(--soft)}
.local-note{background:var(--paper-2);padding:12px 16px;font-size:15.5px;border-left:3px solid var(--brass)}
.submit-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.btn[aria-busy=true]{opacity:.7;pointer-events:none}
.contact-aside dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:16.5px;margin:18px 0}
.contact-aside dt{color:var(--soft)}.contact-aside dd{margin:0}
.big-tel{font:400 clamp(28px,2.6vw,38px)/1.1 var(--serif);text-decoration:none}

/* Footer */
.ft{background:var(--deep);color:#D8D2C6;padding:var(--s2) var(--g) 110px;margin-top:0}
.ft .btn-light{color:var(--ink)}
.ft a{color:#F4F0E8;text-decoration:none}.ft a:hover{text-decoration:underline}
.ft-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line-light);padding-bottom:var(--s2);margin-bottom:48px}
.ft-line{font:400 clamp(26px,2.6vw,40px)/1.15 var(--serif);color:#F4F0E8;margin:0;max-width:22ch}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:32px;font-size:16.5px}
.ft-grid ul{list-style:none}.ft-grid li{margin-bottom:6px}
.ft .lbl{color:#9C968A}
.ft address{margin-top:16px;color:#B8B1A4}
.ft-mail{overflow-wrap:anywhere}
.ft-small{font-size:14px;color:#9C968A;margin-top:48px;max-width:90ch}

/* Mobile call bar */
.mcta{display:none}

/* Generic pages (Phase 1 placeholders rendered in this theme) */
.section{padding:var(--s2) var(--g)}
.section h1{font-size:clamp(36px,4vw,60px);margin-bottom:16px}
.lead{font-size:19px;color:var(--soft);max-width:56ch}

/* Intro-row companions: key facts, project details, visit card */
.keyfacts{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:0}
.keyfacts li{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--soft);line-height:1.4}
.keyfacts b{display:block;font:400 20px/1.2 var(--serif);color:var(--ink);margin-bottom:2px}
.tblock-side{grid-template-columns:1fr 1fr}
.tblock-side div:nth-child(3){border-left:0}.tblock-side div:nth-child(n+3){border-top:1px solid var(--ink)}
.visit-card{background:var(--paper-3);padding:22px 24px}
.visit-card .hours{margin:8px 0 14px}
.visit-note{font-size:16px;color:var(--soft);margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
.addr{font-style:normal;line-height:1.5}
.addr-note{font-size:14.5px;color:var(--soft);margin:6px 0 0}
.ft .addr-note{color:#A8A193}
.ex-tag{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--timber-ink);border:1px solid var(--timber);border-radius:2px;padding:3px 5px;margin-left:6px;vertical-align:2px}
.qcard .ex-tag,.dark .ex-tag{color:#E2C79F;border-color:#C99A62}
/* Page heads (services, projects, about) */
.page-head{padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,44px)}
.page-head h1{font-size:clamp(40px,5vw,76px);line-height:1;max-width:16ch;margin-bottom:18px}
.page-head p{max-width:56ch}
.page-head-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:center}
.page-head-ph{aspect-ratio:4/5;max-height:620px}
.lead-p{font-size:clamp(19px,1.4vw,22px);line-height:1.55;max-width:54ch}
.card-links{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:18px}
/* Choices (project) and bench stages (workshop) */
.choices{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.choice .ph{aspect-ratio:4/5;margin-bottom:18px}
.choice .num{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--timber);border-radius:50%;font:600 13px var(--sans);color:var(--timber-ink);margin-bottom:10px}
.choice h3{font-size:clamp(23px,1.9vw,28px);line-height:1.15;margin-bottom:8px}
.choice p{color:var(--soft);max-width:40ch;margin:0}
/* Service pages */
.svc-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:center;padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,48px)}
.svc-hero h1{font-size:clamp(44px,5.6vw,84px);line-height:1;margin-bottom:20px}
.svc-hero-d{aspect-ratio:1/1;max-width:460px;width:100%;justify-self:end}
.offers{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap);border-top:1px solid var(--line)}
.offers li{padding:18px 0;border-bottom:1px solid var(--line)}
.offers h3{font-size:22px;line-height:1.2;margin-bottom:6px}
.offers p{color:var(--soft);margin:0}
.tick{list-style:none;margin:0 0 22px}
.tick li{position:relative;padding-left:22px;margin-bottom:8px;color:#D9D2C5}
.tick li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:#C99A62}
.other-svc{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.other-svc a{display:block;height:100%;text-decoration:none;border-top:1px solid var(--ink);padding:16px 0}
.other-svc b{display:block;font:400 24px/1.2 var(--serif);margin-bottom:6px}
.other-svc span{color:var(--soft)}
.other-svc a:hover b{color:var(--timber-ink)}
.svc-card h3 a{text-decoration:none}.svc-card h3 a:hover{color:var(--timber-ink)}
/* About */
.principles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.principles h3{font-size:clamp(23px,1.9vw,28px);margin-bottom:8px}
.principles p{color:var(--soft);margin:0}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px}
/* Contact, thanks, legal */
.contact-h1{font-size:clamp(38px,4.4vw,64px);line-height:1.02;margin-bottom:16px}
.next-steps{list-style:none;counter-reset:ns;margin:22px 0 0;border-top:1px solid var(--line)}
.next-steps li{counter-increment:ns;display:grid;grid-template-columns:34px 1fr;padding:12px 0;border-bottom:1px solid var(--line)}
.next-steps li::before{content:counter(ns);font:600 13px/1.9 var(--sans);color:var(--timber-ink);grid-row:1/3}
.next-steps b{font:400 19px/1.3 var(--serif)}
.next-steps span{color:var(--soft);font-size:16px}
.opt{color:var(--soft);font-weight:400}
.thanks{max-width:60rem}
.thanks h1{font-size:clamp(38px,4.6vw,68px);line-height:1.04;max-width:16ch;margin-bottom:20px}
.thanks .hero-acts{margin-top:24px}
.thanks .local-note{max-width:60ch;margin-top:20px}
.legal{max-width:72ch}
.legal h1{font-size:clamp(36px,4vw,56px);line-height:1.05;margin-bottom:20px}
.legal h2{font-size:24px;margin:32px 0 8px}
.legal .local-note{margin:8px 0 8px}

/* Service pages: photo-led header, then offers, practical notes, questions */
.svc-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:center;padding-block:clamp(20px,3vw,40px) var(--s2)}
.svc-top h1{font-size:clamp(44px,5.4vw,80px);line-height:1;margin-bottom:20px}
.svc-top-ph{aspect-ratio:4/5;max-height:min(72vh,660px);width:100%}
.offers-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:start}
.offers-grid h2{font-size:clamp(28px,2.6vw,40px);margin-bottom:22px}
.offers-ph{aspect-ratio:4/5}
.offers-d{margin:0;max-width:340px;justify-self:end;width:100%}
.offers-d .ph{aspect-ratio:1/1}
.offers-d .note{margin-top:10px}
.know-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.know-head h2{font-size:clamp(28px,2.6vw,40px)}
.know-d{width:96px;flex:none}
.know{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.know li{border-top:1px solid var(--ink);padding-top:14px}
.know h3{font-size:21px;line-height:1.25;margin-bottom:8px}
.know p{color:var(--soft);margin:0}
.quote-panel{border:1px solid var(--ink);padding:clamp(24px,3vw,40px)}
.quote-panel h2{font-size:clamp(26px,2.4vw,36px);line-height:1.12;margin-bottom:12px}
.quote-panel .tick li{color:var(--ink)}
.quote-panel .tick li::before{background:var(--timber)}
.other-sec{padding-bottom:var(--s1)}
.other-sec .lbl{margin-bottom:18px}
/* Homepage project feature: the three choices in brief */
.mini-choices{list-style:none;counter-reset:mc;margin:18px 0 22px;border-top:1px solid var(--line)}
.mini-choices li{counter-increment:mc;position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--line);color:var(--soft);line-height:1.45}
.mini-choices li::before{content:counter(mc);position:absolute;left:0;top:10px;font:600 13px/1.45 var(--sans);color:var(--timber-ink)}
.mini-choices b{color:var(--ink);font-weight:600}
.feature .note{margin-top:14px}
.choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices.two .choice .ph{aspect-ratio:4/3}
/* About */
.why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:start}
.why-grid h2{font-size:clamp(30px,3vw,46px);line-height:1.1;margin-bottom:18px}
.principles-list{list-style:none;counter-reset:pl;border-top:1px solid var(--ink)}
.principles-list li{counter-increment:pl;display:grid;grid-template-columns:40px 1fr;padding:18px 0;border-bottom:1px solid var(--line)}
.principles-list li::before{content:"0" counter(pl);font:600 13px/2 var(--sans);color:var(--timber-ink);grid-row:1/3}
.principles-list h3{font-size:22px;margin-bottom:4px}
.principles-list p{color:var(--soft);margin:0}
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);margin:0 0 28px}
.facts-grid div{padding:16px 20px 18px 0;border-bottom:1px solid var(--line)}
.facts-grid div+div{padding-left:20px;border-left:1px solid var(--line)}
.facts-grid dt{font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.facts-grid dd{margin:0;line-height:1.55}
.facts-grid .addr-note{margin-top:6px}

/* Kitchen: the illustrative kitchen as the page's showcase */
.kshow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap) clamp(32px,5vw,88px);align-items:center}
.kshow-ph{aspect-ratio:5/4}
.kshow h2{font-size:clamp(28px,2.6vw,40px);line-height:1.12;margin:14px 0 12px}
.kshow p{color:var(--soft);max-width:46ch}
.kshow .note{margin-top:14px}
.svc-top .keyfacts{margin-top:28px;max-width:520px}
/* Project: captioned photographs of the finished room */
.gal-story .gal-item figcaption{max-width:40ch;color:var(--soft);font-size:16px;line-height:1.5;margin-top:14px}
.gal-story .gal-item figcaption b{display:block;font:400 22px/1.2 var(--serif);color:var(--ink);margin:6px 0 6px}
.gal-story .gal-item figcaption .num{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--timber);border-radius:50%;font:600 12px var(--sans);color:var(--timber-ink)}
/* Service pages: captioned supporting photograph; services index photo cards */
.offers-fig{margin:0}
.offers.one-col{grid-template-columns:1fr;max-width:640px}

.brief{max-width:760px}
.brief h2{font-size:clamp(28px,2.6vw,40px);margin-bottom:16px}
.offers-fig .note{margin-top:10px}
.svc-card .ph{aspect-ratio:4/3}

/* ---------- Motion (tier "considered") ----------
   Content is never hidden on arrival: the header, photographs, titles and text appear at once on every page,
   with or without JavaScript, at any motion setting. The only scroll-triggered motion is optional line drawings
   below the first screen drawing themselves (their card and caption are always visible), plus the services
   panel swap on hover, the menu and the lightbox. Without JavaScript or with reduced motion, drawings show complete. */
@media (prefers-reduced-motion:no-preference){
  [data-motion=considered].js .rv-draw .drw :is(path,rect,circle){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s var(--ease-io)}
  [data-motion=considered].js .rv-draw .drw .dm,[data-motion=considered].js .rv-draw .drw .co circle{transition-delay:1s}
  [data-motion=considered].js .rv-draw.in .drw :is(path,rect,circle){stroke-dashoffset:0}
  [data-motion=considered].js .svc-media .ph .drw :is(path,rect,circle){stroke-dasharray:1;stroke-dashoffset:1}
  [data-motion=considered].js .svc-media .ph.is-on .drw :is(path,rect,circle){stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-io) .15s}
  [data-motion=considered].js .svc-media .ph.is-on .drw .dm{transition-delay:.9s}
  .menu.is-opening .menu-in>*{animation:slide .45s var(--ease) both}
  .menu.is-opening .menu-in>*:nth-child(2){animation-delay:.04s}
  .menu.is-opening .menu-in>*:nth-child(3){animation-delay:.08s}
  .lightbox[open] img{animation:fade .3s var(--ease)}
}
@keyframes slide{from{transform:translateY(10px)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav ul{gap:16px}.hd-tel{display:none}
}
@media (max-width:980px){
  :root{--hd:64px}
  body{font-size:17px}
  .nav,.hd-tel,.hd-cta{display:none}
  .menu-btn{display:inline-flex}
  .hero-media{height:min(82vw,560px);min-height:300px}
  .hero-panel{position:relative;left:auto;width:auto;padding:30px var(--g) 0}
  .hero h1{font-size:clamp(38px,10.5vw,60px)}
  .tb{margin-inline:calc(-1 * var(--g))}.tb li{padding-left:var(--g);font-size:11.5px;letter-spacing:.06em}.tb li+li{padding-left:10px}
  .rooms{grid-template-columns:1fr;padding-top:28px}
  .rooms ul{grid-template-columns:1fr;border-top:1px solid var(--line)}
  .rooms li+li{border-left:0}
  .rooms li{border-bottom:1px solid var(--line)}
  .rooms a{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;font-size:21px}
  .rooms a small{margin:0}
  .anat,.pcard,.endgrid,.proc-grid{grid-template-columns:1fr}
  .proc-photo{aspect-ratio:4/3;max-height:none}
  .proc-steps li{grid-template-columns:34px minmax(0,1fr) 76px;gap:4px 14px}
  .proc-d{width:76px}
  .qcard{position:static}
  .tblock{grid-template-columns:1fr 1fr}.tblock div:nth-child(3){border-left:0}.tblock div:nth-child(n+3){border-top:1px solid var(--ink)}
  .sec-head,.split,.svc,.qband,.svc-feature{grid-template-columns:1fr}
  .svc-cards{grid-template-columns:1fr;gap:40px}
  .svc-card .ph{max-width:420px}
  .feature .fa,.feature .ft-txt{grid-column:1/13;grid-row:auto}
  .feature .fb{display:none}
  .svc-media{display:none}
  .svc-list a{grid-template-columns:32px 1fr}
  .svc-list .go{display:none}
  .ws .txt,.ws .i1{grid-column:1/13}
  .ws .i1{margin-top:32px;aspect-ratio:4/3}
  .ws .i2{display:none}
  .menu-in{grid-template-columns:1fr}
  .phero .ph{height:62vw;min-height:260px}
  .phero-row,.page-head-split,.svc-hero{grid-template-columns:1fr}
  .svc-top,.offers-grid,.why-grid,.kshow{grid-template-columns:1fr}
  .feature.one .ft-txt{padding-bottom:28px}
  .kshow-ph{aspect-ratio:4/3}
  .svc-top-ph{aspect-ratio:4/3;max-height:none}
  .offers-d{justify-self:start;max-width:280px}
  .offers-ph{aspect-ratio:4/3}
  .know,.choices.two{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr 1fr}
  .facts-grid div:nth-child(3){padding-left:0;border-left:0}
  .phero-card{margin:-56px 0 0;padding:26px 24px 0 0}
  .keyfacts{grid-template-columns:1fr 1fr}
  .choices,.principles,.other-svc{grid-template-columns:1fr}
  .choice .ph{aspect-ratio:4/3}
  .offers{grid-template-columns:1fr}
  .svc-hero-d{justify-self:start;max-width:420px}
  .page-head-ph{aspect-ratio:4/3}
  .make{grid-template-columns:1fr}
  .seq>*{grid-column:1/13!important}
  .seq3{grid-template-columns:1fr}.seq3>*{grid-column:auto!important}
  /* phones and tablets: drawing cards trim the empty margin above and below the drawing (never the drawing itself) */
  .seq3{gap:36px}
  .seq3 .ph.sheet{aspect-ratio:auto!important;display:block;padding:8px 0 34px}
  .seq3 .ph.sheet .drw{height:auto;max-height:none;aspect-ratio:320 / var(--vbh);max-width:460px;margin-inline:auto}
  .gal-item button{height:62vw}
  .row2{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .mcta:not(.ready){transition:none!important}
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(239,235,227,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s var(--ease)}
  .mcta.is-on{transform:none}
  .mcta a{flex:1;text-align:center;padding:14px;font:500 16.5px var(--sans);text-decoration:none;border-radius:2px}
  .mcta-call{border:1px solid var(--ink)}
}
@media (max-width:700px){
  .db-long{display:none}.db-short{display:inline}
  .demo-bar{font-size:12.5px;padding-block:6px}
}
@media (max-width:600px){
  .facts-grid{grid-template-columns:1fr}.facts-grid div,.facts-grid div+div{padding-left:0;border-left:0}
  .proc-steps li{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"n t" "d t";column-gap:16px}
  .proc-steps .n{grid-area:n;padding-top:10px}
  .proc-steps li>div:not(.proc-d){grid-area:t}
  .proc-d{grid-area:d;width:52px;margin-top:8px}
  .proc-d .drw{--k:.24}
  /* DEF-78: on phones a gallery caption wraps inside its own card (it no longer sets the card's width);
     a narrow portrait card is widened to a readable measure, never wider than the screen */
  .gal-item{min-width:min(76vw,calc(100vw - 2 * var(--g)))}
  .gal-item figcaption,.gal-story .gal-item figcaption{width:0;min-width:100%;max-width:none}
}
@media (max-width:520px){
  .ft-grid{grid-template-columns:1fr}
  .gal-ctl .gal-progress{margin:0 14px}
}
@media (max-width:360px){
  .hd{gap:12px}.logo{font-size:21px}.logo span{display:none}
  .menu-btn{gap:8px}
}
@media print{.hd,.menu,.mcta,.demo-bar,.ft-top{display:none}}