/* ============================================================
   ARTIZIA — Molten Quartz design system
   ============================================================ */
:root{
  --bg:#08080A; --bg-2:#0D0D11; --surface:#131319; --surface-2:#1A1A22;
  --text:#F3F0EA; --text-dim:#9C99A6; --text-faint:#615E6C;
  --line:rgba(243,240,234,.10); --line-2:rgba(243,240,234,.20);
  --opal-1:#8FD6C4; --opal-2:#C6B4E8; --opal-3:#F0BFA6; --pearl:#D9D4E0;
  --accent:#CDBBE6;
  --opal:linear-gradient(115deg,var(--opal-1),var(--opal-2) 48%,var(--opal-3));
  --maxw:1320px; --banner-h:0px;
  --serif:"Hoefler Text","Baskerville","Palatino Linotype","Georgia",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular","SF Mono",Consolas,"Liberation Mono","Roboto Mono",monospace;
  --e:cubic-bezier(.2,.7,.2,1); --e2:cubic-bezier(.76,0,.24,1);
}
:root[data-theme="light"]{
  --bg:#EDEAE3; --bg-2:#E5E1D8; --surface:#F5F2EC; --surface-2:#FBF9F4;
  --text:#181419; --text-dim:#5F5A66; --text-faint:#9B96A2;
  --line:rgba(24,20,25,.12); --line-2:rgba(24,20,25,.22);
  --pearl:#5A5568; --accent:#7C5EA8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media(hover:hover) and (pointer:fine){body{cursor:none}}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#0A0A0C}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--opal)}
.eyebrow.center{justify-content:center}
.mono{font-family:var(--mono);letter-spacing:.04em}
.vein-rule{height:1px;background:var(--opal);opacity:.5;border:0;margin:0}

/* ===== CURSOR ===== */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);z-index:999;
  pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .3s var(--e),height .3s var(--e),opacity .3s}
.cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;z-index:999;
  pointer-events:none;transform:translate(-50%,-50%);transition:width .35s var(--e),height .35s var(--e),border-color .35s,opacity .3s}
body.hovering .cursor{width:5px;height:5px}
body.hovering .cursor-ring{width:64px;height:64px;border-color:var(--accent)}
@media(hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}body{cursor:auto}}

/* ===== TOP ANNOUNCEMENT BANNER (all pages except home) ===== */
.topbanner{position:fixed;top:0;left:0;right:0;z-index:81;height:var(--banner-h);
  background:var(--opal);color:#0A0A0C;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:0 46px;overflow:hidden;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em}
.topbanner .bshine{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  transform:translateX(-120%);animation:bshine 5.5s var(--e) infinite}
@keyframes bshine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(220%)}}
.topbanner .btxt{position:relative;z-index:2;display:flex;align-items:center;gap:10px;text-align:center}
.topbanner .btxt strong{font-weight:600}
.topbanner .bgem{width:9px;height:9px;background:#0A0A0C;transform:rotate(45deg);flex:0 0 auto;animation:spin 9s linear infinite}
.topbanner a.blink{position:relative;z-index:2;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:opacity .3s}
.topbanner a.blink:hover{opacity:.7}
.topbanner .bx{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:3;background:none;border:0;color:#0A0A0C;font-size:15px;line-height:1;opacity:.65;transition:opacity .3s}
.topbanner .bx:hover{opacity:1}
body.has-banner{padding-top:var(--banner-h)}
body.has-banner .nav{top:var(--banner-h)}
@media(max-width:600px){.topbanner{font-size:10px;letter-spacing:.03em;padding:0 38px}.topbanner .bhide{display:none}}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px clamp(20px,5vw,72px);transition:padding .5s var(--e),border-color .5s}
/* the frosted bar lives on a pseudo-element, never on .nav itself: backdrop-filter
   makes an element the containing block for its position:fixed descendants, which
   would trap the full-screen mobile menu inside the nav bar once scrolled */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.2);
  transition:opacity .5s var(--e)}
.nav.scrolled::before{opacity:1}
.nav.scrolled{padding:12px clamp(20px,5vw,72px);border-bottom:1px solid var(--line)}
/* flex:none is load-bearing: .nav-right is a fixed ~271px, so on a narrow phone
   flex-shrink squeezed the brand box and object-fit:contain letterboxed the
   artwork down to 15px tall at 390px and 7px at 360px, far below its CSS height. */
.brand{display:flex;align-items:center;gap:12px;flex:none}

/* brand mark — the full lockup everywhere (nav, footer, preloader).
   Gold on the dark theme; a darkened variant on the light one, because the pale
   right-hand gradient only scores 1.2:1 against the cream background. */
.logo{display:block;width:auto;object-fit:contain}
.logo.lockup{height:44px}
/* the nav is 40px shorter when scrolled, so the mark has to fit the tight state */
.logo.nav-lockup{height:40px}
:root[data-theme="light"] .logo.lockup{content:url(../img/brand/logo-full-dark.png)}
@media(max-width:600px){.logo.nav-lockup{height:36px}}
@media(max-width:430px){.logo.nav-lockup{height:28px}}

/* Marudhar parent-brand mark — sits to the right of the Samples button, which
   pushes search / theme / Samples left. flex:none so the bar squeezes the gap
   rather than the mark. Hidden under 600px: the bar only has ~24px of slack at
   480px and the Artizia lockup is already being compressed there. */
.nav-marudhar{display:flex;align-items:center;flex:none;
  margin-left:8px;padding-left:18px;border-left:1px solid var(--line-2)}
.logo.marudhar-lockup{height:40px}
/* Red + chrome on transparent — legible on both themes, so no recolouring. */
@media(max-width:600px){.nav-marudhar{display:none}}

.brand .gem{width:12px;height:12px;background:var(--opal);transform:rotate(45deg);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent) 60%,transparent);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(405deg)}}
/* align-items:center on both — the bare links are flex children of .nav-links while
   Resources is wrapped in .nav-drop, so on the default `stretch` the two sat at
   different heights and the row read as crooked */
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{white-space:nowrap;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);
  padding:10px 16px;position:relative;transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;background:var(--opal)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-menu{position:absolute;top:100%;left:0;min-width:210px;background:var(--surface);border:1px solid var(--line-2);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.3s var(--e);z-index:90}
.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu a{display:block;padding:11px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);transition:.2s}
.nav-drop-menu a:hover{color:var(--text);background:var(--surface-2)}
.icn{width:40px;height:40px;border:1px solid var(--line-2);background:none;color:var(--text);display:grid;place-items:center;transition:.3s}
.icn:hover{border-color:var(--accent);color:var(--accent)}
.icn svg{width:18px;height:18px}

