/* ============================================================
   SANDMAN SUPPLY — shared stylesheet
   Palette: ink #0E0E0E · sand #C9A86A · gold #B8893D
            bone #F2EDE3 · charcoal #1C1C1C · ash #8C857A
   Type:    Bebas Neue (display) · Oswald (sub) · Inter (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0E0E0E;
  --char:#1C1C1C;
  --bone:#F2EDE3;
  --sand:#C9A86A;
  --gold:#B8893D;
  --ash:#8C857A;
  --line:rgba(242,237,227,.12);
  --max:1240px;
  --disp:'Bebas Neue',sans-serif;
  --sub:'Oswald',sans-serif;
  --body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sub);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:600;
  color:var(--sand);
}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:.92;letter-spacing:.01em}
h1{font-size:clamp(3rem,7.5vw,6.4rem)}
h2{font-size:clamp(2.6rem,6.5vw,5.2rem)}
h3{font-size:clamp(1.6rem,3vw,2.4rem)}
p{color:#d8d2c6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sub);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.84rem;
  padding:16px 30px;border:1.5px solid transparent;
  cursor:pointer;transition:.22s ease;line-height:1;
}
.btn-gold{background:var(--sand);color:var(--ink)}
.btn-gold:hover{background:var(--bone);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line);color:var(--bone)}
.btn-ghost:hover{border-color:var(--sand);color:var(--sand)}
.btn .arr{transition:transform .22s ease}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(14,14,14,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-size:1.6rem;letter-spacing:.04em}
.brand .mk{
  width:40px;height:40px;display:grid;place-items:center;overflow:hidden;
  border-radius:50%;background:var(--ink);
}
.brand .mk img{width:100%;height:100%;object-fit:cover}
.brand b{color:var(--sand);font-weight:400}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{
  font-family:var(--sub);text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;font-weight:500;color:#cfc8bb;transition:.18s;
}
.nav-links a:hover,.nav-links a.active{color:var(--sand)}
.nav-cta{display:flex;gap:12px;align-items:center}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:var(--bone);transition:.2s}

@media(max-width:1080px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .nav-links.open{
    display:flex;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;background:var(--ink);
    padding:24px;gap:22px;border-bottom:1px solid var(--line);
  }
  .nav-links.open a{font-size:1rem}
}
.marquee{
  background:var(--sand);color:var(--ink);overflow:hidden;white-space:nowrap;
  border-block:1px solid var(--ink);
}
.marquee-track{
  display:inline-flex;gap:0;animation:scroll 28s linear infinite;
  font-family:var(--disp);font-size:1.4rem;letter-spacing:.06em;padding:10px 0;
}
.marquee-track span{padding:0 26px}
.marquee-track .dot{color:rgba(14,14,14,.5)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{position:relative;padding:0;overflow:hidden;min-height:88vh;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(130% 100% at 78% 8%,rgba(201,168,106,.20),transparent 52%),
    radial-gradient(90% 90% at 8% 100%,rgba(184,137,61,.12),transparent 58%),
    var(--ink);
}
/* faint oversized watermark word behind hero */
.hero .watermark{
  position:absolute;z-index:1;right:-4%;bottom:-12%;
  font-family:var(--disp);font-size:34vw;line-height:.8;color:rgba(242,237,227,.035);
  letter-spacing:-.01em;pointer-events:none;user-select:none;white-space:nowrap;
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;width:100%;padding:60px 0}
.hero h1{margin:16px 0 0;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--sand);display:block}
.hero p.lead{max-width:46ch;margin:26px 0 34px;font-size:1.12rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* hero image slot — drop a real photo here, looks intentional empty */
.hero-shot{
  position:relative;aspect-ratio:4/5;border:1px solid var(--line);overflow:hidden;
  background:
    linear-gradient(150deg,#211d18 0%,#15120f 55%,#0c0b0a 100%);
  display:flex;flex-direction:column;justify-content:space-between;padding:26px;
}
.hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* real-logo variant: contain on ink, no crop, subtle frame */
.hero-shot.logo-shot{
  background:var(--ink);border:1px solid var(--line);
  aspect-ratio:1/1;padding:0;display:grid;place-items:center;
}
.hero-shot.logo-shot img{position:relative;width:100%;height:100%;object-fit:contain}
.hero-shot .corner{position:relative;z-index:2;font-family:var(--sub);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--sand);font-weight:600}
.hero-shot .corner.br{align-self:flex-end;text-align:right;color:var(--ash)}
.hero-shot .seal{
  position:absolute;z-index:2;inset:0;display:grid;place-items:center;pointer-events:none;
}
.hero-shot .seal .lock{
  text-align:center;
}
.hero-shot .seal .hex{
  width:96px;height:108px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--sand);color:var(--ink);font-family:var(--disp);font-size:4.6rem;line-height:1;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.hero-shot .seal .wm{font-family:var(--disp);font-size:2rem;letter-spacing:.06em;color:var(--bone)}
.hero-shot .seal .wm b{color:var(--sand);font-weight:400}
.hero-shot .seal .est{font-family:var(--sub);text-transform:uppercase;letter-spacing:.34em;font-size:.6rem;color:var(--ash);margin-top:6px}

.stat-row{display:flex;gap:42px;margin-top:50px;flex-wrap:wrap}
.stat .n{font-family:var(--disp);font-size:2.9rem;color:var(--bone);line-height:1}
.stat .l{font-family:var(--sub);text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--ash);margin-top:2px}

