/* ==========================================================================
   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:#726a62;   /* 5.05:1 on --paper, 4.64:1 on --paper-2, 5.31:1 on white — clears AA on all three */
  --dim:#6f6c68;     /* 4.97:1 on --paper — for counts and other deliberately quiet text */
  --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;
  /* The serif stack's old-style figures put 0/3/5 below the baseline, so a code
     like SCW20250035 reads as stacked digits on macOS and as even digits on
     Windows. Force lining figures everywhere; tables opt into tabular below. */
  font-variant-numeric:lining-nums;
}

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}

/* <picture> is only there to offer a WebP twin; contents keeps it out of the
   layout so grids and flex rows see exactly the same items as before. */
picture{display:contents}

::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}
/* The masthead is also the link home, but as a bare stack of type it reads as
   decoration: nothing about it says press me, and a visitor who arrives from a
   search result has no reason to guess. A tinted block gives it a footprint at
   rest. Deliberately a fill and not a border — a bordered box would put a
   second outline in the same row as the quote button and split the eye between
   two "buttons" that do very different things. */
.head-in .brand{
  padding:6px 12px 7px;margin-left:-12px;min-height:44px;justify-content:center;
  background:var(--paper-2);border-radius:7px;
  transition:background .22s var(--ease);
}
.head-in .brand:hover{background:#e8dfd0}
.head-in .brand:hover .brand-latin{color:var(--accent)}
/* The real mark file. A flex column stretches its children by default, so the
   image needs align-self or it will be blown up to the full column width. */
.brand img{display:block;align-self:flex-start;width:auto;height:40px}
.brand-mark{
  font-family:var(--serif);font-size:22px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);
}
/* The masthead is a person's name, not a company mark. Chinese sits first and
   large because that is the name on the passport and on LinkedIn; the
   romanisation rides alongside at caption size because that is what a buyer in
   Dubai can actually type. Anything smaller than ~19px and the two strokes of
   高 start to fuse on a Windows panel, hence the separate serif stack: the Latin
   stack would hand 高 to whichever Chinese face the OS defaults to, which on
   Windows is a ragged bitmap face at this size. */
.brand-name{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.brand-cn{
  font-family:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  font-size:21px;font-weight:600;letter-spacing:.05em;color:var(--ink);
}
.brand-latin{
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);transition:color .22s var(--ease);
}
/* Sentence case and a normal tracking, on purpose. All-caps with wide letters
   is the house style of a corporate sub-brand, and a second one of those under
   the name would put the site straight back where it started. Set as a line of
   running text it reads as a caption about a person. */
.brand-sub{
  margin-top:7px;font-size:11.5px;letter-spacing:.035em;
  color:var(--muted);white-space:nowrap;
}
.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}
/* the slab photographs are pale, so white type on the lower edge needs a scrim
   of its own rather than a text-shadow alone */
.hero-img::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;
  background:linear-gradient(to top,rgba(13,11,9,.55),rgba(13,11,9,.18) 45%,rgba(13,11,9,0));
  pointer-events:none;
}
.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-meta{font-size:11.5px;color:#9c8e80;margin:12px 0 0;padding-top:11px;line-height:1.55;border-top:1px solid rgba(242,236,228,.12);letter-spacing:.01em}
.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:lining-nums 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:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  /* The two icons are drawn, not typed. ▶ and ❚❚ come from whatever symbol face
     the system falls back to, and they land at different weights and offsets on
     Windows and macOS. An inline SVG is the same shape everywhere. */
  background:rgba(13,11,9,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.2v13.6L19.6 12z' fill='%23f2ece4'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  border:1px solid rgba(242,236,228,.5);pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),background-color .24s var(--ease);
}
/* The badge used to be painted once and never change, so a clip that was
   already running still showed ▶ and read as "nothing happened". While playing
   it becomes a pause mark and fades out of the picture; it comes back on hover
   or when the clip is focused from the keyboard, which is the only moment the
   pause affordance is actually needed.
   :has() carries its own specificity, so a plain .is-playing class would lose to
   the rule above — the selector has to keep the :has() to win. */
.video-frame.is-playing:has(video[data-tap])::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='5' width='3.6' height='14' rx='1.2' fill='%23f2ece4'/%3E%3Crect x='13.4' y='5' width='3.6' height='14' rx='1.2' fill='%23f2ece4'/%3E%3C/svg%3E");
  background-size:19px 19px;
  opacity:0;transform:translate(-50%,-50%) scale(.9);
}
@media (hover:hover){
  .video-frame.is-playing:has(video[data-tap]):hover::after{
    opacity:1;transform:translate(-50%,-50%) scale(1);
    background-color:rgba(13,11,9,.72);
  }
}
.video-frame:has(video[data-tap]:focus-visible)::after{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  outline:2px solid var(--accent);outline-offset:3px;
}
.video-frame:has(video[data-tap]:focus-visible){outline: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}
/* The dot reads as a 28 x 3 px line, but three pixels is not a finger target on
   a phone. The button box carries the hit area to 40 px; the line is drawn as
   a centred pseudo-element, so the bar looks exactly as it did. */
