:root{
  --cocoa:#3C231E;--brown:#733D19;--sand:#E8D1A7;--cream:#F4EDE0;--mustard:#E6BE59;--gold:#BD9943;
  --min:#A1442A;--min-soft:#F1DDD2;--com:#585D31;--com-soft:#E4E6D2;
  --bg:#F7F2E9;--panel:#EEE5D6;--card:#FFFCF6;--line:#E0D4C0;--text:#3A2A20;--muted:#6A5848;--head:#2A1A13;
  --btn:#733D19;--btn-text:#FFF7EC;
  --serif:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1410;--panel:#261C16;--card:#2C211A;--line:#443428;--text:#E9DDCB;--muted:#C2AE96;--head:#F6ECDD;
    --btn:#E6BE59;--btn-text:#2A1A13;--min-soft:#3A231C;--com-soft:#2B2E1C;--min:#D9754F;--com:#A7AE6A;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1410;--panel:#261C16;--card:#2C211A;--line:#443428;--text:#E9DDCB;--muted:#C2AE96;--head:#F6ECDD;
  --btn:#E6BE59;--btn-text:#2A1A13;--min-soft:#3A231C;--com-soft:#2B2E1C;--min:#D9754F;--com:#A7AE6A;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px);background:var(--bg)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--head);margin:0;line-height:1.1;letter-spacing:-.01em}
p{margin:0}
[hidden]{display:none !important}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4.5vw,64px)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.art{display:block;width:100%;height:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--btn);background:var(--btn);color:var(--btn-text);font:inherit;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer}
.btn-outline{background:transparent;color:var(--head);border-color:var(--head)}
.btn-light{background:var(--mustard);border-color:var(--mustard);color:var(--cocoa)}
.btn-ghost-light{background:transparent;border-color:#F4EDE0;color:#F4EDE0}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px;color:var(--head)}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.tag{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;align-self:flex-start}
.tag-minerals{background:var(--min-soft);color:var(--min)}
.tag-commodities{background:var(--com-soft);color:var(--com)}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,0.03)}
.site-header .wrap{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
body{padding-top:78px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--head);margin-right:auto}
.logo b{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:.01em;line-height:1}
.logo small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.nav a:not(.btn){text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--head)}
.nav a[data-nav="minerals"][aria-current="page"]{border-bottom-color:var(--min)}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--head);align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.menu-btn:hover,.menu-btn.active{background:var(--panel);border-color:var(--gold);color:var(--head)}

