/* WOW Walls Studio · site.css (foundation, shared by every page)
   Direction "Material Atelier": Ysabeau (display) + Proza Libre (text), bone/linen/paper
   surfaces tinted toward travertine (hue ~80), olive for primary actions, tobacco hairline
   accents, espresso only in the top bar and footer. Docs: docs/FOUNDATION.md

   INDEX
   1  Fonts (self-hosted + metric-matched fallbacks)
   2  Tokens: --bone --linen --paper --stone | --rule --rule-strong | --ink --ink-2 --ink-3
      --olive(-hi,-deep) --tobacco --espresso --on-dark(-2) --clay --led --sun --error
      type --fs-*, space --space-3xs..4xl, --section, grid --maxw --margin --gutter --edge,
      motion --ease-quart --ease-expo --dur-*, --hdr-h
   3  Base, a11y (.skip-link .sr-only :focus-visible [hidden] .hp)
   4  Layout: .wrap .grid .sec .band--{linen,paper,stone,olive,espresso} .stack .cluster
   5  Type roles: .label .display .h2 .h3 .lead .muted .prose .fig .kicker
   6  Buttons + links: .btn .btn--{primary,line,bone,sm,block,arrow} .link-arrow
   7  Chips, callout, LED line: .chips .chip .chip--photo .callout .led-line
   8  Forms: .field .input .check .ferr .form-sum .form-done .fields .drop
   9  Chrome: .topbar .hdr(.topnav) .nav-toggle .nav-menu .wm .ftr .dock
   10 Dialogs: .dlg .dlg__close .dlg--{legal,popup,guide,consult,material,lightbox}
   11 Content: .qa (details) .pl (price list) .swatch .answer-card .table-wrap .media .cap .crumbs .sec-head
   12 Material library .lib (rail of swatches over a room stage)
   13 Scroll scene .scene (scene.js)
   14 Window light .sunlit
   15 Reveal + reduced motion
*/

