/* ==========================================================================
   OPALY — engineered quartz. Static site stylesheet.
   Palette: warm paper, near-black ink, single bronze accent.
   No web fonts — system stacks only, so the site works offline and on any device.
   ========================================================================== */

:root{
  --ink:#17130f;
  --ink-2:#3f3831;
  --muted:#7b726a;
  --line:#e3dcd3;
  --line-2:#efe9e1;
  --paper:#fbf9f6;
  --paper-2:#f4efe8;
  --paper-3:#ece5db;
  --accent:#8a5a33;
  --accent-2:#c19a6b;
  --white:#fff;
  --serif:"Hoefler Text","Baskerville","Palatino Linotype",Palatino,Georgia,"Songti SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --max:1240px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0;line-height:1.12}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(56px,8vw,112px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--paper{background:var(--paper-2)}
.section--dark{background:var(--ink);color:#f2ece4}
.section--line{border-top:1px solid var(--line)}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
}
.section--dark .eyebrow{color:var(--accent-2)}
.h1{font-size:clamp(34px,5.2vw,62px)}
.h2{font-size:clamp(27px,3.4vw,42px)}
.h3{font-size:clamp(20px,2vw,25px)}
.h4{font-size:18px}
.lead{font-size:clamp(16px,1.35vw,18.5px);line-height:1.68;color:var(--ink-2);max-width:56ch}
.small{font-size:13.5px;line-height:1.6;color:var(--muted)}
.tiny{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.section--dark .lead,.section--dark .small{color:#cdc4b8}
.section--dark .muted{color:#a89e91}
.measure{max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- head row ---------- */
.head-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px);
}
.head-row .lead{margin-top:14px}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;
  background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:2px;
  font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:#c9c0b5}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--light:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}
.btn--line-light{--bg:transparent;--fg:#f2ece4;--bd:rgba(255,255,255,.34)}
.btn--line-light:hover{background:#f2ece4;color:var(--ink);border-color:#f2ece4}
.btn--sm{min-height:40px;padding:0 18px;font-size:11.5px}
.btn--block{width:100%}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

.link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:5px;
  transition:color .22s var(--ease),gap .22s var(--ease);
}
.link:hover{color:var(--accent);gap:14px}
.section--dark .link:hover{color:var(--accent-2)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,246,.9);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;flex-direction:column;line-height:1;flex:0 0 auto}
.brand-mark{
  font-family:var(--serif);font-size:22px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);
}
.brand-sub{
  margin-top:6px;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav > a:not(.btn){
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  color:var(--ink-2);padding:6px 0;position:relative;white-space:nowrap;
}
.nav > a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav > a:not(.btn):hover{color:var(--ink)}
.nav > a:not(.btn):hover::after,
.nav > a.is-here::after{transform:scaleX(1)}
.nav > a.is-here{color:var(--ink)}

.nav-toggle{
  display:none;width:44px;height:44px;padding:0;
  background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.nav-toggle span{display:block;width:19px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease),opacity .25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:min(78vh,720px);
  border-bottom:1px solid var(--line);
}
.hero-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,7vw,96px) clamp(20px,4vw,56px) clamp(48px,7vw,96px) max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));
}
.hero-txt .h1{margin-bottom:22px;max-width:22ch}
.hero-txt .lead{max-width:44ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-facts{
  display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
}
.hero-facts li{font-size:12px;letter-spacing:.05em;color:var(--muted)}
.hero-facts b{
  display:block;font-family:var(--serif);font-size:20px;font-weight:400;
  color:var(--ink);letter-spacing:0;margin-bottom:3px;
}
.hero-img{position:relative;overflow:hidden;background:var(--paper-3);min-height:340px;margin:0}
.hero-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-img figcaption{
  position:absolute;left:22px;bottom:18px;z-index:2;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* ---------- stat strip ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line);
  padding-left:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
  padding-right:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
}
.stats li{
  padding:clamp(22px,3vw,34px) clamp(16px,2.4vw,30px);
  border-right:1px solid var(--line);
}
.stats li:last-child{border-right:0}
.stats b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.6vw,31px);line-height:1.15;margin-bottom:6px;
}
.stats span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}