.reel-dots{display:flex;gap:7px;align-items:center}
.reel-dot{
  width:28px;height:40px;padding:0;border:0;cursor:pointer;
  background:none;display:block;position:relative;
}
.reel-dot::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
  background:var(--line);transition:background .35s var(--ease);
}
.reel-dot.is-on::after{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}
/* Counts used to be currentColor at 50% opacity, which came out at 2.6:1 on the
   paper background — unreadable outdoors. They now carry their own colour that
   clears 4.5:1, and only go translucent again on the filled (dark) chip. */
.chip .c{color:var(--dim);margin-left:7px;font-variant-numeric:tabular-nums}
/* only the filled chips invert; the outlined style chips stay dark on paper */
.chip[aria-pressed="true"]:not(.chip--style) .c{color:rgba(255,255,255,.82)}

/* 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{color:var(--dim);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);
}
/* every #inquiry link in the site is a lightbox button that has just promised
   "ask about this colour" — landing on the form itself is the point, and the
   fixed header would otherwise sit on top of it */
#inquiry{scroll-margin-top:90px}
.form-req{
  font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 22px;
}
.form-req .req,.field label .req{color:var(--accent);font-weight:700}
/* filled in by site.js when the visitor arrives with ?colour=CN7011 */
.form-asking{
  margin:0 0 20px;padding:10px 13px;border-left:2px solid var(--accent);
  background:var(--paper-2);font-size:12.5px;line-height:1.5;color:var(--muted);
}
.form-asking b{font-weight:600;color:var(--ink);letter-spacing:.02em}
.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:var(--muted)}
.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}
/* English-only version on the dark ground: the Chinese line above OPALY turns
   to mush at footer size, so the footer uses the mark without it. */
.site-foot .brand img{height:26px}
.site-foot .brand-cn{color:#f4efe8;font-size:19px}
.site-foot .brand-latin{color:#8f8478}
.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/8;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}
}

/* The mark is wider than the wordmark it replaced, so the seven nav items and
   the CTA stop fitting beside it well before the rest of the layout needs to
   reflow. The menu therefore folds at 1100 px, not at the 820 px hand-off. */
@media (max-width:1100px){
  .nav-toggle{display:flex}
  /* 40 px of mark eats a third of a 390 px header, so the narrow layout runs a
     smaller one. The sub-line stays, it is what keeps the lock-up readable. */
  .brand img{height:32px}
  .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%}
}

@media (max-width:820px){
  .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}
  /* At 390 px the header's own padding is 20 px, so the 12 px negative margin
     pulls the tinted block to within 8 px of the screen edge while the menu
     button sits a full 20 px in. Dropping the negative margin lines the block
     up with both edges instead. */
  .head-in .brand{margin-left:0;padding:6px 10px 7px}
  /* On a 390 x 664 phone the hero used to run the photograph to 244 px and bury
     both buttons under the fold. The band is now 2:1 — still the kitchen scene,
     still the first thing seen — and the copy sits tight enough that
     "Browse the colours" clears the bottom edge. */
  .hero-img{aspect-ratio:2/1}
  .hero-txt{padding-top:30px;padding-bottom:40px}
  .hero-txt .h1{margin-bottom:16px}
  .hero-txt .lead{font-size:15px;line-height:1.62}
  /* The capacity clause is the one piece of the hero that is said again, in
     full, by the three-figure strip right underneath. On a phone it costs two
     lines and with them the primary button, so it steps aside. */
  .hero-txt .lead .lead-x{display:none}
  .hero-cta{margin-top:22px}
  .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%);
  }
}

/* 320-360 px phones wrap the lead onto two more lines than a 390 does, which
   puts the button back under the fold; the band gives up a little more height */
@media (max-width:360px){
  .hero-img{aspect-ratio:2.4/1}
  .hero-txt{padding-top:24px}
  .hero-txt .lead{font-size:14.5px}
}

