/* ==========================================================================
   CHANDU GOLD BUYERS — FOUNDATION
   Inter only. 1600px container. 12-column grid. One motion language.
   01 tokens  02 reset  03 type  04 grid  05 buttons  06 header  07 forms
   08 footer  09 utilities  10 motion  11 responsive
   ========================================================================== */

/* 01 · TOKENS =============================================================== */
:root{
  /* Backgrounds — subtle variation section to section, never one flat black */
  --bg:          #080808;
  --bg-2:        #0B0B0B;
  --bg-3:        #101010;
  --bg-4:        #0A0A0A;
  --bg-5:        #111111;
  --surface:     #151515;
  --surface-2:   #1B1B1B;

  --text:        #F5F2EA;
  --text-2:      #A7A39A;
  --text-3:      #8B877F;          /* 5.6:1 on --bg, passes AA */

  --gold:        #C9A227;
  --gold-light:  #E2C766;
  --gold-deep:   #8F6E14;

  --line:        rgba(245,242,234,.09);
  --line-2:      rgba(245,242,234,.16);
  --line-gold:   rgba(201,162,39,.32);

  --container:   1600px;
  --gutter:      clamp(24px, 4vw, 80px);
  --gap:         clamp(20px, 2.2vw, 40px);
  --bay:         clamp(72px, 7vw, 128px);
  --nav-h:       80px;

  --r-sm:        6px;
  --r:           10px;

  --ease:        cubic-bezier(.22,1,.36,1);
  --t-fast:      240ms var(--ease);
  --t-mid:       500ms var(--ease);
  --t-slow:      800ms var(--ease);
}

/* 02 · RESET ================================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv05' 1,'ss01' 1;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
[hidden]{ display:none !important; }
::selection{ background:var(--gold); color:#120E04; }
:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px; border-radius:3px; }

/* Barely-there grain, so the page is not a perfectly flat digital surface */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress — a hairline, nothing more */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:90;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
}

