/* ============================================================
   ML MARBLE & GRANITE — mlmarblegranite.au
   Landing page stylesheet, copied from demo/assets/css/style.css.
   Everything below the "ADDED FOR WORDPRESS" rule is not in the layout.
   Palette / type tokens theo _brief/07-brand-design/
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
:root{
  /* colour */
  --black:#141414;   --basalt:#232323;  --ink:#1B1B1B;
  --slate:#5A5C5E;   --white:#FAF9F7;   --limestone:#F0EDE8;
  --vein:#DDD8D1;    --brass:#B08D57;   --brass-deep:#8E6F41;
  --brass-ink:#6F5628;   /* brass đủ tương phản để làm CHỮ trên nền sáng */
  --brass-lite:#C9A46A;  /* brass đủ tương phản để làm CHỮ trên nền tối  */
  --verde:#2E4A45;   --muted-dark:#B5B0A9;
  --sage:#4A7C59;    --rust:#A8442A;

  /* type */
  --f-display:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --fs-h1:clamp(2.25rem,1.35rem + 4.2vw,4rem);
  --fs-h2:clamp(1.75rem,1.25rem + 2.2vw,2.75rem);
  --fs-h3:clamp(1.1875rem,1.1rem + .5vw,1.4375rem);
  --fs-lead:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  --fs-body:clamp(1rem,.975rem + .12vw,1.0625rem);
  --fs-sm:.875rem;
  --fs-xs:.78rem;
  --fs-stat:clamp(2.5rem,1.7rem + 3.4vw,3.75rem);

  /* space */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;  --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4rem;   --s9:6rem;
  --sec-y:clamp(3.5rem,2.2rem + 5.4vw,7rem);
  --gutter:clamp(1.125rem,.6rem + 2.2vw,2.25rem);
  --maxw:1220px;
  --narrow:760px;

  /* misc */
  --r:4px; --r-md:6px;
  --sh1:0 1px 2px rgba(20,20,20,.05),0 2px 10px rgba(20,20,20,.045);
  --sh2:0 6px 18px rgba(20,20,20,.10),0 18px 42px rgba(20,20,20,.07);
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:200ms;
  --hdr-h:74px;
}

/* ---------- 2. RESET / BASE ------------------------------- */
*,*::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(--white);color:var(--ink);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.12;margin:0 0 var(--s4);
  font-weight:600;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);letter-spacing:-.008em}
p{margin:0 0 var(--s4);max-width:68ch}
a{color:inherit}
ul{margin:0;padding:0}
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass);color:var(--black)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);
  color:var(--white);padding:var(--s3) var(--s5);text-decoration:none}
.skip:focus{left:var(--s4);top:var(--s4)}

/* ---------- 3. LAYOUT HELPERS ----------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--narrow)}
.sec{padding-block:var(--sec-y)}
.sec--alt{background:var(--limestone)}
.sec--dark{background:var(--black);color:var(--white)}
.sec--dark h2,.sec--dark h3{color:var(--white)}
.sec--verde{background:var(--verde);color:var(--white)}
.sec--verde h2,.sec--verde h3{color:var(--white)}
.sec--tight{padding-block:clamp(2.25rem,1.6rem + 2.6vw,3.5rem)}

.eyebrow{
  font-family:var(--f-body);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--brass-ink);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3)}
.eyebrow::after{content:"";flex:0 0 34px;height:1px;background:currentColor;opacity:.55}
.sec--dark .eyebrow,.sec--verde .eyebrow{color:var(--brass-lite)}

.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--slate);max-width:62ch}
.sec--dark .lead,.sec--verde .lead{color:var(--muted-dark)}
.sec-head{max-width:64ch;margin-bottom:clamp(2rem,1.4rem + 2vw,3.25rem)}

.grid{display:grid;gap:clamp(1rem,.7rem + 1.2vw,1.75rem);align-items:stretch}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- 4. BUTTONS ------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:.95rem 1.75rem;font:inherit;font-weight:600;font-size:.9875rem;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1.5px solid transparent;border-radius:var(--r);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brass);color:var(--black)}
.btn--primary:hover{background:var(--brass-deep);color:var(--white)}
.btn--dark{background:var(--black);color:var(--white)}
.btn--dark:hover{background:var(--basalt)}
.btn--ghost{border-color:currentColor;color:inherit;background:transparent}
.btn--ghost:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.sec--dark .btn--ghost:hover,.sec--verde .btn--ghost:hover,
.hero .btn--ghost:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.btn--sm{padding:.6rem 1.1rem;font-size:.875rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}

/* ---------- 5. TOP BAR + HEADER --------------------------- */
.topbar{background:var(--black);color:var(--muted-dark);font-size:var(--fs-xs);
  letter-spacing:.04em}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  align-items:center;justify-content:center;padding-block:.55rem}
