/* ==========================================================================
   QY Furniture — design system
   1. Self-hosted webfonts      5. Hero            9. OEM / ODM
   2. Design tokens             6. Capability strip 10. Inquiry band
   3. Base + utilities          7. Media + demo flag 11. Interior pages
   4. Header / navigation       8. Categories       12. Footer, motion, responsive
   ========================================================================== */

/* --- 1. Self-hosted webfonts --------------------------------------------- */
@font-face{font-family:Fraunces;font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/archivo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/archivo-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/archivo-latin-600-normal.woff2") format("woff2")}

/* --- 2. Design tokens ---------------------------------------------------- */
:root{
  --ink:#16130f;
  --ink-soft:#332d26;
  --muted:#6d6459;
  --muted-2:#8d8479;
  --paper:#f7f4ef;
  --paper-2:#efe8de;
  --line:#e3dbcd;
  --line-soft:#efe9df;
  --walnut:#291f19;
  --walnut-soft:#382c23;
  --accent:#a8722f;
  --accent-soft:#c9a06a;
  --sage:#47594e;

  --display:Fraunces,Georgia,"Times New Roman",serif;
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;

  --maxw:1260px;
  --gut:clamp(20px,4vw,44px);
  --section:clamp(72px,8.5vw,136px);

  --shadow-s:0 1px 2px rgba(22,19,15,.05);
  --shadow-m:0 24px 50px -26px rgba(22,19,15,.30);
}

/* --- 3. Base + utilities ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  line-height:1.68;
  color:var(--ink-soft);
  background:var(--white,#fff);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}

h1,h2{font-family:var(--display);font-weight:600;color:var(--ink);letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,1.15rem + 4.6vw,5rem);line-height:1.03}
h2{font-size:clamp(1.95rem,.95rem + 2.7vw,3.2rem);line-height:1.1}
h3{font-size:clamp(1.05rem,.35vw + .98rem,1.3rem);line-height:1.32;font-weight:600;color:var(--ink);letter-spacing:-.01em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--section)}
.section.tight{padding-block:clamp(52px,6vw,88px)}
.paper{background:var(--paper)}
.pale{background:var(--paper-2)}
.walnut{background:var(--walnut);color:#efe8de}
.walnut h1,.walnut h2,.walnut h3{color:#fff}
.walnut p{color:#cbbfae}
.narrow{max-width:820px}
.mt-l{margin-top:clamp(28px,3vw,44px)}

.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:clamp(16px,1.6vw,24px)
}
.walnut .eyebrow{color:var(--accent-soft)}
.lead{font-size:clamp(1.02rem,.5vw + .95rem,1.2rem);color:var(--muted);max-width:58ch}
.walnut .lead{color:#cbbfae}
.smallmuted{font-size:.82rem;color:var(--muted-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,38px)}
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:1em 1.5em;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-size:.83rem;font-weight:600;letter-spacing:.04em;cursor:pointer;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease
}
.btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.btn .arw{transition:transform .22s ease}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.on-dark{background:#fff;border-color:#fff;color:var(--ink)}
.btn.on-dark:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost-dark{background:transparent;color:#efe8de;border-color:#5c4c3f}
.btn.ghost-dark:hover{background:transparent;border-color:var(--accent-soft);color:#fff}
.textlink{font-size:.83rem;font-weight:600;letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:3px}
.textlink:hover{border-color:var(--accent);color:var(--accent)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;font-size:.8rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- 4. Header / navigation --------------------------------------------- */
.sitehead{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.utility{background:var(--walnut);color:#b9ab9b;font-size:.72rem;letter-spacing:.06em}
.utilityin{display:flex;justify-content:space-between;gap:20px;padding-block:9px}
.utility p{margin:0}
.headin{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.brand span{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.sitehead nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);font-size:.84rem;font-weight:500}
.sitehead nav>a{position:relative;padding-block:4px}
.sitehead nav>a:not(.navcta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);
  transition:right .25s ease
}
.sitehead nav>a:not(.navcta):hover::after{right:0}
.navcta{background:var(--ink);color:#fff;padding:.72em 1.2em;font-weight:600;letter-spacing:.04em}
.navcta:hover{background:var(--accent)}
.menubtn{display:none;border:1px solid var(--line);background:transparent;padding:.6em .9em;font-size:.78rem;font-weight:600;letter-spacing:.08em;cursor:pointer}

/* --- 5. Hero ------------------------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 62%,#fff 62%)}
.heroin{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,72px);align-items:center;padding-block:clamp(46px,5.5vw,86px)}
.hero-copy{max-width:600px}
.hero h1{margin-bottom:clamp(18px,2vw,26px)}
.hero .lead{margin-bottom:0}
.heronote{margin-top:clamp(22px,2.4vw,34px);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.hero-media{position:relative}
.hero-media .media{border-radius:170px 170px 3px 3px;overflow:hidden}

/* --- 6. Capability strip ------------------------------------------------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.stripin{display:grid;grid-template-columns:repeat(4,1fr)}
.strip article{padding:clamp(26px,3vw,40px) clamp(18px,2vw,34px);border-right:1px solid var(--line-soft)}
.strip article:last-child{border-right:0}
.strip h3{font-size:.94rem;margin-bottom:6px}
.strip p{font-size:.82rem;color:var(--muted)}

/* --- 7. Media + demo flag ------------------------------------------------ */
.media{position:relative;background:var(--paper-2);margin:0}
.media img{width:100%;height:100%;object-fit:cover}
.ratio-hero{aspect-ratio:2/3}
.ratio-wide{aspect-ratio:3/2}
.ratio-tile{aspect-ratio:3/2}
.ratio-factory{aspect-ratio:16/9}
.demo-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:rgba(41,31,25,.86);color:#f3e7d6;
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 9px;border:1px solid rgba(243,231,214,.32)
}
.media figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(0deg,rgba(22,19,15,.78),rgba(22,19,15,0));
  color:#e8ded1;font-size:.68rem;letter-spacing:.03em;
  padding:26px 12px 10px;line-height:1.45
}
.media.plain figcaption{position:static;background:none;color:var(--muted-2);padding:10px 0 0}
.media.plain .demo-badge{position:static;display:inline-block;margin-bottom:10px;background:#efe8de;color:#5d4a35;border-color:#ddd0bc}
.notice{
  border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper);
  padding:clamp(18px,2vw,26px);font-size:.87rem;color:var(--muted)
}
.notice strong{color:var(--ink);font-weight:600}

/* --- 8. Categories ------------------------------------------------------- */
.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,60px);align-items:end;margin-bottom:clamp(34px,4vw,56px)}
.section-head .lead{max-width:none}
.categories{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,32px)}
.category{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.category:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.category .media{border-bottom:1px solid var(--line)}
.catbody{padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;flex:1}
.catno{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.catbody h3{margin-bottom:8px}
.catbody p{font-size:.88rem;color:var(--muted);margin-bottom:18px}
.catlink{margin-top:auto;font-size:.8rem;font-weight:600;letter-spacing:.05em;color:var(--ink);display:inline-flex;gap:.5em;align-items:center}
.category:hover .catlink{color:var(--accent)}

/* --- 9. OEM / ODM -------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,92px);align-items:center}
.split.reverse .split-media{order:2}
.steps{list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.walnut .steps li{border-color:#4a3a2f}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:.95rem;color:var(--accent)}
.steps h3{font-size:.98rem;margin-bottom:4px}
.steps p{font-size:.86rem;color:var(--muted);margin:0}
.walnut .steps p{color:#c3b6a6}

/* --- 10. Inquiry band ---------------------------------------------------- */
.band{text-align:center}
.bandin{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.bandin .lead{margin-inline:auto}
.band .actions{justify-content:center}

/* --- 11. Interior pages -------------------------------------------------- */
.pagehero{background:var(--paper);border-bottom:1px solid var(--line);padding-block:clamp(52px,6vw,96px)}
.pagehero h1{max-width:17ch}
.pagehero .lead{margin-top:clamp(16px,1.8vw,24px)}
.factrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);margin-top:clamp(30px,3.4vw,48px)}
.factrow div{border-top:1px solid var(--line);padding-top:16px}
.factrow b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--ink);margin-bottom:4px}
.factrow span{font-size:.84rem;color:var(--muted)}
.defer{border:1px dashed var(--line);padding:clamp(20px,2.4vw,34px);background:#fff}
.defer h3{margin-bottom:10px}
.defer ul{margin:14px 0 0;padding-left:18px;font-size:.88rem;color:var(--muted)}
.defer li{margin-bottom:6px}
.pill{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:4px 8px;margin-bottom:14px}
.pillgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(28px,3vw,44px)}
.pillgrid>div{border-top:1px solid #4a3a2f;padding-top:18px}
.pillgrid h3{font-size:.96rem;margin-bottom:6px}
.pillgrid p{font-size:.84rem;color:#c3b6a6;margin:0}

/* forms (unchanged behaviour: submit stays disabled until delivery is configured) */
.form-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.form-layout form{border:1px solid var(--line);background:#fff;padding:clamp(22px,2.6vw,38px)}
.form-layout label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.form-layout input:not([type=checkbox]),.form-layout select,.form-layout textarea{
  display:block;width:100%;margin-top:8px;padding:.85em .9em;background:var(--paper);
  border:1px solid var(--line);border-radius:0;font-size:.94rem;text-transform:none;letter-spacing:normal
}
.form-layout input:focus,.form-layout select:focus,.form-layout textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.consent{font-weight:400;text-transform:none;letter-spacing:normal;font-size:.84rem;color:var(--muted)}
.consent input{margin-right:8px}
.consent a{text-decoration:underline}
.honey{display:none}
.form-layout button[type=submit]{width:100%;justify-content:center;margin-top:6px}
.form-layout button:disabled{opacity:.5;cursor:not-allowed;background:var(--muted-2);border-color:var(--muted-2)}
.form-layout button:disabled:hover{transform:none}

/* --- 12. Footer, motion, responsive ------------------------------------- */
.sitefoot{background:var(--walnut);color:#c3b6a6;padding-block:clamp(52px,6vw,86px) 26px;margin-top:0}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:clamp(24px,3vw,56px)}
.sitefoot h4{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.sitefoot a{display:block;font-size:.87rem;padding-block:5px}
.sitefoot a:hover{color:var(--accent-soft)}
.footbrand{font-family:var(--display);font-size:1.35rem;color:#fff;margin-bottom:12px}
.footgrid p{font-size:.85rem;margin:0}
.legal{border-top:1px solid #46372c;margin-top:clamp(34px,4vw,58px);padding-top:20px;font-size:.76rem;color:#9c8f81;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.legal a{display:inline}

.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:1080px){
  .footgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
  .heroin{grid-template-columns:1fr;padding-block:clamp(30px,4vw,50px)}
  .hero-copy{max-width:none}
  .hero{background:var(--paper)}
  .hero-media{max-width:560px}
  .hero-media .media{border-radius:120px 120px 3px 3px}
  .stripin{grid-template-columns:1fr 1fr}
  .strip article:nth-child(2){border-right:0}
  .strip article:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .split,.form-layout{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}
  .section-head{grid-template-columns:1fr}
  .navcta{padding:.72em 1em}
}
@media(max-width:860px){
  .utilityin p:last-child{display:none}
  .headin{min-height:64px}
  .menubtn{display:block}
  .sitehead nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);padding:14px var(--gut) 22px;
    flex-direction:column;align-items:stretch;gap:0;box-shadow:var(--shadow-m)
  }
  .sitehead nav.open{display:flex}
  .sitehead nav>a{padding-block:13px;border-bottom:1px solid var(--line-soft);font-size:.95rem}
  .sitehead nav>a::after{display:none}
  .sitehead nav>.navcta{margin-top:16px;text-align:center;justify-content:center;border-bottom:0}
  .categories,.two,.factrow,.pillgrid{grid-template-columns:1fr}
  .stripin{grid-template-columns:1fr}
  .strip article{border-right:0;border-bottom:1px solid var(--line-soft)}
  .footgrid{grid-template-columns:1fr}
  .legal{flex-direction:column;gap:8px}
  .media figcaption{font-size:.64rem;padding:20px 10px 8px}
  .hero-media{max-width:100%}
  .hero-media .media{border-radius:80px 80px 3px 3px}
}
@media(max-width:420px){
  .actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   13. Commercial sourcing additions
   Three-column category grids, Solutions cards, customisation list,
   multi-category checkbox set, anchor offsets.
   ========================================================================== */
[id]{scroll-margin-top:96px}
.mt-s{margin-top:10px}

/* The hero image is cropped into an arch, so an overlay badge in its top corner
   would be clipped by the radius. Keep the hero badge in the square lower
   corner and carry the caption as a static line beneath the figure instead. */
.hero-media .demo-badge{top:auto;bottom:16px;left:16px}

.catlabel{
  display:flex;align-items:center;gap:16px;
  margin:clamp(30px,3.2vw,48px) 0 clamp(16px,1.8vw,24px);
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)
}
.catlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.categories.three{grid-template-columns:repeat(3,1fr)}

/* Solutions */
.solutions{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,32px)}
.solution{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.solution:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.solution .media{border-bottom:1px solid var(--line)}
.solbody{padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;flex:1}
.solbody h3{margin-bottom:8px}
.solbody p{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.solution:hover .catlink{color:var(--accent)}
.solist{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.solist span{font-size:.66rem;letter-spacing:.05em;border:1px solid var(--line);padding:3px 8px;color:var(--muted-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2vw,26px)}
.chip{font-size:.72rem;letter-spacing:.05em;border:1px solid var(--line);padding:6px 11px;color:var(--muted);transition:border-color .2s ease,color .2s ease}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* Customisation topic list: what is discussed vs what is confirmed */
.deferlist{list-style:none;margin:clamp(22px,2.4vw,34px) 0 0;padding:0}
.deferlist li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 0;border-top:1px solid var(--line)}
.deferlist b{font-weight:600;color:var(--ink);font-size:.95rem}
.deferlist span{font-size:.78rem;color:var(--accent);white-space:nowrap}

/* Multi-category selection on the project inquiry form */
.catset{border:0;margin:0 0 18px;padding:0}
.catset legend{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:4px}
.catset legend span{text-transform:none;letter-spacing:normal;font-weight:400;color:var(--muted-2)}
.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.form-layout .check{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:0;padding:12px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;
  font-size:.85rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink-soft);
  transition:border-color .2s ease,background .2s ease
}
.form-layout .check:hover{border-color:var(--accent-soft);background:#fff}
.form-layout .check input{flex:none;width:auto;margin:3px 0 0}
.form-layout .check span{display:block}
.form-layout .check b{display:block;font-weight:600;color:var(--ink);font-size:.87rem;margin-bottom:3px}
.form-layout .check em{display:block;font-style:normal;font-size:.75rem;line-height:1.5;color:var(--muted-2)}

@media(max-width:1080px){
  .categories.three{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .checkgrid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .solutions{grid-template-columns:1fr}
  .deferlist li{flex-direction:column;gap:4px}
  .deferlist span{white-space:normal}
}
@media(max-width:720px){
  .categories.three{grid-template-columns:1fr}
}

/* ==========================================================================
   14. Real-catalogue components
   Hero category mosaic, product cards, product detail gallery + spec table,
   one-stop process flow. Imagery comes from the client's own listings.
   ========================================================================== */
.ratio-sq{aspect-ratio:1/1}
.noimg{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:18px;background:var(--paper-2);color:var(--muted-2);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}

/* Hero: three real categories side by side */
.hero-tiles{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.htile{position:relative;display:block;overflow:hidden;background:var(--paper-2)}
.htile .media{aspect-ratio:auto;height:100%}
.htile .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.htile:hover .media img{transform:scale(1.04)}
.htile-label{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:24px 12px 10px;color:#fff;
  background:linear-gradient(0deg,rgba(22,19,15,.85),rgba(22,19,15,0))}
.htile-label b{font-size:.82rem;font-weight:600}
.htile-label em{font-style:normal;font-size:.66rem;color:#d8cbb8;white-space:nowrap}

/* Product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(16px,1.8vw,26px)}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  transition:transform .3s ease,box-shadow .3s ease}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.pcard-media{display:block;border-bottom:1px solid var(--line);background:#fff}
.pcard-body{padding:clamp(14px,1.4vw,20px);display:flex;flex-direction:column;flex:1}
.pmod{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.pcard h3{font-size:.94rem;line-height:1.36;font-weight:600;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard h3 a:hover{color:var(--accent)}
.pmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:14px}
.pr{font-family:var(--display);font-size:1.06rem;color:var(--ink)}
.moq{font-size:.72rem;color:var(--muted-2)}
.pcard-links{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.srclink{font-size:.72rem;color:var(--muted-2);text-decoration:underline;text-underline-offset:3px}
.srclink:hover{color:var(--accent)}
.pmodels{font-size:.72rem;color:var(--muted-2);margin-bottom:12px}

/* Product detail */
.pd-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start}
.pd-head h1{font-size:clamp(1.55rem,.6rem + 2.1vw,2.5rem);max-width:26ch}
.gallery{display:flex;flex-direction:column;gap:14px}
.gallery-main .media{border:1px solid var(--line);background:#fff}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumb{width:62px;height:62px;display:block;overflow:hidden;
  border:1px solid var(--line);background:#fff;transition:border-color .2s ease}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--accent)}
.gallery-more{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gallery-more .media{border:1px solid var(--line);background:#fff}
.pd-price{font-family:var(--display);font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem);
  color:var(--ink);margin:4px 0 2px}
.pd-moq{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.pd-sub{font-family:var(--display);font-size:1.08rem;margin:clamp(26px,3vw,40px) 0 12px}
.specs{width:100%;border-collapse:collapse;font-size:.83rem}
.specs th{width:40%;text-align:left;vertical-align:top;padding:9px 12px 9px 0;
  font-weight:500;color:var(--muted);border-bottom:1px solid var(--line-soft)}
.specs td{padding:9px 0;color:var(--ink-soft);border-bottom:1px solid var(--line-soft)}
.checklist{list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--muted)}
.checklist li{position:relative;padding:7px 0 7px 20px}
.checklist li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:1px;background:var(--accent)}

/* One-stop process flow */
.flow{list-style:none;margin:0;padding:0;counter-reset:f;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  border-top:1px solid var(--line)}
.flow li{counter-increment:f;padding:clamp(20px,2.2vw,30px) clamp(14px,1.6vw,22px);
  border-right:1px solid var(--line-soft)}
.flow li:last-child{border-right:0}
.flow li::before{content:counter(f,decimal-leading-zero);display:block;margin-bottom:10px;
  font-family:var(--display);font-size:.9rem;color:var(--accent)}
.flow h3{font-size:.95rem;margin-bottom:6px}
.flow p{font-size:.83rem;color:var(--muted)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* Capability figures on the dark section */
.walnut-facts{grid-template-columns:repeat(3,1fr)}
.walnut-facts div{border-top:1px solid #4a3a2f}
.walnut-facts b{color:#fff}
.walnut-facts span{color:#c3b6a6}

@media(max-width:960px){
  .pd-layout{grid-template-columns:1fr}
  .walnut-facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .flow li{border-right:0;border-bottom:1px solid var(--line-soft)}
  .hero-tiles{gap:8px}
  .htile-label{padding:18px 10px 8px}
  .htile-label em{display:none}
}

/* ==========================================================================
   15. B2B procurement home page
   Card actions, one-stop procurement packages, buyer-role blocks and the
   compact solutions grid. All imagery is real product photography.
   ========================================================================== */
.pcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.pcard-actions{display:flex;gap:8px;margin-bottom:12px}
.pcard-actions .btn{flex:1;justify-content:center;text-align:center}
.btn.sm{padding:9px 13px;font-size:.76rem;letter-spacing:.02em}
.pcard-links .srclink,.pcard .srclink{display:inline-block;margin-top:2px}

/* One-stop procurement packages */
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.package{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  padding:clamp(18px,1.8vw,26px)}
.package-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.package-head h3{font-size:1.06rem;margin:0}
.pkgcount{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.package>p{font-size:.85rem;color:var(--muted);margin:10px 0 16px}
.pkgitems{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.pkgitem{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);
  padding:8px;transition:border-color .2s ease,transform .3s ease}
.pkgitem:hover{border-color:var(--accent-soft);transform:translateY(-3px)}
.pkgitem .media{border:0}
.pkgitem span{font-size:.74rem;line-height:1.4;color:var(--ink-soft)}
.pkgitem b{display:block;font-size:.72rem;letter-spacing:.08em;color:var(--accent);margin-bottom:2px}
.pkgitem em{display:block;font-style:normal;font-size:.65rem;color:var(--muted-2);margin-top:3px}
.package .pcard-actions{margin-top:auto;margin-bottom:0}

/* Buyer-role blocks */
.buyers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px)}
.buyer{border-top:2px solid var(--accent);padding-top:15px}
.buyer h3{font-size:1rem;margin-bottom:8px}
.buyer p{font-size:.85rem;color:var(--muted)}

/* Compact space solutions */
.solcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,26px)}
.solcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line)}
.solcard .media{border-bottom:1px solid var(--line)}
.solcard .solbody{padding:clamp(14px,1.4vw,18px)}
.solcard h3{font-size:.92rem;margin-bottom:6px}
.solcard p{font-size:.8rem;color:var(--muted);margin-bottom:10px}

@media(max-width:1080px){
  .packages{grid-template-columns:1fr}
  .pkgitems{grid-template-columns:repeat(4,1fr)}
  .buyers,.solcards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .pkgitems{grid-template-columns:1fr 1fr}
  .buyers,.solcards{grid-template-columns:1fr}
}

/* ==========================================================================
   16. B2B inquiry list (client-side, stored in the browser)
   Header button, drawer panel, list rows, project-inquiry page list and the
   form states. Everything below is progressive: without JavaScript the panel
   stays hidden and the pages read exactly as before.
   ========================================================================== */

/* --- header button --- */
.inqbtn{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  padding:.6em .9em;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  cursor:pointer;transition:border-color .2s ease,background .2s ease
}
.inqbtn:hover{border-color:var(--ink);background:var(--paper)}
.inqcount{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.5em;height:1.5em;padding:0 .3em;
  background:var(--line);color:var(--muted);
  font-size:.7rem;font-weight:600;letter-spacing:0;border-radius:999px
}
.inqcount.on{background:var(--accent);color:#fff}

/* --- drawer --- */
.inqscrim{position:fixed;inset:0;z-index:60;background:rgba(22,19,15,.42)}
.inqscrim.open{display:block}
.inqpanel{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(430px,92vw);background:#fff;border-left:1px solid var(--line);
  box-shadow:var(--shadow-m);
  flex-direction:column
}
.inqpanel.open{display:flex}
.inqpanel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(16px,2vw,22px);border-bottom:1px solid var(--line)
}
.inqpanel-head h2{font-size:1.15rem}
.inqx{
  border:1px solid var(--line);background:transparent;cursor:pointer;
  width:2.1em;height:2.1em;line-height:1;font-size:1rem;color:var(--muted)
}
.inqx:hover{border-color:var(--ink);color:var(--ink)}
.inqpanel-body{flex:1;overflow-y:auto;padding:clamp(14px,2vw,20px);display:grid;gap:10px;align-content:start}
.inqpanel-foot{
  border-top:1px solid var(--line);padding:16px clamp(16px,2vw,22px);
  display:grid;gap:10px;justify-items:start
}
.inqpanel-foot .btn{width:100%;justify-content:center}
body.panel-open{overflow:hidden}

/* --- list rows --- */
.inqempty{border:1px dashed var(--line);padding:clamp(18px,2vw,24px);
  font-size:.85rem;color:var(--muted);background:var(--paper)}
.inqrow{
  display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:center;
  border:1px solid var(--line);background:#fff;padding:10px
}
.inqrow-media{display:block;background:var(--paper-2);overflow:hidden}
.inqrow-media img{width:100%;aspect-ratio:1/1;object-fit:cover}
.inqrow-main{min-width:0}
.inqrow-main b{display:block;font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.inqrow-name{display:block;font-size:.87rem;font-weight:600;color:var(--ink);line-height:1.35}
.inqrow-name:hover{color:var(--accent)}
.inqrow-main em{display:block;font-style:normal;font-size:.72rem;color:var(--muted-2);margin-top:4px}
.inqrow-qty{display:grid;gap:6px;justify-items:end}
.inqrow-qty label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)
}
.inqrow-qty input{
  width:5.2em;padding:.35em .45em;border:1px solid var(--line);background:var(--paper);
  font-size:.85rem;text-align:center
}
.inqrm{
  border:0;background:transparent;padding:0;cursor:pointer;
  font-size:.72rem;letter-spacing:.06em;color:var(--muted-2);
  border-bottom:1px solid var(--line)
}
.inqrm:hover{color:#9a3b23;border-color:#9a3b23}

/* --- project inquiry page list --- */
.listhead{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-bottom:clamp(18px,2vw,26px)
}
.listhead .eyebrow{margin-bottom:8px}
.inqlist{display:grid;gap:10px}
.inqlist:has(.inqrow){grid-template-columns:repeat(2,1fr)}
.inqlist-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:16px
}
.inqclear{
  border:0;background:transparent;padding:0;cursor:pointer;
  font-size:.83rem;font-weight:600;letter-spacing:.04em;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:3px
}
.inqclear:hover{color:var(--ink);border-color:var(--ink)}

/* --- quantity control on a product page --- */
.inqqty{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);padding:.55em .8em;background:#fff
}
.inqqty label{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.inqqty input{
  width:5em;padding:.25em .35em;border:1px solid var(--line);
  background:var(--paper);font-size:.85rem;text-align:center
}

/* --- toast + form states --- */
.inqtoast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:70;max-width:min(520px,92vw);
  background:var(--walnut);color:#f3e7d6;border:1px solid var(--walnut-soft);
  padding:12px 18px;font-size:.82rem;letter-spacing:.02em;
  box-shadow:var(--shadow-m)
}
.inqtoast.on{display:block}
.notice-ok{border-left-color:#3f6b4b;background:#f2f6f1}
.notice-warn{border-left-color:#9a3b23;background:#fbf3f0}
.form-layout input.invalid,
.form-layout select.invalid,
.form-layout textarea.invalid{border-color:#9a3b23;background:#fbf3f0}
.noscript-note{border:1px solid var(--line);background:var(--paper);
  padding:14px 18px;margin-top:12px;font-size:.85rem;color:var(--muted)}

@media(max-width:1080px){
  .inqlist:has(.inqrow){grid-template-columns:1fr}
}
@media(max-width:640px){
  .inqbtn-label{display:none}
  .inqrow{grid-template-columns:64px 1fr;grid-template-areas:"media main" "qty qty";gap:10px}
  .inqrow-media{grid-area:media}
  .inqrow-main{grid-area:main}
  .inqrow-qty{grid-area:qty;grid-auto-flow:column;justify-content:space-between;
    justify-items:start;align-items:center}
}

/* ==========================================================================
   17. Illustrated concept layouts (AI-generated, labelled)
   AI figures, the four mandatory disclosure labels, the zone table and the
   product schedule on /solutions/office|salon|healthcare/.
   ========================================================================== */

.aifigs{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(22px,3vw,34px)}
.aifig{margin:0}
.aifig-media{position:relative;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.aifig-media img{display:block;width:100%;height:auto;aspect-ratio:3/2}
.aifig-badge{
  position:absolute;top:14px;left:14px;margin:0;
  background:rgba(28,24,19,.86);color:#f4ead9;
  padding:.5em .85em;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;backdrop-filter:blur(2px)
}
.aifig figcaption{
  margin-top:14px;border-left:3px solid var(--accent);
  padding:4px 0 4px 16px
}
.aifig-note{margin:0 0 10px;font-size:.87rem;color:var(--muted);line-height:1.6}
.aifig-labels{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px
}
.aifig-labels li{
  border:1px solid var(--line);background:var(--paper);
  padding:.34em .7em;font-size:.71rem;letter-spacing:.03em;color:var(--ink);
  font-weight:600
}
.aifig-labels li:first-child{border-color:var(--accent);color:var(--accent)}

/* --- zone table --- */
.zonelegend{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  margin:18px 0 0;padding:12px 16px;border:1px dashed var(--line);background:var(--paper);
  font-size:.78rem;color:var(--muted)
}
.zonelegend .zl-item{display:inline-flex;align-items:center;gap:8px}
.zonelegend .chip{margin:0}
.tablewrap{overflow-x:auto;margin-top:clamp(18px,2vw,26px);border:1px solid var(--line);background:#fff}
.zonetable{width:100%;border-collapse:collapse;min-width:720px}
.zonetable th,.zonetable td{
  text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:.88rem;line-height:1.55
}
.zonetable thead th{
  background:var(--paper);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600;border-bottom:1px solid var(--line-strong,var(--line))
}
.zonetable tbody th{
  font-weight:600;color:var(--ink);width:26%;min-width:190px
}
.zonetable tbody tr:last-child th,.zonetable tbody tr:last-child td{border-bottom:0}
.zone-where{display:block;margin-top:5px;font-size:.74rem;font-weight:400;color:var(--muted-2)}
.zone-models{width:32%}
.zone-models .chip{margin:0 6px 6px 0}
.chip-note{
  display:inline-block;border:1px dashed var(--line);background:transparent;
  color:var(--muted-2);font-size:.72rem;line-height:1.45;padding:.34em .6em;max-width:100%
}

@media(max-width:860px){
  .aifig-badge{top:10px;left:10px;font-size:.6rem;letter-spacing:.08em;padding:.42em .65em}
  .aifig figcaption{padding-left:12px}
  .zonetable{min-width:0}
  .zonetable thead{display:none}
  .zonetable,.zonetable tbody,.zonetable tr,.zonetable th,.zonetable td{display:block;width:auto}
  .zonetable tr{border-bottom:1px solid var(--line);padding:14px 16px}
  .zonetable tr:last-child{border-bottom:0}
  .zonetable th,.zonetable td{padding:0;border:0}
  .zonetable td{margin-top:10px}
  .zonetable td:last-child{margin-top:12px}
}

/* ==========================================================================
   18. WhatsApp contact
   One floating button (bottom-right) that expands into every published
   WhatsApp number, plus an inline two-number block on the contact surfaces.
   Green is reserved for WhatsApp so it never blends into the site palette.
   z-index sits above content, below the inquiry drawer (60/61) so it can
   never cover the inquiry panel while it is open.
   ========================================================================== */
:root{--wa:#1fa855;--wa-deep:#157a3e;--wa-tint:#f2faf5}

.wafloat{position:fixed;right:22px;bottom:22px;z-index:50}
.wafab{
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--wa);color:#fff;display:grid;place-items:center;padding:0;
  box-shadow:0 12px 28px -12px rgba(21,122,62,.65);
  transition:transform .2s ease,background .2s ease
}
.wafab:hover{background:var(--wa-deep);transform:translateY(-2px)}
.wafab .wa-ic{width:26px;height:26px}
.wa-panel{
  position:absolute;right:0;bottom:68px;width:288px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-m);padding:18px
}
/* Without JavaScript the panel simply stays open, so both numbers remain
   usable; with JavaScript it starts collapsed and the fab toggles it. */
.js .wafloat:not(.open) .wa-panel{display:none}
.js .wafloat.open .wafab{background:var(--wa-deep)}

.wa-title{
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--wa-deep);margin:0
}
.wa-sub{font-size:.8rem;color:var(--muted);margin-top:6px}
.wanum{
  display:block;margin-top:12px;padding:13px 14px;
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .2s ease,background .2s ease
}
.wanum:hover{border-color:var(--wa);background:var(--wa-tint)}
.wanum-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.wanum b{font-size:1rem;color:var(--ink);letter-spacing:.01em}
.wanum-go{font-size:.7rem;font-weight:600;letter-spacing:.08em;color:var(--wa-deep);white-space:nowrap}

/* inline block on home / product / solution / project inquiry / contact */
.wainline{margin-top:22px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px 18px;max-width:480px}
.wainline .wa-title{margin-bottom:12px}
.wa-links{display:grid;gap:8px}
.wa-link{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .2s ease,background .2s ease
}
.wa-link:hover{border-color:var(--wa);background:var(--wa-tint)}
.wa-link .wa-ic{width:20px;height:20px;color:var(--wa-deep);flex:none}
.wa-link-label{font-size:.75rem;color:var(--muted);letter-spacing:.03em}
.wa-link b{margin-left:auto;font-size:.95rem;color:var(--ink);letter-spacing:.01em;white-space:nowrap}

@media(max-width:640px){
  .wafloat{right:14px;bottom:14px}
  .wafab{width:52px;height:52px}
  .wafab .wa-ic{width:24px;height:24px}
  .wa-panel{width:min(300px,calc(100vw - 28px));bottom:64px}
  .wainline{max-width:100%}
  .wa-link b{font-size:.86rem}
}