/* Hero */
.hero{position:relative;min-height:640px;display:flex;align-items:center;color:#F7EFE2;overflow:hidden;background:var(--cocoa)}
.hero-bg{position:absolute;inset:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,17,12,.85) 0%,rgba(30,17,12,.55) 45%,rgba(30,17,12,0) 75%)}
.hero .wrap{position:relative;width:100%}
.hero-copy{max-width:640px;display:flex;flex-direction:column;gap:22px;padding:96px 0}
.hero-kicker{color:var(--mustard);font-weight:600}
.hero h1{color:#FBF4E8;font-size:clamp(44px,6vw,76px);line-height:1.02}
.hero p.lede{font-size:18px;max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}

/* Divisions */
section.block{padding:96px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.section-head h2{font-size:clamp(34px,4vw,50px);max-width:14em}
.section-head p{max-width:32em;color:var(--muted)}
.divisions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.division{position:relative;min-height:520px;border-radius:10px;overflow:hidden;color:#F7EFE2;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none}
.division .hero-bg::after{background:linear-gradient(0deg,rgba(25,14,10,.92) 0%,rgba(25,14,10,.55) 45%,rgba(25,14,10,.05) 80%)}
.division-body{position:relative;padding:36px;display:flex;flex-direction:column;gap:14px}
.division h3{color:#FBF4E8;font-size:44px}
.division .list{display:flex;flex-wrap:wrap;gap:8px}
.division .list span{padding:4px 12px;border-radius:999px;background:rgba(244,237,224,.16);font-size:14px}
.division .go{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--mustard)}
.division:hover .go{text-decoration:underline;text-underline-offset:4px}
.division-mark{width:44px;height:6px;border-radius:3px}

/* Flow */
.flow{background:var(--panel)}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.flow-steps li{display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:3px solid var(--brown)}
.flow-steps li:nth-child(2){border-color:var(--gold)}
.flow-steps li:nth-child(3){border-color:var(--com)}
.flow-steps li:nth-child(4){border-color:var(--min)}
.flow-steps li:nth-child(5){border-color:var(--mustard)}
.flow-steps li:nth-child(6){border-color:var(--cocoa)}
.flow-steps .n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--head)}
.flow-steps strong{color:var(--head)}
.flow-steps span.d{font-size:15px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:64px;background:var(--cocoa);border-radius:16px;overflow:hidden}
.stat{padding:36px 28px;display:flex;flex-direction:column;gap:6px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:rgba(232,209,167,.25)}
.stat strong{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(48px,5vw,64px);color:var(--mustard);line-height:1}
.stat span{color:#EEDFC8;font-size:16px;font-weight:500}
.cta{background:var(--cocoa);color:#EEDFC8;border-radius:10px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta h2{color:#FBF4E8;font-size:clamp(30px,3.4vw,42px);max-width:16em}

/* Export process (home) */
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--min);font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:40px;height:2px;background:var(--min)}
.process h2{font-size:clamp(34px,4.6vw,58px);line-height:1.05;max-width:15em}
.process-lede{margin-top:20px;font-size:19px;color:var(--muted);max-width:36em}
.timeline{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.timeline li{position:relative;display:flex;flex-direction:column;gap:8px}
.timeline li:not(:last-child)::before{content:"";position:absolute;top:22px;left:60px;right:-24px;height:1px;background:#D9A98E}
.timeline .dot{width:46px;height:46px;border-radius:999px;border:1px solid #E7B9A1;background:var(--bg);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.timeline .dot span{width:34px;height:34px;border-radius:999px;background:var(--min);color:#FFF8F0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}
.timeline strong{font-size:18px;color:var(--head)}
.timeline .d{color:var(--muted);font-size:15px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width: 1024px){.timeline{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}.timeline li:nth-child(3)::before{display:none}}
@media (max-width: 640px){.timeline{grid-template-columns:minmax(0,1fr);gap:0}.timeline li{padding-left:66px;padding-bottom:28px;min-height:46px}.timeline .dot{position:absolute;left:0;top:0;margin:0}.timeline li:not(:last-child)::before,.timeline li:nth-child(3)::before{display:block;top:52px;bottom:4px;left:22px;right:auto;width:1px;height:auto}}

/* About brief (home) */
.brief-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.intro-brief h2{font-size:clamp(32px,3.8vw,48px);line-height:1.08}
.brief-copy{display:flex;flex-direction:column;gap:16px;font-size:17px;padding-top:34px}
.brief-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:6px}
.chip-link{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none}
.chip-link.min{background:var(--min-soft);color:var(--min)}
.chip-link.com{background:var(--com-soft);color:var(--com)}

/* FAQ (home) */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq-side h2{font-size:clamp(40px,5vw,64px);line-height:1.05}
.faq-side p{margin-top:16px;color:var(--muted);font-size:17px;max-width:22em}
.faq-list{display:flex;flex-direction:column;gap:16px}
.faq-item{background:var(--panel);border-radius:18px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 30px;font-size:20px;color:var(--head);font-weight:500}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline-offset:-3px;border-radius:18px}
.chev{width:12px;height:12px;border-right:2.5px solid var(--head);border-bottom:2.5px solid var(--head);transform:rotate(45deg) translate(-3px,-3px);flex-shrink:0;transition:transform .2s ease}
.faq-item[open] .chev{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-body{padding:0 30px 28px;display:flex;flex-direction:column;gap:14px;font-size:16px;color:var(--text)}
@media (prefers-reduced-motion: reduce){.chev{transition:none}}
.cta-copy{display:flex;flex-direction:column;gap:12px;max-width:40em}
.cta-copy p{font-size:17px}

/* Product cards (catalog style) */
.grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px}
.pcard{display:flex !important;flex-direction:column;border-radius:14px;padding:14px;transition:box-shadow .2s ease}
.pcard:hover{box-shadow:0 10px 30px rgba(60,35,30,.12)}
.pcard-art{position:relative;aspect-ratio:1/1;min-height:0 !important;border-radius:10px;overflow:hidden}
.pcard-tag{position:absolute;top:10px;left:10px}
.pcard-body{padding:16px 4px 4px !important;gap:12px !important;flex-grow:1}
.pcard h3{font-family:var(--sans);font-size:20px !important;font-weight:500;line-height:1.3}
.pcard-sub{color:var(--muted);font-weight:400}
.pcard-facts{margin:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.pcard-facts div{display:flex;gap:8px}
.pcard-facts dt{color:var(--muted);flex-shrink:0}
.pcard-facts dt::after{content:":"}
.pcard-facts dd{margin:0;color:var(--head);font-weight:500}
.pcard-trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px}
.pcard-trust .flag{display:inline-flex}
.verified{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--com-soft);color:var(--com);font-weight:600;font-size:13px}
.pcard-actions{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:auto}
.pcard-actions .more{justify-content:center}
.btn-contact{background:var(--mustard);border-color:var(--mustard);color:var(--cocoa);border-radius:10px;min-height:50px;font-size:16px}
.btn-contact:hover{background:#D9AE45;border-color:#D9AE45}
.btn-wide{width:100%}
.keyfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.keyfacts div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.keyfacts span{font-size:13px;color:var(--muted)}
.keyfacts b{color:var(--head);font-weight:600}
.detail-trust{padding:10px 14px;border-radius:10px;background:var(--panel);margin-bottom:16px}
.detail-trust b{color:var(--head)}
.detail-trust .verified{margin-left:auto}
@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width: 1024px){.brief-grid,.faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}.brief-copy{padding-top:0}}
@media (max-width: 640px){.grid{grid-template-columns:minmax(0,1fr) !important}.keyfacts{grid-template-columns:minmax(0,1fr)}.faq-item summary{padding:20px;font-size:18px}.faq-body{padding:0 20px 22px}.detail-trust .verified{margin-left:0}}