.topbar a{color:var(--brass-lite);text-decoration:none;font-weight:600}
.topbar a:hover{text-decoration:underline}
.topbar .dot{opacity:.35}
@media(max-width:700px){.topbar .hide-sm{display:none}}

.hdr{position:sticky;top:0;z-index:80;background:rgba(250,249,247,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--vein);
  transition:box-shadow var(--dur) var(--ease)}
.hdr.is-stuck{box-shadow:var(--sh1)}
.hdr .wrap{display:flex;align-items:center;gap:var(--s5);
  min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
.brand svg{width:40px;height:40px;flex:0 0 auto}
.brand b{font-family:var(--f-display);font-size:1.0625rem;font-weight:600;
  letter-spacing:.01em;display:block;line-height:1.1}
.brand span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.75rem,.2rem + 1.1vw,1.6rem)}
.nav a{text-decoration:none;font-size:.925rem;font-weight:500;color:var(--ink);
  padding:.35rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--brass);transition:right var(--dur) var(--ease)}
.nav a:hover::after{right:0}
.hdr-cta{display:flex;align-items:center;gap:var(--s3);margin-left:var(--s4)}
.navtoggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--vein);
  border-radius:var(--r);padding:.5rem .7rem;cursor:pointer;line-height:0}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1040px){
  .navtoggle{display:block}
  .nav{position:fixed;inset:calc(var(--hdr-h) + 34px) 0 auto 0;background:var(--white);
    border-bottom:1px solid var(--vein);flex-direction:column;align-items:stretch;
    gap:0;padding:var(--s3) var(--gutter) var(--s5);margin:0;
    box-shadow:var(--sh2);display:none}
  .nav.is-open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--vein);font-size:1.0625rem}
  .nav a::after{display:none}
  .hdr-cta{display:none}
}

/* ---------- 6. HERO --------------------------------------- */
.hero{position:relative;background:var(--black);color:var(--white);isolation:isolate;
  min-height:clamp(520px,78vh,760px);display:flex;align-items:center;
  padding-block:clamp(3.5rem,2rem + 8vw,6rem)}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(10,10,10,.93) 0%,rgba(12,12,12,.80) 38%,rgba(14,14,14,.34) 72%,rgba(14,14,14,.12) 100%)}
.hero h1{color:var(--white);max-width:20ch;margin-bottom:var(--s5)}
.hero h1 em{font-style:normal;color:var(--brass-lite)}
.hero__sub{font-size:var(--fs-lead);color:#DAD6D0;max-width:52ch;line-height:1.5;
  margin-bottom:clamp(1.75rem,1.2rem + 1.4vw,2.5rem)}
.hero__micro{margin-top:var(--s5);font-size:var(--fs-sm);color:var(--muted-dark);
  display:flex;flex-wrap:wrap;gap:.4rem var(--s4);align-items:center}
.hero__micro .dot{opacity:.4}
.hero__scroll{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);
  font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-dark);opacity:.7;display:flex;flex-direction:column;
  align-items:center;gap:.4rem}
.hero__scroll::after{content:"";width:1px;height:26px;background:currentColor;
  animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(max-width:700px){.hero__scroll{display:none}}

/* ---------- 7. TRUST BAR ---------------------------------- */
.trust{background:var(--limestone);border-bottom:1px solid var(--vein)}
.trust ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s5) var(--s4);padding-block:clamp(1.75rem,1.2rem + 1.8vw,2.75rem)}
.trust li{text-align:center;position:relative}
.trust li+li::before{content:"";position:absolute;left:0;top:12%;bottom:12%;
  width:1px;background:var(--vein)}
.trust b{display:block;font-family:var(--f-display);font-size:var(--fs-stat);
  font-weight:600;color:var(--brass-ink);line-height:1;letter-spacing:-.02em}
.trust span{display:block;margin-top:.55rem;font-size:var(--fs-xs);
  letter-spacing:.13em;text-transform:uppercase;color:var(--slate);line-height:1.45}