/* 1 ---------- fonts ---------- */
@font-face{font-family:"Ysabeau";src:url(/assets/fonts/ysabeau-var-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191-2193,U+2197,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/proza-libre-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-2031,U+2034-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/proza-libre-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-2031,U+2034-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/proza-libre-600-latin.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-2031,U+2034-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/proza-libre-400i-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-2031,U+2034-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Proza Libre has no ″ ′ → ↗: borrow them from Ysabeau (one face per weight, so each joins its weight's composite) */
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/ysabeau-marks.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+2032-2033,U+2192,U+2197}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/ysabeau-marks.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+2032-2033,U+2192,U+2197}
@font-face{font-family:"Proza Libre";src:url(/assets/fonts/ysabeau-marks.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+2032-2033,U+2192,U+2197}
/* metric-matched local fallbacks (no layout shift when the web fonts swap in) */
@font-face{font-family:"Ysabeau Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:93.9%;ascent-override:112.2%;descent-override:30.8%;line-gap-override:0%}
@font-face{font-family:"Proza Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:109.3%;ascent-override:89.2%;descent-override:35.7%;line-gap-override:0%}

/* 2 ---------- tokens ---------- */
:root{
  --bone:oklch(0.956 0.011 82);        /* page */
  --linen:oklch(0.928 0.017 80);       /* alternate sections */
  --paper:oklch(0.982 0.006 85);       /* forms, cards, dialogs */
  --stone:oklch(0.9 0.026 78);         /* closing band (late light) */
  --rule:oklch(0.83 0.02 78);
  --rule-strong:oklch(0.6 0.022 70);
  --ink:oklch(0.255 0.02 58);          /* 13.9:1 on bone */
  --ink-2:oklch(0.42 0.022 62);        /* 7.5:1 */
  --ink-3:oklch(0.5 0.022 66);         /* 5.3:1, placeholders and fine print only */
  --olive:oklch(0.345 0.05 112);       /* primary actions, library band */
  --olive-hi:oklch(0.4 0.056 112);
  --olive-deep:oklch(0.29 0.042 112);
  --tobacco:oklch(0.41 0.072 55);      /* hairline accents, the "gift" label */
  --espresso:oklch(0.245 0.022 52);    /* top bar, footer */
  --on-dark:oklch(0.945 0.016 85);
  --on-dark-2:oklch(0.83 0.028 85);
  --rule-dark:oklch(0.945 0.016 85 / .22);
  --clay:oklch(0.62 0.12 45);          /* non-text accent: pins, focus halo */
  --led:oklch(0.93 0.075 84);          /* warm LED line (only when LED is on) */
  --led-glow:oklch(0.88 0.11 78 / .55);
  --sun:oklch(0.975 0.032 88);         /* window light on paper */
  --late-sun:oklch(0.962 0.03 86);
  --error:oklch(0.5 0.14 32);
  --scrim:oklch(0.2 0.02 52 / .5);

  --display:"Ysabeau","Ysabeau Fallback",sans-serif;
  --text:"Proza Libre","Proza Fallback",sans-serif;
  --fs-label:.75rem;
  --fs-small:.875rem;
  --fs-ui:.9375rem;
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.1875rem,1.07rem + .4vw,1.375rem);
  --fs-h3:clamp(1.375rem,1.2rem + .6vw,1.75rem);
  --fs-h2:clamp(2rem,1.4rem + 2.1vw,3.25rem);
  --fs-display:clamp(2.5rem,1.1rem + 3.9vw,4.75rem);
  --fs-figure:clamp(2rem,1.6rem + 1.1vw,2.75rem);

  --space-3xs:4px;--space-2xs:8px;--space-xs:12px;--space-sm:16px;--space-md:24px;
  --space-lg:32px;--space-xl:48px;--space-2xl:64px;--space-3xl:96px;--space-4xl:128px;
  --section:clamp(72px,8vw,128px);
  --maxw:1360px;
  --margin:clamp(16px,3.4vw,48px);
  --gutter:clamp(16px,1.7vw,24px);
  --edge:max(var(--margin),calc((100vw - var(--maxw)) / 2));

  --ease-quart:cubic-bezier(.25,1,.5,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --dur-1:.25s;--dur-2:.6s;--dur-3:1.1s;
  --hdr-h:72px;
  --focus:var(--ink);
}

/* 3 ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px);background:var(--bone)}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--text);font-size:var(--fs-body);line-height:1.6;font-variant-numeric:lining-nums;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video,canvas,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
p,li,dd{text-wrap:pretty}
address{font-style:normal}
::selection{background:oklch(0.86 0.05 80);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--space-sm);top:-80px;z-index:200;background:var(--ink);color:var(--bone);padding:var(--space-xs) var(--space-sm);text-decoration:none;font-weight:500}
.skip-link:focus{top:var(--space-sm)}
/* the visualization photo input is visually hidden but focusable: its label (the visible button) shows the ring */
#vizStep1:has(#vizPhotoInput:focus-visible) #vizPhotoLabel{outline:2px solid var(--focus);outline-offset:3px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* 4 ---------- layout ---------- */
.wrap{width:min(100% - 2 * var(--margin),var(--maxw));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.sec{padding-block:var(--section)}
.sec--tight{padding-block:clamp(56px,6vw,96px)}
.stack{display:grid;gap:var(--stack,var(--space-md));align-content:start}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster,var(--space-xs) var(--space-md))}
.band--linen{background:var(--linen)}
.band--paper{background:var(--paper)}
.band--stone{background:var(--stone)}
.band--olive,.band--espresso{color:var(--on-dark);--focus:var(--on-dark);--label-c:var(--on-dark-2);--muted-c:var(--on-dark-2);--rule-c:var(--rule-dark)}
.band--olive{background:var(--olive)}
.band--espresso{background:var(--espresso)}
.rule-top{border-top:1px solid var(--rule-c,var(--rule))}

/* 5 ---------- type roles ---------- */
.label{font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;color:var(--label-c,var(--ink-2))}
.label--gift{color:var(--tobacco)}
.kicker{font-size:var(--fs-ui);font-weight:500;line-height:1.4;color:var(--label-c,var(--ink-2))}
.display{font-family:var(--display);font-size:var(--fs-display);font-weight:340;line-height:.98;letter-spacing:-.018em;text-wrap:balance}
.h2{font-family:var(--display);font-size:var(--fs-h2);font-weight:370;line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
.h3{font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.15;text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
.muted{color:var(--muted-c,var(--ink-2))}
.small{font-size:var(--fs-small);line-height:1.5}
.fig{font-variant-numeric:lining-nums proportional-nums}
.prose{max-width:66ch;display:grid;gap:1em}
.prose h2{font-family:var(--display);font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem);font-weight:420;line-height:1.15;margin-top:1em}
.prose h3{font-family:var(--display);font-size:1.375rem;font-weight:460;line-height:1.2;margin-top:.6em}
.prose ul,.prose ol{display:grid;gap:.4em;padding-left:1.2em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li::marker{color:var(--ink-3)}
.prose a{text-decoration-color:var(--rule-strong)}
.prose a:hover{text-decoration-color:currentColor}

/* 6 ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:52px;padding:0 var(--space-md);border:1px solid transparent;border-radius:0;background:none;font-family:var(--text);font-size:1rem;font-weight:500;line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--dur-1) var(--ease-quart),color var(--dur-1) var(--ease-quart),border-color var(--dur-1) var(--ease-quart)}
.btn:disabled{cursor:progress;opacity:.7}
.btn--primary{background:var(--olive);color:var(--on-dark)}
.btn--primary:hover{background:var(--olive-hi)}
.btn--line{border-color:currentColor;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.band--olive .btn--line,.band--espresso .btn--line{color:var(--on-dark)}
.band--olive .btn--line:hover,.band--espresso .btn--line:hover{background:var(--on-dark);color:var(--espresso);border-color:var(--on-dark)}
.btn--bone{background:var(--on-dark);color:var(--espresso)}
.btn--bone:hover{background:var(--paper)}
.btn--sm{min-height:44px;padding:0 var(--space-sm);font-size:var(--fs-ui)}
.btn--block{display:flex;width:100%}
/* arrow drawn in CSS so buttons whose text JS swaps stay text-only */
.btn--arrow::after,.link-arrow::after{content:"";flex:none;width:.95em;height:.95em;background:currentColor;-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat;transition:transform .4s var(--ease-expo)}
:root{--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9.5 3.5 14 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E")}
.btn--arrow:hover::after,.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:44px;font-weight:500;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:.3em}
.link-arrow:hover{text-decoration-color:currentColor}
.link-arrow--plain::after{display:none}
.band--olive .link-arrow,.band--espresso .link-arrow{text-decoration-color:var(--on-dark-2)}

/* 7 ---------- chips, callout, LED line ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.chip{display:inline-flex;align-items:center;gap:.5em;min-height:30px;padding:4px 10px;border:1px solid var(--rule-c,var(--rule));font-size:var(--fs-small);line-height:1.3;color:var(--muted-c,var(--ink-2));white-space:nowrap}
.chip b{font-weight:600;color:var(--ink)}
.band--olive .chip b,.band--espresso .chip b{color:var(--on-dark)}
.chip--photo{background:var(--bone);border-color:transparent;color:var(--ink-2)}
.callout{position:absolute;left:var(--x,60%);top:var(--y,20%);z-index:2;display:flex;align-items:center;pointer-events:none}
.callout__dot{flex:none;width:13px;height:13px;border-radius:50%;background:var(--bone);display:grid;place-items:center;box-shadow:0 0 0 5px oklch(0.956 0.011 82 / .35)}
.callout__dot::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--clay)}
.callout__line{flex:none;width:48px;height:1px;background:var(--bone)}
.callout .chip{background:var(--bone);border-color:transparent;min-height:36px;padding:8px 12px;color:var(--ink-2)}
.led-line{display:block;height:2px;background:var(--led);box-shadow:0 0 14px 3px var(--led-glow),0 0 2px var(--led);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease-expo)}
.led-line.is-on,.is-led .led-line{transform:none}

/* 8 ---------- forms ---------- */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md) var(--space-sm)}
.field{display:grid;gap:6px;align-content:start;min-width:0}
.field--wide{grid-column:1 / -1}
.field > label,.field__l{font-size:var(--fs-ui);font-weight:500;line-height:1.35}
.field > label span,.field__l span{font-weight:400;color:var(--ink-2)}
.input{width:100%;min-height:52px;padding:12px 14px;background:var(--paper);border:1px solid var(--rule-strong);border-radius:0;font-size:1.0625rem;line-height:1.4;color:var(--ink);transition:border-color .2s,box-shadow .2s,opacity .3s;-webkit-appearance:none;appearance:none}
textarea.input{min-height:104px;resize:vertical}
select.input{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23574a3f' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:var(--ink-2)}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 0 0 4px oklch(0.62 0.12 45 / .26)}
.input:disabled{opacity:.55}
.input[aria-invalid="true"]{border-color:var(--error)}
.check{display:flex;align-items:center;gap:var(--space-xs);min-height:44px;font-size:var(--fs-ui);line-height:1.4;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:1px solid var(--rule-strong);background:var(--paper);display:grid;place-items:center;cursor:pointer}
.check input::after{content:"";width:12px;height:7px;border-left:1.6px solid var(--on-dark);border-bottom:1.6px solid var(--on-dark);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .25s var(--ease-expo)}
.check input:checked{background:var(--olive);border-color:var(--olive)}
.check input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.check input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ferr,.form-err{font-size:var(--fs-small);color:var(--error);font-weight:500;line-height:1.45}
.form-done{display:grid;gap:var(--space-xs);padding:var(--space-md) 0}
.form-done:focus{outline:none}
.form-done__t{font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.15}
.form-note{font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.sheet{background:var(--paper);color:var(--ink);padding:clamp(24px,3vw,40px);border-top:2px solid var(--tobacco);box-shadow:0 1px 0 var(--rule);--focus:var(--ink);--label-c:var(--ink-2);--muted-c:var(--ink-2)}
/* photo drop zone (visual label for a hidden file input) */
.drop{position:relative;display:grid;place-items:center;text-align:center;min-height:220px;padding:var(--space-lg) var(--space-md);background:var(--bone);cursor:pointer;transition:background-color .3s var(--ease-quart)}
.drop::before{content:"";position:absolute;inset:14px;border:1px dashed var(--rule-strong);pointer-events:none}
.drop:hover{background:var(--linen)}
.drop:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.drop__c{position:absolute;width:18px;height:18px;border:0 solid var(--ink)}
.drop__c:nth-of-type(1){top:6px;left:6px;border-width:1px 0 0 1px}
.drop__c:nth-of-type(2){top:6px;right:6px;border-width:1px 1px 0 0}
.drop__c:nth-of-type(3){bottom:6px;left:6px;border-width:0 0 1px 1px}
.drop__c:nth-of-type(4){bottom:6px;right:6px;border-width:0 1px 1px 0}
.drop__body{position:relative;display:grid;justify-items:center;gap:var(--space-2xs)}
.drop__t{font-family:var(--display);font-size:1.375rem;font-weight:460;line-height:1.2}
.drop__s{font-size:var(--fs-small);color:var(--ink-2);max-width:38ch;line-height:1.45}
.drop__s .coarse{display:none}
@media (hover:none) and (pointer:coarse){.drop__s .fine{display:none}.drop__s .coarse{display:inline}}

/* 9 ---------- chrome: top bar, header, menu, footer, dock ---------- */
.topbar{background:var(--espresso);color:var(--on-dark-2);font-size:.8125rem;line-height:1.3;--focus:var(--on-dark)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:40px}
.topbar__list{display:flex;align-items:center;flex-wrap:wrap}
.topbar__list > li{display:flex;align-items:center;white-space:nowrap}
.topbar__list > li + li::before{content:"";width:1px;height:12px;background:var(--rule-dark);margin-inline:var(--space-sm)}
.topbar a{position:relative;color:var(--on-dark);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.topbar a::after{content:"";position:absolute;inset:-2px -4px}
.topbar a:hover{text-decoration:underline}
.topbar__lang{margin-left:.6em;color:var(--on-dark-2)}
.topbar__area{color:var(--on-dark-2)}

.hdr{position:sticky;top:0;z-index:60;background:var(--bone);border-bottom:1px solid var(--rule)}
.hdr__in{display:flex;align-items:center;gap:var(--space-lg);height:var(--hdr-h)}
.hdr__brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;color:var(--ink);text-decoration:none}
.wm{display:block;height:var(--wm-h,19px);width:auto;aspect-ratio:8222 / 728;overflow:visible}
.hdr__nav ul{display:flex;gap:var(--space-md)}
.hdr__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-ui);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;transition:background-size .4s var(--ease-expo)}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{background-size:100% 1px}
.hdr__act{display:flex;align-items:center;gap:var(--space-md)}
.hdr__tel{font-size:var(--fs-ui);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.hdr__tel:hover{text-decoration:underline}
.nav-toggle{display:none;align-items:center;gap:var(--space-2xs);min-height:44px;min-width:44px;padding:0 var(--space-xs);background:none;border:1px solid var(--ink);font-size:.875rem;font-weight:500}
.nav-toggle__bars{display:grid;gap:4px}
.nav-toggle__bars span{display:block;width:16px;height:1px;background:currentColor;transition:transform .35s var(--ease-expo),opacity .2s}
.nav-toggle::after{content:"Menu"}
.nav-toggle[aria-expanded="true"]::after{content:"Close"}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bone);border-top:1px solid var(--rule);padding:var(--space-xs) 0 var(--space-lg);height:calc(100svh - var(--hdr-h));overflow-y:auto;overscroll-behavior:contain}
.topnav.menu-open .nav-menu{display:block;animation:menuIn .45s var(--ease-expo) both}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav-menu li{border-bottom:1px solid var(--rule)}
.nav-menu ul a{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-family:var(--display);font-size:1.5rem;font-weight:420;text-decoration:none}
.nav-menu ul a::after{content:"";width:16px;height:16px;background:var(--ink-3);-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat}
.nav-menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.nav-menu__contact{display:grid;gap:var(--space-2xs);margin-top:var(--space-md);font-size:var(--fs-small);color:var(--ink-2)}
.nav-menu__contact a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font-size:1rem;font-weight:500;color:var(--ink)}
html.nav-locked{overflow:hidden}

.ftr{background:var(--espresso);color:var(--on-dark-2);padding-block:var(--space-2xl) calc(var(--space-lg) + env(safe-area-inset-bottom));font-size:var(--fs-ui);line-height:1.5;--focus:var(--on-dark)}
.ftr__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-xl)}
.ftr__brand{grid-column:1 / 5;display:grid;gap:var(--space-sm);align-content:start}
.ftr__brand .hdr__brand{color:var(--on-dark);margin:0;justify-self:start}
.ftr__brand .wm{--wm-h:20px}
.ftr__brand p{max-width:34ch}
.ftr h2{font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:var(--space-2xs)}
.ftr__col{grid-column:span 2}
.ftr__col--wide{grid-column:span 4}
.ftr a{color:var(--on-dark);text-decoration:none}
.ftr li a,.ftr__nap a{display:inline-flex;align-items:center;min-height:44px}
.ftr a:hover{text-decoration:underline}
.ftr__nap{display:grid;align-content:start}
.ftr__nap > span{padding-block:9px}
.ftr__legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2xs) var(--space-md);margin-top:var(--space-xl);padding-top:var(--space-xs);border-top:1px solid var(--rule-dark);font-size:var(--fs-small)}
.ftr__legal ul{display:flex;gap:var(--space-md)}
.ftr__legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-2)}

