/* ==========================================================================
   CHANDU GOLD BUYERS — SECTIONS
   Every section uses a different column split and a different tone. No two
   adjacent sections repeat a layout pattern.
   ========================================================================== */

/* ── HERO · content 5 / image 7 ─────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:min(90vh, 940px);
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:56px;
  overflow:hidden;
}
.hero-grid{ align-items:center; }
.hero-copy{ grid-column:span 5; position:relative; z-index:2; }
.hero-art{ grid-column:6 / span 7; position:relative; }

.hero h1{ margin-bottom:22px; font-size:clamp(34px,3.6vw,62px); }
.hero h1 em{ font-style:normal; color:var(--gold-light); }
.hero .lede{ max-width:36ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.hero-trust{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:34px;
             padding-top:24px; border-top:1px solid var(--line); }
.hero-trust li{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-2); }
.hero-trust svg{ width:15px; height:15px; color:var(--gold); flex:none; }

/* The hero image bleeds off the right edge of the grid */
.hero-art .media{ aspect-ratio:16/11; border-radius:var(--r-sm); }
.hero-art .media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(215deg,rgba(8,8,8,0) 45%,rgba(8,8,8,.55));
}
.hero-rate{
  position:absolute; left:-64px; bottom:36px; z-index:5;
  min-width:230px; padding:18px 22px;
  background:rgba(11,11,11,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-gold); border-radius:var(--r);
  box-shadow:0 26px 56px -28px #000;
}
.hero-rate .k{ display:flex; align-items:center; gap:8px; margin-bottom:8px;
               font-size:12px; font-weight:600; letter-spacing:.1em;
               text-transform:uppercase; color:var(--gold); }
.hero-rate .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero-rate .v{ font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.hero-rate .v span{ font-size:14px; font-weight:500; color:var(--text-3); margin-left:5px; }
.hero-rate .t{ margin-top:7px; font-size:12.5px; color:var(--text-3); }

/* ── TRUST STRIP · 5 metrics ─────────────────────────────────────────────── */
.trust{ background:var(--bg-2); border-bottom:1px solid var(--line); }
.trust-row{ display:grid; grid-template-columns:repeat(5,1fr); }
.trust-cell{ padding:clamp(30px,3.2vw,44px) clamp(12px,1.6vw,26px);
             border-left:1px solid var(--line); }
.trust-cell:first-child{ border-left:0; padding-left:0; }
.trust-n{ font-size:clamp(30px,3vw,46px); font-weight:700; letter-spacing:-.035em;
          line-height:1; color:var(--text); }
.trust-l{ margin-top:9px; font-size:13px; font-weight:500; letter-spacing:.09em;
          text-transform:uppercase; color:var(--text-3); }

/* ── Oversized watermark word used at section joins ─────────────────────── */
.mark{
  position:absolute; left:0; right:0; pointer-events:none; user-select:none;
  font-size:clamp(140px,20vw,300px); font-weight:700; letter-spacing:-.06em;
  line-height:.8; color:transparent;
  -webkit-text-stroke:1px rgba(245,242,234,.035);
  white-space:nowrap;
}

/* ── WHY CHANDU · image 6 left / content 5 right ────────────────────────── */
.why{ position:relative; overflow:hidden; }
.why .mark{ top:-24px; }
.why-art{ grid-column:span 6; position:relative; }
.why-art .stack-media{ position:relative; aspect-ratio:4/3.2; border-radius:var(--r-sm); overflow:hidden; }
.why-art .stack-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05);
  transition:opacity 600ms var(--ease), transform 900ms var(--ease);
}
.why-art .stack-media img.on{ opacity:1; transform:scale(1); }
.why-body{ grid-column:8 / span 5; }

.reasons{ margin-top:30px; border-top:1px solid var(--line); }
.reason{ position:relative; width:100%; text-align:left; display:block;
         padding:20px 34px 20px 0; border-bottom:1px solid var(--line);
         transition:padding-left var(--t-mid); }
.reason::before{ content:''; position:absolute; left:0; top:-1px; height:1px; width:100%;
                 background:var(--gold); transform:scaleX(0); transform-origin:left;
                 transition:transform var(--t-mid); }
