/* ==========================================================================
   Carmelo v2 · "The Art of Surfaces"
   Concept: Ivory page, full-bleed architectural photography, one serif with italic
   emphasis, Carmelo orange only where the visitor acts. The material is the decoration.
   Style dial 2 (composed) · imagery level 3 · animation level 2.

   Contents
   1  Tokens                      9  Home sections
   2  Reset and base             10  Listing pages (materials, applications)
   3  Atoms                      11  Product page
   4  Image slots                12  Project page
   5  Header and menu            13  About and contact
   6  Footer                     14  Motion helpers
   7  Buttons and links          15  Responsive
   8  Page head and crumb        16  Reduced motion
   ========================================================================== */

/* 1 · TOKENS ------------------------------------------------------------- */
:root{
  --ivory:#F7F4EE; --sand:#ECE5D8; --warm:#DDD6C9; --ink:#1F1E1C; --ink-2:#4A453E;
  --on-dark:#F7F4EE; --on-dark-2:#D2CBBE;
  --accent:#FCB040;        /* Carmelo orange: buttons and emphasis on dark, fills only */
  --accent-text:#8C5200;   /* orange for text on ivory and sand (5.76 / 5.05) */
  --taupe:#8B7B68; --olive:#4A4E38;   /* decoration and hairlines only, never text */
  --line:rgb(31 30 28 / .18); --line-dark:rgb(247 244 238 / .26);
  --gut:clamp(20px,4vw,56px); --max:1280px; --sec:clamp(72px,9vw,128px); --hdr:76px;
  --serif:"Instrument Serif","Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grade:rgb(60 40 20 / .06);
  --tex-warm:radial-gradient(60% 70% at 30% 20%,rgb(252 176 64 / .22),transparent 70%),linear-gradient(180deg,#3a3126,#1f1e1c);
  --tex-pale:radial-gradient(60% 70% at 60% 20%,rgb(255 255 255 / .6),transparent 70%),linear-gradient(180deg,#e7e0d3,#cfc6b6);
}

/* 2 · RESET AND BASE ----------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p,ul,ol,dl,dd,figure{margin:0}
[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
main:focus{outline:none}
.skip{position:absolute;left:12px;top:-80px;background:var(--ink);color:var(--ivory);padding:12px 18px;z-index:100;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.band :focus-visible,.t-dark :focus-visible{outline-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.t-paper{background:var(--ivory);color:var(--ink)}
.t-tint{background:var(--sand);color:var(--ink)}
.t-warm{background:var(--warm);color:var(--ink)}
.t-dark{background:var(--ink);color:var(--on-dark)}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.04;margin:0;text-wrap:balance}
h2{font-size:clamp(2.25rem,4.8vw,4.1rem)}
h3{font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1}
em{font-style:italic;color:var(--accent-text)}
.t-dark em,.band em{color:var(--accent)}
.lead{font-size:1.125rem;color:var(--ink-2);max-width:42ch;margin-top:20px}
.t-dark .lead,.band .lead{color:var(--on-dark-2)}

/* 3 · ATOMS -------------------------------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:14px;font:600 .75rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.eyebrow b{font-weight:700;color:var(--ink)}
.eyebrow::after{content:"";width:44px;height:1px;background:currentColor;opacity:.55}
.t-dark .eyebrow,.band .eyebrow{color:var(--on-dark-2)}
.t-dark .eyebrow b,.band .eyebrow b{color:var(--on-dark)}
.cap{font:500 .75rem/1.45 var(--sans);color:var(--ink-2);margin-top:10px;max-width:60ch}
.t-dark .cap{color:var(--on-dark-2)}
.band .cap{color:var(--on-dark)}
/* Marked placeholder: anything the client has not confirmed */
.ph{background:rgb(252 176 64 / .3);outline:1px dashed var(--accent-text);outline-offset:1px;padding:0 .25em}
.t-dark .ph,.band .ph{color:var(--on-dark);outline-color:var(--accent)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:30px 0 0}
.facts div{border-top:1px solid var(--line);padding-top:12px;min-width:0}
.t-dark .facts div{border-color:var(--line-dark)}
.facts dt{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.t-dark .facts dt{color:var(--on-dark-2)}
.facts dd{margin:4px 0 0;font:400 1.5rem/1.2 var(--serif);overflow-wrap:anywhere}

/* 4 · IMAGE SLOTS -------------------------------------------------------- */
.slot{position:relative;margin:0;overflow:hidden;background-color:#2a2722;background-image:var(--fallback,var(--tex-warm))}
.slot>img,.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);z-index:0}
.slot::before{content:"";position:absolute;inset:0;background:var(--grade);mix-blend-mode:multiply;pointer-events:none;z-index:1}
.slot::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.16;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.bg{transition:transform 1.1s var(--ease)}
.slot--pale{--fallback:var(--tex-pale)}
/* Narrow sheet photos (acrylic, 206 px wide): sharp strip over a blurred copy of itself */
.slot--strip{background:var(--warm)}
.slot--strip::before{inset:-24px;background:var(--img) center/cover;filter:blur(26px) saturate(1.05);mix-blend-mode:normal;opacity:.95}
.slot--strip>img{position:absolute;inset:6% auto 6% 50%;transform:translateX(-50%);width:auto;height:88%;max-width:60%;object-fit:contain;box-shadow:0 18px 44px rgb(31 30 28 / .22);z-index:1}

/* 5 · HEADER AND MENU ---------------------------------------------------- */
/* Without JS the bar is solid ivory. With JS, main.js writes --p (0 to 1) on <html> over the first
   90px of scroll and the bar, text, logo and button follow it. Reduced motion snaps instead of easing. */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);background:var(--ivory);border-bottom:1px solid var(--line);color:var(--ink)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.lg{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.lg img{width:auto;max-width:none;height:auto}
.lg .lg__hex{height:46px}
.lg .lg__word{height:14px}
.nav{display:flex;gap:clamp(18px,2.6vw,38px);list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font:600 .875rem/1 var(--sans);letter-spacing:.02em;min-height:44px;display:inline-flex;align-items:center;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current]::after{transform:scaleX(1)}
.nav__cta{display:none}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;background:none;border:0;color:inherit;font:600 .875rem/1 var(--sans);cursor:pointer}
.menu-btn__bars{display:grid;gap:5px;width:20px}
.menu-btn__bars i{display:block;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.hdr.is-open .menu-btn__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.is-open .menu-btn__bars i:nth-child(2){opacity:0}
.hdr.is-open .menu-btn__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.js .hdr{background-color:rgb(247 244 238 / var(--p,0));border-bottom-color:rgb(31 30 28 / calc(var(--p,0) * .18))}
.js .hdr--over{color:color-mix(in srgb,var(--ink) calc(var(--p,0) * 100%),var(--on-dark))}
.js .hdr--over .lg img{filter:brightness(var(--p,0)) invert(calc(1 - var(--p,0)))}
.js .hdr__cta{transition:none;background-color:rgb(252 176 64 / var(--p,0));border-color:color-mix(in srgb,var(--accent) calc(var(--p,0) * 100%),var(--ink));color:var(--ink)}
.js .hdr--over .hdr__cta{border-color:color-mix(in srgb,var(--accent) calc(var(--p,0) * 100%),var(--on-dark));color:color-mix(in srgb,var(--ink) calc(var(--p,0) * 100%),var(--on-dark))}
.hdr__cta:hover{text-decoration:underline;text-underline-offset:.3em}
/* the menu, when open, is always solid */
.js .hdr.is-open{background-color:var(--ivory);color:var(--ink);border-bottom-color:var(--line)}
.js .hdr--over.is-open .lg img{filter:none}
.js .hdr--over.is-open .hdr__cta{background-color:var(--accent);border-color:var(--accent);color:var(--ink)}
/* home: the hero runs under the bar */
.hdr--over + main .hero{margin-top:calc(var(--hdr) * -1);min-height:max(640px,100svh);padding-top:calc(var(--hdr) + 40px)}

/* 6 · FOOTER ------------------------------------------------------------- */
.ft{padding-block:clamp(56px,7vw,88px) 40px}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px}
.ft .lg .lg__hex{height:52px}
.ft .lg .lg__word{height:15px}
.ft__h{margin:0 0 10px;font:700 .6875rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ft ul{list-style:none;margin:0;padding:0;font-size:.9375rem}
.ft li a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.25em}
.ft address{font-style:normal;font-size:.9375rem}
.ft__tag{font:400 1.5rem/1.2 var(--serif);margin-top:18px;max-width:18ch}
.ft__legal{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-2)}