@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}
/* On-screen reader only: keeps a label in the accessibility tree where the
   design calls for a header cell with no visible text. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.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}

/* ---------------------------------------------------------------- certificates page
   Chips for the ISO standards, and a plain two-line list for the awards: an
   award logo adds nothing a buyer can check, the name and the issuer do. */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);
  background:var(--white);
}
.hon-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.hon-row{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.hon-row b{font-family:var(--serif);font-size:15.5px;font-weight:400;line-height:1.3}
.hon-row span{font-size:12px;letter-spacing:.03em;color:var(--muted)}

/* ---------------------------------------------------------------- form feedback
   Field-level errors sit under the input they belong to, not in one line at the
   bottom of the form: on a phone the bottom line is off-screen once the keyboard
   is up, which is where "I pressed send and nothing happened" comes from. */
.field-err{
  margin:7px 0 0;font-size:12.5px;line-height:1.5;color:#8a3a2e;
  padding-left:13px;position:relative;
}
.field-err::before{
  content:"";position:absolute;left:0;top:6px;width:6px;height:6px;
  border-radius:50%;background:#b3261e;
}
.form-ok{
  border:1px solid #cfe0cf;background:#f4f8f3;border-radius:2px;
  padding:clamp(20px,4vw,30px);
}
.form-ok .eyebrow{color:#4d7a4a}
.form-ok h3{margin:8px 0 10px}
.form-ok p{font-size:14.5px;line-height:1.62;color:var(--ink-2)}
.form-ok .btn-row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------------------------------------------------------------- people
   A photograph and a name. The site sold stone for a week with nobody's face
   on it, which is the one thing a buyer cannot check from a colour card. */
.who{display:flex;gap:clamp(16px,3vw,26px);align-items:flex-start}
.who-photo{
  flex:0 0 132px;width:132px;height:132px;object-fit:cover;object-position:center 22%;
  border-radius:50%;border:1px solid var(--line);
}
.who-txt{flex:1 1 auto;min-width:0}
.who-role{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-top:6px;
}
.who-fig{margin:0;max-width:420px;justify-self:center}
.who-fig img{width:100%;height:auto;display:block;border-radius:2px}
@media (max-width:600px){
  .who{gap:16px}
  .who-photo{flex:0 0 88px;width:88px;height:88px}
}

/* ---------------------------------------------------------------- project list
   Typographic on purpose. We do not own photographs of these buildings, so the
   page is set as a list rather than dressed up in somebody else's building. */
.proj-list{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,44px)}
.proj{
  display:grid;grid-template-columns:56px 1fr;gap:clamp(14px,3vw,34px);
  padding:clamp(26px,3.6vw,38px) 0;border-bottom:1px solid var(--line-2);
}
.proj-no{
  font-family:var(--serif);font-size:16px;color:var(--muted);line-height:1.5;
  font-variant-numeric:lining-nums;
}
.proj h3{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-weight:400;line-height:1.2}
.proj-meta{
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:9px;
}
.proj-txt{margin-top:14px;font-size:15px;line-height:1.68;color:var(--ink-2);max-width:60ch}
@media (max-width:600px){
  .proj{grid-template-columns:1fr;gap:6px}
  .proj-no{font-size:13px}
}

/* ---------------------------------------------------------------- mobile menu
   Below 1100 px the menu is a fixed panel whose height follows its contents, so
   the page underneath came straight through beneath the last link and read as a
   panel that had been cut off. The scrim closes the page visually and gives the
   thumb somewhere to tap to dismiss. */
.nav-scrim{display:none}
@media (max-width:1100px){
  .nav{z-index:41}
  .nav-scrim{
    display:block;position:fixed;inset:74px 0 0;z-index:40;
    background:rgba(16,13,10,.44);opacity:0;pointer-events:none;
    transition:opacity .22s var(--ease);
  }
  .nav-scrim.is-open{opacity:1;pointer-events:auto}
  body.nav-locked{overflow:hidden}
}

/* ---------------------------------------------------------------- filter chips on a phone
   Eight colour families and ten styles wrap into four rows above the grid,
   which pushed the first slab two and a half screens down. Kept on one line
   each and scrolled sideways instead, the wall starts where the page does. */
@media (max-width:600px){
  .chips{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    margin-right:calc(-1 * var(--pad));padding-right:var(--pad);
    padding-bottom:5px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .chips::-webkit-scrollbar{display:none}
  .chips .chip{flex:none;scroll-snap-align:start}
}