.dock{display:none}

/* 10 ---------- dialogs ---------- */
.dlg{width:min(560px,100vw - 32px);max-width:none;max-height:min(88svh,880px);margin:auto;padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -30px oklch(0.2 0.03 50 / .45);overscroll-behavior:contain}
.dlg::backdrop{background:var(--scrim)}
.dlg[open]{animation:dlgIn .5s var(--ease-expo) both}
.dlg[open]::backdrop{animation:fadeIn .4s var(--ease-quart) both}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.dlg__inner{position:relative;display:grid;gap:var(--space-sm);padding:clamp(28px,4vw,44px) clamp(22px,4vw,44px) clamp(24px,3vw,36px)}
.dlg__title{font-family:var(--display);font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem);font-weight:420;line-height:1.1;padding-right:44px;text-wrap:balance}
.dlg__close{position:absolute;top:8px;right:8px;z-index:3;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;font-size:1.75rem;font-weight:300;line-height:1;color:var(--ink-2)}
.dlg__close:hover{color:var(--ink)}
.dlg__value{font-family:var(--display);font-size:clamp(1.75rem,1.4rem + 1.2vw,2.25rem);font-weight:400;line-height:1.15;word-break:break-word}
.dlg__actions{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.dlg__actions .btn{flex:1 1 auto}
.dlg__msg{width:100%;min-height:140px;padding:12px;border:1px solid var(--rule-strong);background:var(--bone);font-size:var(--fs-small);line-height:1.5}
.dlg__status{min-height:1.5em;font-size:var(--fs-small);color:var(--ink-2)}
.dlg--legal{width:min(720px,100vw - 32px)}
.dlg--legal .dlg__body{display:grid;gap:1em;color:var(--ink-2);max-width:62ch}
.dlg--popup{width:min(880px,100vw - 32px)}
.dlg--popup .dlg__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0}
.dlg__media{position:relative;min-height:100%;background:var(--linen)}
.dlg__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dlg__copy{display:grid;gap:var(--space-sm);align-content:center;padding:clamp(28px,4vw,48px)}
.dlg--guide,.dlg--consult{width:min(600px,100vw - 32px)}
.dlg--material{width:min(980px,100vw - 32px)}
.dlg--material .dlg__inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,40px);align-items:start}
.dlg--material .dlg__media{aspect-ratio:1 / 2;max-height:70svh}
.dlg--lightbox{width:100vw;height:100svh;max-height:none;background:var(--bone);box-shadow:none}
.dlg--lightbox .dlg__inner{height:100%;grid-template-rows:minmax(0,1fr) auto;padding:56px var(--margin) var(--space-md)}
.dlg--lightbox img{width:100%;height:100%;object-fit:contain}
.dlg--lightbox .dlg__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--rule)}
.dlg__nav{display:flex;gap:var(--space-2xs)}
.sq{width:48px;height:48px;display:grid;place-items:center;background:none;border:1px solid var(--rule-c,var(--rule-strong));color:inherit;transition:background-color .25s,border-color .25s}
.sq::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat}
.sq--prev::before{transform:scaleX(-1)}
.sq:hover{border-color:currentColor}

