/* ============================================================
   Stone Depot — "Slab Yard"
   The UI is deliberately achromatic. Every colour on the page
   comes from the stone photography, nothing else.
   ============================================================ */

:root{
  /* ground */
  --basalt:#131518;      /* page dark ground */
  --slate:#1B1F23;       /* raised panel on dark */
  --seam:#2B3138;        /* hairline on dark */
  --ash:#8A9299;         /* muted text on dark */
  --chalk:#EDEEEF;       /* primary text on dark */
  --paper:#F4F4F3;       /* light ground */
  --paper-2:#E9E9E7;     /* light panel */
  --grout:#D6D6D3;       /* hairline on light */
  --ink:#131518;         /* text on light */
  --ink-soft:#5C6469;    /* muted text on light */
  --wire:#5C7A88;        /* the one quiet accent: wet slate. links + focus only */

  --shell:min(1440px,100% - 2 * var(--gut));
  --gut:clamp(1.25rem,5vw,4.5rem);

  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --step--1:clamp(.75rem,.72rem + .12vw,.8125rem);
  --step-0:clamp(.9375rem,.9rem + .18vw,1rem);
  --step-1:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --step-2:clamp(1.375rem,1.2rem + .8vw,1.875rem);
  --step-3:clamp(1.875rem,1.5rem + 1.7vw,3rem);
  --step-4:clamp(2.125rem,1.35rem + 3.3vw,5.25rem);
  --step-5:clamp(2.375rem,1.05rem + 5.9vw,8.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--basalt);color:var(--chalk);
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--wire);outline-offset:3px;border-radius:1px}
::selection{background:var(--chalk);color:var(--basalt)}

.shell{width:var(--shell);margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.06em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- display type: expanded grotesque caps, architectural signage ---- */
.display{
  font-family:var(--f-display);font-variation-settings:'wdth' 125;
  font-weight:600;text-transform:uppercase;letter-spacing:.005em;
  line-height:.94;margin:0;
}
.eyebrow{
  font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);
}
.light .eyebrow{color:var(--ink-soft)}

/* ============================ header ============================ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem var(--gut);
  transition:background .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(19,21,24,.88);backdrop-filter:blur(14px);border-bottom-color:var(--seam)}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand svg{width:22px;height:22px;flex:none}
.brand b{
  font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;font-size:.9375rem;line-height:1;
}
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav a{
  font-size:var(--step--1);letter-spacing:.04em;color:var(--ash);
  padding:.4rem 0;position:relative;transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1px;
  background:currentColor;transition:right .3s var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--chalk)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav .btn{display:none}
.nav .btn::after{display:none}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;padding:.7rem 1.15rem;border:1px solid var(--seam);
  background:var(--chalk);color:var(--basalt);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{background:transparent;color:var(--chalk);border-color:var(--chalk)}
.btn--ghost{background:transparent;color:var(--chalk);border-color:var(--seam)}
.btn--ghost:hover{background:var(--chalk);color:var(--basalt);border-color:var(--chalk)}
.light .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.light .btn:hover{background:transparent;color:var(--ink)}
.burger{display:none;width:24px;height:24px;position:relative}
.burger span{position:absolute;left:2px;right:2px;height:1.5px;background:currentColor;transition:.3s var(--ease)}
.burger span:nth-child(1){top:7px}
.burger span:nth-child(2){bottom:7px}
.is-open .burger span:nth-child(1){top:11px;transform:rotate(45deg)}
.is-open .burger span:nth-child(2){bottom:11px;transform:rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block;order:3}
  .nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:1.25rem;
    background:var(--basalt);opacity:0;visibility:hidden;transition:.35s var(--ease);
    overflow-y:auto;padding:6.5rem 1.5rem 4rem;
  }
  /* :not(.btn) — otherwise the drawer CTA gets chalk text on a chalk fill */
  .nav a:not(.btn){font-size:var(--step-2);color:var(--chalk)}
  .is-open .nav{opacity:1;visibility:visible}
  .hdr > .btn{display:none}
  .nav .btn{display:inline-flex;color:var(--basalt);font-size:var(--step--1)}
  .nav .btn:hover{color:var(--chalk)}
}

