/* Ling Yun — Crystal Spheres & Points 2026 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* An author `display` beats the UA rule for [hidden], so `.form[hidden]` would
   stay on screen after a successful submit. Anything we toggle with .hidden
   must actually disappear — the confirmation panel replaces the form. */
[hidden]{display:none!important}
:root{
  --ivory:#F7F4EF;--paper:#FEFCF8;--sand:#EDE7DE;--blush:#E7DEE6;
  --plum:#2A2028;--plum-mid:#4A3A48;--plum-soft:#7A6675;
  --gold:#A68457;--gold-light:#CBAA7E;
  /* Two golds, on purpose. --gold is a surface colour: it is the button fill
     behind dark text and the 1px rules. As *text* on cream it measures 3.38:1,
     under the 4.5:1 AA floor — every small gold label uses --gold-ink (4.86:1). */
  --gold-ink:#8A6A3F;
  --ink:#171315;--ink-soft:#5A5058;--ink-faint:#6B5F68;
  --line:rgba(42,32,40,.13);--line-strong:rgba(42,32,40,.55);
  --err:#A03A2B;
}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;font-size:16px;line-height:1.65;color:var(--ink);background:var(--ivory);-webkit-font-smoothing:antialiased}
/* height:auto is load-bearing: every <img> carries width/height attributes for
   layout stability, and without this the height attribute wins over aspect-ratio
   and the photo renders at its intrinsic pixel height on phones. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.12;color:var(--plum)}
h1 em,h2 em{font-style:italic;color:var(--plum-mid)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);display:block;margin-bottom:16px}
.container{width:min(1240px,92%);margin-inline:auto}
section{padding-block:clamp(72px,9.5vw,128px)}
.rule{height:1px;background:var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 30px;font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:all .2s ease}
.btn-primary{background:var(--plum);color:var(--ivory)}
.btn-primary:hover{background:var(--plum-mid);transform:translateY(-1px)}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--plum)}
.btn-outline:hover{border-color:var(--plum);background:rgba(42,32,40,.04)}
.btn-light{background:var(--paper);color:var(--plum)}
.btn-light:hover{background:#fff}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);border-bottom:1px solid var(--gold);padding-bottom:3px}
.link-arrow:hover{border-color:var(--plum)}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,247,242,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:13px}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-mark{display:block;height:44px;width:auto;flex:none}
.footer .brand{flex-direction:column;align-items:flex-start;gap:10px}
.footer .brand-mark{height:72px;margin-bottom:2px}
.brand-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;letter-spacing:.18em;color:var(--plum)}
.brand-sub{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);position:relative;padding-bottom:3px}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .22s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--plum)}
.nav-right{display:flex;align-items:center;gap:36px}
/* Sits in the fixed bar at every width, including phones where .nav-links is
   hidden — the buyer can ask for a price without opening the menu first. */
