/* ═══════════════════════════════════════════
   DENTÉ MAG — Design Tokens & Base Styles
   v3 — White/grey accent · Poppins throughout
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:      #000000;
  --bg:         #090909;
  --bg2:        #101010;
  --bg3:        #181818;
  --surface:    #1e1e1e;
  --surface2:   #272727;

  --border:     rgba(255,255,255,0.07);
  --border-mid: rgba(255,255,255,0.13);
  --border-hi:  rgba(255,255,255,0.25);

  --white:      #ffffff;
  --off-white:  #f0ede8;
  --muted:      rgba(255,255,255,0.44);
  --dim:        rgba(255,255,255,0.22);
  --faint:      rgba(255,255,255,0.09);

  /* Accent: white + warm light grey (replaces gold) */
  --accent:         #ffffff;
  --silver:         #c6c2bc;
  --silver-dim:     rgba(198,194,188,0.35);
  --silver-border:  rgba(198,194,188,0.2);
  --accent-border:  rgba(255,255,255,0.25);
  --accent-faint:   rgba(255,255,255,0.08);

  /* All Poppins */
  --font-body:    'Poppins', sans-serif;
  --font-display: 'Poppins', sans-serif;

  --pad-x: 64px;
  --ease:      0.22s ease;
  --ease-slow: 0.55s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--white);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); }
ul { list-style: none; }

/* ── DISPLAY TYPE (Poppins Bold uppercase) ── */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
}
.display-thin {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 0.95;
}
.label-xs  { font-size: 8px;   letter-spacing: 0.3em;  text-transform: uppercase; font-weight: 500; }
.label-sm  { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; }
.text-muted { color: var(--muted); }
.text-dim   { color: var(--dim); }

/* ── LAYOUT ── */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-x); }

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 13px 36px;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  border: none; outline: none;
}
.btn-primary       { background: var(--white); color: var(--black); }
.btn-primary:hover { background: var(--silver); }
.btn-outline {
  background: transparent; border: 1px solid var(--accent-border);
  color: var(--white); padding: 12px 28px; font-size: 9px; font-weight: 500;
  letter-spacing: 0.22em; font-family: var(--font-body);
}
.btn-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-ghost {
  background: transparent; color: var(--muted);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  font-family: var(--font-body); border: none;
  border-bottom: 1px solid var(--border-mid); padding-bottom: 3px;
}
.btn-ghost:hover { color: var(--white); border-color: var(--white); }

/* ── SECTION HEADER ── */
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 56px var(--pad-x) 28px;
}
.sec-head-left { display: flex; align-items: center; gap: 14px; }
.sec-head-mark { width: 2px; height: 22px; background: var(--white); flex-shrink: 0; }
.sec-head h2   { font-size: 10px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--white); }
.sec-head-link { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); transition: color var(--ease); }
.sec-head-link:hover { color: var(--white); }

/* ── CARD LABELS ── */
.cat-label  { font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--silver); font-weight: 500; margin-bottom: 10px; display: block; }
.card-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.06; color: var(--white); }
.card-dek   { font-size: 12px; line-height: 1.85; color: var(--muted); font-weight: 300; margin-top: 10px; }

/* ── STORY CARD ── */
.sc {
  display: block; overflow: hidden; text-decoration: none; color: inherit;
  border-right: 1px solid var(--border); transition: background var(--ease); position: relative;
}
.sc:hover { background: var(--surface); }
.sc-img-wrap { overflow: hidden; background: var(--bg3); }
.sc-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition: transform var(--ease-slow); filter:grayscale(10%); }
.sc:hover .sc-img-wrap img { transform: scale(1.04); }
.sc-ph { width:100%; height:100%; min-height:200px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--surface) 0%,var(--bg3) 100%); }
.sc-ph span { font-size:8px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); }
.sc-body { padding: 22px 26px 30px; }