/* 11 ---------- content components ---------- */
.sec-head{display:grid;gap:var(--space-sm);align-content:start;max-width:46rem}
.qa{border-top:1px solid var(--rule)}
.qa:last-child{border-bottom:1px solid var(--rule)}
.qa > summary{list-style:none;display:grid;grid-template-columns:1fr 24px;gap:var(--space-md);align-items:center;min-height:64px;padding:var(--space-sm) 0;cursor:pointer;font-size:1.0625rem;font-weight:500;line-height:1.4}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary:hover{color:var(--ink-2)}
.qa > summary::after{content:"";justify-self:end;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:transform .45s var(--ease-expo)}
.qa[open] > summary::after{transform:rotate(45deg)}
.qa__a{padding:0 calc(24px + var(--space-md)) var(--space-md) 0;color:var(--ink-2);max-width:66ch}

.pl{border-top:1px solid var(--ink)}
.pl__row{display:grid;grid-template-columns:auto minmax(32px,1fr) auto;grid-template-areas:"name lead price" "desc desc .";column-gap:var(--space-sm);row-gap:6px;align-items:baseline;padding:clamp(20px,2.2vw,30px) 0;border-bottom:1px solid var(--rule)}
.pl__name{grid-area:name;font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.15}
.pl__lead{grid-area:lead;height:1px;border-bottom:1px dotted var(--rule-strong)}
.pl__price{grid-area:price;font-family:var(--display);font-size:var(--fs-figure);font-weight:340;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.pl__price small{font-family:var(--text);font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--ink-2);margin-right:8px}
.pl__desc{grid-area:desc;font-size:.96875rem;line-height:1.5;color:var(--ink-2);max-width:48ch}
.pl__note{font-size:var(--fs-small);color:var(--ink-2);max-width:48ch}