/* ---- surface search ---- */
.search{position:fixed;inset:0;z-index:120;display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(70px,12vh,140px) 20px 20px;background:rgba(6,6,8,.72);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility .35s}
:root[data-theme="light"] .search{background:rgba(237,234,227,.75)}
.search.open{opacity:1;visibility:visible}
.search-panel{width:100%;max-width:640px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:translateY(-12px);transition:transform .35s var(--e)}
.search.open .search-panel{transform:none}
.search-bar{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--line)}
.search-bar svg{width:18px;height:18px;flex:none;color:var(--text-faint);fill:none;stroke:currentColor}
.search-bar input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  font-family:var(--sans);font-size:16px;padding:6px 0}
.search-bar input::placeholder{color:var(--text-faint)}
/* the browser's own clear "✕" would sit next to ours */
.search-bar input::-webkit-search-cancel-button{display:none}
.search-results{max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain;padding:8px}
.search-hint{color:var(--text-faint);font-size:14px;padding:18px 10px;text-align:center}
.search-hint a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.sres{display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:10px;transition:background .2s}
.sres:hover,.sres.on{background:var(--bg-2)}
.sres-img{flex:none;width:58px;height:42px;border-radius:6px;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line)}
.sres-img img,.sres-img canvas{width:100%;height:100%;object-fit:cover;display:block}
.sres-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sres-txt b{font-weight:500;color:var(--text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres-txt span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.sres-go{flex:none;color:var(--text-faint);transition:.3s}
.sres:hover .sres-go,.sres.on .sres-go{color:var(--accent);transform:translateX(3px)}
.sres-all{display:block;text-align:center;padding:12px;margin-top:4px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);transition:color .3s}
.sres-all:hover{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.search,.search-panel{transition:none}}

/* collections: the "results for …" strip shown when the grid is filtered by ?q= */
.qbar[hidden]{display:none}   /* a class `display` otherwise overrides the hidden attribute */
.qbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 clamp(20px,2.4vw,30px);padding:12px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim)}
.qbar button{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;
  color:var(--text-faint);cursor:pointer;transition:color .3s}
.qbar button:hover{color:var(--accent)}
.no-hits{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--text-faint)}
.no-hits a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.tbtn{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;height:40px;padding:0 18px;border:1px solid var(--line-2);background:none;color:var(--text);transition:.3s}
.tbtn:hover{border-color:var(--accent)}
.tct{min-width:20px;height:20px;padding:0 6px;border-radius:11px;background:var(--opal);color:#0A0A0C;font-size:11px;font-weight:600;display:grid;place-items:center}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line-2);background:none;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:16px;height:1px;background:var(--text)}
button{cursor:none;font-family:inherit}
@media(hover:none),(pointer:coarse){button{cursor:pointer}}
.nav-links .close-x{display:none}
@media(max-width:1199px){
  .nav-links{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:center;gap:2px;
    padding:84px 20px calc(36px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);transition:transform .5s var(--e2);z-index:85}
  .nav-links.open{transform:none}
  /* top level reads as the menu; the Resources children sit under it as a sub-list */
  .nav-links a{font-size:15px;padding:12px;font-weight:600;color:var(--text)}
  .nav-drop-menu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;text-align:center;padding:0 0 6px}
  .nav-drop-menu a{font-size:13px;padding:9px 12px;font-weight:400;letter-spacing:.14em;color:var(--text-dim)}
  .nav-drop-menu a:hover{background:none;color:var(--text)}
  .burger{display:flex}
  .nav-links .close-x{display:grid;position:absolute;top:20px;right:22px;font-size:24px;z-index:1}
}
/* the page behind the open menu must not scroll under it */
body.menu-open{overflow:hidden}

/* ===== BUTTONS ===== */
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;
  padding:17px 30px;border:1px solid transparent;position:relative;overflow:hidden;transition:.4s var(--e);will-change:transform}
.btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px}
.btn-fill{background:var(--text);color:var(--bg)}
.btn-fill::before{content:"";position:absolute;inset:0;background:var(--opal);transform:translateY(101%);transition:transform .5s var(--e2);z-index:1}
.btn-fill:hover::before{transform:translateY(0)}
.btn-fill:hover{color:#0A0A0C}
.btn-line{border-color:var(--line-2);color:var(--text)}
.btn-line::before{content:"";position:absolute;inset:0;background:var(--opal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e2);z-index:1;opacity:.16}
.btn-line:hover{border-color:var(--accent)}
.btn-line:hover::before{transform:scaleX(1)}
.btn .arw{transition:transform .4s var(--e)}
.btn:hover .arw{transform:translateX(5px)}

/* ===== INTERIOR PAGE HERO ===== */
.page-hero{position:relative;padding:calc(88px + clamp(56px,9vw,128px)) 0 clamp(52px,7vw,92px);overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero.compact{padding:calc(88px + clamp(22px,3vw,42px)) 0 clamp(30px,4vw,52px)}
.page-hero .ph-vis{position:absolute;inset:0;z-index:0}
.page-hero .ph-vis canvas,.page-hero .ph-vis img{width:100%;height:100%;object-fit:cover}
/* readable on the left where the text sits, marble revealed on the right + subtle grain float */
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(95deg,var(--bg) 4%,color-mix(in srgb,var(--bg) 62%,transparent) 40%,color-mix(in srgb,var(--bg) 14%,transparent) 74%,transparent 100%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 58%,transparent) 0%,transparent 34%,transparent 52%,var(--bg) 100%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--pearl)}
:root[data-theme="light"] .page-hero .eyebrow{color:var(--accent)}
.page-hero h1{font-size:clamp(44px,8vw,104px);line-height:.95;letter-spacing:-.03em;margin-top:20px}
.page-hero h1 em{font-style:italic;background:var(--opal);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero .lead{color:var(--text-dim);font-size:clamp(15px,1.6vw,19px);max-width:56ch;margin-top:26px}

/* ===== SECTIONS ===== */
.pad{padding:clamp(72px,10vw,150px) 0}
.pad-sm{padding:clamp(48px,7vw,90px) 0}
.sec-head{max-width:60ch;display:flex;flex-direction:column;gap:20px}
.sec-head h2{font-size:clamp(30px,4.6vw,58px);line-height:1.03}
.sec-head h2 em,.cta h2 em{font-style:italic;color:var(--accent)}
.sec-head p{color:var(--text-dim);font-size:clamp(15px,1.5vw,17px);max-width:52ch}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
@media(max-width:820px){.grid-2{grid-template-columns:1fr;gap:34px}}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;white-space:nowrap;background:var(--bg-2)}
.marquee .track{display:inline-flex;gap:44px;animation:mq 34s linear infinite;will-change:transform}
.marquee span{font-family:var(--serif);font-size:clamp(24px,3.4vw,44px);color:var(--text-faint);display:inline-flex;align-items:center;gap:44px}
.marquee .dot{width:7px;height:7px;background:var(--opal);border-radius:50%}
@keyframes mq{to{transform:translateX(-50%)}}

/* stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stat{padding:clamp(34px,4vw,58px) 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--serif);font-size:clamp(46px,6.5vw,86px);line-height:.95;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:3px}
.stat .num .suf{font-family:var(--mono);font-size:.34em;letter-spacing:.02em;background:var(--opal);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-top:16px}
@media(max-width:820px){.stats-grid{grid-template-columns:1fr 1fr}.stat:nth-child(2n){border-right:0}}

/* ===== GALLERY / QUARRY ===== */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:44px}
.gal-drag{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;padding-bottom:24px;scroll-snap-type:x proximity;
  margin:0 calc(-1*clamp(20px,5vw,72px));padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px);cursor:grab;scrollbar-width:none}
.gal-drag::-webkit-scrollbar{display:none}
.gal-drag.dragging{cursor:grabbing;scroll-snap-type:none}
.gcard{flex:0 0 clamp(260px,34vw,400px);scroll-snap-align:center;position:relative}
.gcard .frame{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--surface)}
.gcard .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e);transform:scale(1.02)}
.gcard:hover .frame img{transform:scale(1.09)}
.gcard .gidx{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#F3F0EA;
  background:rgba(8,8,10,.4);backdrop-filter:blur(4px);padding:6px 11px;z-index:2}
.gcard .gover{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2;background:linear-gradient(transparent,rgba(6,6,8,.7));color:#F3F0EA}
.gcard .gcoll{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--pearl)}
.gcard h3{font-size:clamp(26px,3vw,36px);color:#fff;margin-top:4px}
.gcard .gview{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-top:12px;color:#fff;opacity:.7;transition:.4s}
.gcard:hover .gview{opacity:1;gap:14px}

/* product grid */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
@media(max-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pcard{position:relative}
.pcard .frame{aspect-ratio:4/5;overflow:hidden;position:relative;background:var(--surface)}
.pcard .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e);transform:scale(1.02)}
.pcard:hover .frame img{transform:scale(1.08)}
.pcard .add{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border:1px solid rgba(243,240,234,.4);
  background:rgba(8,8,10,.4);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;font-size:18px;opacity:0;transform:translateY(-6px);transition:.35s var(--e)}
.pcard:hover .add{opacity:1;transform:none}
.pcard .add:hover{border-color:var(--accent);color:var(--accent)}
.pcard .pn{font-family:var(--serif);font-size:19px;margin-top:14px}
.pcard .pc{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-top:5px;display:flex;justify-content:space-between;gap:8px}

/* ===== MASONRY GALLERY (Grainient-style product grid) ===== */
/* Uniform grid — every card is the same 375x250 frame (no masonry). Cards flex
   down on narrow screens but never grow past 375px. */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2vw,30px);justify-content:center}
@media(max-width:680px){.mgrid{grid-template-columns:1fr;max-width:375px;margin-inline:auto}}
.mcard{position:relative;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  max-width:375px;width:100%;margin-inline:auto;
  background:var(--surface);border:1px solid var(--line);isolation:isolate;transition:border-color .4s var(--e)}
.mcard:hover{border-color:var(--line-2)}
/* The frame is 1480x740 — the native shape of most of the slab photos, so they
   fill it exactly. The slab is object-fit:contain, so it is always shown whole
   whatever its aspect (sources run 1.5:1 to 2.9:1; cover would crop them). Any
   frame an odd-shaped slab leaves over is filled by the same photo, blurred. */
.mcard .mimg{display:block;position:relative;width:100%;aspect-ratio:1480/740;overflow:hidden;
  background:var(--bg)}
/* fill the frame edge-to-edge. Slab photos come in from 1.5:1 to nearly 3:1, so
   `contain` left most of them floating in a blurred bed instead of filling the
   card; `cover` crops the overflow so every card reads as one clean, full image.
   Admins frame the important part with the crop tool in the product editor. */
.mcard .mimg img{display:block;width:100%;height:100%;object-fit:cover}
/* the blurred backdrop only existed to pad a contained image — with cover the
   slab fills the frame and the bed is never seen, so skip painting (and blurring) it */
.mcard .mimg .bed{display:none}
.mcard .mimg .slab{position:relative;z-index:1;transition:transform .9s var(--e)}
.mcard:hover .mimg .slab{transform:scale(1.09)}
/* generated-marble fallback (no photo yet) — single img, same fill treatment */
.mcard:hover .mimg img:only-child{transform:scale(1.09);transition:transform .9s var(--e)}
.mcard .madd{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(243,240,234,.35);background:rgba(8,8,10,.4);backdrop-filter:blur(6px);color:#fff;
  display:grid;place-items:center;font-size:18px;opacity:0;transform:translateY(-6px);transition:.35s var(--e)}