/* ── SKELETON ── */
.skeleton { background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:1px; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.skel-img { width:100%; aspect-ratio:4/3; }
.skel-cat { height:9px; width:72px; margin-bottom:12px; }
.skel-h   { height:16px; width:90%; margin-bottom:8px; }
.skel-h2  { height:16px; width:70%; margin-bottom:12px; }
.skel-p   { height:11px; width:100%; margin-bottom:6px; }
.skel-p2  { height:11px; width:80%; }

/* ── LOCK BADGE ── */
.lock-badge { position:absolute; top:12px; right:12px; width:26px; height:26px; background:rgba(0,0,0,0.65); border:1px solid var(--border-mid); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; z-index:2; }

/* ── MOBILE NAV ── */
.mobile-nav-overlay { display:none; position:fixed; inset:0; z-index:999; background:var(--black); padding:48px var(--pad-x); flex-direction:column; justify-content:center; gap:28px; }
.mobile-nav-overlay.open { display:flex; }
.mobile-nav-overlay a { font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); opacity:0.65; transition:opacity var(--ease); }
.mobile-nav-overlay a:hover { opacity:1; }
.mobile-nav-close { position:absolute; top:28px; right:32px; background:none; border:none; color:var(--white); font-size:28px; }

/* ── SITE NAV ── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:150;
  padding:0 var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; height:60px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.88) 0%,transparent 100%);
  transition:background var(--ease), border-bottom 0.3s;
}
.site-nav.scrolled { background:rgba(7,7,7,0.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.site-nav.page-nav { position:sticky; top:0; background:rgba(7,7,7,0.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav-logo img { height:22px; }
.nav-links-list { display:flex; gap:32px; }
.nav-links-list a { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); transition:color var(--ease); font-weight:500; }
.nav-links-list a:hover, .nav-links-list a.active { color:var(--white); }
.nav-actions { display:flex; gap:12px; align-items:center; }
.nav-signin  { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); transition:color var(--ease); }
.nav-signin:hover { color:var(--white); }
.nav-sub-btn { background:transparent; color:var(--white); border:1px solid var(--border-mid); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600; padding:8px 18px; transition:all var(--ease); }
.nav-sub-btn:hover { background:var(--white); color:var(--black); border-color:var(--white); }
.nav-hamburger { display:none; background:none; border:none; color:var(--white); font-size:22px; }

/* ── FOOTER ── */
.site-footer { background:var(--black); border-top:1px solid var(--border); padding:72px var(--pad-x) 48px; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:56px; padding-bottom:56px; border-bottom:1px solid var(--border); }
.footer-logo img { height:26px; margin-bottom:18px; }
.footer-tagline  { font-size:11.5px; line-height:1.9; color:var(--dim); max-width:280px; }
.footer-social   { display:flex; gap:20px; margin-top:22px; }
.footer-social a { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--dim); transition:color var(--ease); }
.footer-social a:hover { color:var(--white); }
.footer-col h4   { font-size:9px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--silver); margin-bottom:18px; }
.footer-col ul   { display:flex; flex-direction:column; gap:11px; }
.footer-col ul li a { font-size:12px; color:var(--muted); transition:color var(--ease); font-weight:300; }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom   { display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:9px; letter-spacing:0.1em; color:var(--dim); }
.footer-bottom-links { display:flex; gap:24px; }
.footer-bottom-links a { color:var(--dim); transition:color var(--ease); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; }
.footer-bottom-links a:hover { color:var(--white); }