@media(max-width:700px){
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li:nth-child(odd)::before{display:none}
}

/* ---------- 8. CARDS -------------------------------------- */
.card{background:#fff;border:1px solid var(--vein);border-radius:var(--r-md);
  padding:clamp(1.35rem,1rem + 1vw,1.9rem);box-shadow:var(--sh1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#CFC8BE}
.card h3{margin-bottom:.55rem}
.card p{margin:0;color:var(--slate);font-size:.9625rem}
.card__ico{width:44px;height:44px;margin-bottom:var(--s4);color:var(--brass-ink)}
.card__ico svg{width:100%;height:100%}

/* material card */
.mat{border:1px solid var(--vein);border-radius:var(--r-md);overflow:hidden;
  background:#fff;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mat:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.mat__img{aspect-ratio:4/3;overflow:hidden;background:var(--limestone)}
.mat__img img{width:100%;height:100%;object-fit:cover;
  transition:transform 500ms var(--ease)}
.mat:hover .mat__img img{transform:scale(1.045)}
.mat__body{padding:clamp(1.15rem,.9rem + .8vw,1.6rem);flex:1;display:flex;flex-direction:column}
.mat__body h3{margin-bottom:.3rem}
.mat__best{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);font-weight:600;margin-bottom:.75rem}
.mat__body p{font-size:.9375rem;color:var(--slate);margin:0}

/* ---------- 9. COMPARISON TABLE --------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--vein);border-radius:var(--r-md);
  background:#fff;margin-top:clamp(1.75rem,1.2rem + 1.5vw,2.75rem)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:.9375rem}
caption{text-align:left;padding:var(--s4) var(--s5) 0;color:var(--slate);
  font-size:var(--fs-sm)}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--vein)}
thead th{background:var(--limestone);font-size:var(--fs-xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);font-weight:600;white-space:nowrap}
tbody th{font-weight:600;color:var(--ink)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.yes{color:var(--brass-ink);font-weight:600}
.stars{letter-spacing:.12em;color:var(--brass-ink)}

/* ---------- 10. BAN NOTICE -------------------------------- */
.ban{position:relative;isolation:isolate}
.ban .grid{grid-template-columns:1.05fr .95fr;align-items:start;
  gap:clamp(2rem,1.2rem + 3vw,4rem)}
@media(max-width:900px){.ban .grid{grid-template-columns:1fr}}
.ban h2{max-width:18ch}
.banlist{list-style:none;display:grid;gap:var(--s5)}
.banlist li{padding-left:1.9rem;position:relative}
.banlist b{display:block;color:var(--brass-lite);font-size:.9375rem;
  letter-spacing:.03em;margin-bottom:.3rem}
.banlist p{color:var(--muted-dark);margin:0;font-size:.9625rem}
.banlist li::before{content:"";position:absolute;left:0;top:.55rem;width:11px;height:11px;
  border:2px solid var(--brass);transform:rotate(45deg)}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem;
  border:1px solid rgba(201,164,106,.45);border-radius:100px;font-size:var(--fs-xs);
  letter-spacing:.11em;text-transform:uppercase;color:var(--brass-lite);
  font-weight:600;margin-bottom:var(--s5)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass)}

/* ---------- 11. CRAFT ------------------------------------- */
.craft{display:grid;gap:clamp(2.25rem,1.5rem + 3vw,4rem)}
.craft__row{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,1rem + 2.4vw,3.25rem);
  align-items:center}
.craft__row:nth-child(even) .craft__fig{order:2}
@media(max-width:860px){
  .craft__row{grid-template-columns:1fr}
  .craft__row:nth-child(even) .craft__fig{order:0}
}
.craft__fig{position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:3/2;background:var(--limestone)}
.craft__fig img{width:100%;height:100%;object-fit:cover}
.craft__n{font-family:var(--f-display);font-size:clamp(2.5rem,2rem + 2vw,3.5rem);
  color:var(--vein);line-height:1;display:block;margin-bottom:var(--s3)}

/* edge profile strip */
.edges{margin-top:clamp(2.5rem,1.8rem + 2.4vw,4rem);
  border-top:1px solid var(--vein);padding-top:clamp(1.75rem,1.4rem + 1.4vw,2.5rem)}