.mcard:hover .madd{opacity:1;transform:none}
.mcard .madd:hover{border-color:var(--accent);color:var(--accent)}
/* the name lives below the image now, on the card itself — not over the slab */
.minfo{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:16px 18px 18px;border-top:1px solid var(--line);flex:1}
.minfo .mtxt{display:block}
.minfo .mtxt,.minfo .mcol{min-width:0}
.minfo{position:relative}
.mvs{position:absolute;top:17px;right:18px;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;line-height:1;font-weight:700;color:var(--text);white-space:nowrap;transition:color .3s}
.mvs svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mvs:hover{color:var(--accent)}
.minfo .mcoll{padding-right:92px}
/* 360° badge — top-right of the card image; the + sample button shifts left to make room */
.m360{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;font-weight:700;color:#fff;background:rgba(10,10,12,.6);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,border-color .3s,color .3s}
.m360:hover{background:var(--accent);border-color:var(--accent);color:#0A0A0C}
.mcard.has360 .madd{right:60px}
.minfo .mcoll{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px}
.minfo .mtitle{font-family:var(--serif);font-size:clamp(19px,1.9vw,22px);line-height:1.1;color:var(--text)}
.minfo .mdesc{font-size:12.5px;line-height:1.45;color:var(--text-dim);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.marw{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--text);position:relative;overflow:hidden;transition:.4s var(--e)}
.marw span{position:relative;z-index:2;transition:transform .4s var(--e)}
.marw::before{content:"";position:absolute;inset:0;background:var(--opal);transform:scale(0);border-radius:50%;transition:transform .4s var(--e2);z-index:1}
.mcard:hover .marw{border-color:transparent}
.mcard:hover .marw::before{transform:scale(1)}
.mcard:hover .marw{color:#0A0A0C}
.mcard:hover .marw span{transform:translateX(3px)}

/* filter bar */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px;
  border:1px solid var(--line-2);background:none;color:var(--text-dim);transition:.3s}
.filters button:hover{color:var(--text)}
.filters button.active{color:var(--bg);background:var(--text);border-color:var(--text)}
:root[data-theme="light"] .filters button.active{color:var(--bg)}

/* manifesto / why */
.mani{background:var(--bg-2)}
.mani-big{font-family:var(--serif);font-size:clamp(28px,4.6vw,58px);line-height:1.18;letter-spacing:-.02em;max-width:20ch}
.mani-big .w{display:inline-block;opacity:.16;transition:opacity .5s var(--e)}
.mani-big em{font-style:italic;background:var(--opal);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-list{margin-top:70px;border-top:1px solid var(--line)}
.why-row{display:grid;grid-template-columns:60px 1.1fr 1.3fr;gap:clamp(16px,3vw,54px);align-items:baseline;
  padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--line);transition:padding .4s var(--e)}
.why-row .i{font-family:var(--mono);font-size:12px;color:var(--accent)}
.why-row h4{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);font-weight:400;transition:color .3s}
.why-row p{color:var(--text-dim);font-size:15px}
.why-row:hover{padding-left:16px}.why-row:hover h4{color:var(--accent)}
@media(max-width:720px){.why-row{grid-template-columns:40px 1fr}.why-row p{grid-column:1/-1}}

/* featured */
.feat-vis{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--surface)}
.feat-vis canvas,.feat-vis img{width:100%;height:100%;display:block;object-fit:cover}
.feat-vis .badge{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#F3F0EA;background:rgba(8,8,10,.45);backdrop-filter:blur(4px);padding:7px 12px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 34px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line-2);color:var(--text-dim)}

/* trust */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tc{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(26px,3vw,40px);min-height:200px;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s}
.tc:hover{background:var(--surface)}
.tc .tm{width:34px;height:34px;border:1px solid var(--accent);display:grid;place-items:center;color:var(--accent);border-radius:50%}
.tc h4{font-family:var(--serif);font-size:21px;margin:20px 0 8px}
.tc p{font-size:13.5px;color:var(--text-dim)}
@media(max-width:820px){.trust{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.trust{grid-template-columns:1fr}}

/* cta */
.cta{text-align:center}
.cta h2{font-size:clamp(34px,6vw,80px);line-height:.98;max-width:16ch;margin:0 auto}
.cta h2 em{font-style:italic;background:var(--opal);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta p{color:var(--text-dim);max-width:46ch;margin:26px auto 38px}
.cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== PRODUCT PAGE ===== */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
  padding:calc(88px + 24px) 0 0;display:flex;gap:10px;flex-wrap:wrap}
.crumb b{color:var(--accent);font-weight:400}
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4.5vw,74px);padding:26px 0 clamp(64px,8vw,120px);align-items:start}
@media(max-width:900px){.pdp{grid-template-columns:1fr}}
.pgal{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
@media(max-width:900px){.pgal{position:static}}
.pmain{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--surface)}
.pmain canvas,.pmain img,.pmain .room{width:100%;height:100%;display:block;object-fit:cover}
/* hover-to-magnify. transform-origin follows the cursor, so the point under the
   pointer is the point that grows — and it composes correctly with object-fit. */
.pmain.zoomable{cursor:zoom-in}
.pmain.zoomable img{transition:transform .45s var(--e);will-change:transform}
.pmain.zooming img{transition:transform .25s var(--e)}
.pmain .zhint{position:absolute;right:12px;bottom:12px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#F3F0EA;background:rgba(8,8,10,.55);backdrop-filter:blur(4px);padding:6px 10px;border-radius:999px;
  opacity:.85;transition:opacity .3s var(--e)}
.pmain.zooming .zhint{opacity:0}
@media(hover:none){.pmain .zhint{display:none}}
.pthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pth{aspect-ratio:1/1;overflow:hidden;position:relative;border:1px solid var(--line);transition:border-color .3s}
.pth img,.pth .room{width:100%;height:100%;object-fit:cover}
.pth.active{border-color:var(--accent)}
/* 8px was unreadable on a phone; 9.5px is the floor the rest of the micro-type uses */
.pth .tl{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:5px 2px;background:rgba(8,8,10,.6);color:#F3F0EA}
.pinfo .eyebrow{margin-bottom:18px}
.pinfo h1{font-size:clamp(40px,6vw,72px);line-height:.96}
.pinfo .code{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--text-faint);margin-top:16px}
.pdesc{font-size:16px;color:var(--text-dim);margin:24px 0 28px;max-width:44ch}
.scg{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-bottom:30px}
.scg .s{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 20px}
.scg .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.scg .v{font-family:var(--serif);font-size:20px;margin-top:6px}
.pact{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pnote{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-faint);display:flex;gap:9px;align-items:center}
.pnote::before{content:"◆";color:var(--accent)}
.pvih{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}
.pvih svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.psec{border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;font-family:var(--serif);font-size:clamp(21px,2.4vw,28px)}
.acc>summary::-webkit-details-marker{display:none}
.acc .pm{font-family:var(--mono);font-size:22px;color:var(--accent);transition:transform .3s var(--e)}
.acc[open] .pm{transform:rotate(135deg)}
.acc .body{padding:0 0 32px;color:var(--text-dim)}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:680px){.apps{grid-template-columns:1fr 1fr}}
.app{background:var(--bg);padding:22px;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;transition:background .3s}
.app:hover{background:var(--surface)}
.app .an{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent)}
.app h4{font-family:var(--serif);font-size:19px}
.app p{font-size:12.5px;color:var(--text-dim)}
.spwrap{overflow-x:auto}
table.sp{width:100%;border-collapse:collapse;min-width:520px;font-size:14px}
table.sp th,table.sp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
table.sp thead th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--line-2)}
table.sp td.st{font-family:var(--mono);font-size:12px;color:var(--text-dim)}
table.sp td.rs{font-family:var(--mono);font-size:13px;text-align:right;color:var(--accent);font-variant-numeric:tabular-nums}
.pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:680px){.pairs{grid-template-columns:1fr}}
.pair .frame{aspect-ratio:3/4;overflow:hidden;background:var(--surface)}
.pair .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e);transform:scale(1.02)}
.pair:hover .frame img{transform:scale(1.08)}
.pair .pn{font-family:var(--serif);font-size:21px;margin-top:14px}
.pair .pc{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-top:5px}

/* room scene */
.room{position:relative;background:linear-gradient(180deg,#17151a,#0d0c10);overflow:hidden}
.room .wall{position:absolute;inset:0 0 44% 0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.15))}
.room .bk{position:absolute;left:0;right:0;bottom:36%;height:15%;overflow:hidden}
.room .ct{position:absolute;left:0;right:0;bottom:29%;height:8%;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.5);border-top:1px solid rgba(255,255,255,.14)}
.room .cab{position:absolute;left:0;right:0;bottom:0;height:29%;background:linear-gradient(180deg,#221f26,#131117)}
.room .bk img,.room .ct img{width:100%;height:100%;object-fit:cover}

/* content blocks (about / resources) */
.prose{max-width:70ch;color:var(--text-dim);font-size:16px;display:flex;flex-direction:column;gap:20px}
.prose h3{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);color:var(--text);margin-top:14px}
.prose b{color:var(--text)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.value-grid{grid-template-columns:1fr}}
.value-cell{background:var(--bg);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:12px;min-height:200px}
.value-cell .vi{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent)}
.value-cell h4{font-family:var(--serif);font-size:24px}
.value-cell p{font-size:14px;color:var(--text-dim)}
/* two certifications since the Kosher card was removed */
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:820px){.cert-grid{grid-template-columns:1fr}}
.cert{border:1px solid var(--line);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:16px;transition:.3s}
.cert:hover{border-color:var(--line-2);background:var(--surface)}
/* ===== STICKY CATALOGUE TAB (right edge, upper-middle) =====
   Injected by app.js only when a catalogue has actually been uploaded. */