/* 7 · BUTTONS AND LINKS -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:48px;padding:0 1.6rem;font:600 .9375rem/1 var(--sans);text-decoration:none;border:1px solid transparent;background:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn--accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--accent:hover{background:var(--ivory);border-color:var(--ivory)}
.btn--ink{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.btn--ink:hover{background:transparent;color:var(--ink)}
.btn--line{color:var(--on-dark);border-color:var(--on-dark)}
.btn--line:hover{background:var(--on-dark);color:var(--ink)}
.btn--outline{color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--ivory)}
.link{display:inline-flex;gap:.5em;align-items:center;min-height:44px;font:600 .9375rem/1.4 var(--sans);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.link:hover{text-decoration-thickness:2px}
.row-actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:32px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* 8 · PAGE HEAD AND CRUMB ------------------------------------------------ */
.crumb{font:600 .75rem/1.3 var(--sans);letter-spacing:.06em;color:var(--ink-2);margin-bottom:28px}
.crumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 0}
.crumb li{display:inline-flex;align-items:center}
.crumb li+li::before{content:"/";margin-inline:.7em;opacity:.6}
.crumb a{text-underline-offset:.25em;display:inline-flex;align-items:center;min-height:24px}
.pagehead{padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,72px)}
.pagehead h1{font-size:clamp(2.75rem,6.4vw,5.6rem);max-width:14ch}
.pagehead .lead{max-width:46ch}