.reason.on::before{ transform:scaleX(1); }
.reason.on{ padding-left:16px; }
.reason-hd{ display:flex; align-items:baseline; gap:14px; }
.reason h3{ display:inline; }
.reason-n{ font-size:13px; font-weight:600; color:var(--text-3); transition:color var(--t-mid); }
.reason.on .reason-n{ color:var(--gold); }
.reason h3{ color:var(--text-2); transition:color var(--t-mid); }
.reason.on h3{ color:var(--text); }
.reason-ar{ position:absolute; right:4px; top:24px; width:16px; height:16px; color:var(--gold);
            opacity:0; transform:translateX(-6px);
            transition:opacity var(--t-mid), transform var(--t-mid); }
.reason.on .reason-ar{ opacity:1; transform:none; }
.reason-tx{ display:block; overflow:hidden; height:0; transition:height var(--t-mid); }
.reason-tx p{ margin:10px 0 0; padding-right:20px; font-size:15.5px; color:var(--text-2); max-width:46ch; }

/* ── WHAT WE BUY · list 4 left / image 8 right ──────────────────────────── */
.buy{ position:relative; overflow:hidden; }
.buy-list{ grid-column:span 4; align-self:center; }
.buy-art{ grid-column:6 / span 7; position:relative; aspect-ratio:16/11;
          border-radius:var(--r-sm); overflow:hidden; }
.buy-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
              opacity:0; transform:scale(1.06);
              transition:opacity 650ms var(--ease), transform 1100ms var(--ease),
                         object-position 900ms var(--ease); }
.buy-art img.on{ opacity:1; transform:scale(var(--zoom,1)); }
.buy-art::after{ content:''; position:absolute; inset:0; pointer-events:none;
                 background:linear-gradient(180deg,rgba(8,8,8,0) 58%,rgba(8,8,8,.55)); }
.buy-cap{ position:absolute; left:24px; bottom:20px; z-index:2;
          font-size:14px; font-weight:600; color:var(--gold-light); }

.buy-row{ position:relative; width:100%; text-align:left; display:flex; align-items:center;
          gap:12px; padding:14px 0; border-bottom:1px solid var(--line);
          font-size:clamp(19px,1.7vw,25px); font-weight:600; letter-spacing:-.02em;
          color:var(--text-3); transition:color var(--t-fast), padding-left var(--t-mid); }
.buy-row:first-child{ border-top:1px solid var(--line); }
.buy-row .ar{ width:15px; height:15px; margin-left:auto; color:var(--gold);
              opacity:0; transform:translateX(-6px);
              transition:opacity var(--t-fast), transform var(--t-fast); }
.buy-row::before{ content:''; position:absolute; left:0; top:50%; width:3px; height:0;
                  background:var(--gold); transform:translateY(-50%);
                  transition:height var(--t-mid); }
.buy-row.on::before{ height:60%; }
.buy-row.on, .buy-row:hover{ color:var(--text); padding-left:16px; }
.buy-row.on .ar, .buy-row:hover .ar{ opacity:1; transform:none; }
.buy-note{ margin-top:20px; font-size:15px; color:var(--text-2); max-width:40ch; min-height:3.2em; }

/* ── PROCESS · full-width horizontal journey ────────────────────────────── */
.steps{ position:relative; margin-top:clamp(40px,4vw,64px); }
.steps-line{ position:absolute; left:0; right:0; top:var(--dot-y,164px); height:1px;
             background:var(--line); }
.steps-line i{ display:block; height:100%; width:0; background:var(--gold);
               transition:width 1600ms var(--ease); }
.steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.step{ position:relative; }
.step .media{ aspect-ratio:4/3; margin-bottom:24px; }
.step-dot{ position:relative; z-index:2; width:12px; height:12px; margin-bottom:20px;
           border-radius:50%; background:var(--bg); border:1px solid var(--gold-deep);
           transition:background-color var(--t-mid), box-shadow var(--t-mid); }
.step.lit .step-dot{ background:var(--gold); box-shadow:0 0 0 5px rgba(201,162,39,.15); }
.step-lab{ font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
            color:var(--text-3); margin-bottom:6px; }
.step-n{ font-size:clamp(38px,3.6vw,56px); font-weight:700; letter-spacing:-.04em; line-height:1;
         margin-bottom:14px; color:transparent; -webkit-text-stroke:1px var(--gold-deep);
         transition:color var(--t-slow); }