@media(max-width:880px){
  .hero{min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:32px;padding:48px 0}
  .hero-shot{max-width:340px;margin:0 auto;order:-1;width:100%}
  .hero .watermark{font-size:60vw;bottom:auto;top:30%}
}

/* ---------- sections ---------- */
section{padding:90px 0}
.sec-head{margin-bottom:50px}
.sec-head h2{margin-top:10px}
.sec-head .row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}

/* dual path */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.path{
  position:relative;padding:44px 38px;min-height:300px;
  border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--char);transition:.3s;
}
.path:hover{border-color:var(--sand);transform:translateY(-4px)}
.path .tag{font-family:var(--sub);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:var(--sand);margin-bottom:auto}
.path h3{margin:18px 0 10px}
.path p{font-size:.96rem;margin-bottom:22px}
.path .go{font-family:var(--sub);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--bone);display:inline-flex;gap:8px;align-items:center}
.path .go .arr{color:var(--sand);transition:transform .2s}
.path:hover .go .arr{transform:translateX(5px)}
@media(max-width:760px){.paths{grid-template-columns:1fr}}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line)}
.step{padding:34px 26px;border-right:1px solid var(--line);transition:.25s}
.step:last-child{border-right:0}
.step:hover{background:var(--char)}
.step .num{font-family:var(--disp);font-size:3rem;color:var(--sand);line-height:1}
.step h4{font-family:var(--sub);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;margin:12px 0 8px;font-weight:600}
.step p{font-size:.86rem}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* product grid */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--char);border:1px solid var(--line);overflow:hidden;transition:.28s}
.card:hover{transform:translateY(-5px);border-color:var(--sand)}
.card .ph{
  aspect-ratio:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(45deg,rgba(242,237,227,.015) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,#221e19,#141210 70%);
}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* type-driven placeholder label, reads as intentional */
.card .ph .lbl{
  position:relative;z-index:0;text-align:center;padding:18px;
}
.card .ph .lbl .big{font-family:var(--disp);font-size:2.1rem;line-height:.92;color:var(--bone);letter-spacing:.02em}
.card .ph .lbl .big .g{color:var(--sand)}
.card .ph .lbl .sm{font-family:var(--sub);text-transform:uppercase;letter-spacing:.28em;font-size:.58rem;color:var(--ash);margin-top:10px}
.card .ph::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 70% at 50% 40%,transparent 60%,rgba(0,0,0,.35));
}
.card .drop{position:absolute;top:12px;left:12px;z-index:3;background:var(--sand);color:var(--ink);font-family:var(--sub);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;padding:5px 10px}
.card .meta{padding:18px}
.card .meta .ty{font-family:var(--sub);text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;color:var(--ash)}
.card .meta h4{font-family:var(--sub);font-weight:600;font-size:1.05rem;margin:5px 0 10px}
.card .meta .pr{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card .meta .pr .ty{font-family:var(--sub);text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;color:var(--ash)}
.card .meta .pr .price{font-family:var(--disp);font-size:1.5rem;color:var(--sand)}
.card .meta .pr .add{font-family:var(--sub);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--line);padding:8px 13px;transition:.2s;white-space:nowrap;color:var(--sand)}
.card:hover .meta .pr .add{background:var(--sand);color:var(--ink);border-color:var(--sand)}
@media(max-width:1000px){.prod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.prod-grid{grid-template-columns:1fr}}