.edges ul{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:var(--s4)}
.edges li{text-align:center}
.edges figure{margin:0;background:#fff;border:1px solid var(--vein);
  border-radius:var(--r);padding:.9rem .6rem .7rem}
.edges svg{width:100%;max-width:128px;height:auto;margin-inline:auto;color:var(--ink);
  display:block}
.edges figcaption{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);margin-top:.5rem}

/* ---------- 12. PROCESS ----------------------------------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,1rem + 2vw,2.75rem);counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;position:relative;padding-top:var(--s6)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:var(--f-display);font-size:1.5rem;color:var(--brass-ink);
  position:absolute;top:0;left:0;line-height:1}
.steps li::after{content:"";position:absolute;top:.55rem;left:2.6rem;right:0;height:1px;
  background:var(--vein)}
.steps h3{font-size:1.125rem;margin-bottom:.4rem}
.steps p{margin:0;color:var(--slate);font-size:.9375rem}
.sec--dark .steps li::after{background:#33322F}
.sec--dark .steps p{color:var(--muted-dark)}
.sec--dark .steps li::before{color:var(--brass-lite)}

/* ---------- 13. GALLERY ----------------------------------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--limestone);aspect-ratio:3/2}
@media(min-width:901px){
  .gal figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .gal figure:last-child{grid-column:span 2;aspect-ratio:auto}
  .gal figure:first-child>img,.gal figure:last-child>img{position:absolute;inset:0}
}
@media(max-width:900px){
  .gal figure:first-child{grid-column:span 2;aspect-ratio:16/10}
  .gal figure:last-child{grid-column:span 2;aspect-ratio:16/9}
}
@media(max-width:460px){.gal{grid-template-columns:1fr}
  .gal figure:first-child,.gal figure:last-child{grid-column:span 1;aspect-ratio:3/2}}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 550ms var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:1.4rem .9rem .7rem;
  font-size:var(--fs-xs);letter-spacing:.06em;color:#fff;
  background:linear-gradient(to top,rgba(15,15,15,.8),transparent)}

/* dev note — xoá khi đã thay ảnh thật */
.devnote{border:1px dashed #C6BDAE;background:#FBF6EC;color:#6B5A3C;
  padding:.75rem 1.05rem;border-radius:var(--r);font-size:var(--fs-sm);
  line-height:1.55;margin:0 0 var(--s5);max-width:none}
.devnote b{color:#5A4A2E}
.devnote code{background:#F1E7D4;padding:.1em .35em;border-radius:3px;font-size:.92em}

/* ---------- 14. WHY US ------------------------------------ */
.why{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,1rem + 2vw,2.75rem)}
@media(max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.why{grid-template-columns:1fr}}
.why li{border-top:2px solid var(--brass);padding-top:var(--s4)}
.why h3{font-size:1.0625rem;margin-bottom:.35rem}
.why p{margin:0;color:var(--slate);font-size:.9375rem}
.sec--dark .why p{color:var(--muted-dark)}

/* ---------- 15. SPLIT BAND (trade) ------------------------ */
.band{position:relative;isolation:isolate;background:var(--black);color:var(--white)}
.band__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.band__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(12,12,12,.92),rgba(12,12,12,.6))}
.band h2{color:var(--white)}
.band .lead{color:var(--muted-dark)}
.tradelist{list-style:none;display:grid;gap:.65rem;margin:var(--s5) 0 var(--s6)}
.tradelist li{padding-left:1.6rem;position:relative;color:#DAD6D0;font-size:.9625rem}
.tradelist li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;
  background:var(--brass)}

/* ---------- 16. PRICING ----------------------------------- */
.price__figure{border:1px solid var(--vein);border-radius:var(--r-md);background:#fff;
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);text-align:center;box-shadow:var(--sh1)}
.price__figure b{display:block;font-family:var(--f-display);
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);color:var(--ink);line-height:1.05}
.price__figure span{display:block;margin-top:.6rem;color:var(--slate);font-size:.9375rem}
.factors{list-style:none;display:grid;gap:var(--s4);counter-reset:f;margin-top:var(--s5)}
.factors li{counter-increment:f;padding-left:2.3rem;position:relative;color:var(--slate);
  font-size:.9625rem}
.factors li::before{content:counter(f);position:absolute;left:0;top:.05em;
  width:1.55rem;height:1.55rem;border:1px solid var(--vein);border-radius:50%;
  display:grid;place-items:center;font-size:.75rem;color:var(--brass-ink);
  font-weight:600;font-family:var(--f-body)}
