/* =====================================================================
   DIAMOND SMILES DENTAL — global design system (single source of truth).
   Linked by every page (homepage + generated answers & service pages).
   Installs color, type, spacing, motion tokens + micro-detail utilities.
   Legacy token names are aliased to the new system, so existing component
   rules inherit the upgrade WITHOUT being individually restyled (that is
   the next pass). Warm monochrome — no colored accent (gold retired).
   ===================================================================== */
:root{
  /* ---- color: warm monochrome — paper · ink · stone · espresso ---- */
  --paper:      #F4F1EA;   /* page background */
  --paper-2:    #EAE5DA;   /* alternating section / panel */
  --espresso:   #1A1410;   /* warm near-black: dark panels, primary buttons */
  --ink:        #2B2620;   /* body text on light */
  --stone:      #6F675C;   /* muted text, captions */
  --gold:       #B8924A;   /* RETIRED as an accent (kept defined so any stale reference still resolves) */
  --gold-soft:  #C8A35B;   /* RETIRED with --gold; unused */
  --cream-text: #F6F3EC;   /* type on dark */
  --cream-dim:  rgba(246,243,236,0.60);   /* secondary text on dark */
  --cream-faint:rgba(246,243,236,0.14);   /* hairlines on dark */
  --cream-line: rgba(246,243,236,0.26);   /* stronger rules on dark */
  --hairline:   rgba(43,38,32,0.12);

  /* ---- legacy aliases → new system (existing components inherit) ---- */
  --bg:         var(--paper);
  --ivory:      var(--cream-text);
  --cream:      var(--paper-2);
  --gray:       var(--paper-2);
  --white-soft: var(--paper);
  --line:       var(--hairline);
  --line-soft:  var(--hairline);
  --champ:      var(--hairline);   /* gold retired — neutral hairline */

  /* ---- type ---- */
  --serif:     "Cormorant Garamond", Georgia, "Times New Roman", serif;   /* DISPLAY face */
  --grotesque: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* TODO_LICENSED_GROTESQUE: swap to Neue Haas Grotesk / Suisse Int'l / ABC Diatype when licensed */
  --sans:      var(--grotesque);
  --fs-display-xl: clamp(48px, 6.5vw, 88px);
  --fs-display-l:  clamp(34px, 4.5vw, 58px);
  --fs-lead:       clamp(19px, 1.6vw, 22px);
  --fs-body:       17px;
  --fs-eyebrow:    12px;
  --fs-marker:     14px;
  --fs-caption:    13px;

  /* ---- spacing & layout (8px base) ---- */
  --space:     8px;
  --container: 1240px;
  --gutter:    clamp(24px, 6vw, 96px);
  --section-y: clamp(96px, 12vh, 176px);
  --px:        var(--gutter);   /* legacy side-gutter alias */
  --header-h:  104px;

  /* ---- motion (quiet, slow) ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-word: cubic-bezier(.345, 0, 0, 1);   /* legacy hero / section-2 word reveals */
  --ease-img:  cubic-bezier(.86, 0, .07, 1);  /* legacy Ken Burns / image */
  --dur-fast:  0.4s;
  --dur-base:  0.8s;
}

/* =========================  TYPE-SCALE UTILITIES  =========================
   Ready for the section-by-section pass; not applied to sections yet. */
.t-display-xl{ font-family:var(--serif); font-weight:500; font-size:var(--fs-display-xl); line-height:1.02; letter-spacing:-.02em; font-optical-sizing:auto; }
.t-display-l { font-family:var(--serif); font-weight:500; font-size:var(--fs-display-l);  line-height:1.06; letter-spacing:-.015em; font-optical-sizing:auto; }
.t-lead      { font-family:var(--grotesque); font-size:var(--fs-lead); line-height:1.55; color:var(--stone); }
.t-body      { font-family:var(--grotesque); font-size:var(--fs-body); line-height:1.7; color:var(--ink); }
.t-eyebrow   { font-family:var(--grotesque); font-size:var(--fs-eyebrow); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }
.t-marker    { font-family:var(--grotesque); font-size:var(--fs-marker); color:var(--stone); font-variant-numeric:tabular-nums; }
.t-caption   { font-family:var(--grotesque); font-size:var(--fs-caption); color:var(--stone); }
.tnum        { font-variant-numeric:tabular-nums; }

/* =========================  MICRO-DETAIL  ========================= */
/* eyebrow with a 24px stone hairline to the left (opt-in modifier) */
.eyebrow--rule{ display:inline-flex; align-items:center; gap:14px; }
.eyebrow--rule::before{ content:""; width:24px; height:1px; background:var(--stone); }

/* link: underline grows from the left on hover (ink) */
.u-link{ position:relative; color:var(--ink); }
.u-link::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--ink); transition:width var(--dur-fast) var(--ease); }
.u-link:hover::after{ width:100%; }

/* hairline divider — never heavier than 1px */
.hairline{ border:0; border-top:1px solid var(--hairline); }

/* refined focus ring — never remove an outline without replacing it */
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* scroll-reveal utility (IntersectionObserver wired in the section pass; inert until .reveal is used) */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* film-grain overlay for hero media (apply over media in the section pass) */
.grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   ANSWER LIBRARY — display case (shared dark vitrine: homepage teaser
   + dedicated answers page). Warm monochrome, dark register. No gold.
   ===================================================================== */