/* 9 · HOME SECTIONS ------------------------------------------------------ */
/* 01 hero */
.hero{position:relative;isolation:isolate;min-height:max(620px,calc(100svh - var(--hdr)));display:flex;align-items:flex-end;color:var(--on-dark);padding-block:clamp(48px,7vw,96px)}
.hero .slot{position:absolute;inset:0;z-index:-2}
.hero .slot>img{animation:hero-in 2.2s var(--ease) both}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:200px;z-index:-1;background:linear-gradient(180deg,rgb(20 19 17 / .62),transparent)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(20 19 17 / .86),rgb(20 19 17 / .55) 48%,rgb(20 19 17 / .12)),linear-gradient(0deg,rgb(20 19 17 / .55),transparent 40%)}
.hero .wrap{width:100%}
.hero h1{font-size:clamp(3rem,8.2vw,7rem);line-height:1;max-width:11ch}
.hero .lead{max-width:34ch;font-size:1.1875rem}
.hero .wrap>*{animation:rise 1s var(--ease) both}
.hero .wrap>*:nth-child(2){animation-delay:.12s}
.hero .wrap>*:nth-child(3){animation-delay:.24s}
.hero .wrap>*:nth-child(4){animation-delay:.36s}
.hero__cap{position:absolute;right:var(--gut);top:calc(var(--hdr) + 20px);font:500 .75rem/1.4 var(--sans);color:var(--on-dark);background:rgb(20 19 17 / .72);padding:8px 12px;max-width:32ch}
.cue{position:absolute;right:var(--gut);bottom:clamp(32px,5vw,56px);display:flex;flex-direction:column;align-items:center;gap:10px;font:600 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);text-decoration:none;writing-mode:vertical-rl;padding:6px}
.cue::after{content:"";width:1px;height:56px;background:var(--on-dark);opacity:.7}
@keyframes hero-in{from{transform:scale(1.07)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 02 approach */
.perspective{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.pillars{display:grid;gap:22px;margin-top:36px;padding:0;list-style:none}
.pillars li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px 14px;padding-top:18px;border-top:1px solid var(--line)}
.pillars b{font:600 .75rem/1.9 var(--sans);letter-spacing:.14em;color:var(--ink-2)}
.pillars h3{font-size:1.5rem}
.pillars p{grid-column:2;color:var(--ink-2);font-size:.9375rem}
.perspective .slot{aspect-ratio:4/3.4}

/* 03 beyond the surface */
.beyond{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.beyond__media{position:relative;padding-bottom:12%}
.beyond__main{aspect-ratio:4/3}
.beyond__detail{position:absolute;right:-8%;bottom:0;width:34%;aspect-ratio:3/4;border:10px solid var(--ivory)}
.beyond__media .cap{max-width:34ch}

/* 04 materials */
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.sec-head .lead{margin-top:18px}
.sec-head__cta{justify-self:end}
.mats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:clamp(12px,1.6vw,20px);min-height:clamp(560px,56vw,820px)}
.mats li{display:block;min-height:0}
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:280px;overflow:hidden;color:var(--on-dark);text-decoration:none;isolation:isolate;padding:clamp(20px,2.6vw,36px)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(20 19 17 / .92),rgb(20 19 17 / .84) 34%,rgb(20 19 17 / .45) 62%,rgb(20 19 17 / .1) 82%,transparent)}
.card .bg{z-index:-2}
.card:hover .bg{transform:scale(1.05)}
.card__no{font:600 .75rem/1 var(--sans);letter-spacing:.14em;color:var(--on-dark);margin-bottom:10px}
.card h3{color:var(--on-dark)}
.card p{color:var(--on-dark);font-size:.9375rem;line-height:1.5;margin-top:8px;max-width:36ch}
.card__go{display:inline-flex;gap:.5em;margin-top:14px;font:600 .875rem/1 var(--sans);color:var(--on-dark);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.card:hover .card__go,.card:focus-visible .card__go{opacity:1;transform:none}
@media (hover:none){.card__go{opacity:1;transform:none}}
.m-a{grid-column:1/7;grid-row:1}
.m-b{grid-column:7/13;grid-row:1}
.m-c{grid-column:1/7;grid-row:2}
.m-d{grid-column:7/13;grid-row:2}
.stone-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:28px;align-items:center;margin-top:clamp(12px,1.6vw,20px);padding:20px 24px 20px 20px;background:var(--ivory);text-decoration:none;border:1px solid var(--line)}
.stone-row .slot{width:120px;aspect-ratio:1}
.stone-row h3{font-size:1.9rem}
.stone-row p{color:var(--ink-2);font-size:.9375rem;margin-top:4px}
.stone-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* 05 applications: the project card (also used on the Applications, product and project pages) */
.hgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.hgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hgrid+.row-actions{margin-top:clamp(32px,4vw,48px)}
.pj{display:block;text-decoration:none;color:inherit;min-width:0}
.pj__ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:#2a2722}
.pj:hover .pj__ph .bg{transform:scale(1.04)}
.pj__t{padding-top:16px}
.pj h3{font-size:1.55rem;line-height:1.1}
.pj p{font-size:.875rem;line-height:1.5;color:var(--ink-2);margin-top:6px}
.pj p+p{margin-top:2px}
.pj .link{margin-top:6px;font-size:.875rem;min-height:0}
.t-dark .pj p,.band .pj p{color:var(--on-dark-2)}
.pj:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* 06 closer (photo) and dark closer */
.closer{position:relative;isolation:isolate;display:grid;place-items:center;text-align:center;color:var(--on-dark);padding-block:clamp(96px,14vw,200px)}
.closer .slot{position:absolute;inset:0;z-index:-2}
.closer::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 70% at 50% 50%,rgb(20 19 17 / .78),rgb(20 19 17 / .62))}
.closer h2{font-size:clamp(2.5rem,6.4vw,5.6rem);max-width:15ch;margin-inline:auto}
.closer .lead{margin-inline:auto}
.closer .row-actions,.cdark .row-actions{justify-content:center}
.closer .eyebrow,.cdark .eyebrow{justify-content:center}
.cdark{padding-block:clamp(96px,13vw,176px);text-align:center}
.cdark h2{font-size:clamp(2.5rem,6vw,5.2rem);max-width:15ch;margin-inline:auto}
.cdark .lead{margin-inline:auto}