.step.lit .step-n{ color:rgba(201,162,39,.16); }
.step h3{ margin-bottom:8px; }
.step p{ font-size:15px; color:var(--text-2); margin:0; }

/* ── PURITY · image 7 / readout 4 offset ────────────────────────────────── */
.purity-art{ grid-column:span 7; }
.purity-art .media{ aspect-ratio:5/4; }
.purity-body{ grid-column:9 / span 4; align-self:center; }
.readout{ margin-top:28px; }
.ro{ padding:16px 0; border-bottom:1px solid var(--line); }
.ro:first-child{ border-top:1px solid var(--line); }
.ro-hd{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.ro-k{ font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.ro-v{ font-size:clamp(22px,2vw,30px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.ro.total .ro-v{ color:var(--gold-light); }
.ro-bar{ height:2px; margin-top:12px; background:var(--line); }
.ro-bar i{ display:block; height:100%; width:0; background:var(--gold);
           transition:width 1100ms var(--ease); }

/* ── CALCULATOR · inputs 5 / result 7 ───────────────────────────────────── */
.calc-in{ grid-column:span 5; }
.calc-out{ grid-column:7 / span 6; }

.seg{ display:grid; grid-auto-flow:column; gap:8px; }
.seg button{ height:50px; border:1px solid var(--line); border-radius:8px;
             background:var(--surface); color:var(--text-2);
             font-size:15px; font-weight:600;
             transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.seg button:hover{ color:var(--text); border-color:var(--line-2); }
.seg button[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#120E04; }

.stepper{ display:grid; grid-template-columns:52px 1fr 52px; gap:8px; }
.stepper button{ height:52px; border:1px solid var(--line); border-radius:8px;
                 background:var(--surface); color:var(--gold-light); font-size:22px; font-weight:500;
                 transition:border-color var(--t-fast), background-color var(--t-fast); }
.stepper button:hover{ border-color:var(--gold); background:rgba(201,162,39,.08); }
.stepper .inp{ text-align:center; font-weight:600; }

.slider{ -webkit-appearance:none; appearance:none; width:100%; height:2px; margin:24px 0 0;
         background:var(--line); border-radius:2px; cursor:pointer; }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--gold); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--gold-deep); }
.slider::-moz-range-thumb{ width:20px; height:20px; border-radius:50%;
  background:var(--gold); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--gold-deep); }
.ticks{ display:flex; justify-content:space-between; margin-top:10px; font-size:12.5px; color:var(--text-3); }

.result{ padding:clamp(28px,3vw,44px); border:1px solid var(--line-gold); border-radius:var(--r);
         background:linear-gradient(160deg,rgba(201,162,39,.07),transparent 55%),var(--surface); }
.result-k{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
           color:var(--gold); margin-bottom:14px; }
.result-v{ font-size:clamp(46px,5.4vw,84px); font-weight:700; letter-spacing:-.045em; line-height:1;
           font-variant-numeric:tabular-nums; }
.result-meta{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:20px;
              padding-top:20px; border-top:1px solid var(--line); }
.result-meta div span{ display:block; font-size:12.5px; letter-spacing:.08em;
                       text-transform:uppercase; color:var(--text-3); margin-bottom:5px; }
.result-meta div b{ font-size:17px; font-weight:600; }

.rate-card{ margin-top:28px; padding:20px 22px; border:1px solid var(--line);
             border-radius:var(--r); background:var(--surface); }
.rate-card .k{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
               letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.rate-card .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.rate-card .fig{ display:flex; align-items:baseline; gap:12px; margin-top:12px; }
.rate-card .fig b{ font-size:15px; font-weight:600; color:var(--text-2); }
.rate-card .fig span{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.rate-card .fig span span{ font-size:14px; font-weight:500; color:var(--text-3); }
.rate-card .t{ margin-top:8px; font-size:12.5px; color:var(--text-3); }

/* ── CERTIFICATE · doc 5 / copy 6 ───────────────────────────────────────── */
.cert-art{ grid-column:span 5; perspective:1600px; }
.cert-body{ grid-column:7 / span 6; align-self:center; }
.cert-doc{ position:relative; padding:clamp(24px,2.4vw,36px);
           background:linear-gradient(165deg,#17150E,#0C0B08);
           border:1px solid var(--line-gold); border-radius:var(--r-sm);
           box-shadow:0 40px 80px -44px #000;
           transform:rotateY(10deg) rotateX(3deg) translateY(24px);
           transition:transform 1100ms var(--ease); }
.cert-art.in .cert-doc{ transform:none; }
.cert-hd{ padding-bottom:18px; border-bottom:1px solid var(--line); }
.cert-hd b{ display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--gold-light); }
.cert-hd span{ display:block; margin-top:6px; font-size:11.5px; font-weight:500;
               letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.cert-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0;
           border-bottom:1px solid var(--line); font-size:14.5px; color:var(--text-3); }
.cert-row b{ color:var(--text); font-weight:500; }
.cert-row:last-of-type{ border-bottom:0; }
.cert-row.tot{ margin-top:6px; padding-top:16px; border-top:1px solid var(--line-gold); border-bottom:0; }
.cert-row.tot b{ font-size:20px; font-weight:700; color:var(--gold-light); letter-spacing:-.02em; }

/* ── BEFORE YOU SELL · large numbered rows ──────────────────────────────── */
.advice-row{ display:grid; grid-template-columns:clamp(56px,5vw,92px) minmax(0,1fr) minmax(0,1.1fr);
             gap:clamp(20px,3vw,56px); align-items:baseline;
             padding:clamp(26px,2.6vw,38px) 0; border-top:1px solid var(--line); }
.advice-row:last-child{ border-bottom:1px solid var(--line); }
.advice-n{ font-size:clamp(30px,3.4vw,52px); font-weight:700; letter-spacing:-.04em; line-height:1;
           color:transparent; -webkit-text-stroke:1px var(--gold-deep); }
.advice-row h3{ letter-spacing:-.025em; }
.advice-row p{ margin:0; font-size:15.5px; color:var(--text-2); }

/* ── REVIEWS · heading 4 / quote 7 ──────────────────────────────────────── */
.quotes-hd{ grid-column:span 4; }
.quotes{ grid-column:6 / span 7; }
.quote-stage{ position:relative; min-height:250px; }
.quote{ position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(14px);
        transition:opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid); }
.quote.on{ position:relative; opacity:1; visibility:visible; transform:none; }
.quote blockquote{ margin:0 0 30px; font-size:clamp(21px,2.1vw,32px); font-weight:500;
                   line-height:1.36; letter-spacing:-.022em; max-width:34ch; color:var(--text); }
.quote-by{ display:flex; align-items:center; gap:14px; }
.quote-ini{ width:46px; height:46px; flex:none; display:grid; place-items:center;
            border:1px solid var(--line-gold); border-radius:50%;
            font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--gold-light); }
.quote-who{ display:block; font-size:15.5px; font-weight:600; color:var(--text); line-height:1.3; }
.quote-where{ display:block; margin-top:3px; font-size:13.5px; color:var(--text-3); line-height:1.3; }
.quote-nav{ display:flex; align-items:center; gap:12px; margin-top:34px; }
.qbtn{ width:46px; height:46px; display:grid; place-items:center;
       border:1px solid var(--line); border-radius:8px; color:var(--gold-light);
       transition:border-color var(--t-fast), background-color var(--t-fast); }
.qbtn:hover{ border-color:var(--gold); background:rgba(201,162,39,.08); }
.qbtn svg{ width:16px; height:16px; }
.qcount{ margin-left:8px; font-size:14px; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ── SHOWROOM · image 7 / info 4 ────────────────────────────────────────── */
.shop-art{ grid-column:span 7; }
.shop-art .media{ aspect-ratio:16/11; }
.shop-body{ grid-column:9 / span 4; align-self:center; }
.hours{ margin:24px 0; }
.hours div{ display:flex; justify-content:space-between; gap:16px; padding:12px 0;
            border-bottom:1px solid var(--line); font-size:15px; color:var(--text-2); }
.hours div:first-child{ border-top:1px solid var(--line); }
.hours b{ color:var(--text); font-weight:500; }

/* ── FAQ · full-width rows, offset 8 ────────────────────────────────────── */
.faq{ grid-column:3 / span 8; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; display:flex; align-items:center; gap:24px;
        padding:24px 0; font-size:clamp(17px,1.5vw,21px); font-weight:600;
        letter-spacing:-.02em; color:var(--text-2); transition:color var(--t-fast); }
.faq-q:hover, .faq-item.open .faq-q{ color:var(--text); }
.faq-sign{ position:relative; width:16px; height:16px; margin-left:auto; flex:none; }
.faq-sign::before,.faq-sign::after{ content:''; position:absolute; left:0; top:7.5px;
  width:16px; height:1.5px; background:var(--gold); transition:transform var(--t-mid); }
.faq-sign::after{ transform:rotate(90deg); }
.faq-item.open .faq-sign::before{ transform:rotate(180deg); }
.faq-item.open .faq-sign::after{ transform:rotate(180deg); }
.faq-a{ overflow:hidden; height:0; transition:height var(--t-mid); }
.faq-a p{ margin:0; padding:0 40px 26px 0; font-size:16px; color:var(--text-2); max-width:70ch; }

/* ── CLOSING CTA · full-bleed ───────────────────────────────────────────── */
.closing{ position:relative; isolation:isolate; overflow:hidden; }
.closing .media-bg{ position:absolute; inset:0; z-index:-2; }
.closing .media-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05);
                        transition:transform 2s var(--ease); }
.closing.in .media-bg img{ transform:scale(1); }
.closing::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,8,.82),rgba(8,8,8,.93)); }
.closing-in{ padding-block:clamp(56px,5.5vw,92px); }
.closing h2{ max-width:14ch; }
.closing .lede{ margin-top:20px; max-width:46ch; }
.closing .row{ margin-top:34px; }