.case{ position:relative; overflow:clip; border-radius:22px; isolation:isolate; color:var(--cream-text);
  padding:clamp(40px,5vw,76px);
  background:radial-gradient(125% 90% at 12% -5%, #241C16 0%, #1A1410 52%, #140E0A 100%); }
.case::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(246,243,236,0.10) 0%, rgba(246,243,236,0.03) 22%, transparent 46%); }
.case__grain{ position:absolute; inset:0; z-index:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.case > *{ position:relative; z-index:1; }
.case__eyebrow{ font-family:var(--grotesque); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim); display:block; }
.case__title{ font-family:var(--serif); font-weight:500; color:var(--cream-text); letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(1.5rem,2.5vw,2.4rem); margin-top:12px; text-wrap:balance; white-space:nowrap; }
@media (max-width:700px){ .case__title{ white-space:normal; } }   /* wrap naturally on small screens */
.case__sub{ font-family:var(--grotesque); color:var(--cream-dim); font-size:1rem; line-height:1.55; margin-top:14px; max-width:62ch; }

/* search field (underline, display-serif, dark) */
.case-search{ position:relative; border-bottom:1px solid var(--cream-line); }
.case-search input{ width:100%; background:transparent; border:0; outline:none; color:var(--cream-text);
  font-family:var(--serif); font-size:clamp(1.1rem,1.6vw,1.35rem); padding:12px 30px 12px 32px; }
.case-search input::placeholder{ color:var(--cream-dim); font-style:italic; }
.case-search .si{ position:absolute; left:2px; top:50%; transform:translateY(-50%); width:15px; height:15px; pointer-events:none; }
.case-search .si::before{ content:""; position:absolute; left:0; top:0; width:11px; height:11px; border:1.4px solid var(--cream-dim); border-radius:50%; }
.case-search .si::after{ content:""; position:absolute; right:0; bottom:0; width:6px; height:1.4px; background:var(--cream-dim); transform:rotate(45deg); transform-origin:right; }
.case-search .clr{ position:absolute; right:0; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--cream-dim); font-size:1.1rem; cursor:pointer; display:none; }
.case-search .clr.show{ display:block; }
.case-count{ font-family:var(--grotesque); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim); margin-top:12px; min-height:1em; }

/* number-led category plate */
.plate{ background:rgba(246,243,236,0.035); border:1px solid var(--cream-faint); border-radius:16px;
  padding:clamp(8px,1vw,16px) clamp(16px,1.8vw,26px); }
.plate-row{ display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); padding:15px 0; border-top:1px solid var(--cream-faint);
  color:var(--cream-text); transition:padding-left .3s var(--ease); }
.plate-row:first-child{ border-top:0; }
.plate-row:hover{ padding-left:6px; }
.plate-n{ font-family:var(--serif); font-weight:500; font-variant-numeric:tabular-nums; font-size:clamp(30px,3vw,40px);
  line-height:1; color:var(--cream-text); min-width:1.7em; }
.plate-meta{ display:flex; flex-direction:column; }
.plate-cat{ font-family:var(--serif); font-size:1.2rem; line-height:1.12; color:var(--cream-text); }
.plate-cap{ font-family:var(--grotesque); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim); margin-top:3px; }

/* question-led accordions (open lit surface) */
.case-list{ border-top:1px solid var(--cream-faint); }
.case-item{ border-bottom:1px solid var(--cream-faint); transition:background .3s var(--ease); }
.case-item.open{ background:rgba(246,243,236,0.05); }
.case-q{ width:100%; background:none; border:0; cursor:pointer; text-align:left; display:flex; justify-content:space-between;
  align-items:baseline; gap:24px; padding:18px 14px; font-family:var(--serif); font-weight:400; color:var(--cream-text);
  font-size:clamp(1.2rem,1.7vw,1.55rem); transition:color .4s var(--ease); }
.case-q:hover{ background:rgba(246,243,236,0.035); }
.case-qt{ display:block; transition:transform .4s var(--ease); }
.case-q:hover .case-qt{ transform:translateX(2px); }
.case-q .ic{ position:relative; width:16px; height:16px; flex:0 0 auto; align-self:center; color:var(--cream-dim); transition:color .4s var(--ease); }
.case-q .ic::before,.case-q .ic::after{ content:""; position:absolute; top:50%; left:50%; background:currentColor; }
.case-q .ic::before{ width:13px; height:1px; transform:translate(-50%,-50%); }
.case-q .ic::after{ width:1px; height:13px; transform:translate(-50%,-50%); transition:transform .45s var(--ease), opacity .3s var(--ease); }
.case-q:hover .ic{ color:var(--cream-text); }
.case-item.open .case-q .ic{ color:var(--cream-text); }
.case-item.open .ic::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.case-a{ max-height:0; overflow:hidden; opacity:0; transition:max-height .5s var(--ease), opacity .5s var(--ease); padding:0 14px; }
.case-item.open .case-a{ opacity:1; }
/* AEO signature: promoted lead sentence on dark */
.case-lead{ font-family:var(--serif); font-weight:400; color:var(--cream-text); font-size:clamp(1.05rem,1.4vw,1.32rem); line-height:1.42; padding-top:2px; }
.case-support{ font-family:var(--grotesque); color:var(--cream-dim); font-size:.92rem; line-height:1.62; margin-top:10px; max-width:64ch; }
.case-lead:last-child, .case-support:last-child{ padding-bottom:22px; }
.case-soon{ font-family:var(--grotesque); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); align-self:center; }
.case-q--stub{ cursor:default; }
.case-q--stub .case-qt{ color:var(--cream-dim); }

@media (prefers-reduced-motion:reduce){
  .case-a, .case-q .ic, .case-q .ic::after, .case-qt, .plate-row, .case-item{ transition:none; }
}