/* ============================ hero ============================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__bed{position:absolute;inset:0}
.hero__bed img{
  width:100%;height:100%;object-fit:cover;
  animation:drift 24s var(--ease) infinite alternate;
}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.hero__bed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,21,24,.72) 0%,rgba(19,21,24,.28) 38%,rgba(19,21,24,.88) 100%);
}
.hero__inner{position:relative;width:var(--shell);margin-inline:auto;padding-block:0 clamp(2.5rem,6vh,5rem)}
.hero h1{font-size:var(--step-5);max-width:14ch}
.hero h1 .thin{font-variation-settings:'wdth' 125;font-weight:500;color:var(--ash)}
.hero__lede{
  margin-top:1.75rem;max-width:46ch;font-size:var(--step-1);color:#C6CBCE;line-height:1.55;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
/* the specimen label — names the actual stone you're looking at */
.specimen{
  position:absolute;inset-inline-end:var(--gut);
  /* clear the floating WhatsApp button, which shares this corner */
  bottom:calc(clamp(2.5rem,6vh,5rem) + 3.75rem);
  text-align:end;border-inline-end:1px solid rgba(237,238,239,.35);padding-inline-end:1rem;
  max-width:min(38ch,42vw);
}
.specimen dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.specimen dd{margin:.15rem 0 .75rem;font-size:var(--step-0);letter-spacing:.02em}
.specimen dd:last-child{margin-bottom:0}
@media (max-width:760px){.specimen{display:none}}

/* ============================ sections ============================ */
.sec{padding-block:clamp(4.5rem,11vh,9rem)}
.sec--light{background:var(--paper);color:var(--ink)}
.sec--panel{background:var(--slate)}
.sec__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,5vh,4rem);
}
.sec__head h2{font-size:var(--step-3);max-width:16ch}
.sec__head p{color:var(--ash);max-width:52ch}
.sec--light .sec__head p{color:var(--ink-soft)}
.rule{height:1px;background:var(--seam);border:0;margin:0}
.sec--light .rule{background:var(--grout)}
@media (max-width:820px){.sec__head{grid-template-columns:1fr;align-items:start}}

/* ================== THE INDEX — signature element ================== */
.index{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.index__list{border-top:1px solid var(--seam)}
.index__group{border-bottom:1px solid var(--seam)}
.index__gtitle{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.1rem 0 .6rem;font-family:var(--f-mono);font-size:var(--step--1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.index__row{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  width:100%;text-align:left;padding:.5rem 0;position:relative;
  color:var(--ash);transition:color .2s var(--ease),padding-left .3s var(--ease);
}
.index__row::before{
  content:"";position:absolute;left:0;top:50%;width:0;height:1px;
  background:var(--chalk);transition:width .3s var(--ease);
}
.index__row:hover,.index__row.is-active{color:var(--chalk);padding-left:2rem}
.index__row:hover::before,.index__row.is-active::before{width:1.25rem}
.index__row span:first-child{font-size:var(--step-1);letter-spacing:.01em}
.index__row .sku{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;color:var(--ash)}
.index__pane{position:sticky;top:6rem;aspect-ratio:4/5;background:var(--slate);overflow:hidden}
.index__pane img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);
}
.index__pane img.is-shown{opacity:1}
.index__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.25rem;
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  background:linear-gradient(transparent,rgba(19,21,24,.85));
}
.index__cap strong{font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:var(--step-1)}
@media (max-width:900px){
  .index{grid-template-columns:1fr}
  .index__pane{display:none}
  .index__row:hover,.index__row.is-active{padding-left:0}
  .index__row:hover::before,.index__row.is-active::before{width:0}
}

/* ============================ tiles / cards ============================ */
.grid{display:grid;gap:clamp(1rem,2vw,1.75rem)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}