.nav-cta{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;background:var(--plum);color:var(--ivory);border-radius:2px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .2s ease}
.nav-cta:hover{background:var(--plum-mid)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle svg{width:22px;height:22px;stroke:var(--plum)}
@media(max-width:900px){
  .nav-toggle{display:block}
  .nav-right{gap:12px}
  .nav-cta{height:40px;padding:0 14px;font-size:.7rem;letter-spacing:.03em}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;padding:26px 5%;gap:20px;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
}
.hero{position:relative;min-height:92vh;min-height:92svh;display:flex;align-items:center;padding:132px 0 104px;overflow:hidden;background:var(--plum)}
.hero-bg{position:absolute;inset:0}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 18%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,19,21,.86) 0%,rgba(23,19,21,.6) 30%,rgba(23,19,21,.16) 54%,rgba(23,19,21,0) 70%),linear-gradient(to top,rgba(23,19,21,.5) 0%,rgba(23,19,21,0) 38%)}
.hero-content{position:relative;z-index:2;max-width:min(560px,50vw);color:var(--ivory)}
.hero-content .eyebrow{color:var(--gold-light);margin-bottom:24px}
.hero-title{font-size:clamp(2.4rem,4.6vw,4.05rem);color:#fff;margin-bottom:28px;line-height:1.05}
.hero-title em{color:var(--gold-light)}
.hero-sub{font-size:1rem;color:rgba(250,247,242,.8);max-width:36ch;margin-bottom:42px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-actions .btn-primary{background:var(--gold);color:#171315}
.hero-actions .btn-primary:hover{background:var(--gold-light)}
.hero-actions .btn-outline{color:#fff;border-color:rgba(255,255,255,.45)}
.hero-actions .btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media(max-width:700px){
  .hero{display:block;min-height:0;padding:72px 0 0;background:var(--plum)}
  /* The photo keeps the frame it was generated in (3:4) instead of taking a
     fixed slice of the viewport: cover then has nothing to crop, so no piece
     ends up sitting on an edge. 40svh was a letterbox band — 71% of a phone
     screen given to a horizontal frame is why it read as small. */
  .hero-bg{position:relative;inset:auto;height:auto;aspect-ratio:3/4;overflow:hidden}
  .hero-bg img{height:100%;object-position:50% 50%}
  .hero-overlay{display:none}
  .hero-content{max-width:none;padding-block:18px 30px}
  .hero-content .eyebrow{margin-bottom:9px}
  .hero-title{font-size:clamp(2.1rem,9vw,2.7rem);margin-bottom:11px}
  .hero-sub{font-size:.95rem;margin-bottom:16px;max-width:34ch}
  .only-desk{display:none}
  /* The WhatsApp bubble is fixed at right/bottom:20px and 52px wide; the hero
     button is the one full-width element in that corner, so on a 393 or 414
     phone the bubble bites its bottom-right corner and reads as a badge stuck on
     the button. Give the row back the bubble's width (52 + 20 gutter + 12 gap)
     instead of hiding the bubble — it exists so a buyer can jump to WhatsApp. */
  .hero-actions{gap:8px;padding-right:68px}
  .hero-actions .btn{flex:1 1 100%}
  /* The fixed header already carries Request Quote at every width; a second
     full-width catalogue button here only pushed the headline off the fold. */
  .hero-actions .btn-outline{display:none}
}
.trust{background:var(--paper);border-block:1px solid var(--line);padding-block:20px}
.trust-inner{display:flex;justify-content:center;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
.trust-inner span+span::before{content:'·';color:var(--gold);padding:0 clamp(10px,1.6vw,18px)}
/* Hidden on phones rather than re-flowed. Four mono fragments in a 390 box wrap
   into two ragged rows and then read as a bulleted list of loose words — "LOW
   MOQ ON STOCK" hanging on its own, the last one alone underneath. Two columns
   was tried first; still fragments, still noise, and it pushed the reel down the
   page. The same three facts are on the spec block and the inquiry page.
   Must sit after the base .trust rule above: equal specificity is settled by
   source order. */
@media(max-width:700px){
  .trust{display:none}
}
.hero-reel-link{display:inline-flex;align-items:center;gap:11px;margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,242,.8);transition:color .2s ease}
.hero-reel-link:hover{color:#fff}
.hero-reel-play{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.42);transition:background .2s ease,border-color .2s ease}
.hero-reel-play svg{width:9px;height:9px;fill:currentColor;margin-left:2px}
.hero-reel-link:hover .hero-reel-play{background:rgba(255,255,255,.16);border-color:#fff}
/* homepage reel — video straight under the trust bar */
.reel{padding-block:clamp(46px,6vw,84px);scroll-margin-top:84px}
.reel-head{margin-bottom:clamp(22px,2.8vw,36px)}
.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.7vw,24px)}
/* flex/grid children default to min-width:auto and refuse to shrink below
   their video's intrinsic width */
.reel-item,.reel-frame{min-width:0}
.reel-item{display:block}
.reel-frame{position:relative;display:block;overflow:hidden;background:var(--plum);aspect-ratio:1/1}
.reel-frame video{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.reel-item:hover .reel-frame video{transform:scale(1.035)}
/* Four clips shot in four different rooms. The posters are regraded to one
   black point, but a shared vignette is what makes the row read as one set
   rather than four unrelated videos. */
.reel-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(115% 95% at 50% 38%,rgba(20,10,24,0) 42%,rgba(20,10,24,.42) 100%)}
.reel-badge{position:absolute;right:9px;bottom:9px;z-index:2;display:flex;align-items:center;gap:5px;padding:5px 9px 5px 7px;background:rgba(42,32,40,.68);color:#F5EFE5;font-family:'IBM Plex Mono',monospace;font-size:.54rem;letter-spacing:.1em;line-height:1;border-radius:2px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.reel-badge svg{width:9px;height:9px;fill:var(--gold-light)}
.reel-meta{display:grid;grid-template-columns:1fr;align-items:center;gap:4px;padding-top:14px}
.reel-name{font-family:'Cormorant Garamond',serif;font-size:1.22rem;line-height:1.24;color:var(--plum);transition:color .25s ease}
.reel-item:hover .reel-name{color:var(--plum-mid)}
.reel-line{font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);line-height:1.5}
.reel-go{margin-top:4px;display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink);opacity:.8;white-space:nowrap;transition:opacity .25s ease}
.reel-item:hover .reel-go,.reel-item:focus-visible .reel-go{opacity:1}
.reel-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .reel-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .reel-grid::-webkit-scrollbar{display:none}
  .reel-item{flex:0 0 76%;scroll-snap-align:start}
  .reel-go{margin-top:2px;opacity:.75}
}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,88px);align-items:center}
@media(max-width:820px){.intro-grid{grid-template-columns:1fr}}
.intro-title{font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:24px}
.intro-body p{color:var(--ink-soft);margin-bottom:30px;max-width:46ch}
.intro-media{position:relative}
.intro-media img{aspect-ratio:4/5;object-fit:cover;width:100%}
.intro-caption{position:absolute;left:-16px;bottom:24px;background:var(--paper);padding:14px 20px;border:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.series-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px)}
@media(max-width:900px){.series-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.series-grid{grid-template-columns:1fr}}
.series-card{border-top:1px solid var(--line-strong);padding:26px 0 4px;display:flex;flex-direction:column;transition:border-color .25s ease}
.series-card:hover{border-color:var(--plum)}
.series-num{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.18em;color:var(--gold-ink);margin-bottom:auto}
.series-name{font-family:'Cormorant Garamond',serif;font-size:1.9rem;color:var(--plum);margin:44px 0 6px;line-height:1.1;transition:color .25s ease}
.series-card:hover .series-name{color:var(--plum-mid)}
.series-tag{font-size:.78rem;color:var(--ink-soft);margin-bottom:24px}
.series-count{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.section-title{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.section-sub{color:var(--ink-soft);max-width:520px;font-size:.95rem}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr);gap:28px 18px}}
@media(max-width:520px){.pgrid{grid-template-columns:1fr}}
.pcard .pimg{aspect-ratio:4/5;overflow:hidden;background:var(--sand);position:relative}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.pcard:hover .pimg img{transform:scale(1.04)}
.pcard .pbadge{position:absolute;top:12px;left:12px;background:rgba(255,253,250,.92);padding:5px 10px;font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.pmeta{padding-top:14px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.psku{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.12em;color:var(--gold-ink)}
.pname{font-family:'Cormorant Garamond',serif;font-size:1.16rem;color:var(--plum);line-height:1.3}
.pdesc{font-size:.76rem;color:var(--ink-faint);margin-top:4px}
/* catalogue cards are quote triggers: the word is the affordance, no fake button */
.paction{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);white-space:nowrap;transition:color .2s}
.pcard:hover .paction{color:var(--plum)}
.cat-ask{margin-top:28px;text-align:right}
.cat-ask a{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:color .2s,border-color .2s}
.cat-ask a:hover{color:var(--plum);border-color:var(--plum)}
.pl-hero{padding-top:140px;padding-bottom:56px}
.pl-hero h1{font-size:clamp(2.2rem,5vw,3.8rem);margin:18px 0 20px}
.pl-hero p{max-width:560px;color:var(--ink-soft)}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
/* square, like every other button on the site — the pill read as a different
   template's component sitting on this page */
.chip{border:1px solid var(--line-strong);padding:9px 18px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-radius:2px;transition:all .2s}
.chip:hover,.chip.on{background:var(--plum);border-color:var(--plum);color:var(--ivory)}
.dark{background:var(--plum);color:var(--ivory)}
.dark .eyebrow{color:var(--gold-light)}
.dark h2,.dark h3{color:#fff}
.dark h2 em,.dark h3 em{color:var(--gold-light)}
.dark p{color:rgba(250,247,242,.72)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.cap-list{margin-top:36px}
.cap-item{display:flex;gap:18px;padding-block:20px;border-top:1px solid rgba(250,247,242,.14)}
.cap-item:last-child{border-bottom:1px solid rgba(250,247,242,.14)}
.cap-num{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--gold-light);padding-top:3px}
.cap-item h4{font-family:'Manrope',sans-serif;font-size:.88rem;font-weight:600;color:#fff;margin-bottom:4px}
.cap-item p{font-size:.8rem;line-height:1.6}
.media-block img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cta{background:var(--paper);border-block:1px solid var(--line);text-align:center}
.cta-inner{max-width:600px;margin-inline:auto}
.cta h2{font-size:clamp(1.9rem,3.8vw,2.9rem);margin-bottom:16px}
.cta p{color:var(--ink-soft);margin-bottom:32px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* buyer FAQ — visible copy, not accordions: assistants and crawlers quote it */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,76px);align-items:start}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr;gap:26px}
  /* stacked: the list's top rule already closes the block, don't double it */
  .faq-facts>div:last-child{border-bottom:0}}