/* feature split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);overflow:hidden}
.split .v{padding:60px 48px;display:flex;flex-direction:column;justify-content:center}
.split .v.dark{background:var(--char)}
.split .v p{margin:18px 0 28px;max-width:42ch}
.split ul{list-style:none;display:grid;gap:14px;margin-bottom:30px}
.split li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:#d8d2c6}
.split li .ck{color:var(--sand);font-family:var(--disp);font-size:1.1rem;line-height:1.2}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* who-for chips */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{
  font-family:var(--sub);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;
  border:1px solid var(--line);padding:11px 18px;color:#cfc8bb;transition:.2s;
}
.chip:hover{border-color:var(--sand);color:var(--sand)}

/* CTA band */
.band{
  background:var(--sand);color:var(--ink);text-align:center;padding:80px 0;
  position:relative;overflow:hidden;
}
.band h2{color:var(--ink)}
.band p{color:rgba(14,14,14,.7);max-width:44ch;margin:16px auto 30px;font-weight:500}
.band .btn-dark{background:var(--ink);color:var(--bone)}
.band .btn-dark:hover{background:var(--char);transform:translateY(-2px)}
.band .btn-out{border-color:rgba(14,14,14,.4);color:var(--ink)}
.band .btn-out:hover{border-color:var(--ink)}

/* faq */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--bone);
  padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--sub);font-weight:500;font-size:1.15rem;
}
.faq-q .pm{font-family:var(--disp);font-size:1.8rem;color:var(--sand);transition:.25s}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 26px;max-width:70ch;color:var(--ash)}

/* forms */
.form-card{background:var(--char);border:1px solid var(--line);padding:40px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field.full{grid-column:1/-1}
label{font-family:var(--sub);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--ash);font-weight:500}
input,select,textarea{
  background:var(--ink);border:1px solid var(--line);color:var(--bone);
  padding:13px 14px;font-family:var(--body);font-size:.95rem;border-radius:0;transition:.18s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--sand)}
textarea{resize:vertical;min-height:120px}
.drop-zone{
  border:1.5px dashed var(--line);padding:30px;text-align:center;color:var(--ash);
  font-family:var(--sub);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;transition:.2s;cursor:pointer;
}
.drop-zone:hover{border-color:var(--sand);color:var(--sand)}
@media(max-width:680px){.fgrid{grid-template-columns:1fr}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal .g{aspect-ratio:1;background:
    linear-gradient(160deg,#221e19,#141210 70%);
  border:1px solid var(--line);position:relative;overflow:hidden;display:grid;place-items:center}
.gal .g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.gal .g .glbl{text-align:center;padding:18px}
.gal .g .glbl .big{font-family:var(--disp);font-size:2.4rem;line-height:.92;color:var(--bone);letter-spacing:.02em}
.gal .g .glbl .big .g{color:var(--sand)}
.gal .g svg{width:100%;height:100%}
.gal .g .cap{position:absolute;bottom:0;left:0;right:0;padding:14px;background:linear-gradient(transparent,rgba(14,14,14,.92));font-family:var(--sub);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--bone)}
@media(max-width:760px){.gal{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.gal{grid-template-columns:1fr}}

/* page header */
.page-head{padding:70px 0 40px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 90% 0,rgba(201,168,106,.14),transparent 60%)}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(2.8rem,8vw,6rem)}
.crumbs{font-family:var(--sub);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--ash);margin-bottom:8px}
.crumbs a:hover{color:var(--sand)}

/* footer */
footer{background:var(--char);border-top:1px solid var(--line);padding:64px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.foot-grid h5{font-family:var(--sub);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--sand);margin-bottom:18px;font-weight:600}
.foot-grid a{display:block;color:#bdb6a9;font-size:.92rem;margin-bottom:11px;transition:.16s}
.foot-grid a:hover{color:var(--sand)}
.foot-brand p{max-width:34ch;margin:16px 0;font-size:.92rem}
.socials{display:flex;gap:12px}
.socials a{width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;transition:.2s}
.socials a:hover{border-color:var(--sand);color:var(--sand)}
.foot-bot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--ash)}
.foot-bot a:hover{color:var(--sand)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* utility */
.center{text-align:center}
.mt0{margin-top:0}
.notice{background:var(--char);border:1px solid var(--sand);padding:16px 20px;font-size:.9rem;color:var(--sand);font-family:var(--sub);letter-spacing:.04em}