.tile{position:relative;display:block;overflow:hidden;background:var(--slate)}
.tile__img{aspect-ratio:3/4;overflow:hidden}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.05)}
.tile__body{
  position:absolute;inset:auto 0 0;padding:1.25rem;
  background:linear-gradient(transparent,rgba(19,21,24,.9));
}
.tile__body h3{
  font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:var(--step-1);color:var(--chalk);
}
.tile__body p{font-size:var(--step--1);color:#B9BFC3;margin-top:.35rem}
.tile__n{
  position:absolute;top:1rem;left:1rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.12em;color:var(--chalk);mix-blend-mode:difference;
}

/* stone card (catalog grid) — names run long, so the body grows and the
   line label always sits on the baseline of the card */
.stone{display:flex;flex-direction:column;background:var(--slate)}
.stone__img{aspect-ratio:1;overflow:hidden;background:var(--seam);flex:none}
.stone__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.stone:hover .stone__img img{transform:scale(1.06)}
.stone__body{display:flex;flex-direction:column;gap:.5rem;flex:1;padding:.9rem 1rem 1rem;border-top:1px solid var(--seam)}
.stone__meta{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.stone__meta h3{font-size:var(--step-0);font-weight:500;letter-spacing:.01em;line-height:1.3}
.stone__meta .sku{font-family:var(--f-mono);font-size:.6875rem;color:var(--ash);letter-spacing:.06em;white-space:nowrap;flex:none}
.stone__line{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-top:auto}

/* ============================ forms table (blocks/slabs/tiles/mosaic) ============================ */
.spec{width:100%;border-collapse:collapse;font-size:var(--step-0)}
.spec caption{text-align:left;padding-bottom:1rem;color:var(--ink-soft);font-size:var(--step--1)}
.spec th,.spec td{text-align:left;padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--grout);vertical-align:top}
.spec thead th{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;border-bottom-color:var(--ink);
}
.spec td:first-child{font-weight:500}
.spec td.num{font-family:var(--f-mono);font-size:var(--step--1);white-space:nowrap}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* a two-column spec table reads better wrapped than side-scrolled on a phone */
@media (max-width:620px){
  .spec td.num{white-space:normal}
  .spec th,.spec td{padding-right:.75rem}
}

/* ============================ split feature ============================ */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(1.5rem,4vw,4rem);align-items:center}
.split__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--slate)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:var(--step-3);margin-bottom:1.25rem;max-width:15ch}
.split p+p{margin-top:1rem}
.split .body{color:var(--ash);max-width:54ch}
.sec--light .split .body{color:var(--ink-soft)}

/* ============================ figures / facts ============================ */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1px;background:var(--seam);border-block:1px solid var(--seam)}
.facts div{background:var(--basalt);padding:1.75rem 1.25rem}
.sec--light .facts{background:var(--grout);border-color:var(--grout)}
.sec--light .facts div{background:var(--paper)}
.facts dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:.6rem}
.sec--light .facts dt{color:var(--ink-soft)}
.facts dd{margin:0;font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:600;font-size:var(--step-2);line-height:1;text-transform:uppercase}
.facts dd small{display:block;font-family:var(--f-body);font-size:var(--step--1);font-weight:400;text-transform:none;letter-spacing:0;color:var(--ash);margin-top:.5rem;line-height:1.5}
.sec--light .facts dd small{color:var(--ink-soft)}

/* ============================ video ============================ */
.film{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--slate);width:100%;border:0;padding:0;display:block}
.film img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .3s var(--ease)}
.film:hover img{transform:scale(1.03)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(237,238,239,.7);
  background:rgba(19,21,24,.35);backdrop-filter:blur(3px);transition:.3s var(--ease);
}
.film:hover .film__play{background:var(--chalk);border-color:var(--chalk)}
.film__play svg{width:20px;height:20px;fill:var(--chalk);transition:fill .3s var(--ease);margin-left:3px}
.film:hover .film__play svg{fill:var(--basalt)}
.film__label{position:absolute;left:1.25rem;bottom:1.25rem;text-align:left}