/* the tab is a <button> now (it opens the gate rather than linking straight
   to the file), so the button defaults have to be neutralised */
button.cat-tab{border:0;font:inherit;cursor:pointer}
.cat-tab{position:fixed;right:0;top:38%;z-index:75;display:flex;align-items:center;gap:9px;
  padding:14px 12px 15px;border:1px solid var(--line-2);border-right:0;border-radius:12px 0 0 12px;
  background:rgba(8,8,10,.72);backdrop-filter:blur(10px);color:var(--text);
  writing-mode:vertical-rl;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;box-shadow:-8px 0 30px rgba(0,0,0,.35);
  transition:background .45s var(--e),border-color .45s var(--e),color .45s var(--e),padding-right .45s var(--e)}
:root[data-theme="light"] .cat-tab{background:rgba(255,255,255,.82)}
.cat-tab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.cat-tab:hover{background:var(--accent);border-color:var(--accent);color:#0A0A0C;padding-right:16px}
@media(max-width:700px){.cat-tab{top:auto;bottom:120px;font-size:9.5px;letter-spacing:.16em;padding:11px 9px 12px}}
@media(prefers-reduced-motion:reduce){.cat-tab{transition:none}}

/* ===== CONTACT · PLANT LOCATION MAP ===== */
.gmap{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--surface);aspect-ratio:16/8}
.gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Google only ships a light map. Re-tone it so it belongs on the dark theme
   instead of glaring out of it; the light theme leaves it untouched. */
.gmap iframe{filter:invert(92%) hue-rotate(180deg) saturate(.78) contrast(.92) brightness(.95)}
:root[data-theme="light"] .gmap iframe{filter:none}
/* top-right: Google puts its own place card top-left, the imagery thumbnail
   bottom-left and the attribution along the bottom — this is the free corner,
   and none of Google's required attribution may be covered. */
.gmap-card{position:absolute;right:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);z-index:2;
  max-width:min(360px,calc(100% - 28px));padding:20px 22px;border-radius:12px;
  border:1px solid var(--line);background:rgba(8,8,10,.82);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start}
:root[data-theme="light"] .gmap-card{background:rgba(255,255,255,.9)}
.gmap-card .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.gmap-card p{font-size:13.5px;line-height:1.65;color:var(--text-dim)}
@media(max-width:760px){.gmap{aspect-ratio:4/5}.gmap-card{left:12px;right:12px;top:12px;max-width:none}}

.cert .cmark{width:52px;height:52px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:22px}
/* the real certificate badge. The marks are supplied artwork — never recolour
   or crop them, so the image is contained and left alone. */
.cert .cbadge{height:104px;display:flex;align-items:center}
.cert .cbadge img{height:100%;width:auto;object-fit:contain;transition:transform .5s var(--e)}
.cert:hover .cbadge img{transform:scale(1.05)}
.cert h3{font-size:24px}
.cert p{font-size:14px;color:var(--text-dim)}
.compare{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
table.cmp th,table.cmp td{padding:16px;border-bottom:1px solid var(--line);text-align:left}
table.cmp thead th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
table.cmp tbody th{font-family:var(--serif);font-weight:400;font-size:16px}
table.cmp td .yes{color:var(--accent)}table.cmp td .no{color:var(--text-faint)}
table.cmp .col-artizia{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:26px 0;font-family:var(--serif);font-size:clamp(18px,2.2vw,24px)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .pm{font-family:var(--mono);font-size:20px;color:var(--accent);transition:transform .3s}
.faq-item[open] .pm{transform:rotate(135deg)}
.faq-item .fa{padding:0 0 26px;color:var(--text-dim);max-width:74ch}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:820px){.care-grid{grid-template-columns:1fr}}
.care{border:1px solid var(--line);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px}
.care .ci{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent)}
.care h4{font-family:var(--serif);font-size:22px}
.care ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--text-dim);font-size:14px}
.care li{display:flex;gap:10px}.care li::before{content:"—";color:var(--accent)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.cinfo{display:flex;flex-direction:column;gap:26px}
.cinfo .row{display:flex;flex-direction:column;gap:6px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.cinfo .row .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.cinfo .row .v{font-size:18px;color:var(--text)}
.cinfo .row a.v:hover{color:var(--accent)}

/* form */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--line-2);color:var(--text);padding:13px 15px;font-family:var(--sans);font-size:14px;width:100%;cursor:auto}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:460px){.g2{grid-template-columns:1fr}}
/* dial code + number share one outline so the pair reads as a single control */
.phone-row{display:flex;align-items:stretch}
.phone-row .dial{flex:0 0 auto;width:auto;min-width:88px;border-right:0;font-family:var(--mono);font-size:13px}
.phone-row input{flex:1 1 auto;min-width:0}
.phone-row .dial:focus{position:relative;z-index:1}
/* the native arrow is nearly invisible on the dark surface, so draw it in */
.field select{appearance:none;-webkit-appearance:none;padding-right:38px;background-repeat:no-repeat;
  background-position:right 13px center;background-size:14px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a968e' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.phone-row .dial{padding-right:26px;background-position:right 7px center}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);padding:clamp(60px,7vw,96px) 0 36px;margin-top:0}
.ftop{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:46px;border-bottom:1px solid var(--line)}
@media(max-width:820px){.ftop{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.ftop{grid-template-columns:1fr}}
.fb .brand{margin-bottom:18px}
.fb p{color:var(--text-dim);font-size:14px;max-width:32ch}
.fsoc{display:flex;gap:10px;margin-top:20px}
.fsoc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--text-dim);transition:.35s var(--e)}
.fsoc a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.fsoc a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.fcol h5{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.fcol a{display:block;color:var(--text-dim);font-size:14px;padding:6px 0;transition:color .25s,padding .25s}
.fcol a:hover{color:var(--text);padding-left:6px}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;font-family:var(--mono);font-size:11px;color:var(--text-faint)}