/* 10 · LISTING PAGES ----------------------------------------------------- */
.nav a[aria-current="page"]{text-decoration:none}
/* category tiles */
.cats{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.cat{display:block;text-decoration:none;color:inherit}
.cat .slot{aspect-ratio:4/5;transition:transform .5s}
.cat:hover .slot{transform:translateY(-4px)}
.cat__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cat__t h2{font-size:1.7rem}
.cat__t b{font-weight:inherit}
.cat__t span{font:600 .8125rem/1.2 var(--sans);color:var(--ink-2);white-space:nowrap}
.cat p{font-size:.875rem;color:var(--ink-2);margin-top:8px}
/* one block per material */
.mhead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;margin-bottom:clamp(36px,5vw,64px)}
.mhead--flip .mhead__img{order:2}
.mhead__img .slot{aspect-ratio:4/3}
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:clamp(14px,1.8vw,24px)}
.pgrid>li{min-width:0}
.pc{display:block;text-decoration:none;color:inherit}
.pc .slot{aspect-ratio:4/5;transition:transform .5s}
.pc:hover .slot{transform:translateY(-4px)}
.pc h3{font:600 .9375rem/1.3 var(--sans);letter-spacing:0;margin-top:12px}
.pc p{font-size:.8125rem;color:var(--ink-2);line-height:1.45;margin-top:2px}
.t-dark .pc p{color:var(--on-dark-2)}
.pc:hover h3{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.more{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:clamp(28px,4vw,40px);padding-top:20px;border-top:1px solid var(--line)}
.t-dark .more{border-color:var(--line-dark)}
.more .btn{min-height:44px}
.noscript{padding:20px;border:1.5px dashed var(--taupe);background:var(--ivory);color:var(--ink);font-size:.9375rem}
.noscript a{text-underline-offset:.25em}

/* applications: filter and project grid */
.projects{padding-block:clamp(56px,7vw,96px)}
.pfilter{border:0;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pfilter legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pfilter__label{font:700 .6875rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-right:8px}
.pfilter input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pfilter label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--ink-2);color:var(--ink);font:600 .875rem/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.pfilter label small{font:500 .875rem/1 var(--sans);opacity:.9}
.pfilter label:hover{background:var(--ivory)}
.pfilter input:checked+label{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.pfilter input:focus-visible+label{outline:3px solid var(--ink);outline-offset:3px}
html:not(.js) .pfilter,html:not(.js) .showrow{display:none}
.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(16px,2vw,28px);padding-top:clamp(28px,3.4vw,44px);padding-bottom:clamp(36px,4vw,56px)}
.track .pj[hidden]{display:none}
.showrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.showrow[hidden]{display:none}
.result-note{margin-top:14px}

/* 11 · PRODUCT PAGE ------------------------------------------------------ */
.pd-hero{padding-block:clamp(36px,4vw,56px) clamp(56px,7vw,96px)}
.pd-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start}
.pd-fig .slot{aspect-ratio:4/5;max-height:min(84vh,780px);width:100%}
.pd-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pd-thumb{width:64px;height:80px;padding:0;border:1px solid var(--line);background:none;cursor:pointer;position:relative;overflow:hidden}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}
.pd-hero h1{font-size:clamp(2.5rem,5.2vw,4.6rem);margin-bottom:6px}
.pd-code{font:600 .875rem/1.4 var(--sans);letter-spacing:.04em;color:var(--ink-2);margin-top:6px}
.pd-hero .lead{margin-top:18px}
.pd-hero .facts{margin-top:28px}
.pd-note{font-size:.8125rem;color:var(--ink-2);margin-top:16px;max-width:46ch}
.pd-over{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.pd-over .facts{margin:0}
/* colour and finish collection (the material explorer) */
.coll{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(36px,5vw,56px)}
.coll__view .slot{aspect-ratio:4/5;max-height:620px;width:100%}
.coll__info{margin-top:16px;min-height:6.5em}
.coll__info h3{font-size:1.9rem}
.coll__info p{font-size:.9375rem;color:var(--ink-2);margin-top:6px}
.coll__tag{display:inline-block;margin-left:.5em;font:600 .6875rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);vertical-align:middle}
.swgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}
.swgrid>li{min-width:0}
.swb{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit}
.swb .slot{aspect-ratio:3/4}
.swb[aria-pressed="true"] .slot{outline:3px solid var(--ink);outline-offset:3px}
.swb span{display:block;font:600 .75rem/1.35 var(--sans);margin-top:8px}
.coll__finish{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}
/* technical table */
.spectable{width:100%;border-collapse:collapse;margin-top:clamp(28px,4vw,44px)}
.spectable th,.spectable td{text-align:left;padding:16px 0;border-top:1px solid var(--line);vertical-align:top}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:1px solid var(--line)}
.spectable th{width:34%;font:700 .75rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-right:16px}
.spectable td{font-weight:600}