/* ============================ gallery ============================ */
.gal{columns:3;column-gap:clamp(1rem,2vw,1.5rem)}
.gal figure{break-inside:avoid;margin:0 0 clamp(1rem,2vw,1.5rem);position:relative;overflow:hidden;background:var(--slate)}
.gal img{width:100%;height:auto;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{
  position:absolute;inset:auto 0 0;padding:1rem;font-size:var(--step--1);color:#C6CBCE;
  background:linear-gradient(transparent,rgba(19,21,24,.9));opacity:0;transition:opacity .3s var(--ease);
}
.gal figure:hover figcaption{opacity:1}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:560px){.gal{columns:1}}

/* ============================ product detail ============================ */
.pd{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.pd__stage{position:relative;aspect-ratio:1;overflow:hidden;background:var(--slate)}
.pd__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.pd__stage img.is-shown{opacity:1}
.pd__thumbs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.75rem}
.pd__thumbs button{width:72px;aspect-ratio:1;overflow:hidden;border:1px solid transparent;opacity:.55;transition:.25s var(--ease)}
.pd__thumbs button img{width:100%;height:100%;object-fit:cover}
.pd__thumbs button:hover{opacity:.85}
.pd__thumbs button[aria-current="true"]{opacity:1;border-color:var(--chalk)}
.pd__aside h1{font-size:var(--step-3);margin-bottom:.85rem}
.pd__desc{color:var(--ash);margin-bottom:1.75rem}
.pd__dl{border-top:1px solid var(--seam)}
.pd__dl div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--seam)}
.pd__dl dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.pd__dl dd{margin:0;font-size:var(--step-0)}
@media (max-width:860px){.pd{grid-template-columns:1fr}.pd__dl div{grid-template-columns:7.5rem 1fr}}

/* ============================ filters ============================ */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.chip{
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem .9rem;border:1px solid var(--seam);color:var(--ash);
  transition:.25s var(--ease);
}
.chip:hover{color:var(--chalk);border-color:var(--chalk)}
.chip[aria-pressed="true"]{background:var(--chalk);color:var(--basalt);border-color:var(--chalk)}
.count{font-family:var(--f-mono);font-size:var(--step--1);color:var(--ash);margin-bottom:1.5rem}

/* ============================ form ============================ */
.form{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--wide{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--step-0);color:var(--chalk);background:transparent;
  border:0;border-bottom:1px solid var(--seam);padding:.7rem 0;
  transition:border-color .25s var(--ease);border-radius:0;
}
.field textarea{resize:vertical;min-height:7rem}
.field select{color:var(--chalk)}
.field select option{background:var(--basalt);color:var(--chalk)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--chalk)}
.field input::placeholder,.field textarea::placeholder{color:#5D666C}
.formnote{font-size:var(--step--1);color:var(--ash);grid-column:1/-1}

/* ============================ footer ============================ */
.ftr{background:var(--basalt);border-top:1px solid var(--seam);padding-block:clamp(3rem,7vh,5rem) 2rem}
.ftr__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(1.5rem,3vw,3rem);padding-bottom:3rem}
.ftr h4{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);font-weight:400;margin-bottom:1rem}
.ftr li{margin-bottom:.55rem}
.ftr li a{color:#C6CBCE;font-size:var(--step-0);transition:color .2s var(--ease)}
.ftr li a:hover{color:var(--chalk)}
.ftr__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-top:1.75rem;border-top:1px solid var(--seam);color:var(--ash);font-size:var(--step--1)}
.ftr__brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.ftr__brand svg{width:26px;height:26px}
.ftr__brand b{font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:1rem}