/* ── PAGE BANNER (inner pages) ──────────────────────────────────────────── */
.banner{ padding-top:calc(var(--nav-h) + 64px); padding-bottom:clamp(40px,4.5vw,64px);
         border-bottom:1px solid var(--line); }
.crumb{ font-size:13px; color:var(--text-3); margin-bottom:16px; }
.crumb a:hover{ color:var(--gold); }
.banner h1{ margin-bottom:18px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .hero{ min-height:0; padding-top:calc(var(--nav-h) + 32px); }
  .hero-copy, .hero-art,
  .why-art, .why-body, .buy-list, .buy-art,
  .purity-art, .purity-body, .calc-in, .calc-out,
  .cert-art, .cert-body, .shop-art, .shop-body,
  .quotes, .quotes-hd, .faq{ grid-column:span 12; }
  .hero-art{ max-width:620px; margin-top:8px; }
  .hero-art .media{ aspect-ratio:16/11; }
  .hero-rate{ left:auto; right:14px; bottom:-20px; }
  .cert-doc{ transform:none; }
  .trust-row{ grid-template-columns:repeat(3,1fr); }
  .trust-cell:nth-child(4){ border-left:0; padding-left:0; }
  .advice-row{ grid-template-columns:auto 1fr; }
  .advice-row p{ grid-column:2; }
}