/* 12 · PROJECT PAGE ------------------------------------------------------ */
.pj-head .facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:clamp(32px,4vw,48px);max-width:900px}
.beat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.beat--p{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.beat__img .slot{width:100%;aspect-ratio:3/2}
.beat--p .beat__img .slot{aspect-ratio:4/5}
.beat--flip .beat__img{order:2}
.beat .eyebrow{margin-bottom:18px}
.beat .lead{max-width:38ch}
.mat-cards{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;max-width:520px}
.mat-cards .pc .slot{aspect-ratio:4/5}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(36px,5vw,56px)}
.pair .slot{aspect-ratio:4/5;width:100%}
.pair .cap{margin-top:12px}
.beat-nav{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:32px}
.otherpj{margin-top:clamp(36px,5vw,56px)}

/* 13 · ABOUT AND CONTACT ------------------------------------------------- */
.story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.story .slot{aspect-ratio:4/3}
.story .lead{max-width:38ch}
.how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.pick{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pick li{border-bottom:1px solid var(--line)}
.pick a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding:18px 4px;text-decoration:none;min-height:44px}
.pick h3{font-size:1.6rem}
.pick p{grid-column:1;font-size:.9375rem;color:var(--ink-2)}
.pick .go{grid-column:2;grid-row:1/3;align-self:center;font:600 .875rem/1 var(--sans)}
.pick a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.pick-h{font:700 .6875rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.clist{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line-dark)}
.clist li{padding:16px 0;border-bottom:1px solid var(--line-dark);display:grid;gap:2px}
.clist .k{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.clist a,.clist address{font-style:normal;font:500 1.0625rem/1.5 var(--sans);text-underline-offset:.25em;overflow-wrap:anywhere}
.compose{border:1px solid var(--line-dark);padding:clamp(22px,3vw,40px);background:rgb(247 244 238 / .04)}
.compose h3{font-size:clamp(1.8rem,2.8vw,2.4rem)}
.compose fieldset{border:0;margin:26px 0 0;padding:0;min-width:0}
.compose legend{padding:0;font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chips label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--on-dark-2);color:var(--on-dark);font:600 .875rem/1.2 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.chips label:hover{background:rgb(247 244 238 / .1)}
.chips input:checked+label{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.chips input:focus-visible+label{outline:3px solid var(--accent);outline-offset:3px}
.field{display:grid;gap:8px;margin-top:26px}
.field label{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.field input{height:48px;border:1px solid var(--on-dark-2);background:var(--ivory);color:var(--ink);padding:0 14px;font:500 1rem var(--sans);border-radius:0;width:100%}
.field input::placeholder{color:#5f594f;opacity:1}
.field input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.preview{margin-top:26px;border-left:3px solid var(--accent);padding:6px 0 6px 18px}
.preview__k{font:700 .6875rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.preview__t{display:block;margin-top:8px;font:400 1.0625rem/1.6 var(--sans);white-space:pre-line;color:var(--on-dark);overflow-wrap:anywhere}
.compose .row-actions{margin-top:26px}
.compose__note{margin-top:16px;font-size:.8125rem;color:var(--on-dark-2);max-width:60ch}
.status{min-height:1.5em;margin-top:10px;font-size:.875rem;color:var(--on-dark)}

/* 14 · MOTION HELPERS ---------------------------------------------------- */
/* Elements below the fold are armed by main.js, then released as they enter. Never hidden without JS. */
.js .rv.armed{opacity:0;transform:translateY(16px)}
.js .rv.armed.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}

/* 15 · RESPONSIVE -------------------------------------------------------- */
@media (max-width:1000px){
  .js .nav-wrap{display:none}
  .js .menu-btn{display:inline-flex}
  .js .hdr.is-open .nav-wrap{display:block;position:absolute;top:100%;left:0;right:0;background:var(--ivory);color:var(--ink);border-bottom:1px solid var(--line);padding:8px var(--gut) 24px;max-height:calc(100svh - var(--hdr));overflow:auto}
  .js .hdr.is-open .nav{flex-direction:column;gap:0}
  .js .hdr.is-open .nav a{min-height:52px;font-size:1rem;width:100%;border-bottom:1px solid var(--line)}
  .js .hdr.is-open .nav a::after{display:none}
  .js .hdr.is-open .nav__cta{display:block;padding-top:16px}
  .js .hdr.is-open .nav__cta a{border:1px solid var(--accent);background:var(--accent);justify-content:center}
  .js .hdr .wrap{justify-content:flex-start}
  .js .hdr .lg{margin-right:auto}
  html:not(.js) .nav .nav__x{display:none}
  .perspective,.beyond,.sec-head,.pd-hero__grid,.pd-over,.coll,.story,.how,.contact,.beat,.beat--p{grid-template-columns:minmax(0,1fr)}
  .beat--flip .beat__img{order:0}
  .sec-head__cta{justify-self:start}
  .beyond__media{padding-bottom:0;margin-bottom:16px}
  .beyond__detail{right:12px;bottom:-24px;width:30%}
  .beyond__media .cap{max-width:none;padding-right:36%}
  .hgrid,.hgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mhead{grid-template-columns:minmax(0,1fr)}
  .mhead--flip .mhead__img{order:0}
  .ft__grid{grid-template-columns:1fr 1fr}
  .pd-fig .slot{max-height:none}
  .coll__view .slot{aspect-ratio:4/3;max-height:none}
}
@media (max-width:760px){
  :root{--hdr:68px}
  .hdr .wrap{gap:12px}
  .lg .lg__hex,.ft .lg .lg__hex{height:38px}
  .lg .lg__word,.ft .lg .lg__word{height:11px}
  html:not(.js) .nav .nav__m{display:none}
  .hdr .btn{padding:0 .85rem;min-height:44px;font-size:.8125rem;white-space:nowrap;flex:none}
  .hero__cap,.cue{display:none}
  .hero::after{background:linear-gradient(0deg,rgb(20 19 17 / .86),rgb(20 19 17 / .72) 55%,rgb(20 19 17 / .5))}
  .mats{display:flex;flex-direction:column;min-height:0}
  .mats li{min-height:360px}
  .mats .card{min-height:380px}
  .stone-row{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .stone-row .slot{width:84px}
  .stone-row .link{grid-column:1/-1}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{gap:16px 18px}
  .ft__grid{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .spectable th{width:42%}
}
@media (max-width:520px){
  .hgrid,.hgrid--3,.track{grid-template-columns:1fr}
}
@media (max-width:430px){
  .js .hdr__cta{display:none}
  html:not(.js) .hdr nav{display:none}
  .nav__cta{display:none}
}
@media (min-width:1001px){
  .nav__cta{display:none!important}
}

/* 16 · REDUCED MOTION ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:hover .bg,.pj:hover .pj__ph .bg{transform:none}
  .card__go{opacity:1;transform:none}
  .js .rv.armed{opacity:1;transform:none}
}

/* LOADING STATE ----------------------------------------------------------
   Bar on every page; skeletons only where script fills the content. Never an overlay. */
.ld{position:fixed;inset:0 0 auto 0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;opacity:0;z-index:300;pointer-events:none}
.is-loading .ld{animation:ld-run 1.6s cubic-bezier(.2,.7,.2,1) .12s forwards}
.is-loaded .ld{transform:scaleX(1);opacity:0;transition:transform .2s ease-out,opacity .35s ease .15s}
@keyframes ld-run{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:scaleX(.85)}}
.sk{display:block;background:var(--warm);animation:sk-pulse 1.6s ease-in-out infinite}
@keyframes sk-pulse{50%{opacity:.55}}
.sk--card{aspect-ratio:4/5}
.sk--line{height:14px;width:72%;margin-top:12px}
.sk--line.s{width:44%}
.sk--bar{height:12px;width:170px}
.sk--h{height:58px;width:78%;margin-top:20px}
.sk--btn{height:48px;width:230px;margin-top:30px}
.sk-pd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);margin-top:28px;align-items:start}
.sk-pd .sk--img{aspect-ratio:4/5}
.sk-pj .sk--img{aspect-ratio:16/9;margin-top:28px}
/* the real h1 and lead stay for screen readers while the skeleton shows */
.js .sk-host h1,.js .sk-host .lead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) .sk-wrap{display:none}
@media (max-width:1000px){.sk-pd{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .is-loading .ld{animation:none;transform:scaleX(1);opacity:1}
  .sk{animation:none}
}

/* PRODUCT PHOTO ZOOM AND LIGHTBOX ----------------------------------------- */
#pd-main{cursor:zoom-in}
.pd-zoom{position:absolute;right:14px;bottom:14px;z-index:3;width:44px;height:44px;display:grid;place-items:center;background:var(--ivory);color:var(--ink);border:1px solid var(--ink);cursor:pointer;transition:background .2s,color .2s}
.pd-zoom:hover{background:var(--ink);color:var(--ivory)}
html:has(dialog.lb[open]){overflow:hidden}
.lb{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgb(20 19 17 / .96);color:var(--on-dark)}
.lb::backdrop{background:rgb(20 19 17 / .96)}
.lb__bar{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--gut)}
.lb__count{margin:0;font:600 .8125rem/1 var(--sans);letter-spacing:.1em;color:var(--on-dark-2)}
.lb__tools{display:flex;gap:8px}
.lb__btn{min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0 16px;background:transparent;color:var(--on-dark);border:1px solid var(--line-dark);font:600 .875rem/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}
.lb__btn:hover{background:var(--on-dark);color:var(--ink)}
.lb__btn[aria-pressed="true"]{background:var(--on-dark);color:var(--ink)}
.lb :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.lb__nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);font-size:1.25rem;background:rgb(20 19 17 / .6)}
.lb__prev{left:var(--gut)}
.lb__next{right:var(--gut)}
.lb__stage{position:absolute;inset:72px 0 84px;display:flex;overflow:auto;overscroll-behavior:contain;cursor:zoom-in}
.lb__stage img{display:block;margin:auto;max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lb.is-zoom .lb__stage{cursor:grab}
.lb.is-zoom .lb__stage img{max-width:none;max-height:none}
.lb--strip .lb__stage img{background:var(--warm)}
.lb__cap{position:absolute;inset:auto 0 0 0;margin:0;padding:18px var(--gut) 22px;font:500 .875rem/1.5 var(--sans);color:var(--on-dark-2);text-align:center}
@media (max-width:760px){
  .lb__stage{inset:68px 0 96px}
  .lb__nav{top:auto;bottom:100px;transform:none}
}

/* BACK (product page) ------------------------------------------------------ */

/* PAGE FADE-IN ------------------------------------------------------------
   Every page eases in on load (the header stays put), so moving between pages is no longer a hard cut.
   Off with reduced motion. */
main,.ft{animation:page-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){main,.ft{animation:none}}

/* BACK (product page): sits on the top row, opposite the breadcrumb */
.pd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;flex-wrap:wrap;margin-bottom:28px}
.pd-top .crumb{margin-bottom:0}
.back{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 4px;font:600 .875rem/1 var(--sans);letter-spacing:.02em;color:var(--ink);text-decoration:none}
.back__arr{display:inline-block;transition:transform .25s ease}
.back:hover .back__arr,.back:focus-visible .back__arr{transform:translateX(-4px)}
.back:hover span:last-child{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){.back__arr{transition:none}}