/* How to Order (same as Indonesia Cardamom) */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.steps li{display:flex;flex-direction:column;gap:6px;position:relative}
.step-icon{width:64px;height:64px;border-radius:999px;background:#EBD5BE;color:var(--min);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.steps li:not(:last-child)::after{content:"";position:absolute;top:32px;left:80px;right:-8px;height:1px;background:#D9B89A}
.steps .n{font-family:var(--serif);font-size:24px;color:var(--head);line-height:1}
.steps strong{color:var(--head);font-size:17px}
.steps span.d{color:var(--muted);font-size:15px}
.shipping{margin-top:88px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);border-radius:6px;overflow:hidden;background:var(--panel)}
.shipping-copy{padding:48px;display:flex;flex-direction:column;gap:28px}
.shipping h2{font-size:32px}
.ship-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ship-opt{display:flex;flex-direction:column;gap:6px;padding-right:18px}
.ship-opt + .ship-opt{border-left:1px solid var(--line);padding-left:18px}
.ship-opt svg{color:var(--head)}
.ship-opt strong{color:var(--head)}
.ship-opt span{font-size:14px;color:var(--muted)}
.ship-art{min-height:380px}
.terms-note{font-size:14px;color:var(--muted)}
.shipping-photo{background:#C98C4E url("../images/shipping-photo.jpeg") center 65%/cover no-repeat}
@media (max-width: 1024px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}.steps li::after{display:none}.shipping{grid-template-columns:minmax(0,1fr)}.ship-art{min-height:260px}}
@media (max-width: 640px){.steps{grid-template-columns:minmax(0,1fr)}.shipping-copy{padding:32px 24px}.ship-opts{grid-template-columns:minmax(0,1fr);gap:18px}.ship-opt + .ship-opt{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}}
/* About brief image */
.brief-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px}
.brief-art figure{margin:0;display:flex;flex-direction:column;gap:8px}
.brief-img{aspect-ratio:4/3.4;border-radius:14px;overflow:hidden}
.brief-art figcaption{font-size:14px;font-weight:500;color:var(--muted)}