@media (max-width:820px){
  /* Timeline turns vertical */
  .steps-line{ display:none; }
  .steps-row{ grid-template-columns:1fr; gap:0; }
  .step{ padding:0 0 34px 30px; border-left:1px solid var(--line); }
  .step:last-child{ border-left-color:transparent; padding-bottom:0; }
  .step .media{ aspect-ratio:16/9; }
  .step-dot{ position:absolute; left:-6.5px; top:4px; margin:0; }
  .step-n{ margin-bottom:12px; }
}

@media (max-width:760px){
  .trust-row{ grid-template-columns:none; grid-auto-flow:column;
              grid-auto-columns:minmax(150px,1fr); overflow-x:auto;
              scroll-snap-type:x mandatory; }
  .trust-row::-webkit-scrollbar{ display:none; }
  .trust-cell{ scroll-snap-align:start; border-left:1px solid var(--line); padding-left:20px; }
  .trust-cell:first-child{ padding-left:0; }
  .hero-rate{ position:static; margin-top:14px; width:100%; }
  .hero-cta > .btn{ flex:1 1 100%; }
  .buy-art{ aspect-ratio:4/3; }
  .seg{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); }
  .quote blockquote{ max-width:none; }
  .quote-stage{ min-height:0; }
  .faq-a p{ padding-right:0; }
  .advice-row{ grid-template-columns:1fr; gap:10px; }
  .advice-row p{ grid-column:1; }
  .mark{ display:none; }
}