/* ===== TRAY ===== */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(115%);transition:transform .55s var(--e2);
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(20px);border-top:1px solid var(--accent)}
.tray.open{transform:translateY(0)}
.tin{max-width:var(--maxw);margin:0 auto;padding:16px clamp(20px,5vw,72px);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ttl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.ttl b{color:var(--accent);font-weight:400}
.tslots{display:flex;gap:12px;flex:1;min-width:200px}
.slot{width:58px;height:58px;border:1px dashed var(--line-2);position:relative;overflow:hidden;flex:0 0 auto}
/* empty slot — a "+" that takes you to the collections to pick a surface */
.slot.add{display:grid;place-items:center;color:var(--text-faint);font-size:20px;line-height:1;
  transition:.3s var(--e);cursor:pointer}
.slot.add:hover{border-color:var(--accent);border-style:solid;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.slot.add span{transition:transform .3s var(--e)}
.slot.add:hover span{transform:scale(1.25)}
.slot.on{border-style:solid;border-color:var(--line)}
.slot img{width:100%;height:100%;object-fit:cover}
.slot .rm{position:absolute;top:0;right:0;width:18px;height:18px;background:rgba(8,8,10,.75);color:#fff;border:0;font-size:12px;line-height:1;display:none;place-items:center}
.slot.on:hover .rm{display:grid}
.slot .sn{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:6.5px;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:2px 1px;background:rgba(8,8,10,.6);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tact{display:flex;gap:10px;align-items:center}
.tclose{background:none;border:0;color:var(--text-faint);font-family:var(--mono);font-size:15px}
@media(max-width:640px){.tin{gap:12px}.tact{width:100%}.tact .btn{flex:1;justify-content:center}}
.fly{position:fixed;z-index:200;width:48px;height:48px;overflow:hidden;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:all .75s var(--e2)}
.fly img{width:100%;height:100%;object-fit:cover}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(6,6,8,.68);backdrop-filter:blur(6px)}
.modal.open{display:flex}
/* scoped to .modal — the collections grid uses .mcard too, and this rule's
   padding was silently insetting every product photo inside its card */
.modal .mcard{position:relative;background:var(--bg);border:1px solid var(--line-2);max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:clamp(28px,4vw,44px)}
.modal .mcard .eyebrow{margin-bottom:12px}.modal .mcard h3{font-size:30px;margin-bottom:8px}
.modal .mcard #modal-body>p{color:var(--text-dim);font-size:14px;margin-bottom:22px}
.msel{font-family:var(--mono);font-size:11px;color:var(--text-dim);border:1px solid var(--line);padding:13px 15px;margin:6px 0 22px;background:var(--surface)}
.msel b{color:var(--accent);font-weight:400}
.mfoot{display:flex;gap:10px;margin-top:8px}.mfoot .btn{flex:1;justify-content:center}
/* Cancel button — black label, kept black on hover too (the id beats .btn-line) */
.mfoot #mCancel,.mfoot #mCancel:hover{color:#000}
.mx{position:absolute;top:16px;right:18px;background:none;border:0;color:var(--text-dim);font-size:24px;line-height:1}
.msucc{text-align:center;padding:14px 0}
.msucc .tick{width:58px;height:58px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:var(--accent);font-size:26px}

/* toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(40px);z-index:150;background:var(--surface-2);
  border:1px solid var(--line-2);color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:12px 20px;opacity:0;transition:.4s var(--e);pointer-events:none}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .rv{opacity:1;transform:none}.mani-big .w{opacity:1}
}

/* honeypot — off-screen rather than display:none, which bots know to skip.
   Nobody sees it; a bot that fills every field gives itself away. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}


/* ===== WORLD MAP (home S11 + about) — drives assets/js/worldmap.js ===== */
.worldmap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  /* must equal the map's own 1000x620, or the pins drift off their cities */
  aspect-ratio: 1000/620;
  background: radial-gradient(130% 130% at 50% 20%, var(--surface), var(--bg))
}

/* optional world-map image, sits under the pins */
.worldmap img.map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .5
}

/* the live map: one SVG, zoomed by animating its viewBox.
   non-scaling-stroke keeps every outline hairline-thin at any zoom. */
.worldmap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.wm-land {
  fill: var(--line-2);
  opacity: .5
}

.wm-india {
  fill: var(--accent);
  opacity: .16;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: .5;
  vector-effect: non-scaling-stroke
}

.wm-states {
  fill: none;
  stroke: var(--accent);
  stroke-width: .7;
  stroke-opacity: .38;
  vector-effect: non-scaling-stroke
}

.wm-raj {
  fill: var(--accent);
  opacity: .3;
  stroke: var(--accent);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke
}

/* drill-down chips */
.wm-steps {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.wm-steps button {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 10, 12, .55);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: .35s var(--e)
}

:root[data-theme="light"] .wm-steps button {
  background: rgba(255, 255, 255, .7)
}

.wm-steps button:hover {
  color: var(--text)
}

.wm-steps button.on {
  color: var(--obsidian, #0A0A0C);
  background: var(--accent);
  border-color: var(--accent)
}

.wm-pins {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none
}

/* sits on top of the accent-filled state, so it needs real contrast —
   --text-faint disappeared into the fill entirely */
.wm-note {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, 16px);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 8, 10, .55);
  backdrop-filter: blur(4px)
}

:root[data-theme="light"] .wm-note {
  background: rgba(255, 255, 255, .72)
}

.worldmap .dots {
  position: absolute;
  inset: 0;
  color: var(--line-2);
  opacity: .6;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.4px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(115% 90% at 50% 46%, #000 42%, transparent 76%);
  mask-image: radial-gradient(115% 90% at 50% 46%, #000 42%, transparent 76%)
}

.pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  z-index: 2
}

.pin::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: ping 2.6s var(--e) infinite
}

.pin.d1::after {
  animation-delay: .6s
}

.pin.d2::after {
  animation-delay: 1.2s
}

.pin.d3::after {
  animation-delay: 1.8s
}

@keyframes ping {
  0% {
    transform: scale(.5);
    opacity: .85
  }

  70%,
  100% {
    transform: scale(2.4);
    opacity: 0
  }
}

.worldmap .home-pin {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  transform: translate(-50%, -160%)
}

/* ============================================================
   BLOCKS — the section types used by admin-built pages (page.html)
   and the blog. Everything reuses the existing design tokens.
   ============================================================ */
.wrap-full{width:100%}
.blk-divider.sp-small{padding:clamp(20px,3vw,34px) 0}
.blk-divider.sp-medium{padding:clamp(40px,6vw,72px) 0}
.blk-divider.sp-large{padding:clamp(70px,10vw,130px) 0}
.blk+.blk{padding-top:0}
.blk-banner+.blk{padding-top:clamp(40px,6vw,80px)}