/* ============================ page head ============================ */
.phead{padding-top:clamp(7rem,14vh,10rem);padding-bottom:clamp(2rem,5vh,3.5rem)}
.phead h1{font-size:var(--step-4);max-width:18ch;margin-top:1rem}
.phead p{color:var(--ash);max-width:56ch;margin-top:1.25rem;font-size:var(--step-1)}
.crumb{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.crumb a:hover{color:var(--chalk)}

/* ============================ reveal ============================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

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

/* ============================================================
   Opening sequence — a diamond wire cuts a quarry block into
   three slabs; the block topples; the slabs become the mark.
   Pure CSS/SVG. Skipped entirely under reduced motion.
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:200;background:var(--basalt);
  display:grid;place-items:center;overflow:hidden;
  animation:introOut .7s var(--ease) 5.1s forwards;
}
.intro[hidden]{display:none !important}
.intro__stage{width:min(92vw,1100px);aspect-ratio:3/2}
.intro svg{width:100%;height:100%;display:block;overflow:visible}

/* the quarry face behind it all */
.i-face{opacity:0;animation:fadeIn .9s var(--ease) .1s forwards, faceOut .9s var(--ease) 3.1s forwards}
@keyframes faceOut{to{opacity:0}}
.i-dustfield{opacity:0;animation:fadeIn 1.2s var(--ease) 1.6s forwards}

/* diamond wire sweeping down through the block */
.i-wire{opacity:0;transform:translateY(-260px)}
.i-wire--1{animation:wireCut 1s cubic-bezier(.3,0,.2,1) .5s forwards}
.i-wire--2{animation:wireCut 1s cubic-bezier(.3,0,.2,1) .95s forwards}
@keyframes wireCut{
  0%{opacity:0;transform:translateY(-260px)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(0)}
}
/* the kerf each pass opens */
.i-kerf{opacity:0}
.i-kerf--1{animation:fadeIn .18s linear 1.32s forwards}
.i-kerf--2{animation:fadeIn .18s linear 1.77s forwards}

/* the block topples off the bench */
.i-block{transform-origin:22% 100%;animation:topple 1.5s cubic-bezier(.5,.05,.75,.6) 2.1s forwards}
@keyframes topple{
  0%{transform:rotate(0) translateY(0)}
  22%{transform:rotate(-5deg) translateY(0)}
  55%{transform:rotate(14deg) translateY(26px)}
  100%{transform:rotate(30deg) translateY(210px);opacity:0}
}
/* dust kicked up on impact */
.i-dust{opacity:0;transform-origin:50% 100%}
.i-dust circle{fill:#6E7378}
.i-dust--a{animation:dust 1.5s var(--ease) 3.0s forwards}
.i-dust--b{animation:dust 1.7s var(--ease) 3.15s forwards}
.i-dust--c{animation:dust 1.6s var(--ease) 3.3s forwards}
@keyframes dust{
  0%{opacity:0;transform:translateY(0) scale(.4)}
  25%{opacity:.5}
  100%{opacity:0;transform:translateY(-90px) scale(2.6)}
}

/* the three cut slabs resolve into the logo mark */
.i-bar{opacity:0}
.i-bar--1{animation:barIn .75s cubic-bezier(.2,.8,.3,1) 3.25s forwards}
.i-bar--2{animation:barIn .75s cubic-bezier(.2,.8,.3,1) 3.4s forwards}
.i-bar--3{animation:barIn .75s cubic-bezier(.2,.8,.3,1) 3.55s forwards}
@keyframes barIn{
  0%{opacity:0;transform:translateX(-90px) scaleX(.4)}
  60%{opacity:1}
  100%{opacity:1;transform:translateX(0) scaleX(1)}
}
.i-word{opacity:0;animation:wordIn .9s var(--ease) 4.05s forwards}
@keyframes wordIn{from{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:.22em}}
.i-rule{opacity:0;transform-origin:left center;animation:ruleIn .8s var(--ease) 4.3s forwards}
@keyframes ruleIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

@keyframes fadeIn{to{opacity:1}}
@keyframes introOut{to{opacity:0;visibility:hidden}}

.intro__skip{
  position:absolute;right:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,4vw,2.5rem);
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);border:1px solid var(--seam);padding:.6rem 1rem;background:transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.intro__skip:hover{color:var(--chalk);border-color:var(--chalk)}
.intro__cap{
  position:absolute;left:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,4vw,2.5rem);
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:#4E565C;
}
/* hold the page still while the sequence runs */
body.intro-on{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .intro{display:none !important}
}