.factors b{color:var(--ink)}

/* ---------- 17. SINCE 2009 / PROOF ------------------------ */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1.3rem + 2.8vw,4rem);
  align-items:center}
@media(max-width:860px){.proof{grid-template-columns:1fr}}
.proof__facts{list-style:none;display:grid;gap:0;border-top:1px solid var(--vein)}
.proof__facts li{display:flex;justify-content:space-between;gap:var(--s4);
  padding:.9rem 0;border-bottom:1px solid var(--vein);font-size:.9375rem}
.proof__facts dt,.proof__facts .k{color:var(--slate)}
.proof__facts .v{font-weight:600;text-align:right}

/* ---------- 18. AREAS ------------------------------------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s5)}
.chips li{border:1px solid var(--vein);background:#fff;border-radius:100px;
  padding:.4rem .9rem;font-size:.8125rem;color:var(--slate)}
.chips li.is-home{background:var(--black);color:var(--white);border-color:var(--black);
  font-weight:600}

/* ---------- 19. FAQ --------------------------------------- */
.faq{border-top:1px solid var(--vein);max-width:900px}
.faq details{border-bottom:1px solid var(--vein)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 3rem 1.15rem 0;
  position:relative;font-weight:600;font-size:1.0625rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.65rem;top:1.55rem;
  width:11px;height:11px;border-right:2px solid var(--brass-ink);
  border-bottom:2px solid var(--brass-ink);transform:rotate(45deg);
  transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.8rem}
.faq details p{margin:0 0 1.25rem;color:var(--slate);max-width:70ch}
.faq summary:hover{color:var(--brass-ink)}