.swatch{display:grid;align-content:start;gap:0;padding:0;margin:0;border:0;background:none;text-align:left;color:inherit;-webkit-tap-highlight-color:transparent}
.swatch__tex{display:block;aspect-ratio:1 / 2;overflow:hidden;background:var(--linen);box-shadow:0 30px 36px -28px oklch(0.15 0.02 60 / .55)}
.swatch__tex img{width:100%;height:100%;object-fit:cover}
.swatch__meta{display:grid;gap:1px;padding-top:var(--space-xs);margin-top:var(--space-xs);border-top:1px solid var(--rule-c,var(--rule))}
.swatch__name{font-weight:500;line-height:1.3}
.swatch__fin{font-size:var(--fs-small);color:var(--muted-c,var(--ink-2));line-height:1.4}

.answer-card{display:grid;gap:var(--space-2xs);padding:var(--space-md) clamp(20px,3vw,32px);background:var(--paper);border-top:2px solid var(--tobacco);box-shadow:0 1px 0 var(--rule)}
.answer-card::before{content:"In short";font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tobacco)}
.answer-card p{font-family:var(--display);font-size:1.25rem;font-weight:420;line-height:1.4}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--ink)}
.table-wrap table{width:100%;min-width:520px;border-collapse:collapse;font-size:var(--fs-ui);line-height:1.45}
.table-wrap th,.table-wrap td{padding:12px var(--space-sm) 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.table-wrap th{font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.table-wrap caption{caption-side:bottom;padding-top:var(--space-xs);text-align:left;font-size:var(--fs-small);color:var(--ink-2)}

.media{position:relative;display:block;overflow:hidden;background:var(--linen)}
.media > picture{height:100%}
.media img{width:100%;height:100%;object-fit:cover}
.media--3x2{aspect-ratio:3 / 2}.media--4x3{aspect-ratio:4 / 3}.media--4x5{aspect-ratio:4 / 5}.media--16x9{aspect-ratio:16 / 9}.media--1x1{aspect-ratio:1}
.cap{display:grid;gap:2px;margin-top:var(--space-sm);padding-top:var(--space-xs);border-top:1px solid var(--rule)}
.cap b,.cap strong{font-weight:500;line-height:1.4}
.cap span{font-size:var(--fs-small);color:var(--ink-2)}
a .media img,.is-zoom img{transition:transform 1.4s var(--ease-expo)}
a:hover .media img{transform:scale(1.035)}

.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--fs-small);color:var(--ink-2)}
.crumbs li{display:flex;align-items:center}
.crumbs li + li::before{content:"/";margin-inline:.6em;color:var(--ink-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration-color:var(--rule-strong)}
.crumbs [aria-current]{color:var(--ink)}

/* 12 ---------- material library ---------- */
.lib{--strip-w:196px;--strip-h:360px;--overlap:150px;--rail-gap:16px;--rail-pad:28px}
.lib__body{--spec-w:calc((min(100vw - 2 * var(--margin),var(--maxw)) - 11 * var(--gutter)) / 3 + 3 * var(--gutter));display:grid;grid-template-columns:minmax(0,1fr) var(--spec-w);grid-template-areas:"stage spec" "rail rail" "ctrl ctrl" "more more";column-gap:var(--gutter);padding-right:var(--edge)}
.lib__stage{grid-area:stage;position:relative;min-height:clamp(440px,44vw,640px);overflow:hidden;background:var(--olive-deep)}
.lib__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .7s var(--ease-quart),transform 1.6s var(--ease-expo)}
.lib__img.is-on{opacity:1;transform:none}
.lib__cap{position:absolute;left:var(--edge);top:var(--space-md);z-index:2}
.lib__stage .led-line{position:absolute;left:0;right:0;top:0;z-index:2}
.lib__specwrap{grid-area:spec;padding:var(--space-xs) 0 calc(var(--overlap) + var(--rail-pad) + var(--space-lg))}
.lib__spec{display:grid;gap:var(--space-sm);align-content:start}
.lib__name{font-family:var(--display);font-size:clamp(2rem,1.5rem + 1.2vw,2.75rem);font-weight:380;line-height:1;letter-spacing:-.01em}
.lib__desc{font-size:var(--fs-ui);line-height:1.55;color:var(--muted-c)}
.spec{display:grid;border-top:1px solid var(--rule-c,var(--rule))}
.spec > div{display:grid;grid-template-columns:5.75rem 1fr;gap:var(--space-xs);padding:9px 0;border-bottom:1px solid var(--rule-c,var(--rule));font-size:var(--fs-ui);line-height:1.4}
.spec dt{color:var(--muted-c,var(--ink-2))}
.seg{display:inline-flex;border:1px solid var(--rule-c,var(--rule-strong))}
.seg button{min-height:44px;padding:0 var(--space-sm);background:none;border:0;font-size:var(--fs-ui);color:var(--muted-c,var(--ink-2));transition:background-color .25s var(--ease-quart),color .25s var(--ease-quart)}
.seg button + button{border-left:1px solid var(--rule-c,var(--rule-strong))}
.seg button[aria-pressed="true"]{background:var(--on-dark);color:var(--espresso)}
.seg button:disabled{cursor:not-allowed;opacity:.5}
.lib__light{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs)}
.lib__light--top{display:none} /* mobile-only second toggle, placed under the samples (see the max-width:900px block) */
.lib__light > span:first-child{width:5.75rem;font-size:var(--fs-ui);color:var(--muted-c)}
.lib__note{flex-basis:100%;font-size:var(--fs-small);color:var(--muted-c)}
.lib__try{justify-self:start;margin-top:var(--space-2xs)}
.lib__railwrap{grid-area:rail;position:relative;z-index:3;margin-top:calc((var(--overlap) + var(--rail-pad)) * -1);margin-right:calc(var(--edge) * -1);pointer-events:none}
.rail{display:flex;gap:var(--rail-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding:var(--rail-pad) var(--edge) var(--space-2xs);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .swatch{pointer-events:auto;flex:0 0 var(--strip-w);scroll-snap-align:start;cursor:pointer}
.rail .swatch__tex{height:var(--strip-h);aspect-ratio:auto;background:var(--olive-deep);transition:transform .55s var(--ease-expo)}
.rail .swatch__tex img{transition:transform 1.2s var(--ease-expo)}
.rail .swatch:hover .swatch__tex,.rail .swatch.is-peek .swatch__tex{transform:translateY(-8px)}
.rail .swatch:hover .swatch__tex img{transform:scale(1.04)}
.rail .swatch[aria-checked="true"] .swatch__tex{transform:translateY(-22px)}
.rail .swatch:focus-visible{outline:none}
.rail .swatch:focus-visible .swatch__tex{outline:2px solid var(--focus);outline-offset:4px;box-shadow:0 0 0 4px var(--ink)} /* two tones: visible over the light room photo and the olive band */
.rail .swatch__meta{position:relative}
.rail .swatch__meta::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-expo)}
.rail .swatch[aria-checked="true"] .swatch__meta::after{transform:none}
.lib__bar{display:none}
.lib__ctrl{grid-area:ctrl;display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-md);padding-left:var(--edge)}
.lib__hint{margin-right:auto;font-size:var(--fs-small);color:var(--muted-c)}
.lib__hint .m{display:none}
.lib__count{white-space:nowrap;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.lib__ctrl .sq{--rule-c:var(--rule-dark)}
.lib__more{grid-area:more;margin:var(--space-xl) 0 0 var(--edge);padding-top:var(--space-md);border-top:1px solid var(--rule-c,var(--rule));display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-md);font-size:var(--fs-ui);color:var(--muted-c)}
.lib__more a{color:inherit}
.band--olive .lib__more a{color:var(--on-dark)}