/* long-form rich text (blog body, text blocks) */
.prose-long{max-width:70ch;color:var(--text-dim);font-size:clamp(16px,1.6vw,17.5px);line-height:1.85}
.prose-long>*+*{margin-top:1.15em}
.prose-long>:first-child{margin-top:0}   /* a heading at the very top shouldn't be pushed down */
/* heading top margins are in em, so on a 38px H2 the old 1.8em was ~68px of empty
   space. These are the gap ABOVE a heading; the following paragraph's own 1.15em
   top margin is the (smaller) gap below it, which keeps the heading tied to its text */
.prose-long h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,38px);color:var(--text);margin-top:1.15em;line-height:1.18}
.prose-long h3{font-family:var(--serif);font-size:clamp(21px,2.4vw,27px);color:var(--text);margin-top:1em}
.prose-long h4{font-family:var(--serif);font-size:19px;color:var(--text);margin-top:.9em}
/* a heading directly after another heading (H2 then H3) needs only a small gap */
.prose-long h2+h3,.prose-long h2+h4,.prose-long h3+h4{margin-top:.5em}
.prose-long strong,.prose-long b{color:var(--text);font-weight:600}
.prose-long a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose-long a:hover{opacity:.75}
.prose-long ul,.prose-long ol{padding-left:1.3em}
.prose-long li+li{margin-top:.5em}
.prose-long img{border-radius:12px;border:1px solid var(--line);margin:1.6em 0}
.prose-long blockquote{border-left:1px solid var(--accent);padding-left:22px;margin-left:0;
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,24px);color:var(--text);line-height:1.45}
.prose-long code{font-family:var(--mono);font-size:.9em;background:var(--surface);padding:2px 6px;border-radius:4px}
.prose-long hr{border:0;height:1px;background:var(--line);margin:2.4em 0}

/* image block */
.fig{margin:0}
.fig img,.fig video{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.fig-normal{max-width:760px;margin-inline:auto}
.fig-full img,.fig-full video{border-radius:0;border-left:0;border-right:0}
.fig figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-faint);
  margin-top:12px;text-align:center}

/* gallery block */
.gal{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:clamp(10px,1.4vw,18px)}
.gal figure{margin:0;overflow:hidden;border-radius:12px;border:1px solid var(--line);aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.gal figure:hover img{transform:scale(1.06)}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.gal{grid-template-columns:1fr}}

/* cards block */
.bcards{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(max-width:900px){.bcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bcards{grid-template-columns:1fr}}
.bcard{background:var(--bg);display:flex;flex-direction:column;transition:background .5s var(--e)}
.bcard:hover{background:var(--surface)}
.bc-img{aspect-ratio:16/10;overflow:hidden}
.bc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.bcard:hover .bc-img img{transform:scale(1.06)}
.bc-body{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:11px;flex:1}
.bc-body .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent)}
.bc-body h4{font-family:var(--serif);font-size:22px}
.bc-body p{font-size:14.5px;color:var(--text-dim)}

/* quote block */
.bquote{margin:0;max-width:24ch;margin-inline:auto;text-align:center}
.bquote p{font-family:var(--serif);font-size:clamp(24px,3.6vw,44px);line-height:1.25;letter-spacing:-.02em}
.bquote cite{display:block;margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-faint);font-style:normal}

/* ===== BLOG ===== */
.tagbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3vw,40px)}
.tagbar button{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text-faint);
  cursor:pointer;transition:.3s var(--e)}
.tagbar button:hover{color:var(--text)}
.tagbar button.on{background:var(--accent);border-color:var(--accent);color:#0A0A0C}

/* grid-auto-rows:1fr — every row is as tall as the tallest card in the whole
   grid, so a short article and a long one still produce identical cards */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);grid-auto-rows:1fr}
@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.pcardx{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface);transition:.5s var(--e)}
.pcardx:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 26px 60px rgba(0,0,0,.3)}
/* the image frame is a fixed 16:10 window that never grows or shrinks with the
   card: flex:none stops it stretching, object-fit:cover fills it from any source
   image, large or small, without letterboxing or distortion */
.pc-img{position:relative;flex:none;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.pc-img img,.pc-img canvas,.pc-img>div{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-img img{transition:transform 1s var(--e)}
.pcardx:hover .pc-img img{transform:scale(1.06)}
.pc-body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.pc-date{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
/* clamped so an unusually long title or standfirst can't stretch its card —
   and, through the 1fr rows, every other card in the grid with it */
.pc-body h3{font-family:var(--serif);font-size:clamp(19px,2vw,23px);line-height:1.2;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.pc-body p{font-size:14.5px;color:var(--text-dim);flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.pc-go{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
  transition:color .3s}
.pcardx:hover .pc-go{color:var(--accent)}

/* blog pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(36px,4vw,56px)}
.pager button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;min-width:38px;height:38px;padding:0 10px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:transparent;
  color:var(--text-dim);cursor:pointer;transition:.3s var(--e)}
.pager button:hover:not(:disabled){border-color:var(--line-2);color:var(--text)}
.pager button.on{background:var(--accent);border-color:var(--accent);color:#0A0A0C}
/* the arrows stay in place at the ends rather than disappearing, so the row
   doesn't reflow every time you reach the first or last page */
.pager button:disabled{opacity:.32;cursor:default}
.pager .pg-gap{color:var(--text-faint);padding:0 2px;font-family:var(--mono);font-size:11px}

/* article page */
.art-hero{position:relative;padding:calc(88px + clamp(40px,6vw,80px)) 0 clamp(30px,4vw,50px);overflow:hidden;
  border-bottom:1px solid var(--line)}
.art-cover{position:absolute;inset:0;z-index:0}
.art-cover img{width:100%;height:100%;object-fit:cover;opacity:.5}
.art-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(8,8,10,.55) 45%,var(--bg) 100%)}
:root[data-theme="light"] .art-hero::after{background:linear-gradient(180deg,var(--bg) 0%,rgba(237,234,227,.6) 45%,var(--bg) 100%)}
.art-hero .wrap{position:relative;z-index:2;max-width:860px}
.art-back{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:26px;transition:color .3s}
.art-back:hover{color:var(--accent)}
.art-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.art-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);border:1px solid var(--line);padding:5px 10px;border-radius:999px}
.art-hero h1{font-size:clamp(32px,5.4vw,66px);line-height:1.03;letter-spacing:-.02em}
.art-hero .lead{color:var(--text-dim);font-size:clamp(16px,1.7vw,19px);max-width:60ch;margin-top:22px}
.art-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(44px,6vw,72px);padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--line)}
/* the reading column is centred on the page rather than pinned to the left of the
   wrap, so it sits under the centred hero instead of drifting away from it */
[data-page="post"] .prose-long,[data-page="post"] .art-foot{margin-left:auto;margin-right:auto;max-width:70ch}