/* ── FORMS ── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.form-label { font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.form-input,.form-textarea,.form-select { background:transparent; border:none; border-bottom:1px solid var(--border-mid); padding:13px 0; color:var(--white); font-family:var(--font-body); font-size:13px; font-weight:300; outline:none; transition:border-color var(--ease); width:100%; }
.form-input:focus,.form-textarea:focus,.form-select:focus { border-color:var(--white); }
.form-input::placeholder,.form-textarea::placeholder { color:var(--dim); }
.form-textarea { resize:vertical; min-height:120px; }
.form-select   { appearance:none; cursor:pointer; }
.form-select option { background:var(--bg2); color:var(--white); }
.form-success { background:var(--accent-faint); border:1px solid var(--border-mid); padding:24px 28px; margin-top:24px; }
.form-success h3 { font-weight:600; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:8px; }
.form-success p  { font-size:13px; color:var(--muted); }

/* ── PAGE HERO ── */
.page-hero { padding:80px var(--pad-x) 56px; border-bottom:1px solid var(--border); background:var(--bg2); }
.page-hero-kicker { font-size:8.5px; letter-spacing:0.3em; text-transform:uppercase; color:var(--silver); margin-bottom:14px; display:flex; align-items:center; gap:12px; }
.page-hero-kicker::before { content:''; width:24px; height:1px; background:var(--silver); }
.page-hero h1 { font-weight:700; font-size:clamp(44px,6vw,76px); letter-spacing:0.02em; text-transform:uppercase; line-height:0.95; margin-bottom:18px; }
.page-hero p  { font-size:14px; line-height:1.85; color:var(--muted); max-width:520px; font-weight:300; }

/* ── PULL QUOTE ── */
.pull-quote { padding:80px var(--pad-x); display:grid; grid-template-columns:160px 1fr; gap:60px; align-items:center; background:var(--black); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pq-label-stack { display:flex; flex-direction:column; gap:12px; }
.pq-line  { width:24px; height:1px; background:var(--silver); }
.pq-text  { font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--silver); font-weight:500; }
.pq-sub   { font-size:9px; letter-spacing:0.15em; color:var(--dim); margin-top:28px; line-height:1.7; }
blockquote { font-size:clamp(15px,2vw,24px); font-style:italic; font-weight:300; line-height:1.6; color:var(--off-white); position:relative; padding-left:20px; }
blockquote::before { content:'\201C'; font-weight:700; font-size:80px; color:var(--white); opacity:0.06; position:absolute; top:-24px; left:-8px; line-height:1; font-style:normal; pointer-events:none; }

/* ── NL STRIP ── */
.nl-strip { background:var(--bg2); border-top:1px solid var(--border); padding:52px var(--pad-x); display:flex; align-items:center; justify-content:space-between; gap:40px; }
.nl-strip-text h3 { font-weight:700; font-size:20px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; }
.nl-strip-text p  { font-size:13px; color:var(--muted); }
.nl-strip-form    { display:flex; align-items:stretch; min-width:340px; }
.nl-strip-form input { flex:1; background:var(--surface); border:1px solid var(--border-mid); border-right:none; padding:13px 16px; color:var(--white); font-family:var(--font-body); font-size:13px; outline:none; transition:border-color var(--ease); }
.nl-strip-form input:focus { border-color:var(--white); }
.nl-strip-form input::placeholder { color:var(--dim); }
.nl-strip-form button { background:var(--white); color:var(--black); border:none; padding:0 22px; font-family:var(--font-display); font-weight:700; font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase; white-space:nowrap; transition:background var(--ease); }
.nl-strip-form button:hover { background:var(--silver); }

/* ── AOS ── */
.aos-item { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.aos-item.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  :root { --pad-x: 32px; }
  .nav-links-list { display:none; }
  .nav-hamburger  { display:block; }
  .footer-grid    { grid-template-columns:1fr 1fr; }
  .stats-bar      { grid-template-columns:repeat(2,1fr); }
  .pull-quote     { grid-template-columns:1fr; gap:28px; padding:56px var(--pad-x); }
  .nl-strip       { flex-direction:column; align-items:flex-start; }
  .nl-strip-form  { min-width:100%; width:100%; }
}
@media (max-width:640px) {
  :root { --pad-x: 20px; }
  .footer-grid { grid-template-columns:1fr; }
  .stats-bar   { grid-template-columns:1fr 1fr; }
  .sec-head    { padding:36px var(--pad-x) 18px; }
}