.faq-head .section-sub{margin-top:14px}
.faq-head .link-arrow{margin-top:22px}
/* fills the short left column with the facts an assistant would quote */
.faq-facts{margin-top:34px;border-top:1px solid var(--line)}
.faq-facts>div{display:grid;grid-template-columns:78px 1fr;gap:0 14px;padding-block:11px;border-bottom:1px solid var(--line)}
.faq-facts dt{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding-top:3px}
.faq-facts dd{margin:0;font-size:.8rem;line-height:1.6;color:var(--ink-soft)}
.faq-list{border-top:1px solid var(--line-strong)}
.faq-item{display:grid;grid-template-columns:auto 1fr;gap:0 18px;padding-block:20px;border-bottom:1px solid var(--line)}
.faq-num{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.12em;color:var(--gold-ink);padding-top:6px}
.faq-q{grid-column:2;font-size:1.18rem;line-height:1.32}
.faq-a{grid-column:2;margin-top:7px;font-size:.86rem;line-height:1.72;color:var(--ink-soft)}
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);padding-top:120px}
/* minmax(0,1fr): a 1fr track keeps its min-content width, so one wide child
   (the action buttons) pushed the whole column past the container padding */
@media(max-width:900px){.pd{grid-template-columns:minmax(0,1fr);padding-top:104px}}
.pd-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pd-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand)}
.pd-gallery img:first-child{grid-column:1/-1;aspect-ratio:1/1}
.pd-video{position:relative;margin:0;background:var(--plum);overflow:hidden}
.pd-video-note{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(16px,3vw,30px);background:var(--sand);border:1px solid var(--line)}
.pd-video-note .eyebrow{margin-bottom:0}
.pd-video-note p{font-size:.86rem;line-height:1.7;color:var(--ink-soft);margin:0}
.pd-video-note .link-arrow{align-self:flex-start;margin-top:2px}
@media(max-width:640px){.pd-video,.pd-video-note{grid-column:1/-1}}
.pd-video-el{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.pd-video figcaption{position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:7px;padding:8px 14px;background:rgba(42,32,40,.8);color:#F5EFE5;font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.pd-video-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pdrec 2.2s ease-in-out infinite}
@keyframes pdrec{0%,100%{opacity:1}50%{opacity:.2}}
.pd-video-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(42,32,40,.5);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .22s,background .22s;z-index:2}
.pd-video-play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.pd-video-play:hover{background:rgba(42,32,40,.8)}
.pd-video:hover .pd-video-play,.pd-video:focus-within .pd-video-play,.pd-video.is-paused .pd-video-play{opacity:1}
.pd-video.is-paused .pd-video-dot{animation:none;opacity:.45}
@media(prefers-reduced-motion:reduce){.pd-video-dot{animation:none}}
.pd-info{position:sticky;top:104px;align-self:start}
.pd-info h1{font-size:clamp(2rem,4vw,3rem);margin:12px 0 8px}
.pd-sub{color:var(--ink-soft);margin-bottom:28px}
.spec{width:100%;border-top:1px solid var(--line);margin-top:8px}
.spec tr{border-bottom:1px solid var(--line)}
.spec th,.spec td{padding:12px 0;font-size:.82rem;text-align:left;vertical-align:top}
.spec th{width:38%;font-weight:500;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
.spec td{color:var(--ink)}
.pd-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.note{font-size:.72rem;color:var(--ink-faint);margin-top:18px;line-height:1.7}
.about-hero{padding-top:140px;padding-bottom:40px}
.about-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:760px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);margin-top:48px}
@media(max-width:720px){.stat-row{grid-template-columns:1fr 1fr}}
.stat{padding:28px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--plum);font-weight:500}
.stat span{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.form{display:grid;gap:16px;margin-top:28px}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.req{color:var(--err);margin-left:2px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-strong);background:var(--paper);font-family:'Manrope',sans-serif;font-size:.88rem;color:var(--ink);border-radius:2px}
/* 16px on phones — anything smaller makes iOS zoom the viewport on focus */
@media(max-width:560px){.field input,.field select,.field textarea{font-size:16px}}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(42,32,40,.08)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--plum) 50%),linear-gradient(135deg,var(--plum) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;cursor:pointer}
.field.is-invalid label{color:var(--err)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--err);background:#FDF6F4}
.field-err{margin-top:6px;font-size:.74rem;line-height:1.5;color:var(--err)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.footer{background:var(--plum);color:rgba(250,247,242,.68);padding-block:64px 36px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer .brand-name{color:#fff}
.footer-desc{font-size:.8rem;line-height:1.8;max-width:300px;margin-top:16px}
.footer-col h5{font-family:'Manrope',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:18px}
.footer-col a{display:block;font-size:.8rem;margin-bottom:9px;color:rgba(250,247,242,.66)}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid rgba(250,247,242,.14);font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase}
/* bottom clears the iOS home indicator, not just the viewport edge */
.wa-float{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:90;width:52px;height:52px;border-radius:50%;background:var(--plum);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(28,16,20,.25)}
.wa-float svg{width:26px;height:26px;fill:var(--ivory)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* print rules live at the end of this file — see "Catalogue print" */

/* inquiry form */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-status{font-size:.8rem;line-height:1.7;margin:0;display:none}
.form-status.success{display:block;color:#2f6b46}
.form-status.error{display:block;color:var(--err)}
.btn[disabled]{opacity:.6;cursor:progress}

/* quote dialog — card modal over a blurred page */
.no-scroll{overflow:hidden}
.dlg{margin:auto;
  width:min(1000px,calc(100vw - 32px));max-width:none;max-height:min(92vh,880px);
  padding:0;border:1px solid var(--line-strong);border-radius:2px;
  background:var(--ivory);color:var(--ink);overflow:auto;
  box-shadow:0 44px 110px -40px rgba(28,16,20,.62);
}
.dlg::backdrop{
  background:rgba(28,16,20,.45);
  backdrop-filter:blur(18px) saturate(118%);
  -webkit-backdrop-filter:blur(18px) saturate(118%);
}
.dlg[open]{animation:dlgIn .28s ease}
@keyframes dlgIn{from{opacity:0;transform:translateY(12px) scale(.992)}}
@media(prefers-reduced-motion:reduce){.dlg[open]{animation:none}}
.dlg-grid{display:grid;grid-template-columns:.78fr 1.22fr;min-height:100%}
.dlg-side{background:var(--plum);color:var(--ivory);padding:clamp(24px,3.2vw,44px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.dlg-side .eyebrow{color:var(--gold-light);position:relative}
.dlg-title{color:#fff;font-size:clamp(1.75rem,2.4vw,2.5rem);line-height:1.04;position:relative}
.dlg-title em{color:var(--gold-light);font-style:italic}
.dlg-lead{color:rgba(250,247,242,.72);font-size:.84rem;line-height:1.7;margin-top:16px;max-width:34ch;position:relative}
.dlg-sel{margin-top:22px;padding-top:16px;border-top:1px solid rgba(250,247,242,.16);position:relative}
.dlg-sellabel{display:block;font-family:'IBM Plex Mono',monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin-bottom:5px}
.dlg-sel strong{display:block;font-size:.86rem;color:#fff;font-weight:600}
.dlg-meta{margin:auto 0 0;padding-top:22px;border-top:1px solid rgba(250,247,242,.16);display:grid;gap:11px;position:relative}
.dlg-meta dt{font-family:'IBM Plex Mono',monospace;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,242,.52)}
.dlg-meta dd{margin:2px 0 0;font-size:.8rem;color:rgba(250,247,242,.94)}
.dlg-meta a{border-bottom:1px solid rgba(250,247,242,.3)}
.dlg-meta a:hover{color:var(--gold-light);border-color:var(--gold-light)}
.dlg-main{padding:clamp(24px,3.2vw,42px);position:relative;background:var(--paper)}
.dlg-h{font-size:clamp(1.5rem,2.1vw,2rem)}
.dlg-sub{font-size:.84rem;color:var(--ink-soft);margin:10px 0 22px;max-width:46ch}
/* no box around the X — one bordered square in the corner read as a second,
   competing panel edge */
.dlg-close{position:absolute;top:14px;right:14px;width:40px;height:40px;background:none;border:0;border-radius:2px;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.dlg-close span{position:absolute;width:14px;height:1.5px;background:var(--plum)}
.dlg-close span:first-child{transform:rotate(45deg)}
.dlg-close span:last-child{transform:rotate(-45deg)}
.dlg-close:hover{background:var(--plum)}
.dlg-close:hover span{background:var(--ivory)}
.dlg-ok{padding:24px 0 8px}
.dlg-okh{font-size:clamp(1.7rem,2.4vw,2.2rem);margin-bottom:14px;line-height:1.1}
.dlg-okh em{color:var(--plum-mid);font-style:italic}
.dlg-okp{font-size:.86rem;color:var(--ink-soft);max-width:44ch;margin-bottom:26px}
.dlg-okp strong{color:var(--plum);font-weight:600}
/* the WhatsApp hand-off both confirmation panels share */
.dlg-okacts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-wa{padding-left:22px;padding-right:26px}
.btn-wa svg{width:18px;height:18px;fill:currentColor;flex:none;margin-top:-1px}
.ok-hint{font-size:.7rem;line-height:1.6;color:var(--gold-ink);margin-top:13px;max-width:42ch}
.form-ok{margin-top:28px;padding:2px 0 8px}
.dlg-form{gap:14px;margin-top:0}
.dlg-form .field textarea{min-height:84px}
.dlg .note{font-size:.68rem;margin-top:2px}
@media(max-width:860px){
  .dlg{max-height:94vh}
  .dlg-grid{grid-template-columns:1fr}
  .dlg-side{padding:20px 22px}
  .dlg-title{font-size:1.45rem}
  .dlg-lead{display:none}
  .dlg-meta{grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:14px;padding-top:14px}
  .dlg-meta div:nth-child(n+3){display:block}
  .dlg-meta dt{font-size:.5rem}
  .dlg-meta dd{font-size:.74rem}
  .dlg-main{padding:22px 20px 26px}
  .dlg-formwrap .eyebrow,.dlg-h{padding-right:48px}
}
@media(max-width:560px){.dlg{width:calc(100vw - 20px)}}
@media print{.dlg{display:none}}
.brand-name{white-space:nowrap}
@media(max-width:800px){.footer .brand{flex-direction:column;align-items:flex-start;gap:8px}.footer .brand-name{font-size:1.25rem}}
@media(max-width:520px){.brand{gap:10px}.brand-mark{height:31px}.brand-name{font-size:1.22rem;letter-spacing:.14em}.brand-sub{font-size:.52rem;letter-spacing:.18em}}
/* Narrow phones: monogram + Request Quote + menu is what fits. The wordmark is
   the one element that can go without costing anyone a way to act. */
@media(max-width:400px){.nav .brand-name{display:none}.nav .brand-mark{height:34px}}

/* Privacy policy — a reading page, not a marketing page. */
.legal-wrap{display:grid;grid-template-columns:250px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.legal-aside{position:sticky;top:104px;border-top:1px solid var(--line);padding-top:22px}
.legal-aside-lead{font-size:.82rem;line-height:1.7;color:var(--ink-soft);margin:0 0 16px}
.legal-facts{display:grid;gap:12px}
.legal-facts dt{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:2px}
.legal-facts dd{margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}
.legal-facts a{color:var(--plum);border-bottom:1px solid var(--gold)}
@media(max-width:900px){.legal-wrap{grid-template-columns:1fr;gap:26px}.legal-aside{position:static;order:2}.legal{order:1;max-width:none}}
.legal{max-width:68ch}
.legal h2{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:400;line-height:1.25;color:var(--plum);margin:36px 0 12px;padding-top:26px;border-top:1px solid var(--line)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p,.legal li{font-size:.92rem;line-height:1.78;color:var(--ink-soft)}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0 18px;display:grid;gap:9px}
.legal strong{color:var(--ink);font-weight:600}
.legal em{font-style:italic;color:var(--ink)}
.legal a{color:var(--plum);border-bottom:1px solid var(--gold)}
@media(max-width:520px){.legal h2{font-size:1.35rem;margin-top:30px;padding-top:22px}.legal p,.legal li{font-size:.88rem}}

/* ── Catalogue (/catalog/) ──────────────────────────────────────────
   The page carries a Print button, so the print output is a deliverable
   customers actually receive. Screen and print share this markup on
   purpose: a separate PDF template silently drifts from the site, and
   the last one still had the old supplier-wrapped product photos. */
.cat-section{padding-top:0}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.cat-desc{max-width:62ch;color:var(--ink-soft);font-size:.92rem;margin-top:10px}
.cat-stamp{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;padding-bottom:6px}
.cat-cover-foot,.cat-back-steps,.cat-cover-mark,.cat-cover-strip{display:none}
.cat-cover-contact{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);justify-content:center;margin-top:22px}

/* ── Catalogue print: A4, one collection per page ─────────────────── */
@media print{
  @page{size:A4;margin:13mm 12mm 11mm}
  html,body{background:#fff}
  body{font-size:9.5pt;line-height:1.5}
  .nav,.footer,.wa-float,.dlg,.filter-bar,.paction,.cat-ask{display:none!important}
  .container{width:100%;max-width:none}
  a{color:inherit;text-decoration:none}
  .eyebrow{font-size:6.6pt;letter-spacing:.24em;margin-bottom:3mm}

  /* cover — fills the sheet so page 1 doesn't look like a failed layout */
  .pl-hero{min-height:271mm;padding:0;display:block;break-after:page;border:0}
  .pl-hero .container{min-height:271mm;display:flex;flex-direction:column;padding-top:52mm}
  .pl-hero h1{font-size:38pt;line-height:1.03;margin:9mm 0 8mm}
  .pl-hero p{font-size:10.5pt;line-height:1.6;max-width:110mm;color:var(--ink-soft)}
  .cat-cover-mark{display:flex;align-items:center;gap:4mm;margin-bottom:16mm}
  .cat-cover-mark img{width:14mm;height:auto}
  .cat-cover-name{display:flex;flex-direction:column;font-family:'Cormorant Garamond',serif;font-size:13pt;letter-spacing:.22em;color:var(--plum)}
  .cat-cover-name span{font-family:'IBM Plex Mono',monospace;font-size:6pt;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:2mm}
  .cat-cover-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;max-width:152mm;margin-top:auto;margin-bottom:16mm}
  .cat-cover-strip img{width:100%;aspect-ratio:1/1;object-fit:cover}
  .cat-cover-foot{display:block;padding-top:6mm;border-top:1px solid var(--line)}
  .cat-cover-foot p{font-size:8.5pt;line-height:1.65;max-width:120mm;color:var(--ink-faint);margin:0 0 8mm}
  .cat-cover-foot .cat-cover-contact,.cat-back .cat-cover-contact{justify-content:flex-start;margin-top:0}
  .cat-cover-contact{display:flex;gap:8mm;font-family:'IBM Plex Mono',monospace;font-size:7pt;letter-spacing:.1em;color:var(--plum)}

  /* collection pages */
  .cat-section{break-before:page;padding:0}
  .cat-wide .pgrid{grid-template-columns:repeat(2,1fr);max-width:152mm}
  .cat-head{align-items:flex-start;margin-bottom:6mm;padding-bottom:4.5mm;border-bottom:1px solid var(--line)}
  .cat-head .section-title{font-size:23pt;margin:2mm 0 0;line-height:1.1}
  .cat-desc{font-size:9pt;line-height:1.6;max-width:118mm;margin-top:2.5mm}
  .cat-stamp{font-size:6.4pt;padding:0;margin-top:2.4mm;color:var(--gold)}

  .pgrid{grid-template-columns:repeat(3,1fr);gap:5mm}
  .pcard{break-inside:avoid}
  .pcard .pimg{aspect-ratio:1/1;background:none}
  .pcard:hover .pimg img{transform:none}
  .pmeta{padding-top:2.2mm}
  .pname{font-size:10.5pt;line-height:1.22}
  .pdesc{font-size:6.8pt;margin-top:1.2mm;letter-spacing:.02em}

  /* back page */
  .cta{background:none;border:0;text-align:left}
  .cat-back{padding-top:12mm;margin-top:10mm;border-top:1px solid var(--line)}
  .cat-back .cta-inner{max-width:none;margin:0}
  .cat-back h2{font-size:26pt;margin-bottom:5mm}
  .cat-back > .container > p{max-width:118mm;font-size:10pt;line-height:1.7;color:var(--ink-soft)}
  .cat-back .btn{display:none}
  .cat-back-steps{display:grid;gap:5mm;margin-top:9mm;max-width:152mm}
  .cat-back-steps div{border-top:1px solid var(--line);padding-top:4mm}
  .cat-back-steps b{display:block;font-family:'IBM Plex Mono',monospace;font-size:6.4pt;letter-spacing:.2em;color:var(--gold);margin-bottom:2mm}
  .cat-back-steps span{font-size:9pt;line-height:1.6;color:var(--ink-soft)}
}