/* 13 ---------- scroll scene (static story first; scene.js adds .scene--live) ---------- */
.scene{--scene-len:450vh;position:relative}
.scene__head{display:grid;gap:var(--space-md);margin-bottom:clamp(40px,5vw,72px)}
.scene__head > *{max-width:46rem}
.scene__steps{display:grid;gap:clamp(48px,6vw,96px)}
.scene-step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
.scene-step__media{grid-column:1 / 9;aspect-ratio:1600 / 815;overflow:hidden;background:var(--linen)}
.scene-step__media img{width:100%;height:100%;object-fit:cover}
.scene-step__text{grid-column:9 / 13;display:grid;gap:var(--space-sm);align-content:end;padding-bottom:var(--space-2xs)}
.scene-step__text p{color:var(--ink-2);max-width:40ch}
.spec-line{padding-top:10px;border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.45}
.spec-line b{font-weight:600;color:var(--ink)}
.scene .led-line{height:1px;box-shadow:0 0 6px var(--led-glow)}
.scene__rail,.scene__canvas,.scene__card{display:none}
.scene--live .scene__track{height:var(--scene-len);position:relative}
.scene--live .scene__stage{--strip:clamp(64px,9vh,84px);--card-w:min(460px,40vw);position:sticky;top:var(--hdr-h);height:calc(100svh - var(--hdr-h));overflow:hidden;background:var(--bone)}
.scene--live .scene__head{position:absolute;z-index:3;top:clamp(20px,5vh,48px);left:var(--edge);width:min(600px,46vw);margin:0;padding:0;transition:opacity .45s var(--ease-quart),transform .8s var(--ease-expo)}
/* live mode hides these visually only: screen readers keep the intro and every step's facts */
.scene--live .scene__head .lead,.scene--live .scene-step__more{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scene--live:not(.at-0) .scene__head{opacity:0;transform:translateY(-12px)}
.scene--live .scene__steps{display:block;position:absolute;inset:0;width:auto;margin:0}
.scene--live .scene__canvas,.scene--live .scene-step__media{position:absolute;left:0;right:0;top:0;bottom:var(--strip);width:100%;height:auto}
.scene--live .scene__canvas{display:block;height:calc(100% - var(--strip));background:var(--linen)}
.scene--live .scene-step{position:absolute;inset:0;display:block;pointer-events:none}
.scene--live .scene-step__media{z-index:1;aspect-ratio:auto;background:none;opacity:0;transition:opacity .5s var(--ease-quart)}
.scene--live .scene-step.is-hold .scene-step__media{opacity:1}
.scene--live .scene__card{display:block;position:absolute;z-index:2;left:var(--edge);bottom:0;width:var(--card-w);height:var(--card-h,300px);background:var(--bone)}
/* one card; captions swap inside it: the old one leaves in 120 ms, the new one enters after it */
.scene--live .scene-step__text{position:absolute;z-index:3;left:var(--edge);top:calc(100% - var(--card-h,300px));width:var(--card-w);align-content:start;padding:clamp(24px,2.6vw,36px) clamp(24px,2.6vw,36px) clamp(20px,3vh,32px);opacity:0;transform:translateY(10px);transition:opacity .12s linear,transform 0s .12s}
/* inactive captions are transparent but stay in the accessibility tree and the tab order: focusing one (e.g. the
   finale CTA) scrolls the scene to its hold (scene.js focusin), which makes it the active, visible caption */
.scene--live .scene-step.is-active .scene-step__text,.scene--live .scene-step__text:focus-within{opacity:1;transform:none;pointer-events:auto;transition:opacity .3s .14s var(--ease-quart),transform .6s .14s var(--ease-expo)}
.scene--live .scene__rail{display:flex;align-items:center;position:absolute;z-index:3;left:calc(var(--edge) + var(--card-w) + 2 * var(--gutter));right:var(--edge);bottom:0;height:var(--strip);pointer-events:none}
.scene__ticks{flex:1;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px}
.scene__tick{display:grid;gap:8px;font-size:var(--fs-small);line-height:1.25;color:var(--ink-3);transition:color .4s}
.scene__tick::before{content:"";height:2px;background:linear-gradient(var(--ink),var(--ink)) 0 0 / calc(var(--p,0) * 100%) 100% no-repeat,var(--rule)}
.scene__tick.is-on{color:var(--ink)}

/* 14 ---------- window light (graft from A): warm light with a palm-frond gap ---------- */
.sunlit{position:relative;isolation:isolate;overflow:hidden}
.sunlit::before{content:"";position:absolute;z-index:-1;inset:-12% -6% -12% 30%;background:var(--late-sun);-webkit-mask:url(/assets/media/light/window-palm.webp) center/cover no-repeat;mask:url(/assets/media/light/window-palm.webp) center/cover no-repeat;pointer-events:none}
.js .sunlit:not(.is-near)::before{display:none}

/* 14b ---------- closing contact band (every page): the page's own H2 + lead, then the shared phone
   (tools/partials/contact-call.html) and email / studio / service area + two CTAs (contact-side.html) ---------- */
.contact{padding-block:clamp(80px,9vw,144px)}
.contact__main{grid-column:1 / 7;display:grid;gap:var(--space-md);align-content:start}
.contact__phone{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-sm);font-family:var(--display);font-size:clamp(2.25rem,1.7rem + 1.6vw,3.25rem);font-weight:360;line-height:1.05;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;padding-bottom:4px;transition:background-size .6s var(--ease-expo)}
.contact__phone:hover{background-size:100% 1px}
.contact__main .small{margin-top:calc(var(--space-md) * -1 + 4px)}
.contact__side{grid-column:8 / 13;display:grid;gap:var(--space-lg);align-content:end}
.contact__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md) var(--gutter);padding-top:var(--space-sm);border-top:1px solid oklch(0.72 0.035 72)}
.contact__meta > div:last-child{grid-column:1 / -1}
.contact__meta dt{font-size:var(--fs-small);color:var(--ink-2);margin-bottom:2px}
.contact__meta dd{font-size:var(--fs-ui);line-height:1.5}
.contact__meta a{display:inline-flex;align-items:center;min-height:44px;text-decoration-color:var(--rule-strong)}
@media (max-width:900px){
  .contact__main,.contact__side{grid-column:1 / -1}
  .contact__side{margin-top:var(--space-xl)}
  .contact__actions .btn{flex:1 1 100%}
}
@media (max-width:760px){.contact{padding-block:var(--space-2xl)}}
@media (max-width:520px){.contact__meta{grid-template-columns:1fr}}