/* ============================================================
   Stone Depot — navigation, WhatsApp, knowledge base, RTL
   ============================================================ */

/* ---------------- mega menu ---------------- */
.nav__item{position:relative}
.nav__trigger{
  display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--1);
  letter-spacing:.04em;color:var(--ash);padding:.4rem 0;transition:color .2s var(--ease);
}
.nav__trigger:hover,.nav__item:focus-within .nav__trigger,.nav__item[data-open] .nav__trigger{color:var(--chalk)}
.nav__trigger svg{width:9px;height:9px;fill:currentColor;transition:transform .25s var(--ease)}
.nav__item[data-open] .nav__trigger svg{transform:rotate(180deg)}
.mega{
  position:absolute;inset-inline-start:50%;top:calc(100% + .9rem);transform:translateX(-50%) translateY(-6px);
  min-width:min(74vw,640px);background:var(--slate);border:1px solid var(--seam);
  padding:1.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 2rem;
  opacity:0;visibility:hidden;transition:.25s var(--ease);z-index:70;
}
.nav__item:hover .mega,.nav__item:focus-within .mega,.nav__item[data-open] .mega{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.mega h4{
  grid-column:1/-1;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);font-weight:400;margin-bottom:.4rem;
}
.mega a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem .6rem;color:#C6CBCE;font-size:var(--step-0);transition:.2s var(--ease)}
.mega a:hover{background:var(--seam);color:var(--chalk)}
.mega a span{font-family:var(--f-mono);font-size:.625rem;color:var(--ash)}
.mega__sub{grid-column:1/-1;border-top:1px solid var(--seam);margin-top:.6rem;padding-top:.6rem;
  display:flex;flex-wrap:wrap;gap:.4rem}
.mega__sub a{padding:.35rem .7rem;border:1px solid var(--seam);font-size:.75rem}

/* ---------------- language switcher ---------------- */
.lang{position:relative}
.lang__btn{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ash);border:1px solid var(--seam);
  padding:.55rem .75rem;transition:.25s var(--ease);
}
.lang__btn:hover,.lang[data-open] .lang__btn{color:var(--chalk);border-color:var(--chalk)}
.lang__btn svg{width:13px;height:13px;fill:currentColor}
.lang__menu{
  position:absolute;inset-inline-end:0;top:calc(100% + .5rem);background:var(--slate);
  border:1px solid var(--seam);min-width:11rem;padding:.35rem;z-index:80;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s var(--ease);
}
.lang[data-open] .lang__menu,.lang:focus-within .lang__menu{opacity:1;visibility:visible;transform:none}
.lang__menu a{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .7rem;
  color:#C6CBCE;font-size:var(--step-0);transition:.2s var(--ease)}
.lang__menu a:hover{background:var(--seam);color:var(--chalk)}
.lang__menu a[aria-current]{color:var(--chalk)}
.lang__menu a code{font-family:var(--f-mono);font-size:.625rem;color:var(--ash);text-transform:uppercase}

/* ---------------- WhatsApp ---------------- */
.wa{
  position:fixed;inset-inline-end:clamp(1rem,3vw,2rem);inset-block-end:clamp(1rem,3vw,2rem);
  z-index:90;display:inline-flex;align-items:center;gap:.6rem;
  background:#25D366;color:#0B141A;padding:.85rem 1.1rem;border-radius:999px;
  box-shadow:0 6px 28px rgba(0,0,0,.42);font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wa:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,0,0,.5)}