/* ---------- colour card ---------- */
.card{
  display:block;position:relative;background:var(--white);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
  transition:border-color .25s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{border-color:#c7bcae;transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(23,19,15,.35)}
.card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-3)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.045)}
.card-body{padding:16px 18px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-name{font-family:var(--serif);font-size:18px;line-height:1.2}
.card-code{
  display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:7px;
}
.card-arrow{
  flex:0 0 auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .25s var(--ease),transform .25s var(--ease);
}
.card:hover .card-arrow{color:var(--accent);transform:translateX(4px)}

/* ---------- the colour wall ---------- */
.wall{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.8vw,22px);
}
.wcard{
  /* grid rather than flex: as a flex column the button reports no height of
     its own until the photograph has decoded, so the browser cannot place
     the cards and fetches every thumbnail on the page in one go (all 87,
     2.3 MB, instead of the 24 nearest the viewport). Grid resolves the row
     heights from the img's own width/height and lazy loading behaves. */
  display:grid;gap:9px;align-content:start;text-align:left;
  padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;
  /* Even with grid rows resolved, Chrome still treated all 87 cards as
     "near the viewport" and pulled 2.7 MB in one pass. content-visibility
     makes it skip layout and paint for cards that are off-screen, which
     puts lazy loading back in charge. contain-intrinsic-size reserves the
     space so the scrollbar does not jump as cards get skipped. */
  content-visibility:auto;
  contain-intrinsic-size:auto 300px;
}
.wcard-img{
  display:block;overflow:hidden;background:var(--paper-3);border-radius:2px;
  border:1px solid var(--line);
}
.wcard-img img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.wcard:hover .wcard-img img{transform:scale(1.035)}
.wcard:hover .wcard-img{border-color:#c7bcae}
.wcard-meta{display:block}
.wcard-meta b{
  display:block;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.02em;color:var(--ink);
}
/* the mill code rides beside the name: small, quiet, but always on the card */
.wcard-meta b em{
  font-style:normal;font-weight:500;font-size:10px;letter-spacing:.07em;
  color:var(--muted);margin-left:5px;
}
.wcard-meta i{
  display:block;font-style:normal;font-size:11.5px;line-height:1.45;
  color:var(--muted);margin-top:3px;
}
@media (max-width:1040px){.wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* colour list under the wall */
.flag-links{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid var(--line);
}
.flag-links a{
  display:flex;flex-direction:column;gap:4px;padding:15px 0;
  border-bottom:1px solid var(--line-2);
}
.flag-links b{font-family:var(--serif);font-size:16px;font-weight:400}
.flag-links span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.flag-links a:hover b{color:var(--accent)}
@media (max-width:820px){.flag-links{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.flag-links{grid-template-columns:1fr}}

/* ---------- slab lightbox ---------- */
.lb{position:fixed;inset:0;z-index:90;background:rgba(12,10,8,.93);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.lb[hidden]{display:none}
.lb-panel{
  position:relative;background:#151210;border-radius:3px;overflow:hidden;
  max-width:min(1080px,100%);max-height:100%;display:flex;flex-direction:column;
}
.lb-panel img{max-width:100%;max-height:62vh;object-fit:contain;display:block;background:#0b0908}
.lb-txt{padding:18px clamp(18px,3vw,28px) 22px;color:#f1eae0}
.lb-title{font-family:var(--serif);font-size:19px;line-height:1.25;margin:0}
.lb-desc{font-size:13px;color:#b9ada0;margin:7px 0 0;line-height:1.5}
.lb-act{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:16px}
.lb-act [hidden]{display:none !important}
.lb-act .btn{background:#f1eae0;color:#17130f;border-color:#f1eae0}
.lb-act .link{color:#c19a6b}
.lb-close{
  position:absolute;top:8px;right:10px;width:38px;height:38px;border:0;
  background:rgba(12,10,8,.55);color:#f1eae0;font-size:24px;line-height:1;
  cursor:pointer;border-radius:50%;
}
.lb-close:hover{background:rgba(12,10,8,.8)}
body.lb-open{overflow:hidden}

/* series tile */
.tile{
  position:relative;display:block;overflow:hidden;border-radius:2px;
  aspect-ratio:4/5;background:var(--paper-3);
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,8,6,.78) 0%,rgba(10,8,6,.28) 42%,rgba(10,8,6,0) 72%);
}
.tile-txt{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff}
.tile-txt h3{font-size:20px;margin-bottom:6px}
.tile-txt p{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ---------- feature list ---------- */
.feat{border-top:1px solid var(--line)}
.feat li{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:18px}
.feat .n{
  font-family:var(--serif);font-size:13px;color:var(--accent);
  letter-spacing:.06em;padding-top:5px;
}
.feat h3{font-size:19px;margin-bottom:8px}
.feat p{font-size:14.5px;color:var(--ink-2);max-width:52ch}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl caption{
  text-align:left;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-bottom:12px;
}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);
  white-space:nowrap;
}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl td:first-child{font-weight:600;white-space:nowrap}
.tbl .num{font-variant-numeric:tabular-nums}
.tbl--dark thead th{color:#a89e91;border-bottom-color:#4a423a}
.tbl--dark th,.tbl--dark td{border-bottom-color:#332c25}
.tbl--dark tbody tr:hover{background:rgba(255,255,255,.04)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- editorial page intro ---------- */
.intro{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);
  gap:clamp(28px,5vw,72px);align-items:end;
}
.glance{margin:0;border-top:1px solid var(--ink)}
.glance > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.glance dt{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto;
}
.glance dd{margin:0;font-family:var(--serif);font-size:16.5px;text-align:right;line-height:1.3}

/* ---------- full-bleed band ---------- */
.band{margin:0;position:relative;overflow:hidden;background:var(--paper-3);border-top:1px solid var(--line)}
.band img{display:block;width:100%;height:clamp(220px,30vw,430px);object-fit:cover}
.band figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 10px;
  background:linear-gradient(to top,rgba(10,8,6,.86) 0%,rgba(10,8,6,.55) 55%,rgba(10,8,6,0) 100%);
  color:#f6f1e9;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
}

/* ---------- figure stack ---------- */
.fig-set{display:grid;gap:12px;margin:0}
.fig-set .fig-main,.fig-set .fig-strip{position:relative;margin:0;overflow:hidden;background:var(--paper-3)}
.fig-set .fig-main{aspect-ratio:4/3}
.fig-set .fig-strip{aspect-ratio:16/7}
.fig-set img{width:100%;height:100%;object-fit:cover;display:block}
.fig-set figcaption{
  position:absolute;left:0;bottom:0;padding:8px 13px;
  background:rgba(13,11,9,.62);color:#f1eae0;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- composition bar ---------- */
.recipe{margin-top:30px;max-width:44ch}
.recipe-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--paper-3)}
.recipe-bar i{display:block;height:100%}
.recipe-bar .q{width:93%;background:var(--ink)}
.recipe-bar .r{width:7%;background:var(--accent-2);border-left:2px solid var(--paper)}
.recipe-legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:12px}
.recipe-legend span{font-size:11px;letter-spacing:.05em;color:var(--muted);display:flex;align-items:baseline;gap:7px}
.recipe-legend b{font-family:var(--serif);font-size:14.5px;font-weight:400;color:var(--ink)}

/* ---------- application list ---------- */
.uses{row-gap:clamp(26px,3vw,40px)}
.use{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:15px}
.use .use-n{display:block;font-size:10px;letter-spacing:.2em;color:var(--accent);margin-bottom:11px}
.use h3{font-size:18.5px;margin-bottom:9px}
.use p{font-size:13.8px;line-height:1.62;color:var(--ink-2);margin-bottom:16px}
.use .tag{
  align-self:flex-start;margin-top:auto;padding:4px 9px;
  border:1px solid var(--line);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- thickness columns ---------- */
.thk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(28px,4vw,44px)}
.thk-item{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);padding:clamp(20px,2.4vw,30px)}
.thk-item.is-rec{border-color:var(--ink)}
.thk-item.is-rec::after{
  content:"Most specified";position:absolute;top:0;right:0;
  background:var(--ink);color:#fff;padding:5px 10px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
}
.thk-num{font-family:var(--serif);font-size:clamp(38px,4.6vw,54px);line-height:1;letter-spacing:-.02em}
.thk-num span{font-size:.32em;letter-spacing:.08em;margin-left:5px;color:var(--muted)}
.thk-item h3{font-size:16.5px;margin:15px 0 8px}
.thk-item p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:18px}
.thk-load{
  margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  font-size:11.5px;letter-spacing:.06em;color:var(--muted);
}

/* ---------- series tile caption ---------- */
.tile--cap::after{
  background:linear-gradient(to top,rgba(10,8,6,.9) 0%,rgba(10,8,6,.5) 30%,rgba(10,8,6,.08) 62%,rgba(10,8,6,0) 80%);
}
.tile--cap .tile-txt h3{text-shadow:0 1px 16px rgba(0,0,0,.55)}

/* ---------- video ---------- */
/* the factory clips are shot on phones, so the frames are portrait */
.video-frame{position:relative;overflow:hidden;border-radius:2px;background:#0d0b09;aspect-ratio:4/5}
.video-frame video{width:100%;height:100%;object-fit:cover}
.video-frame figcaption{
  position:absolute;left:0;bottom:0;padding:10px 16px;
  background:rgba(13,11,9,.72);color:#e8e0d5;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
/* Footage below the first screen loads on tap, not on paint: the poster is
   the still frame, a tap starts playback and a second tap pauses. :has() only
   paints the play badge on frames that actually hold a tap-to-play video. */
video[data-tap]{cursor:pointer}
.video-frame:has(video[data-tap])::after{
  content:"\25B6";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;padding-left:3px;
  background:rgba(13,11,9,.55);color:#f2ece4;font-size:15px;
  border:1px solid rgba(242,236,228,.5);pointer-events:none;
}

/* g1 media gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--paper-3);aspect-ratio:1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:9px 12px;
  background:linear-gradient(to top,rgba(10,8,6,.8),rgba(10,8,6,0));
  color:#fff;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
}

/* ---------- video reel (loading section) ---------- */
.gal--video figure{aspect-ratio:4/5;background:#0d0b09}
.gal--video video{width:100%;height:100%;object-fit:cover;display:block}
.reel-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.reel-dots{display:flex;gap:7px}
.reel-dot{
  width:28px;height:3px;padding:0;border:0;cursor:pointer;
  background:var(--line);transition:background .35s var(--ease);
}
.reel-dot.is-on{background:var(--ink)}
.reel-sound{
  border:1px solid var(--line);background:none;cursor:pointer;
  padding:7px 13px;font-family:inherit;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  transition:border-color .3s,color .3s;
}
.reel-sound:hover{border-color:var(--ink);color:var(--ink)}
.reel-sound[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
/* ---------- reference list (landmark projects) ---------- */
.ref-list{list-style:none;margin:clamp(28px,4vw,44px) 0 0;border-top:1px solid rgba(242,236,228,.2)}
.ref-list li{
  display:flex;gap:clamp(16px,2.4vw,34px);align-items:baseline;
  padding:clamp(16px,2.2vw,24px) 0;border-bottom:1px solid rgba(242,236,228,.2);
}
.ref-n{
  flex:0 0 auto;min-width:24px;
  font-size:10px;letter-spacing:.18em;color:var(--accent-2);
}
.ref-list h3{
  font-family:var(--serif);font-size:clamp(20px,2.3vw,30px);
  line-height:1.2;letter-spacing:-.01em;color:#f2ece4;
}
.ref-list p{
  margin-top:7px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,236,228,.55);
}

/* ---------- product cards (sinks & baths) ---------- */
.prod{
  margin:0;background:var(--white);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.prod img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 36%;
  display:block;background:var(--paper-3);
}
.prod-body{padding:15px 17px 19px;display:flex;flex-direction:column;flex:1}
.prod-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.prod-head h3{font-size:14px;letter-spacing:.07em;font-weight:600}
.prod-head span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.prod-kind{margin-top:6px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.prod-body p{font-size:13px;line-height:1.58;color:var(--ink-2);margin-top:9px}
.ss{margin:0}
.ss img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--paper-3)}
.ss figcaption{padding:11px 0 2px}
.ss strong{display:block;font-size:13.5px;font-weight:600;letter-spacing:.02em}
.ss span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}

@media (max-width:700px){
  .gal--video{grid-template-columns:1fr !important}
  .gal--video figure{aspect-ratio:4/5}
  /* touch: one clip at a time, rotated by the reel logic and the dots */
  html.js .gal--video figure{display:none}
  html.js .gal--video figure.is-on{display:block}
}

/* ---------- chips / filter ---------- */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.chip{
  padding:9px 17px;border:1px solid var(--line);border-radius:99px;
  background:transparent;font-size:12px;letter-spacing:.06em;cursor:pointer;
  transition:all .22s var(--ease);color:var(--ink-2);
}
.chip:hover{border-color:#bfb3a4;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .c{opacity:.5;margin-left:7px;font-variant-numeric:tabular-nums}

/* second axis: marble style. Outline only, so it never competes with the
   filled colour chips above it. */
.chips--style{margin-top:-18px}
.chip--style{padding:7px 13px;font-size:11px;letter-spacing:.05em;color:var(--muted)}
.chip--style .c{opacity:.45;margin-left:5px}
.chip--style[aria-pressed="true"]{
  background:transparent;border-color:var(--ink);color:var(--ink);font-weight:600;
}

/* ---------- callout ---------- */
.note{
  border-left:2px solid var(--accent);padding:14px 0 14px 20px;
  font-size:14px;color:var(--ink-2);
}
.section--dark .note{color:#cdc4b8;border-left-color:var(--accent-2)}

/* ---------- CTA band ---------- */
.cta-band{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);
  align-items:center;
}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.reply{margin-top:30px;border-top:1px solid var(--line)}
.reply li{
  display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);
  font-size:14px;color:var(--ink-2);
}
.reply b{font-family:var(--serif);font-weight:400;font-size:12.5px;letter-spacing:.06em;color:var(--accent)}

/* ---------- form ---------- */
.form-card{
  background:var(--white);border:1px solid var(--line);border-radius:2px;
  padding:clamp(22px,3vw,36px);
}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:#b3a99d}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field .opt{font-weight:400;letter-spacing:.06em;text-transform:none;color:#a2988c}
.form-note{font-size:12px;color:var(--muted);line-height:1.55;margin-top:14px}
.form-status{
  display:none;margin-top:14px;padding:12px 14px;border-radius:2px;
  font-size:13px;background:var(--paper-2);border:1px solid var(--line);
}
.form-status.is-on{display:block}

/* ---------- contact block ---------- */
.c-item{padding:20px 0;border-bottom:1px solid var(--line)}
.c-item:first-child{border-top:1px solid var(--line)}
.c-item dt{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
.c-item dd{margin:0;font-size:16.5px;font-family:var(--serif)}
.c-item a:hover{color:var(--accent)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(17px,1.8vw,20px);line-height:1.35;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease);
}
.acc details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.acc .acc-body{padding:0 0 26px;max-width:72ch}
.acc .acc-body p{font-size:14.8px;color:var(--ink-2);margin-bottom:12px}
.acc .acc-body p:last-child{margin-bottom:0}
.acc .acc-body ul{margin:0 0 12px;padding-left:0}
.acc .acc-body li{position:relative;padding-left:18px;font-size:14.8px;color:var(--ink-2);margin-bottom:8px}
.acc .acc-body li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--accent)}

/* ---------- colour detail page ---------- */
.crumb{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:20px 0}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 8px;opacity:.5}

.pd{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(40px,6vw,72px)}
.pd-hero{position:relative;overflow:hidden;border-radius:2px;background:var(--paper-3);aspect-ratio:4/3}
.pd-hero img{width:100%;height:100%;object-fit:cover}
.pd-hero figcaption{
  position:absolute;left:0;bottom:0;padding:9px 14px;background:rgba(13,11,9,.66);
  color:#e8e0d5;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.pd-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.pd-thumbs button{
  padding:0;border:1px solid var(--line);background:var(--paper-3);
  aspect-ratio:1;overflow:hidden;cursor:pointer;border-radius:2px;
}
.pd-thumbs button[aria-current="true"]{border-color:var(--ink)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}

.pd-head .h1{font-size:clamp(30px,3.6vw,46px)}
.pd-code{
  display:inline-block;margin-top:14px;padding:5px 11px;border:1px solid var(--line);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.pd-lead{margin-top:20px;font-size:16.5px;line-height:1.66;color:var(--ink-2)}
.pd-spec{margin:28px 0 0;border-top:1px solid var(--line)}
.pd-spec div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.pd-spec dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.pd-spec dd{margin:0;font-size:14.5px;color:var(--ink)}
.pd-actions{margin-top:28px;display:flex;flex-direction:column;gap:10px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#cdc4b8;padding:clamp(48px,7vw,80px) 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);padding-bottom:clamp(36px,5vw,56px)}
.site-foot h3{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#8f8478;margin-bottom:16px;
}
.site-foot .brand-mark{color:#f4efe8}
.site-foot .brand-sub{color:#8f8478}
.site-foot p{font-size:13.5px;line-height:1.68;color:#a89e91}
.foot-links li{margin-bottom:9px}
.foot-links a{font-size:13.5px;color:#cdc4b8;transition:color .2s var(--ease)}
.foot-links a:hover{color:#fff}
.foot-bar{
  border-top:1px solid #2c261f;padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.05em;color:#8b8175;
}
.foot-brandline{margin-top:18px;display:flex;flex-direction:column;gap:14px;max-width:34ch}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(16px)}
.js [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .card:hover,.tile:hover img,.card:hover .card-media img,.gal figure:hover img{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-txt{padding:clamp(44px,7vw,72px) var(--pad)}
  .hero-img{aspect-ratio:16/10;min-height:0;order:-1}
  .hero-img img{position:absolute;inset:0;height:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats li:nth-child(2){border-right:0}
  .stats li:nth-child(1),.stats li:nth-child(2){border-bottom:1px solid var(--line)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .intro{grid-template-columns:1fr;align-items:start}
  .glance{margin-top:8px}
  .pd{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 26px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease);
    max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav > a:not(.btn){
    padding:15px 0;border-bottom:1px solid var(--line-2);font-size:14px;
  }
  .nav > a:not(.btn)::after{display:none}
  .nav .btn{margin-top:18px;width:100%}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:30px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .tile{aspect-ratio:1}
  .thk{grid-template-columns:1fr;gap:12px}
  .band img{height:clamp(200px,34vw,300px)}
  .fig-set .fig-strip{aspect-ratio:16/7}
}

@media (max-width:600px){
  body{font-size:15.5px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .field-2{grid-template-columns:1fr}
  .hero-facts{gap:16px 26px}
  .foot-grid{grid-template-columns:1fr}
  .tbl{font-size:13.5px}
  .tbl th,.tbl td{padding:11px 10px}
  .pd-spec div{grid-template-columns:104px 1fr;gap:12px}
  .stats li{padding:18px}
  .tile-grid{grid-template-columns:1fr 1fr;gap:12px}
  .tile-grid .tile-txt{left:14px;right:14px;bottom:13px}
  .tile-grid .tile-txt h3{font-size:16px;margin-bottom:4px}
  .tile-grid .tile-txt p{font-size:10px;letter-spacing:.1em}
  .tile-grid .tile--cap::after{
    background:linear-gradient(to top,rgba(10,8,6,.88) 0%,rgba(10,8,6,.4) 26%,rgba(10,8,6,0) 52%);
  }
}

@media print{
  .site-head,.nav,.cta-band .form-card,.site-foot .foot-links{display:none}
  body{background:#fff}
  .section{padding:20px 0}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ---------------------------------------------------------------- form actions
   one enquiry, two ways to send it: WhatsApp or e-mail */
.form-actions{display:grid;gap:10px;margin-top:4px}
.form-actions .btn{width:100%}
.form-actions .btn--ghost{font-size:11.5px;min-height:44px}

/* ---------------------------------------------------------------- mobile contact bar
   below 820 px only. The header is sticky at the top, so without this the
   WhatsApp action sits two or three screens away from where the visitor is. */
.mobar{display:none}
@media (max-width:820px){
  .mobar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;
    align-items:center;justify-content:center;gap:9px;
    min-height:54px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#17130f;color:#f3ece2;text-decoration:none;
    border-top:1px solid rgba(193,154,107,.42);
    font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    box-shadow:0 -6px 22px rgba(20,16,12,.14);
  }
  .mobar svg{flex:none;color:#c19a6b}
  .mobar-num{letter-spacing:.02em;text-transform:none;opacity:.7;font-size:12px}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
}

/* ---------------------------------------------------------------- form endpoint
   the enquiry is filed with Formspree, so the states below have to be legible */
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"],
.form-card input[aria-invalid="true"],
.form-card textarea[aria-invalid="true"]{border-color:#b3261e;outline:2px solid rgba(179,38,30,.18);outline-offset:1px}
.form-warn{margin:8px 0 0;padding-left:14px;position:relative;font-size:12.5px;line-height:1.55;color:#8a3a2e}
.form-warn:before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:#b3261e}