/* 15 ---------- reveal + motion ---------- */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.visible{opacity:1;transform:none;transition:opacity .9s var(--ease-quart),transform 1.2s var(--ease-expo)}
@media print{.js .reveal{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hdr__nav{display:none}
  .nav-toggle{display:inline-flex}
  .lib{--strip-w:168px;--strip-h:300px;--overlap:110px}
  .lib__body{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "rail" "spec" "ctrl" "more";padding-right:0}
  .lib__stage{min-height:clamp(380px,52vw,560px)}
  .lib__railwrap{margin-right:0}
  .lib__specwrap{padding:var(--space-lg) var(--edge) 0}
  .lib__spec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-xl)}
  .lib__spec > *{grid-column:1}
  .lib__spec > .spec,.lib__spec > .lib__light{grid-column:2}
  .lib__spec > .spec{grid-row:1 / span 3}
  .lib__spec > .lib__light{grid-row:4}
  .lib__try{grid-row:4;align-self:start}
  .lib__ctrl{padding-inline:var(--edge)}
  .lib__more{margin-inline:var(--edge)}
}
@media (max-width:900px){
  :root{--hdr-h:60px}
  .grid,.ftr__top{grid-template-columns:repeat(6,minmax(0,1fr))}
  .topbar__in{display:block;padding-block:2px}
  .topbar__list > li + li::before{display:none}
  .topbar__list > li{min-height:27px}
  .topbar__list > li:nth-child(2){flex-basis:100%}
  .topbar__list > li:first-child{order:2}
  .topbar__place{order:3;margin-left:auto}
  .topbar a{min-height:27px}
  .topbar a::after{inset:-8px -4px}
  .topbar__lang,.topbar__place{font-size:.75rem}
  .topbar__lang{margin-left:.5em}
  .topbar__area{display:none}
  .hdr__in{gap:var(--space-sm)}
  .hdr__tel,.hdr__act .btn{display:none}
  .wm{--wm-h:16px}
  .fields{grid-template-columns:1fr}
  .dlg--popup .dlg__inner,.dlg--material .dlg__inner{grid-template-columns:1fr}
  .dlg--popup .dlg__media{min-height:0;aspect-ratio:16 / 9}
  .dlg--popup .dlg__media img{position:static}
  .dlg--material .dlg__media{aspect-ratio:4 / 3;max-height:none}
  .dlg__actions .btn{flex:1 1 100%}
  .pl__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "desc desc"}
  .pl__lead{display:none}
  .pl__price{font-size:1.75rem}
  .pl__price small{display:block;margin:0 0 2px;text-align:right}
  .qa__a{padding-right:0}
  .ftr{padding-top:var(--space-lg);font-size:var(--fs-small)}
  .ftr__col{grid-column:span 3}
  .ftr__brand,.ftr .ftr__col--wide{grid-column:1 / -1}
  .ftr__brand p,.ftr__col--wide h2{display:none}
  .ftr__top{row-gap:var(--space-sm)}
  .ftr h2{margin-bottom:0}
  .ftr__nap{display:flex;flex-wrap:wrap;column-gap:var(--space-md);border-top:1px solid var(--rule-dark);padding-top:var(--space-xs)}
  .ftr__nap > span{padding-block:2px}
  .ftr__nap > span:first-child{flex-basis:100%}
  .ftr__legal{margin-top:var(--space-sm);padding-top:0}
  .dock{display:grid;grid-template-columns:1fr 1.7fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:8px var(--margin) calc(8px + env(safe-area-inset-bottom));background:var(--bone);border-top:1px solid var(--rule);transition:transform .45s var(--ease-expo)}
  .dock .btn{min-height:50px}
  .dock.is-hidden,html.nav-locked .dock{transform:translateY(110%)}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  /* keyboard focus scrolled into view never lands under the fixed dock (WCAG 2.4.11) */
  html{scroll-padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .lib{--rail-gap:10px;--strip-w:calc((100vw - 2 * var(--edge) - 4 * var(--rail-gap)) / 5);--strip-h:calc(var(--strip-w) * 1.6);--overlap:40px;--rail-pad:24px} /* all five samples fit the phone width; the rail still scrolls if a narrower screen ever needs it */
  .rail{pointer-events:auto} /* a swipe may start anywhere on the strip, not only exactly on a card */
  .lib__body{grid-template-areas:"stage" "rail" "light" "bar" "ctrl" "spec" "more"}
  .lib__stage{min-height:0;height:min(50svh,480px)}
  .lib__cap{display:none}
  .rail .swatch[aria-checked="true"] .swatch__tex{transform:translateY(-14px)}
  .rail .swatch__name{font-size:.75rem;line-height:1.2}
  .rail .swatch__fin{display:none}
  .lib__bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin:var(--space-sm) var(--edge) 0;padding:var(--space-2xs) 0;border-block:1px solid var(--rule-c,var(--rule))}
  /* mobile: the Daylight / LED switch sits directly under the samples — the mobile-only toggle takes the "light" grid row, the one inside the spec block steps aside */
  .lib__spec .lib__light{display:none}
  .lib__light--top{grid-area:light;display:flex;margin:var(--space-sm) var(--edge) 0}
  .lib__bar b{font-family:var(--display);font-size:1.5rem;font-weight:420;line-height:1.1}
  .lib__ctrl{margin-top:var(--space-xs)}
  .lib__hint .d{display:none}
  .lib__hint .m{display:inline}
  .lib__specwrap{padding-top:var(--space-xl)}
  .lib__spec{grid-template-columns:1fr}
  .lib__spec > *,.lib__spec > .spec,.lib__spec > .lib__light{grid-column:1;grid-row:auto}
  .lib__spec > .lib__name,.lib__try{display:none}
  .scene{--scene-len:330vh}
  .scene-step{grid-template-columns:1fr;row-gap:var(--space-md)}
  .scene-step__media,.scene-step__text{grid-column:1}
  .scene-step__media{aspect-ratio:1080 / 1222;margin-inline:calc(var(--margin) * -1)}
  .scene--live .scene__stage{--strip:0px;--card:44%}
  /* mobile tonal rhythm: the services index takes the deeper linen tone so it stops merging with the bone scene above it (bone → linen → olive → bone → linen …) */
  .services{background:var(--linen)}
  /* contain mode: mobile uses the wide desktop frames fitted whole on the canvas; the portrait stills layer steps aside */
  .scene--live[data-fit-mobile="contain"] .scene-step__media{display:none}
  /* contain mode: ONE fixed caption height for every stage — sized to the longest stage text — so titles start at the same height and nothing jumps between stages */
  .scene--live[data-fit-mobile="contain"] .scene__stage{--card:clamp(340px,calc(340px + (400px - 100vw)),372px)}
  .scene--live .scene__head{left:var(--margin);width:auto;right:var(--margin);top:var(--space-xs)}
  .scene--live .scene__head .h2{font-size:1.625rem}
  .scene--live .scene__canvas,.scene--live .scene-step__media{bottom:var(--card);margin:0}
  .scene--live .scene__canvas{height:calc(100% - var(--card))}
  .scene--live .scene__card{left:0;right:0;width:auto;height:var(--card)}
  .scene--live .scene-step__text{left:0;right:0;width:auto;top:calc(100% - var(--card));height:var(--card);gap:var(--space-xs);padding:calc(var(--space-sm) + 44px) var(--margin) calc(76px + env(safe-area-inset-bottom))}
  .scene--live .scene-step--finale .scene-step__text{padding-bottom:var(--space-sm)}

  .scene--live .scene__rail{left:var(--margin);right:var(--margin);bottom:auto;top:calc(100% - var(--card));height:auto;padding-top:var(--space-sm)}
  .dock.is-scene{transform:translateY(110%)}
  .scene__tick{font-size:.75rem}
  .sunlit::before{inset:0 -60% 0 -10%}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html:not(.js) .nav-toggle{display:none}
@media (max-width:1180px){html:not(.js) .hdr__nav{display:block;overflow-x:auto}html:not(.js) .hdr__nav ul{gap:var(--space-sm)}}
.dlg--popup .dlg__close{background:var(--bone);top:12px;right:12px}

/* 15 ---------- wall mix on the visualization form (viz.js renders the chips) ---------- */
.viz-mats__t{font-size:var(--fs-ui);font-weight:500;line-height:1.35}
.viz-mats__chips{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.viz-mats__chip{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:4px 4px 4px 12px;background:var(--paper);border:1px solid var(--rule-strong);font-size:var(--fs-small);line-height:1.3;color:var(--ink)}
.viz-mats__x{flex:none;width:28px;height:28px;display:grid;place-items:center;background:none;border:0;font-size:1.05rem;line-height:1;color:var(--ink-2);cursor:pointer}
.viz-mats__x:hover{color:var(--ink)}