/* ============================================================
   MOBILE NAV — collapsible submenus
   ------------------------------------------------------------
   Desktop (>=1200px) is deliberately untouched: the toggle button
   is hidden and the Resources dropdown keeps its hover behaviour
   exactly as before. Everything below sits inside the same
   max-width:1199px breakpoint the stylesheet already uses.

   Why 1199 and not the old 940: seven links, four controls and two
   logos need ~1140px. Below that the desktop bar was pushing the
   Samples button and the Marudhar mark off the right edge, so those
   widths now get the panel, which holds everything.

   The bug this fixes: .nav-drop stayed `display:flex` on mobile,
   so the "Resources" label and its submenu were laid out side by
   side in one row instead of stacking.
   ============================================================ */

/* hover drives the dropdown on desktop — no toggle needed there */
.nav-drop-toggle { display: none; }
/* the panel-only brand marks: the bar has its own pair */
.nav-m-brand, .nav-m-marudhar { display: none; }

@media (max-width: 1199px) {

  /* ---- the panel ---- */
  .nav-links {
    gap: 0;
    padding-top: 78px;
    justify-content: flex-start;
  }

  /* ---- top-level items: full-width, centred, comfortable tap targets ---- */
  .nav-links > a {
    width: 100%;
    text-align: center;
    padding: 15px 12px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* the active underline is positioned for the desktop bar — centre it here */
  .nav-links > a.active::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 34px;
    bottom: 8px;
  }

  /* ---- a group that owns a submenu ----
     flex-wrap puts label + chevron on row 1 and lets the submenu, at
     flex-basis:100%, wrap onto its own full-width row underneath.
     The padding-left offsets the chevron's footprint (32px + 8px gap) so the
     LABEL lands on the same centre axis as every other item — without it the
     label+chevron pair centres and the word visibly sits left of the others. */
  .nav-links .nav-drop {
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-left: 38px;   /* = toggle 30px + gap 8px, so the label centres exactly */
  }
  .nav-links .nav-drop > a {
    width: auto;
    padding: 15px 0;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-links .nav-drop > a.active::after {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    bottom: 8px;
  }

  /* ---- the disclosure toggle ---- */
  .nav-links .nav-drop-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: color .3s var(--e2), border-color .3s var(--e2);
  }
  .nav-links .nav-drop-toggle svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .38s var(--e2);
  }
  .nav-links .nav-drop.open .nav-drop-toggle {
    color: var(--accent);
    border-color: var(--accent);
  }
  .nav-links .nav-drop.open .nav-drop-toggle svg { transform: rotate(180deg); }

  /* ---- the submenu: collapsed by default, expands on tap ----
     the negative margin cancels the group's padding-left so the nested list
     still spans the full panel width and stays optically centred. */
  .nav-links .nav-drop-menu {
    flex-basis: 100%;
    width: calc(100% + 38px);
    margin-left: -38px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    text-align: center;
    transition: max-height .42s var(--e2), opacity .32s var(--e2), padding .42s var(--e2);
  }
  .nav-links .nav-drop.open .nav-drop-menu {
    max-height: 360px;
    opacity: 1;
    padding: 2px 0 10px;
  }
  /* nested items read as children: smaller, dimmer, lighter weight */
  .nav-links .nav-drop-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: .14em;
    color: var(--text-dim);
    background: none;
  }
  .nav-links .nav-drop-menu a:hover,
  .nav-links .nav-drop-menu a:active { color: var(--text); background: none; }

  /* ---- brand marks inside the open panel ----
     Artizia is pinned top-left, mirroring the close button at top-right, so the
     two read as one header row. Marudhar closes the panel bottom-right:
     margin-top:auto pushes it past the links (auto margins beat
     justify-content), align-self overrides the panel's align-items:center.
     If the links ever outgrow the panel the auto margin simply collapses and
     the mark follows them instead of overlapping. */
  .nav-links .nav-m-brand {
    display: flex;
    align-items: center;
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 1;
  }
  .nav-links .nav-m-brand img {
    height: 34px;
    width: auto;
    display: block;
  }
  .nav-links .nav-m-marudhar {
    display: flex;
    align-items: center;
    margin-top: auto;
    align-self: flex-end;
    padding-top: 30px;
  }
  .nav-links .nav-m-marudhar img {
    height: 34px;
    width: auto;
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links .nav-drop-menu,
  .nav-links .nav-drop-toggle svg { transition: none; }
}

/* ============================================================
   NAV BAR — reclaiming width for the brand on small phones
   ------------------------------------------------------------
   .brand is flex:none (see above), so the controls must give up the
   width instead. These live at the end of the sheet on purpose:
   .nav-right, .icn and .tbtn are all defined further up, and at equal
   specificity the later rule wins.
   ============================================================ */
@media(max-width:600px){
  .nav-right{gap:7px}
  .tbtn{padding:0 12px}
}
@media(max-width:430px){
  .nav-right{gap:5px}
  .icn,.burger{width:34px;height:34px}
  .tbtn{height:34px;padding:0 8px;font-size:10px;letter-spacing:.08em;gap:7px}
  .tct{min-width:18px;height:18px;padding:0 5px;font-size:10px}
}

/* Very narrow phones (<=360px): four controls plus a 4:1 lockup will not fit at
   the default rhythm, so the bar tightens its own padding and gap too. Before
   this the burger sat 120px off-screen here. */
@media(max-width:360px){
  .nav{padding:16px 12px;gap:8px}
  .nav.scrolled{padding:10px 12px}
  .nav-right{gap:4px}
  .icn,.burger{width:32px;height:32px}
  .tbtn{height:32px;padding:0 7px;font-size:9px;letter-spacing:.06em;gap:5px}
  .tct{min-width:16px;height:16px;padding:0 4px;font-size:9px}
  .logo.nav-lockup{height:24px}
}

/* Desktop bar in its narrowest band. Just above the panel breakpoint the seven
   links plus the controls run the full width, so the tracking and padding come
   in a notch. Scoped with a min-width so it can never reach the panel's own
   link sizing, which sits earlier in the sheet. Keep at the END of the file. */
@media(min-width:1200px) and (max-width:1320px){
  .nav{gap:10px}
  .nav-links a{letter-spacing:.1em;padding:10px 10px}
  .nav-dealer{letter-spacing:.1em;padding:10px 8px}
  .nav-right{gap:8px}
  .nav-marudhar{margin-left:4px;padding-left:12px}
}

/* Become a Dealer — bold, in the right-hand cluster beside the search icon on
   desktop. The panel keeps its own copy (.nav-m-dealer) so the mobile menu
   still lists it; each copy is visible in exactly one mode. Keep at the END
   of the file: the base .nav-links a rules sit far earlier. */
.nav-dealer{white-space:nowrap;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--text);padding:10px 14px;position:relative;transition:color .3s}
.nav-dealer:hover{color:var(--accent)}
.nav-dealer.active::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--opal)}
.nav-links .nav-m-dealer{display:none}
@media(max-width:1199px){
  .nav-dealer{display:none}
  .nav-links .nav-m-dealer{display:block;font-weight:700}
}