/* 03 · TYPE ================================================================= */
h1,h2,h3,h4{ margin:0; letter-spacing:-.028em; text-wrap:balance; }
h1{ font-size:clamp(44px,5vw,88px); font-weight:700; line-height:1.03; }
h2{ font-size:clamp(34px,3.8vw,60px); font-weight:600; line-height:1.08; }
h3{ font-size:clamp(20px,1.7vw,26px); font-weight:600; line-height:1.25; letter-spacing:-.02em; }
h4{ font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.012em; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
.measure{ max-width:660px; }
.measure-sm{ max-width:520px; }

.eyebrow{
  display:inline-block; margin:0 0 18px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
.lede{ font-size:clamp(17px,1.25vw,19px); line-height:1.62; color:var(--text-2); }
.small{ font-size:15px; line-height:1.6; color:var(--text-2); }
.meta{ font-size:13px; line-height:1.55; color:var(--text-3); }
.gold{ color:var(--gold-light); }

/* 04 · GRID ================================================================= */
.container{
  width:min(100%, calc(var(--container) + var(--gutter) * 2));
  padding-inline:var(--gutter);
  margin-inline:auto;
}
.grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:var(--gap);
}
.c2{ grid-column-end:span 2; } .c3{ grid-column-end:span 3; } .c4{ grid-column-end:span 4; }
.c5{ grid-column-end:span 5; } .c6{ grid-column-end:span 6; } .c7{ grid-column-end:span 7; }
.c8{ grid-column-end:span 8; } .c9{ grid-column-end:span 9; } .c12{ grid-column-end:span 12; }
.start2{ grid-column-start:2; } .start3{ grid-column-start:3; } .start9{ grid-column-start:9; } .start10{ grid-column-start:10; } .start6{ grid-column-start:6; } .start7{ grid-column-start:7; }
.start8{ grid-column-start:8; }

.bay{ padding-block:var(--bay); }
.bay-t{ padding-top:var(--bay); }
.bay-b{ padding-bottom:var(--bay); }

.tone-2{ background:var(--bg-2); }
.tone-3{ background:var(--bg-3); }
.tone-4{ background:var(--bg-4); }
.tone-5{ background:var(--bg-5); }

/* 05 · BUTTONS ============================================================== */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 28px;
  font-size:15px; font-weight:600; letter-spacing:-.008em;
  border:1px solid transparent; border-radius:8px;
  white-space:nowrap;
  transition:transform var(--t-fast), background-color var(--t-fast),
             border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn svg{ width:17px; height:17px; flex:none; transition:transform var(--t-fast); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:hover svg.arw{ transform:translateX(4px); }

.btn-gold{ background:var(--gold); color:#120E04; box-shadow:0 6px 20px -10px rgba(201,162,39,.8); }
.btn-gold:hover{ background:var(--gold-light); box-shadow:0 12px 30px -12px rgba(201,162,39,.9); }
/* A single restrained light sweep on the primary action */
.btn-gold::after{
  content:''; position:absolute; top:0; bottom:0; width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-180%); transition:transform 900ms var(--ease);
}
.btn-gold:hover::after{ transform:translateX(280%); }

.btn-ghost{ border-color:var(--line-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-light); background:rgba(201,162,39,.07); }

.btn-wa{ background:#1E7F4C; color:#fff; }
.btn-wa:hover{ background:#1A6E42; box-shadow:0 12px 28px -14px rgba(30,127,76,.9); }

.btn-full{ width:100%; }

.tlink{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; color:var(--gold-light);
  padding-bottom:4px; position:relative;
}
.tlink::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink svg{ width:14px; height:14px; transition:transform var(--t-fast); }
.tlink:hover svg{ transform:translateX(4px); }

/* 06 · HEADER =============================================================== */
.hdr{
  position:fixed; inset:0 0 auto; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  transition:height var(--t-mid), background-color var(--t-mid),
             border-color var(--t-mid), backdrop-filter var(--t-mid);
}
.hdr.stuck{
  height:66px;
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom-color:var(--line-gold);
}
.hdr-in{ width:min(100%, calc(var(--container) + var(--gutter) * 2));
         padding-inline:var(--gutter); margin-inline:auto;
         display:flex; align-items:center; gap:28px; }

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand-logo{ height:42px; width:auto; transition:height var(--t-mid); }
.hdr.stuck .brand-logo{ height:34px; }
.hdr.stuck .brand-mk{ width:29px; height:36px; }
.brand-mk{ width:34px; height:42px; flex:none; }
.brand-tx b{ display:block; font-size:18px; font-weight:700; letter-spacing:.09em; line-height:1; }
.brand-tx span{
  display:flex; align-items:center; gap:6px; margin-top:5px;
  font-size:9.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.brand-tx span::before, .brand-tx span::after{
  content:''; flex:1 0 8px; height:1px; background:currentColor; opacity:.55;
}

.nav{ margin-inline:auto; }
.nav ul{ display:flex; align-items:center; gap:30px; }
.nav a{
  position:relative; display:block; padding:6px 0;
  font-size:14.5px; font-weight:500; color:var(--text-2);
  transition:color var(--t-fast);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid);
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after, .nav a.on::after{ transform:scaleX(1); }
.nav a.on{ color:var(--gold-light); }

.hdr-act{ display:flex; align-items:center; gap:14px; flex:none; }
.hdr-act .btn{ height:44px; padding:0 20px; font-size:14px; }
.icon-btn{
  width:42px; height:42px; 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), transform var(--t-fast);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:var(--gold); background:rgba(201,162,39,.08); transform:translateY(-2px); }

.burger{ display:none; width:44px; height:44px; margin-left:auto;
         border:1px solid var(--line); border-radius:8px; place-items:center; }
.burger i{ display:block; position:relative; width:18px; height:1.6px; background:var(--gold-light); }
.burger i::before,.burger i::after{
  content:''; position:absolute; left:0; width:18px; height:1.6px; background:var(--gold-light);
  transition:transform var(--t-mid), top var(--t-mid);
}
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
body.menu .burger i{ background:transparent; }
body.menu .burger i::before{ top:0; transform:rotate(45deg); }
body.menu .burger i::after{ top:0; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:75; background:var(--bg);
  padding:calc(var(--nav-h) + 28px) var(--gutter) 32px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
  overflow-y:auto;
}
body.menu .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer a.dn{
  display:flex; align-items:center; gap:14px; padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:24px; font-weight:600; letter-spacing:-.02em;
  opacity:0; transform:translateY(12px);
}
body.menu .drawer a.dn{ animation:dIn .45s var(--ease) forwards; }
.drawer a.dn em{ font-style:normal; font-size:12px; font-weight:600; color:var(--gold); }
@keyframes dIn{ to{ opacity:1; transform:none; } }
.drawer-foot{ margin-top:auto; padding-top:28px; display:grid; gap:10px; }

/* Mobile sticky action bar */
.thumb{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:1px; background:var(--line);
  border-top:1px solid var(--line);
  transform:translateY(100%); transition:transform var(--t-mid);
}
.thumb.up{ transform:none; }
.thumb a{ flex:1; height:56px; display:flex; align-items:center; justify-content:center; gap:8px;
          font-size:14px; font-weight:600; }
.thumb svg{ width:16px; height:16px; }
.thumb .t1{ background:var(--gold); color:#120E04; flex:1.35; }
.thumb .t2{ background:#1E7F4C; color:#fff; }
.thumb .t3{ background:var(--surface); color:var(--gold-light); }

/* 07 · FORMS ================================================================ */
.field{ margin-bottom:20px; }
.field > label{ display:block; margin-bottom:9px; font-size:14px; font-weight:500; color:var(--text-2); }
.req{ color:var(--gold); }

.inp{
  width:100%; height:52px; padding:0 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  color:var(--text); font-size:16px;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
textarea.inp{ height:auto; min-height:120px; padding:15px 16px; resize:vertical; line-height:1.55; }
.inp::placeholder{ color:var(--text-3); }
.inp:focus{ outline:none; border-color:var(--gold); background:var(--bg); }
.inp[aria-invalid="true"]{ border-color:#C4564A; }

select.inp{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}

.err{ display:block; margin-top:7px; font-size:13.5px; color:#E08379; }
.ok-note{ margin-top:14px; padding:14px 16px; border-radius:8px;
          background:rgba(30,127,76,.12); border:1px solid rgba(30,127,76,.4);
          font-size:14.5px; color:#8FD9AF; }

.rows{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.rows .wide{ grid-column:1/-1; }

/* 08 · FOOTER =============================================================== */
.ftr{ background:var(--bg-2); border-top:1px solid var(--line); padding-top:clamp(56px,6vw,88px); }
.ftr h4{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
         color:var(--gold); margin-bottom:20px; }
.ftr li{ margin-bottom:11px; }
.ftr a, .ftr p{ color:var(--text-2); font-size:15px; }
.ftr a{ transition:color var(--t-fast); }
.ftr a:hover{ color:var(--gold-light); }
.ftr-base{
  margin-top:clamp(40px,4vw,64px); border-top:1px solid var(--line);
  padding-block:22px; display:flex; flex-wrap:wrap; gap:10px 28px;
  justify-content:space-between; align-items:center;
  font-size:13.5px; color:var(--text-3);
}
.ftr-base a{ font-size:13.5px; color:var(--text-3); }

/* 09 · UTILITIES ============================================================ */
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.hr-gold{ height:1px; border:0; margin:0;
          background:linear-gradient(90deg,transparent,var(--line-gold) 18%,var(--line-gold) 82%,transparent); }
.center{ text-align:center; }
.row{ display:flex; flex-wrap:wrap; gap:12px; }
.stack{ display:grid; gap:10px; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
a.sr:focus{
  position:fixed; top:12px; left:12px; z-index:200; width:auto; height:auto;
  margin:0; clip:auto; overflow:visible; padding:14px 22px;
  background:var(--gold); color:#120E04; font-size:14px; font-weight:600; border-radius:8px;
}

/* Media frames — every photograph on the site sits in one of these */
.media{ position:relative; overflow:hidden; border-radius:var(--r-sm); background:var(--surface); }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.media-hover:hover img{ transform:scale(1.03); }
.media-shade::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,0) 52%,rgba(8,8,8,.62));
}

/* Placeholder plate for photography that has not landed yet */
.media.pending{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,162,39,.09), transparent 62%),
    repeating-linear-gradient(135deg, rgba(245,242,234,.014) 0 2px, transparent 2px 9px),
    linear-gradient(165deg,#151309,#0A0A09);
  border:1px solid var(--line);
}
.media.pending::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:no-repeat center/56px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40' fill='none'%3E%3Cpath d='M17 2l14 5.2v14C31 29.5 25.3 35.6 17 38.5 8.7 35.6 3 29.5 3 21.2v-14L17 2z' stroke='%23C9A227' stroke-opacity='.4' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* 10 · MOTION =============================================================== */
/* Hidden states only apply once JS confirms it can reveal them again, so a
   blocked script can never leave the page blank. */
.anim [data-a]{ opacity:0; transition:opacity var(--t-slow), transform var(--t-slow); }
.anim [data-a="up"]    { transform:translateY(30px); }
.anim [data-a="left"]  { transform:translateX(-28px); }
.anim [data-a="right"] { transform:translateX(28px); }
.anim [data-a="scale"] { transform:scale(.97); }
.anim [data-a].in{ opacity:1; transform:none; }

/* Cinematic image reveal: wipe the frame, settle the scale */
.anim .media[data-a="img"]{ opacity:1; clip-path:inset(0 100% 0 0); transition:clip-path var(--t-slow); }
.anim .media[data-a="img"] img{ transform:scale(1.08); transition:transform 1200ms var(--ease); }
.anim .media[data-a="img"].in{ clip-path:inset(0 0 0 0); }
.anim .media[data-a="img"].in img{ transform:scale(1); }

/* Rules that draw themselves */
.anim [data-a="line"]{ opacity:1; transform:scaleX(0); transform-origin:left;
                       transition:transform var(--t-slow); }
.anim [data-a="line"].in{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .anim [data-a],
  .anim .media[data-a="img"],
  .anim [data-a="line"]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .grain,.progress{ display:none; }
}

/* 11 · RESPONSIVE =========================================================== */
@media (max-width:1180px){
  .nav ul{ gap:20px; }
  .nav a{ font-size:13.5px; }
}
@media (max-width:1024px){
  :root{ --nav-h:70px; }
  .nav, .hdr-act{ display:none; }
  .burger{ display:grid; }
  .c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9{ grid-column:auto / span 12; }
  .start2,.start3,.start6,.start7,.start8,.start9,.start10{ grid-column-start:auto; }
}
@media (max-width:760px){
  body{ font-size:16px; padding-bottom:56px; }
  .thumb{ display:flex; }
  .rows{ grid-template-columns:1fr; }
  .btn{ height:54px; }
  .row > .btn{ flex:1 1 100%; }
}

/* ── HERO CHOREOGRAPHY ────────────────────────────────────────────────────
   The load sequence: eyebrow, headline, copy, buttons, trust row, image,
   rate chip — each 120ms behind the last. Delays are set in JS by data-h. */
html.anim [data-h]{
  opacity:0; transform:translateY(22px);
  transition:opacity 750ms var(--ease), transform 750ms var(--ease);
}
html.anim [data-h="6"]{ transform:none; }
html.anim [data-h="6"] .media img{ transform:scale(1.07); transition:transform 1100ms var(--ease); }
html.anim body.hero-in [data-h]{ opacity:1; transform:none; }
html.anim body.hero-in [data-h="6"] .media img{ transform:scale(1); }

@media (prefers-reduced-motion:reduce){
  html.anim [data-h], html.anim [data-h] .media img{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
}

/* ==========================================================================
   FLOATING WHATSAPP
   Lives bottom-right on desktop. Hidden on phones, where the sticky thumb bar
   already carries WhatsApp and a floating button would sit on top of it.
   ========================================================================== */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:75;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#1E7F4C; color:#fff;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06) inset;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid),
             background-color var(--t-fast), box-shadow var(--t-fast);
}
.wa-float.up{ opacity:1; visibility:visible; transform:none; }
.wa-float:hover{ background:#1A6E42; box-shadow:0 18px 40px -12px rgba(30,127,76,.8); }
.wa-float:hover .wa-tip{ opacity:1; transform:translateX(0); }
.wa-float svg{ width:28px; height:28px; position:relative; z-index:2; }

/* One slow ring, not a strobe */
.wa-float::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(30,127,76,.6);
  animation:waRing 3s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes waRing{
  0%   { transform:scale(1);   opacity:.8; }
  70%  { transform:scale(1.55); opacity:0; }
  100% { transform:scale(1.55); opacity:0; }
}

.wa-tip{
  position:absolute; right:calc(100% + 12px); top:50%; margin-top:-17px;
  height:34px; display:flex; align-items:center; padding:0 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  font-size:13.5px; font-weight:500; color:var(--text); white-space:nowrap;
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity var(--t-fast), transform var(--t-fast);
}

@media (max-width:760px){ .wa-float{ display:none; } }
@media (prefers-reduced-motion:reduce){ .wa-float::after{ animation:none; } }

/* Footer rows that carry an icon — contact and location details */
.ftr-row{ display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; }
.ftr-row:last-child{ margin-bottom:0; }
.ftr-row > svg{
  width:16px; height:16px; flex:none; margin-top:3px;
  color:var(--gold); stroke-width:1.7;
}
.ftr-row a, .ftr-row span{ color:var(--text-2); font-size:15px; line-height:1.5; }
.ftr-row a{ transition:color var(--t-fast); }
.ftr-row a:hover{ color:var(--gold-light); }
.ftr-row address{ font-style:normal; color:var(--text-2); font-size:15px; line-height:1.5; }