/* ---------- 20. CONTACT / FORM ---------------------------- */
.contact{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,1.2rem + 3vw,4rem);align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:.4rem}
.field.row2{grid-template-columns:1fr 1fr;gap:var(--s4);display:grid}
@media(max-width:560px){.field.row2{grid-template-columns:1fr}}
label{font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em}
label .req{color:var(--rust)}
input,select,textarea{
  font:inherit;font-size:1rem;padding:.8rem .9rem;border:1px solid #CFC8BE;
  border-radius:var(--r);background:#fff;color:var(--ink);width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:#B6AEA2}
input:focus,select:focus,textarea:focus{border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(176,141,87,.18);outline:none}
textarea{resize:vertical;min-height:118px}
select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A5C5E' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--rust);font-size:var(--fs-xs);min-height:1em}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--rust)}
.consent{font-size:var(--fs-xs);color:var(--slate);max-width:56ch}
.formnote{font-size:var(--fs-sm);color:var(--slate)}
.formok{background:#EDF4EF;border:1px solid #C4DBCC;color:#26543A;padding:1rem 1.15rem;
  border-radius:var(--r);font-size:.9375rem}

.infocard{background:var(--black);color:var(--white);border-radius:var(--r-md);
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.25rem)}
.infocard h3{color:var(--white);font-size:1.25rem;margin-bottom:var(--s5)}
.infocard dl{margin:0;display:grid;gap:1.15rem}
.infocard dt{font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass-lite);margin-bottom:.25rem}
.infocard dd{margin:0;font-size:1rem;color:#E6E3DE;line-height:1.5}
.infocard a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.infocard a:hover{border-color:var(--brass)}
.infocard .big{font-family:var(--f-display);font-size:1.65rem;border:0;display:inline-block}
.mapbox{margin-top:var(--s5);border-radius:var(--r);overflow:hidden;
  border:1px solid #33322F;aspect-ratio:16/9;background:#1E1E1E}
.mapbox iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 21. FOOTER ------------------------------------ */
.ftr{background:var(--black);color:var(--muted-dark);font-size:.9125rem;
  padding-block:clamp(2.75rem,2rem + 2.4vw,4rem) var(--s6)}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(1.75rem,1.2rem + 2vw,3rem)}
@media(max-width:860px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr .cols{grid-template-columns:1fr}}
.ftr h4{color:var(--white);font-family:var(--f-body);font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;margin:0 0 var(--s4);font-weight:600}
.ftr ul{list-style:none;display:grid;gap:.55rem}
.ftr a{color:var(--muted-dark);text-decoration:none}
.ftr a:hover{color:var(--white)}
.ftr .brand b{color:var(--white)}
.ftr .brand span{color:var(--slate)}
.ftr__about{color:#98938C;max-width:34ch;margin-top:var(--s4);font-size:.875rem}
.ftr__legal{border-top:1px solid #2A2A2A;margin-top:clamp(2rem,1.5rem + 1.6vw,3rem);
  padding-top:var(--s5);display:flex;flex-wrap:wrap;gap:.5rem var(--s5);
  justify-content:space-between;font-size:var(--fs-xs);color:#807B74}

/* ---------- 22. STICKY MOBILE CTA ------------------------- */
.mcta{display:none}
@media(max-width:860px){
  .mcta{display:grid;grid-template-columns:1fr 1fr;position:fixed;inset:auto 0 0 0;
    z-index:90;background:var(--black);padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 18px rgba(0,0,0,.22)}
  .mcta a{padding:1rem .5rem;text-align:center;font-weight:600;font-size:.9375rem;
    text-decoration:none;color:var(--white);display:flex;align-items:center;
    justify-content:center;gap:.45rem}
  .mcta a+a{background:var(--brass);color:var(--black)}
  .mcta svg{width:17px;height:17px}
  body{padding-bottom:60px}
}

/* ---------- 23. REVEAL ANIMATION -------------------------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ============================================================
   25. HỆ THỐNG NỀN SECTION (v2)
   Mỗi loại nền lấy từ một trạng thái thật của đá:
   paper = slab đã đánh bóng · stone = đá mài mờ ·
   slab / quarry = đá tối trong xưởng · verde = đá xanh
   ============================================================ */

.sec,.trust,.hero,.band{position:relative}
.sec{isolation:isolate}

/* --- nền sáng: vân đá cực nhạt, không cản chữ --- */
.sec--paper{
  background-color:var(--white);
  background-image:url("../img/bg-paper.jpg");
  background-size:cover;background-position:center}
.sec--stone{
  background-color:var(--limestone);
  background-image:
    linear-gradient(180deg,rgba(240,237,231,.55),rgba(240,237,231,.30) 40%,rgba(240,237,231,.60)),
    url("../img/bg-limestone.jpg");
  background-size:cover;background-position:center}

/* --- nền tối: ảnh đá + màn phủ + quầng đồng --- */
.sec--slab,.sec--quarry,.sec--verde{
  background-color:var(--black);background-repeat:no-repeat;
  background-size:cover;background-position:center}
.sec--slab{
  background-image:
    radial-gradient(88% 62% at 10% -8%,rgba(176,141,87,.26),transparent 60%),
    linear-gradient(178deg,rgba(9,9,10,.90),rgba(15,15,16,.955)),
    url("../img/bg-slab.jpg")}
.sec--quarry{
  background-image:
    radial-gradient(72% 58% at 88% 4%,rgba(176,141,87,.20),transparent 62%),
    linear-gradient(182deg,rgba(9,10,9,.93),rgba(12,13,12,.96)),
    url("../img/bg-quarry.jpg")}
.sec--verde{
  background-image:
    radial-gradient(80% 60% at 14% 0%,rgba(176,141,87,.20),transparent 60%),
    linear-gradient(174deg,rgba(20,38,35,.93),rgba(12,22,20,.96)),
    url("../img/bg-quarry.jpg")}

/* hạt film mỏng — chống dải màu trên nền tối */
.sec--slab::before,.sec--quarry::before,.sec--verde::before,.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
.sec--slab>*,.sec--quarry>*,.sec--verde>*{position:relative;z-index:1}


/* --- MẠCH VÂN trang trí: chỉ dùng 2 chỗ, tràn khỏi mép --- */
.veined::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-4%;right:-6%;width:min(46%,540px);height:108%;opacity:.5;
  background-repeat:no-repeat;background-size:contain;background-position:top right;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 820' fill='none' stroke='%23B08D57' stroke-linecap='round'%3E%3Cpath d='M604 26C486 108 528 232 424 314S252 428 302 540 486 664 434 794' stroke-width='1.5' opacity='.5'/%3E%3Cpath d='M604 132C502 204 546 296 452 376S298 470 350 574 470 660 442 742' stroke-width='1' opacity='.36'/%3E%3Cpath d='M604 262C524 302 566 384 504 436S402 508 430 566' stroke-width='.8' opacity='.28'/%3E%3Cpath d='M418 322c-26 14-52 6-70-10' stroke-width='.7' opacity='.3'/%3E%3Cpath d='M452 380c-30 10-58-2-74-20' stroke-width='.7' opacity='.22'/%3E%3C/svg%3E")}
.veined>*{position:relative;z-index:1}
@media(max-width:900px){.veined::after{display:none}}

/* --- CẠNH SLAB: dải phân cách, đọc như mép mặt bàn đá nhìn nghiêng --- */
.slabedge{
  height:clamp(13px,1.5vw,20px);border:0;margin:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30) 0 1px,transparent 1px),
    linear-gradient(180deg,var(--brass) 1px,rgba(176,141,87,.55) 2px,transparent 3px),
    linear-gradient(180deg,#2B2A27 3px,#191918 55%,#0F0F0F 100%)}

/* --- TRUST BAR trên nền đá mài --- */
.trust{
  background-color:var(--limestone);
  background-image:
    linear-gradient(180deg,rgba(240,237,231,.62),rgba(240,237,231,.42)),
    url("../img/bg-limestone.jpg");
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--vein)}

/* --- HERO: quầng đồng dưới trái + hạt film --- */
.hero::after{
  background:
    radial-gradient(70% 90% at 6% 92%,rgba(176,141,87,.26),transparent 58%),
    linear-gradient(100deg,rgba(10,10,10,.93) 0%,rgba(12,12,12,.80) 38%,rgba(14,14,14,.32) 72%,rgba(14,14,14,.10) 100%)}
.hero::before{opacity:.42}
.hero>.wrap,.hero>.hero__scroll{position:relative;z-index:1}

/* --- TRADE band: phủ sắc verde để khác các section tối khác --- */
.band::after{
  background:
    radial-gradient(64% 80% at 90% 10%,rgba(176,141,87,.18),transparent 60%),
    linear-gradient(95deg,rgba(16,32,29,.94),rgba(14,26,24,.72))}

/* --- FOOTER trên nền đá tối --- */
.ftr{
  background-color:var(--black);
  background-image:
    linear-gradient(180deg,rgba(12,12,12,.94),rgba(10,10,10,.97)),
    url("../img/bg-slab.jpg");
  background-size:cover;background-position:center bottom}

/* --- khối nội dung trên nền có vân: nền trắng đặc cho chữ luôn rõ --- */
.sec--paper .card,.sec--stone .card,
.sec--paper .mat,.sec--stone .mat,
.sec--paper .tablewrap,.sec--stone .tablewrap,
.sec--paper .price__figure,.sec--stone .price__figure,
.sec--paper .edges figure,.sec--stone .edges figure,
.sec--paper .chips li,.sec--stone .chips li{background-color:#fff}

/* ---------- 24. PRINT ------------------------------------- */
@media print{
  .topbar,.hdr,.mcta,.hero__scroll,.mapbox{display:none!important}
  body{background:#fff;color:#000}
  .sec--dark,.band,.infocard,.sec--slab,.sec--quarry,.sec--verde,.ftr,.trust,
  .sec--paper,.sec--stone{background:#fff!important;color:#000!important;background-image:none!important}
  .slabedge{display:none!important}
}

/* ============================================================
   ADDED FOR WORDPRESS
   Nothing above this line differs from demo/assets/css/style.css.
   Below: the layout's inline styles turned into classes, the
   Contact Form 7 markup fitted to the layout's form, and the
   two templates the static layout has no equivalent for.
   ============================================================ */

/* ---------- inline styles from the layout, as classes ------ */
.svc-outro{margin-top:2rem}
.ban__cta{margin-top:2rem}
.edges__note{margin-top:1.5rem;font-size:1rem}
.band__grid{align-items:center}
.price__grid{align-items:start;gap:clamp(2rem,1.2rem + 3vw,4rem)}
.eyebrow--centre{justify-content:center}
.btn-row--centre{justify-content:center;margin-top:1.5rem}
.formnote--centre{margin-top:1rem;text-align:center}

/* "17 yrs" — the unit rides along under the figure's own size. */
.trust b .unit{font-size:.4em;letter-spacing:0;display:inline;text-transform:none}

/* With the enquiry form switched off, the contact card stands alone. */
.contact--noform{grid-template-columns:minmax(0,560px);justify-content:center}

/* ---------- Contact Form 7 --------------------------------- */
/* CF7 wraps the form in two divs, so the layout's .form grid has to be
   re-applied to the <form> CF7 actually renders. */
.form .wpcf7{display:block}
.form .mlmg-form{display:grid;gap:var(--s4)}
.form .wpcf7-form-control-wrap{display:block}

/* CF7 renders its own <input>; give it the layout's field styling. */
.mlmg-form input[type=text],.mlmg-form input[type=email],.mlmg-form input[type=tel],
.mlmg-form select,.mlmg-form textarea{width:100%}

/* CF7's per-field error text, in place of the layout's .err paragraph. */
.mlmg-form .wpcf7-not-valid-tip{color:var(--rust);font-size:var(--fs-xs);margin-top:.35rem}
.mlmg-form input[aria-invalid=true],.mlmg-form textarea[aria-invalid=true]{border-color:var(--rust)}

/* The response banner replaces the layout's #formok box. Success keeps the
   layout's green; CF7's other states borrow the rust used for field errors. */
.mlmg-form .wpcf7-response-output{margin:0;padding:1rem 1.15rem;border-radius:var(--r);
  border:1px solid #C4DBCC;background:#EDF4EF;color:#26543A;font-size:var(--fs-sm)}
.mlmg-form.invalid .wpcf7-response-output,
.mlmg-form.unaccepted .wpcf7-response-output,
.mlmg-form.failed .wpcf7-response-output,
.mlmg-form.aborted .wpcf7-response-output{
  border-color:#E2C3B9;background:#FBEFEC;color:#7A2F1B}

.mlmg-form .wpcf7-spinner{margin:0 0 0 .75rem}
.mlmg-form .opt{font-weight:400;color:var(--slate)}
.mlmg-form .btn-row{margin-top:.25rem}

/* CF7 posts back to the page, so the confirmation has to be findable. */
.mlmg-form .wpcf7-response-output:not(:empty){scroll-margin-block:6rem}

/* ---------- privacy policy / terms page -------------------- */
.prose{max-width:var(--narrow)}
.prose h2{font-size:var(--fs-h3);margin-top:var(--s7)}
.prose h3{margin-top:var(--s6)}
.prose ul,.prose ol{margin:0 0 var(--s4);padding-left:1.35rem}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--brass-ink)}
.prose__back{margin-top:var(--s7);font-size:var(--fs-sm)}

/* ---------- wp-admin bar -----------------------------------
   Logged in, WordPress pushes the page down 32px; the sticky header
   has to move with it or it sits under the bar. */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .hdr{top:46px}
}

/* ---------- hero: white marble ------------------------------
   Client change, 2026-09-18. The layout's hero is near-black stone with
   white type; they asked for white marble instead. The photograph swap
   alone would leave white text on a white slab, so the whole hero flips
   to the light treatment here. Everything is an override of the block
   in section 6 above — that block is still the layout's. */
.hero{background:var(--white);color:var(--ink)}

/* The wash still fades left-to-right, so the heading always sits on the
   calm end of the slab and the veining stays visible on the right. */
.hero::after{
  background:linear-gradient(100deg,
    rgba(250,249,247,.95) 0%,
    rgba(250,249,247,.88) 38%,
    rgba(250,249,247,.55) 72%,
    rgba(250,249,247,.28) 100%)}

/* The film grain exists to stop banding on the dark slabs; on white it
   only makes the marble look dirty. */
.hero::before{display:none}

.hero h1{color:var(--ink)}
.hero h1 em{color:var(--brass-ink)}          /* brass-lite is unreadable on white */
.hero__sub{color:var(--slate)}
.hero__micro{color:var(--slate)}
.hero__micro .dot{opacity:.5}
.hero__scroll{color:var(--slate);opacity:.8}

/* The ghost button inverted to white-on-dark for the dark hero. */
.hero .btn--ghost{border-color:var(--ink);color:var(--ink)}
.hero .btn--ghost:hover{background:var(--black);color:var(--white);border-color:var(--black)}

/* ---------- reveal-on-scroll, without JavaScript ------------
   The layout hides every .rv block at opacity 0 and waits for main.js to
   add .in. That means a visitor with JavaScript off — or one request where
   the script 404s — sees an all but empty page below the hero. <noscript>
   only matches when scripting is genuinely disabled, so this costs nothing
   in the normal case and removes the blank-page failure mode. */
/* (the rule itself lives in header.php, inside <noscript>) */