.wa svg{width:20px;height:20px;fill:currentColor;flex:none}
.wa__label{display:inline}
@media (max-width:640px){
  .wa{padding:.9rem;border-radius:50%}
  .wa__label{display:none}
  /* keep the floating button clear of the last line of content */
  main{padding-bottom:4.5rem}
}

/* ---------------- stock table ---------------- */
.stock{width:100%;border-collapse:collapse;font-size:var(--step-0)}
.stock th,.stock td{text-align:start;padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--seam)}
.stock thead th{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);font-weight:400;border-bottom-color:var(--chalk)}
.stock td.num{font-family:var(--f-mono);font-size:var(--step--1);white-space:nowrap}
.stock tbody tr:hover{background:var(--slate)}
.sec--light .stock th,.sec--light .stock td{border-bottom-color:var(--grout)}
.sec--light .stock thead th{color:var(--ink-soft);border-bottom-color:var(--ink)}
.sec--light .stock tbody tr:hover{background:var(--paper-2)}
@media (max-width:620px){.stock td.num{white-space:normal}}

/* ---------------- knowledge base ---------------- */
/* exactly 10 stages: 5x2 on desktop, 2x5 on mobile — no orphan cells */
.kb-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--seam);border:1px solid var(--seam)}
.kb-stage{background:var(--basalt);padding:1.4rem 1.1rem;display:block;min-width:0;
  transition:background .25s var(--ease)}
.kb-stage:hover{background:var(--slate)}
.kb-stage b{display:block;font-family:var(--f-display);font-variation-settings:'wdth' 112;
  font-weight:600;text-transform:uppercase;font-size:var(--step-0);letter-spacing:.02em;
  margin:.5rem 0 .3rem;line-height:1.1;
  /* German and Japanese stage names run long — let them wrap rather than clip */
  overflow-wrap:anywhere;hyphens:auto}
.kb-stage span{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.14em;color:var(--ash)}
@media (max-width:1000px){.kb-stages{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.kb-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}

.kb-list{border-top:1px solid var(--seam)}
.kb-head{display:flex;align-items:baseline;gap:.75rem;margin:2.5rem 0 0;padding:1.1rem 0 .6rem;
  border-bottom:1px solid var(--seam);font-family:var(--f-display);
  font-variation-settings:'wdth' 125;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:var(--step-1);scroll-margin-top:6rem}
.kb-head:first-child{margin-top:0}
.kb-head span{font-family:var(--f-mono);font-size:.6875rem;color:var(--ash);font-weight:400;letter-spacing:.12em}
.kb-head em{margin-inline-start:auto;font-family:var(--f-mono);font-size:.6875rem;font-style:normal;
  color:var(--ash);letter-spacing:.12em}
.kb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--seam);transition:padding-inline-start .3s var(--ease)}
.kb-row:hover{padding-inline-start:1rem}
.kb-row__k{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash);white-space:nowrap}
.kb-row__t{font-size:var(--step-1);color:var(--chalk);line-height:1.35}
.kb-row__t small{display:block;font-size:var(--step--1);color:var(--ash);margin-top:.25rem;line-height:1.5}
.kb-row__n{font-family:var(--f-mono);font-size:.625rem;color:var(--ash)}
@media (max-width:700px){
  .kb-row{grid-template-columns:1fr;gap:.4rem}
  .kb-row__n{display:none}
}
.kb-search{width:100%;font:inherit;font-size:var(--step-1);color:var(--chalk);background:transparent;
  border:0;border-bottom:1px solid var(--seam);padding:.9rem 0;margin-bottom:2rem;border-radius:0}