/* Image sliders */
.slider{position:relative}
.slide-view{display:block;width:100%;height:100%}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,252,246,.94);color:#2A1A13;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.slide-btn:hover{background:#fff}
.slide-btn.prev{left:10px}
.slide-btn.next{right:10px}
.slide-count{position:absolute;right:10px;bottom:10px;z-index:2;padding:2px 10px;border-radius:999px;background:rgba(20,14,10,.65);color:#fff;font-size:12px}
.gallery.slider .slide-btn{width:46px;height:46px}
.gallery.slider .slide-btn.prev{left:14px}
.gallery.slider .slide-btn.next{right:14px}

/* About section (home, collage) */
.about2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.about2-copy{display:flex;flex-direction:column;gap:18px}
.pill{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:999px;background:var(--min);color:#FFF7EC;font-size:13px;font-weight:500}
.about2 h2{font-size:clamp(34px,4.2vw,52px);line-height:1.08}
.about2-copy p{font-size:16px;max-width:36em}
.about2-actions{display:flex;gap:6px;padding-top:6px}
.btn-dark{background:#1F1713;border-color:#1F1713;color:#FFF7EC;border-radius:10px}
.btn-square{width:48px;padding:0}
.collage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;height:460px}
.collage > div{border-radius:20px;overflow:hidden}
.c-tall{grid-row:1 / 3}
.c-top,.c-bot{position:relative}

/* Product page header */
.products-head{text-align:center;max-width:760px;margin:24px auto 40px;display:flex;flex-direction:column;align-items:center;gap:10px}
.products-kicker{color:var(--min);font-weight:600;font-size:16px}
.products-head h2{font-size:clamp(36px,4.4vw,54px)}
.products-sub{color:var(--muted);font-size:17px}

/* Let's Collaborate */
.collab-head{text-align:center;padding:64px 0 40px}
.collab-head h1{font-size:clamp(40px,5.2vw,64px);font-weight:700;color:#9E7A2A}
.collab-head p{margin-top:12px;font-size:19px;color:var(--muted)}
.collab-card{position:relative;border-radius:22px;overflow:hidden;padding:48px 56px 40px;color:#EFE7D8;background:#3A3A37}
.collab-bg{position:absolute;inset:0}
.collab-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,38,34,.55),rgba(40,38,34,.35))}
.collab-card > *:not(.collab-bg){position:relative}
.collab-card h2{color:#FBF4E8;font-size:28px;margin-bottom:36px}
.collab{list-style:none;margin:0;padding:0 34px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;column-gap:84px;row-gap:56px}
.collab li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.collab li:nth-child(4){grid-column:3;grid-row:2}
.collab li:nth-child(5){grid-column:2;grid-row:2}
.collab li:nth-child(6){grid-column:1;grid-row:2}
.c-icon{height:104px;display:flex;align-items:flex-start;justify-content:center;color:#E6BE59}
.lbl{position:relative;width:100%;min-height:58px;display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#E6BE59;font-weight:700;font-size:19px;line-height:1.2}
.c-desc{margin-top:14px;font-style:italic;font-size:16px;line-height:1.45;color:#EFE7D8;max-width:20em}
.collab li:nth-child(1) .lbl::after,.collab li:nth-child(2) .lbl::after{content:"";position:absolute;left:100%;top:50%;width:84px;height:12px;margin-top:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23fff'/%3E%3Cpath d='M10 6H70' stroke='%23fff' stroke-width='2.5'/%3E%3Cpath d='M80 6L69 0.5V11.5Z' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.collab li:nth-child(4) .lbl::before,.collab li:nth-child(5) .lbl::before{content:"";position:absolute;right:100%;top:50%;width:84px;height:12px;margin-top:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Ccircle cx='74' cy='6' r='5' fill='%23fff'/%3E%3Cpath d='M70 6H10' stroke='%23fff' stroke-width='2.5'/%3E%3Cpath d='M0 6L11 0.5V11.5Z' fill='%23fff'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.collab li:nth-child(3)::after{content:"";position:absolute;right:-34px;top:133px;width:34px;height:calc(100% + 56px);border:2.5px solid #fff;border-left:0;border-radius:0 16px 16px 0}
.collab li:nth-child(3) .lbl::after{content:"";position:absolute;left:100%;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:999px;background:#fff}
.collab li:nth-child(4) .lbl::after{content:"";position:absolute;left:100%;top:50%;margin-top:-6px;border:6px solid transparent;border-right:11px solid #fff;border-left:0}
.collab-brand{display:flex;align-items:center;gap:10px;margin-top:44px;font-weight:700;color:#E6BE59;font-size:16px}
.collab-brand svg{width:28px;height:28px}
.collab-card + .shipping{margin-top:64px}
@media (max-width: 1024px){
  .about2{grid-template-columns:minmax(0,1fr)}
  .collage{height:380px}
  .collab{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;row-gap:40px;padding:0}
  .collab li:nth-child(n){grid-column:auto;grid-row:auto}
  .collab li .lbl::before,.collab li .lbl::after,.collab li::after{display:none !important}
  .collab li:not(:last-child)::before{content:"";display:block;position:absolute;left:50%;bottom:-32px;width:2px;height:24px;background:rgba(255,255,255,.6)}
  .collab-card{padding:36px 24px 32px}
  .collab-card h2{margin-bottom:24px}
}
@media (max-width: 640px){.collage{height:300px;gap:10px}.collage > div{border-radius:14px}}

/* Collaboration model as icon timeline */
.collab-title{font-size:clamp(30px,3.6vw,44px);line-height:1.1}
.icon-timeline{margin-top:48px}
.icon-timeline .dot{width:72px;height:72px}
.icon-timeline .dot span{width:56px;height:56px}
.icon-timeline li:not(:last-child)::before{top:36px;left:84px}
.icon-timeline .step-no{color:var(--min)}
.collab-section + .shipping{margin-top:80px}
@media (max-width: 640px){.icon-timeline li{padding-left:88px;min-height:72px}.icon-timeline li:not(:last-child)::before,.icon-timeline li:nth-child(3)::before{top:78px;left:35px}}

/* Division page */
.banner{position:relative;min-height:360px;display:flex;align-items:flex-end;color:#F7EFE2;overflow:hidden}
.banner .hero-bg::after{background:linear-gradient(0deg,rgba(25,14,10,.9) 0%,rgba(25,14,10,.4) 60%,rgba(25,14,10,.1) 100%)}
.banner .wrap{position:relative;width:100%;padding-top:64px;padding-bottom:48px;display:flex;flex-direction:column;gap:14px}
.banner h1{color:#FBF4E8;font-size:clamp(42px,5.4vw,66px)}
.banner p{font-size:18px;max-width:40em}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
.crumbs a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{text-decoration:underline}
.banner .crumbs{color:#E7D8C2}
.div-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-bottom:56px}
.div-intro p{font-size:18px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.fact strong{display:block;font-family:var(--serif);font-size:26px;font-weight:400;color:var(--head)}
.fact span{font-size:14px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.pcard-art{display:block;min-height:280px}
.pcard-body{padding:26px;display:flex;flex-direction:column;gap:10px}
.pcard h3{font-size:28px}
.pcard h3 a{text-decoration:none}
.pcard p{color:var(--muted);font-size:15px}
.pcard-meta{display:flex;flex-direction:column;gap:4px;font-size:14px;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.pcard-meta b{color:var(--head)}
.partner{margin-top:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--com-soft);border-radius:10px;padding:28px 32px}
.partner h3{font-size:26px}
.partner p{color:var(--muted)}

/* Detail */
.detail-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
.gallery-main{aspect-ratio:4/3.3;border-radius:10px;overflow:hidden}
.thumbs{display:flex;gap:12px;margin-top:12px}
.thumbs button{width:88px;height:72px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:none}
.thumbs button[aria-pressed="true"]{border-color:var(--head)}
.detail-top h1{font-size:clamp(34px,4vw,50px);margin:10px 0 12px}
.intro{font-size:17px;color:var(--muted);margin-bottom:18px}
.origin{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:6px;background:var(--panel);font-size:15px;margin-bottom:18px}
.origin b{color:var(--head)}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-weight:500;color:var(--muted);width:38%;background:var(--panel)}
.spec td{color:var(--head)}
.detail-mid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:64px}
.detail-mid h2{font-size:30px;margin-bottom:16px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.grades{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;background:var(--card);border:1px solid var(--line)}
.grades th,.grades td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.grades thead th{background:var(--panel);font-weight:600;color:var(--head);font-size:14px}
.grades tbody th{font-weight:600;color:var(--head);white-space:nowrap}
.grades td.price{font-weight:600;color:var(--head);white-space:nowrap}
.fine{font-size:13px;color:var(--muted);margin-top:10px}
.detail-top .quote-card{margin-top:28px}
@media (min-width: 1025px){.detail-top > div:first-child{position:sticky;top:100px}}
.detail-top{padding-bottom:96px}
.quote-card{background:var(--panel);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:16px;border-top:6px solid var(--gold)}
.quote-card.minerals{border-top-color:var(--min)}
.quote-card.commodities{border-top-color:var(--com)}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .label{font-size:14px;font-weight:600;color:var(--head)}
.field input,.field select,.field textarea{min-height:48px;width:100%;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--head);font:inherit;font-size:16px}
.field select optgroup{font-weight:700;font-size:15px;color:var(--head);background:var(--panel);padding:6px 0}
.field select option{font-weight:400;font-size:15px;color:var(--head);background:var(--card);padding:4px 8px}
.field textarea{padding:12px 14px;min-height:130px;resize:vertical}
.field .fixed{min-height:48px;padding:0 14px;border:1px dashed var(--line);border-radius:6px;display:flex;align-items:center;color:var(--head)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border:2px solid var(--min)}
.req{color:var(--min)}
.err{font-size:13px;color:var(--min)}
.stepper{display:flex;border:1px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden}
.stepper button{width:46px;border:0;background:transparent;color:var(--head);font:inherit;font-size:20px;cursor:pointer}
.stepper input{flex-grow:1;min-width:0;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;text-align:center;font-weight:600;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper .unit{display:flex;align-items:center;padding:0 12px;font-size:14px;border-left:1px solid var(--line);color:var(--muted)}
.estimate{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--card);border-radius:6px;font-size:14px}
.estimate div{display:flex;justify-content:space-between;gap:12px}
.estimate b{color:var(--head);text-align:right}
.compare{margin-top:80px;padding:64px 0;background:var(--panel)}
.compare h2{font-size:clamp(28px,3.2vw,38px);margin-bottom:8px}
.compare .lede{color:var(--muted);margin-bottom:28px;max-width:46em}
.ctable{width:100%;min-width:720px;border-collapse:collapse;font-size:15px;background:var(--card);border:1px solid var(--line)}
.ctable th,.ctable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--head);border-bottom:2px solid var(--gold)}
.ctable tbody th{font-weight:500;color:var(--muted);width:200px}
.ctable .cur{background:var(--panel)}
.cur-label{display:block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--brown)}
.ctable a{color:var(--head);font-weight:600;min-height:44px;display:inline-flex;align-items:center}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
.about-grid p{font-size:17px;margin-bottom:16px}
.about-art{border-radius:10px;overflow:hidden;aspect-ratio:4/3.4}
.values-wrap{margin-top:96px}
.values-title{font-size:clamp(30px,3.6vw,44px);line-height:1.1;max-width:18em}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.value{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:12px;border-top:5px solid var(--min)}
.value:nth-child(2){border-top-color:var(--gold)}
.value:nth-child(3){border-top-color:var(--com)}
.value-icon{width:60px;height:60px;border-radius:999px;background:var(--min-soft);color:var(--min);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.value:nth-child(2) .value-icon{background:#F5EACB;color:#8C6C2F}
.value:nth-child(3) .value-icon{background:var(--com-soft);color:var(--com)}
.value h3{font-size:24px}
.value p{color:var(--muted);font-size:16px}
.popular{margin-top:96px}
.popular-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.popular-head h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1}
.popular-links{display:flex;gap:10px;flex-wrap:wrap}
.page-title{padding:64px 0 40px}
.page-title h1{font-size:clamp(40px,5vw,60px)}
.page-title p{margin-top:12px;font-size:18px;color:var(--muted);max-width:40em}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.term{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px;display:flex;flex-direction:column;gap:8px}
.term h3{font-size:22px}
.term p{color:var(--muted);font-size:15px}

/* News & Events */
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px}
.ncard{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.ncard:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.ncard-art{display:block;aspect-ratio:2/1;position:relative;overflow:hidden}
.ncard-art .art{position:absolute;inset:0}
.ncard-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.ncard-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ntype{padding:3px 12px;border-radius:999px;background:var(--btn);color:#FFF7EC;font-size:12px;font-weight:600;letter-spacing:0.02em}
.ncard time{font-size:14px;color:var(--muted)}
.nwhen{font-size:14px;font-weight:600;color:var(--head);margin:0}
.ncard h2{font-size:24px;line-height:1.25;margin:4px 0}
.ncard h2 a{text-decoration:none;color:var(--head)}
.ncard h2 a:hover{text-decoration:underline}
.ncard p{color:var(--muted);line-height:1.6}
.ncard .more{margin-top:auto}

/* Single News & Event Article */
.article{max-width:800px;margin:0 auto;padding:16px 0 96px}
.article h1{font-size:clamp(32px,4.2vw,48px);line-height:1.2;margin:12px 0 8px}
.article time{display:block;color:var(--muted);font-size:15px;margin-bottom:20px}
.event-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0;padding:20px 24px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.event-box span{display:block;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.event-box b{color:var(--head);font-size:16px;display:block;margin-top:4px}
.article-art{aspect-ratio:2/1;border-radius:10px;overflow:hidden;margin:24px 0 32px;position:relative}
.article-art .art{position:absolute;inset:0}
.article-body{font-size:17px;line-height:1.8;color:var(--text)}
.article-body p{margin-bottom:20px}
.source{font-size:15px;color:var(--muted);margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.source a{color:var(--btn);font-weight:600;text-decoration:underline}

@media (max-width: 768px){
  .news-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .event-box{grid-template-columns:minmax(0,1fr)}
}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:start}
.info-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:24px}
.info-list li{display:flex;gap:16px}
.round{width:46px;height:46px;border-radius:999px;background:var(--brown);color:#FFF7EC;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-list strong{display:block;color:var(--head)}
.info-list span{color:var(--muted)}
.info-list .round{color:#FFF7EC}
.nav a.btn[aria-current="page"]{color:var(--btn-text);border-bottom-color:var(--btn)}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:36px}
.form-card h2{font-size:28px;margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form-grid .full{grid-column:1 / -1}
.selection{grid-column:1 / -1;background:var(--panel);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.selection strong{color:var(--head)}
.selection button{align-self:flex-start;background:none;border:0;padding:6px 0;color:var(--min);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;min-height:32px}
.consent{grid-column:1 / -1;display:flex;gap:12px;align-items:flex-start;font-size:15px;cursor:pointer}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brown);flex-shrink:0}
.form-grid .btn{grid-column:1 / -1;min-height:52px;font-size:16px}
.thanks{display:flex;flex-direction:column;gap:14px}
.thanks h2{font-size:30px}

/* Footer */
.site-footer{background:var(--cocoa);color:#E6D6BF;margin-top:96px}
.site-footer .wrap{padding-top:64px;padding-bottom:36px;display:flex;flex-direction:column;gap:40px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;font-size:15px}
.foot > div{display:flex;flex-direction:column;gap:8px}
.foot strong{color:var(--mustard);font-weight:600}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .logo{color:#F7EFE2}
.foot .logo small{color:#CDB99E}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid #5A3F34;font-size:14px}

/* ==========================================================================
   Responsive Breakpoints & Fine-Tuned Mobile Styling
   ========================================================================== */

/* 1. Large Tablets & Small Desktops (max-width: 1024px) */
@media (max-width: 1024px){
  .divisions, .div-intro, .detail-top, .detail-mid, .contact-grid, .about-grid, .about2, .brief-grid, .faq-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px;
  }
  .flow-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 32px;
  }
  .foot, .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .values, .terms {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .timeline, .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 36px;
  }
  .timeline li:nth-child(3)::before, .steps li::after {
    display: none;
  }
  .shipping {
    grid-template-columns: minmax(0, 1fr);
  }
  .ship-art {
    min-height: 260px;
  }
  .collage {
    height: 380px;
    gap: 12px;
  }
  .collab {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    row-gap: 36px;
    padding: 0;
  }
  .collab li:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
  .collab li .lbl::before, .collab li .lbl::after, .collab li::after {
    display: none !important;
  }
  .collab li:not(:last-child)::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -28px;
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,.6);
  }
  .collab-card {
    padding: 36px 24px 32px;
  }
  .hero-copy {
    max-width: 100%;
  }
}

/* 2. Navigation Collapse (max-width: 900px) */
@media (max-width: 900px){
  body {
    padding-top: 68px;
  }
  .menu-btn {
    display: inline-flex;
  }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
  }
  .site-header .wrap {
    height: 68px;
    position: relative;
    padding: 0 18px;
  }
  .nav {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 68px);
    height: calc(100dvh - 68px);
    max-height: calc(100dvh - 68px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--card);
    border-top: 1px solid var(--line);
    border-bottom: 2px solid var(--line);
    padding: 16px 20px 36px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 16px 36px rgba(0,0,0,0.18);
    z-index: 999;
  }
  .nav.open {
    display: flex;
  }
  .nav a:not(.btn) {
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
  }
  .nav .btn {
    margin-top: 18px;
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 15px;
  }
}

/* 3. Medium Screen & Phablet (max-width: 768px) */
@media (max-width: 768px){
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .event-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 36px 28px;
    border-radius: 12px;
  }
  .cta-copy {
    max-width: 100%;
  }
  .cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 50px;
    font-size: 16px;
  }
  .partner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }
  .partner .btn {
    width: 100%;
    justify-content: center;
  }
  .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }
}

/* 4. Mobile Devices (max-width: 640px) */
@media (max-width: 640px){
  section.block {
    padding: 56px 0;
  }
  .wrap {
    padding: 0 18px;
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
  }
  .section-head h2 {
    font-size: clamp(26px, 6.5vw, 36px);
    max-width: 100%;
  }
  .section-head p {
    font-size: 15px;
    max-width: 100%;
  }

  /* Hero & Banners */
  .hero {
    min-height: auto;
  }
  .hero-copy {
    padding: 48px 0 56px;
    gap: 16px;
  }
  .hero-kicker {
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .hero h1 {
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.12;
  }
  .hero p.lede {
    font-size: 16px;
    line-height: 1.6;
  }
  .hero-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    padding-top: 4px;
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    justify-content: center;
  }
  .banner {
    min-height: 240px;
  }
  .banner .wrap {
    padding-top: 40px;
    padding-bottom: 32px;
    gap: 10px;
  }
  .banner h1 {
    font-size: clamp(28px, 7vw, 40px);
  }
  .banner p {
    font-size: 15px;
  }

  /* About Brief & Collage */
  .about2 {
    gap: 32px;
  }
  .about2 h2 {
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.2;
  }
  .about2-copy p {
    font-size: 15px;
    line-height: 1.6;
  }
  .about2-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .about2-actions .btn:not(.btn-square) {
    flex: 1;
    min-height: 46px;
    justify-content: center;
    font-size: 15px;
  }
  .collage {
    height: 280px;
    gap: 10px;
  }
  .collage > div {
    border-radius: 14px;
  }

  /* Collaboration / Process Timeline */
  .process h2 {
    font-size: clamp(26px, 6.5vw, 36px);
  }
  .process-lede {
    font-size: 15px;
    margin-top: 10px;
  }
  .timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 36px;
  }
  .timeline li {
    padding-left: 64px;
    padding-bottom: 26px;
    min-height: 48px;
    position: relative;
  }
  .timeline .dot {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 44px;
    height: 44px;
  }
  .timeline .dot span {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .timeline li:not(:last-child)::before,
  .timeline li:nth-child(3)::before {
    display: block;
    top: 50px;
    bottom: 4px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .icon-timeline {
    margin-top: 36px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .icon-timeline li {
    padding-left: 74px;
    padding-bottom: 28px;
    min-height: 64px;
    position: relative;
  }
  .icon-timeline .dot {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 56px;
    height: 56px;
  }
  .icon-timeline .dot span {
    width: 42px;
    height: 42px;
  }
  .icon-timeline .dot span svg {
    width: 20px;
    height: 20px;
  }
  .icon-timeline li:not(:last-child)::before,
  .icon-timeline li:nth-child(3)::before {
    display: block;
    top: 62px;
    bottom: 4px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .icon-timeline strong {
    font-size: 16px;
    line-height: 1.3;
  }
  .icon-timeline .d {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Stats Box */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
    border-radius: 12px;
  }
  .stat {
    padding: 20px 16px;
    gap: 4px;
  }
  .stat strong {
    font-size: clamp(30px, 8vw, 42px);
  }
  .stat span {
    font-size: 13px;
  }
  .stat + .stat::before {
    display: none;
  }

  /* FAQ Accordion */
  .faq-side h2 {
    font-size: clamp(26px, 6.5vw, 36px);
  }
  .faq-side p {
    font-size: 15px;
    margin-top: 8px;
  }
  .faq-item {
    border-radius: 12px;
  }
  .faq-item summary {
    padding: 18px 16px;
    font-size: 16px;
    line-height: 1.4;
    gap: 12px;
  }
  .faq-body {
    padding: 0 16px 18px;
    font-size: 15px;
    line-height: 1.6;
  }

  /* Product Cards & Catalog */
  .pcard {
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 12px;
    padding: 12px;
  }
  .pcard-art {
    aspect-ratio: 16/10 !important;
    min-height: 180px;
  }
  .pcard h3 {
    font-size: 19px !important;
  }
  .pcard-body {
    padding: 14px 4px 4px !important;
  }
  .pcard-actions .btn {
    min-height: 46px;
    font-size: 15px;
    width: 100%;
  }

  /* Product Single Detail Page */
  .crumbs {
    font-size: 13px;
    padding: 12px 0;
    gap: 6px;
  }
  .gallery-main {
    aspect-ratio: 4/3;
    min-height: 220px;
    max-height: 320px;
  }
  .slide-btn {
    width: 38px;
    height: 38px;
  }
  .thumbs {
    gap: 8px;
    margin-top: 10px;
  }
  .thumbs button {
    width: 60px;
    height: 46px;
  }
  .keyfacts {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .detail-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
  }
  .detail-trust .verified {
    margin-left: 0;
  }
  .spec {
    font-size: 14px;
  }
  .spec th, .spec td {
    padding: 10px 8px;
  }
  .quote-card {
    padding: 20px 16px;
    border-radius: 10px;
  }
  .quote-card h2 {
    font-size: 22px;
  }
  .stepper {
    min-height: 46px;
  }
  .stepper button {
    width: 44px;
    font-size: 18px;
  }
  .stepper input {
    font-size: 16px;
  }
  .quote-card .btn {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }

  /* How to Order Steps */
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 32px;
  }
  .steps li {
    padding-left: 60px;
    position: relative;
  }
  .step-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    margin: 0;
  }
  .step-icon svg {
    width: 22px;
    height: 22px;
  }
  .steps li::after {
    display: none;
  }
  .shipping {
    border-radius: 10px;
  }
  .shipping-copy {
    padding: 24px 18px;
    gap: 18px;
  }
  .shipping h2 {
    font-size: 24px;
  }
  .ship-opts {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ship-opt {
    padding-right: 0;
  }
  .ship-opt + .ship-opt {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
  }
  .ship-art {
    min-height: 200px;
  }

  /* About Page Values & Terms */
  .about-grid {
    gap: 24px;
  }
  .about-art {
    aspect-ratio: 16/11;
  }
  .values-wrap {
    margin-top: 56px;
  }
  .values-title {
    font-size: clamp(24px, 5.5vw, 32px);
  }
  .values {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 24px;
  }
  .value {
    padding: 20px 18px;
    border-radius: 12px;
  }
  .value-icon {
    width: 48px;
    height: 48px;
  }
  .value-icon svg {
    width: 24px;
    height: 24px;
  }
  .value h3 {
    font-size: 20px;
  }
  .value p {
    font-size: 14px;
  }
  .terms {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 32px;
  }
  .term {
    padding: 20px 18px;
    border-radius: 10px;
  }
  .term h3 {
    font-size: 19px;
  }
  .term p {
    font-size: 14px;
  }

  /* Contact / Request a Quote Form */
  .contact-grid {
    gap: 32px;
  }
  .form-card {
    padding: 22px 16px;
    border-radius: 10px;
  }
  .form-card h2 {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .field label, .field .label {
    font-size: 13.5px;
  }
  .field input, .field select, .field textarea {
    min-height: 46px;
    font-size: 16px;
    padding: 0 12px;
  }
  .form-grid .btn {
    min-height: 48px;
    font-size: 15px;
    width: 100%;
  }
  .info-list {
    gap: 18px;
    margin-top: 8px;
  }
  .round {
    width: 40px;
    height: 40px;
  }
  .round svg {
    width: 18px;
    height: 18px;
  }
  .info-list strong {
    font-size: 15px;
  }
  .info-list span {
    font-size: 13.5px;
  }

  /* Footer */
  .site-footer {
    margin-top: 56px;
  }
  .site-footer .wrap {
    padding-top: 40px;
    padding-bottom: 24px;
    gap: 28px;
  }
  .foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    font-size: 14px;
  }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    padding-top: 16px;
  }
}

/* 5. Small Mobile Screens (max-width: 400px) */
@media (max-width: 400px){
  .wrap {
    padding: 0 14px;
  }
  .logo b {
    font-size: 19px;
  }
  .logo small {
    font-size: 9.5px;
  }
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .collage {
    height: 220px;
  }
  .stepper button {
    width: 40px;
  }
  .hero h1 {
    font-size: 26px;
  }
}


/* WordPress Core Support Styles */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}
.admin-bar .site-header {
  top: 32px;
}
@media screen and (min-width: 901px) {
  body.admin-bar {
    padding-top: calc(78px + 32px);
  }
}
@media screen and (max-width: 900px) and (min-width: 783px) {
  body.admin-bar {
    padding-top: calc(68px + 32px);
  }
  .admin-bar .nav {
    top: calc(68px + 32px);
    height: calc(100dvh - 68px - 32px);
    max-height: calc(100dvh - 68px - 32px);
  }
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
  body.admin-bar {
    padding-top: calc(68px + 46px);
  }
  .admin-bar .nav {
    top: calc(68px + 46px);
    height: calc(100dvh - 68px - 46px);
    max-height: calc(100dvh - 68px - 46px);
  }
}
@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
  }
}