.kb-search:focus{outline:0;border-bottom-color:var(--chalk)}
.kb-search::placeholder{color:#5D666C}

/* ---------------- article ---------------- */
.art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.art__body{max-width:70ch;min-width:0}
.art__body h2{font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:var(--step-2);margin:clamp(2.2rem,5vh,3.2rem) 0 1rem}
.art__body h2:first-child{margin-top:0}
.art__body p{margin-bottom:1.1rem;color:#C6CBCE}
.art__body p.lead{font-size:var(--step-1);color:var(--chalk)}
.art__body ul{margin:0 0 1.4rem;padding:0}
.art__body ul li{position:relative;padding-inline-start:1.4rem;margin-bottom:.6rem;color:#C6CBCE}
.art__body ul li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:.55rem;height:1px;background:var(--ash)}
.art__aside{position:sticky;top:6rem;border-top:1px solid var(--seam);padding-top:1rem}
.art__aside h3{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);font-weight:400;margin-bottom:.9rem}
.art__aside li{margin-bottom:.55rem}
.art__aside a{color:#C6CBCE;font-size:var(--step--1);transition:color .2s var(--ease)}
.art__aside a:hover{color:var(--chalk)}
.art__meta{display:flex;flex-wrap:wrap;gap:1rem;font-family:var(--f-mono);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:1.5rem}
.art__fig{margin:2rem 0}
.art__fig img{width:100%}
.art__fig figcaption{font-size:var(--step--1);color:var(--ash);margin-top:.6rem}
@media (max-width:900px){.art{grid-template-columns:1fr}.art__aside{position:static}}

/* ---------------- RTL ---------------- */
[dir="rtl"] .index__row::before{inset-inline-start:0}
[dir="rtl"] .index__row:hover,[dir="rtl"] .index__row.is-active{padding-inline-start:2rem;padding-left:0}
[dir="rtl"] .specimen{text-align:left;border-right:0;border-left:1px solid rgba(237,238,239,.35);
  padding-right:0;padding-left:1rem;right:auto;left:var(--gut)}
[dir="rtl"] .tile__n{left:auto;right:1rem}
[dir="rtl"] .film__label{left:auto;right:1.25rem;text-align:right}
[dir="rtl"] .intro__skip{right:auto;left:clamp(1rem,4vw,2.5rem)}
[dir="rtl"] .intro__cap{left:auto;right:clamp(1rem,4vw,2.5rem)}
[dir="rtl"] .hero h1,[dir="rtl"] .phead h1{text-align:right}
[dir="rtl"] .spec th,[dir="rtl"] .spec td,[dir="rtl"] .stock th,[dir="rtl"] .stock td{
  text-align:right;padding-right:0;padding-left:1rem}
[dir="rtl"] .art__body ul li::before{inset-inline-start:0}
/* Technical runs (dimensions, SKUs, measurements) are LTR data. Without this,
   bidi reorders "303x173x200 cm" to read 200x173x303 — wrong, not just ugly. */
[dir="rtl"] .num,
[dir="rtl"] .mono,
[dir="rtl"] .sku,
[dir="rtl"] .stock td.num,
[dir="rtl"] .spec td.num,
[dir="rtl"] .lang__menu code,
[dir="rtl"] .pd__dl dd.mono{direction:ltr;unicode-bidi:embed;text-align:right}


/* ---------------- mega menu inside the mobile drawer ---------------- */
@media (max-width:900px){
  .nav__item{width:100%;display:flex;flex-direction:column;align-items:center}
  .nav__trigger{font-size:var(--step-2);color:var(--chalk);letter-spacing:.01em}
  .nav__trigger svg{width:12px;height:12px}
  /* the drawer has no room for an overlay: expand in flow instead */
  .mega{
    position:static;transform:none;opacity:1;visibility:visible;min-width:0;width:100%;
    background:transparent;border:0;padding:.5rem 0 0;grid-template-columns:1fr;
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  }
  /* expand fully and let the drawer scroll — a nested scroller clips items */
  .nav__item[data-open] .mega{max-height:60rem;overflow:visible;transform:none}
  .mega h4{text-align:center}
  .mega a{justify-content:center;font-size:var(--step-1);padding:.55rem}
  .mega__sub{justify-content:center}
  .lang__menu{inset-inline-end:auto;inset-inline-start:50%;transform:translateX(-50%) translateY(-6px)}
  .lang[data-open] .lang__menu{transform:translateX(-50%)}
}