/* =========================================================================
   DR. PETER BONIFATTO: peterbdmd.com
   Dark, properly lit. Lexus/Polestar typography. 4px spacing grid.
   60 / 30 / 10  =  obsidian field / charcoal surfaces / ice + steel accent
   ========================================================================= */

/* ---- Tokens ---------------------------------------------------------- */
:root{
  /* 60: the field */
  --obsidian:   #0b0c0e;
  --obsidian-2: #0e1013;
  /* 30: surfaces */
  --charcoal:   #14161a;
  --slate:      #16181C;  /* hero macro card */
  --graphite:   #1a1d22;
  --gunmetal:   #24282e;
  /* 10: light + accent */
  --ice:        #f8f9fa;
  --grey:       #9ca3af;
  --grey-dim:   #6b7280;
  --titanium:   #d1d5db;
  --steel:      #868d99;
  --accent:     #38bdf8;
  --accent-deep:#0284c7;

  --line:        rgba(209,213,219,.09);
  --line-soft:   rgba(209,213,219,.05);
  --line-strong: rgba(209,213,219,.18);
  --glow:        rgba(56,189,248,.14);

  --shadow:    0 32px 80px -32px rgba(0,0,0,.8);
  --shadow-lg: 0 64px 140px -48px rgba(0,0,0,.9);

  --display: "Jost", "Futura", "Helvetica Neue", sans-serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* 4px spacing grid */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px;
  --s20:80px; --s24:96px; --s28:112px; --s32:128px; --s40:160px;

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 2px;        /* containers: architectural corners */
  --radius-pill: 999px; /* buttons only */
  --radius-img: 0;      /* photography stays square */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--obsidian);
  color:var(--ice);
  font-family:var(--sans);
  font-size:clamp(.95rem,.92rem + .2vw,1.02rem);
  line-height:1.8;
  font-weight:300;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
/* Browsers give <figure> a 1em/40px margin by default. It was pushing every
   case photo 40px right and off the edge of the screen on phones. */
figure,figcaption,blockquote,dl,dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:var(--obsidian); }

/* Fine film grain. Keeps large dark fields from banding and reading flat. */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress. Automotive-configurator detail. */
.scroll-rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:300; background:transparent; pointer-events:none; }
.scroll-rail i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent-deep),var(--accent)); box-shadow:0 0 12px var(--glow); transition:width .1s linear; }

/* ---- Typography ------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  margin:0;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--ice);
}
.display{
  font-size:clamp(2.5rem,5.6vw,5rem);
  font-weight:200;
  line-height:1.06;
  letter-spacing:-.02em;
}
.h-xl{ font-size:clamp(1.9rem,3.8vw,3.2rem); font-weight:200; letter-spacing:-.015em; }
.h-lg{ font-size:clamp(1.6rem,2.9vw,2.4rem); font-weight:300; }
.h-md{ font-size:clamp(1.2rem,1.9vw,1.55rem); font-weight:300; }
.h-caps{ text-transform:uppercase; letter-spacing:.16em; font-weight:300; }

.eyebrow{
  font-family:var(--mono);
  font-size:.64rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--steel); margin:0 0 var(--s5);
  display:inline-flex; align-items:center; gap:var(--s3);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); opacity:.55; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:28px; height:1px; background:var(--accent); opacity:.55; }
.eyebrow.bare::before,.eyebrow.bare::after{ display:none; }
.eyebrow .idx{ color:var(--titanium); }

.lede{ font-size:clamp(1.05rem,1rem + .45vw,1.32rem); line-height:1.7; color:var(--titanium); font-weight:250; }
.muted{ color:var(--grey); }
.dim{ color:var(--grey-dim); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ice); font-weight:500; }
em{ font-style:italic; }
.mono{ font-family:var(--mono); }

/* ---- Layout ---------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:820px; }
section{ position:relative; }
.section{ padding-block:clamp(64px,10vw,160px); }
.section-tight{ padding-block:clamp(48px,6vw,96px); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.center{ text-align:center; }

/* Surfaces (the 30%) */
.frame-charcoal{ background:var(--charcoal); border-block:1px solid var(--line-soft); }

/* Page-header anchor light only. One per page, never repeated per card.
   The hero keeps its bloom because the photograph underneath has a real
   light source; everywhere else depth comes from spacing and value shifts. */
.bloom{ position:relative; isolation:isolate; }
.bloom::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:0; top:0; width:min(680px,80%); height:340px;
  background:radial-gradient(ellipse at left top, rgba(56,189,248,.06), transparent 68%);
}

/* ---- Buttons --------------------------------------------------------- */
.btn{
  --pad-y:16px; --pad-x:32px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--mono); font-size:.68rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  border-radius:var(--radius-pill); border:1px solid transparent;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  will-change:transform; line-height:1; white-space:nowrap; position:relative; overflow:hidden;
}
.btn svg{ width:14px; height:14px; transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
/* The primary action is the brand blue, not white. Near-black text on #38bdf8
   clears AA comfortably, and it means every "book" on the site reads as the
   same object. */
.btn-primary{ background:var(--accent); color:var(--obsidian); }
.btn-primary:hover{ background:#7dd3fc; box-shadow:0 12px 34px -10px rgba(56,189,248,.45); }
.btn-ghost{
  border-color:var(--line-strong); color:var(--ice);
  background:rgba(20,22,26,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:rgba(20,22,26,.8); }
/* Hero secondary. A real outline at readable contrast, deliberately not the
   translucent blurred glass panel .btn-ghost uses, which is the single most
   recognisable generated-UI tell in a hero. */
.btn-line{
  background:transparent; border-color:var(--steel); color:var(--ice);
}
.btn-line:hover{ border-color:var(--ice); background:rgba(248,249,250,.06); }
.btn-dark{ background:var(--charcoal); border-color:var(--line); color:var(--ice); }
.btn-dark:hover{ border-color:var(--line-strong); background:var(--graphite); }
.btn-block{ width:100%; }
.btn-sm{ --pad-y:12px; --pad-x:20px; font-size:.62rem; }

.link-underline{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--mono); font-size:.66rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--titanium); padding-bottom:var(--s1); position:relative;
  transition:color .4s var(--ease);
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); opacity:.6; transform:scaleX(1); transform-origin:right; transition:transform .5s var(--ease), opacity .4s;
}
.link-underline:hover{ color:var(--accent); }
.link-underline:hover::after{ transform:scaleX(0); transform-origin:left; }
.link-underline svg{ width:13px; height:13px; }

/* ---- Header ---------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(11,12,14,.78);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
  border-bottom-color:var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:var(--s8); min-height:80px; }
.brand{ display:flex; flex-direction:column; line-height:1; flex:none; }
.brand b{
  font-family:var(--display); font-weight:300;
  font-size:1.12rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ice); white-space:nowrap;
}
.brand span{
  font-family:var(--mono); font-weight:400; font-size:.5rem;
  letter-spacing:.42em; text-transform:uppercase; color:var(--steel); margin-top:var(--s2);
}
.nav-links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); }
.nav-links a{
  font-family:var(--mono); font-size:.62rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--grey);
  position:relative; padding:var(--s1) 0; transition:color .4s var(--ease); white-space:nowrap;
}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--accent); transition:width .45s var(--ease); }
.nav-links a:hover{ color:var(--ice); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--ice); }
.nav-cta{ display:flex; align-items:center; gap:var(--s5); flex:none; }
.nav-toggle{ display:none; background:none; border:0; padding:var(--s2); color:var(--ice); }
.nav-toggle svg{ width:26px; height:26px; }

.mobile-menu{
  position:fixed; inset:0; z-index:190; background:var(--obsidian);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:var(--s1);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
  padding:96px var(--gutter) 48px;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{
  font-family:var(--display); font-weight:200;
  font-size:clamp(1.6rem,6vw,2.2rem); letter-spacing:-.01em; color:var(--grey); padding:var(--s2) 0;
  transition:color .3s;
}
.mobile-menu a:hover,.mobile-menu a.active{ color:var(--ice); }
.mobile-menu .btn{ margin-top:var(--s8); }
.mobile-menu .mm-phone{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; color:var(--accent); margin-top:var(--s6); }

/* ---- Hero ------------------------------------------------------------ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--obsidian); }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media picture{ display:block; width:100%; height:100%; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(56,189,248,.06), transparent 66%),
    linear-gradient(0deg, rgba(11,12,14,.98) 12%, rgba(11,12,14,.55) 42%, rgba(11,12,14,0) 68%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(32px,3.5vw,48px); padding-top:120px; }
.hero h1{ max-width:19ch; margin-bottom:var(--s6); }
.hero .lede{ max-width:52ch; margin-bottom:var(--s10); color:var(--grey); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:clamp(24px,3.2vw,48px);
  margin-top:clamp(24px,3vw,40px); padding-top:var(--s6); border-top:1px solid var(--line);
}
.hero-meta .hm{ display:flex; flex-direction:column; gap:var(--s1); }
.hero-meta b{ font-family:var(--display); font-weight:300; font-size:1.4rem; color:var(--ice); letter-spacing:.01em; }
.hero-meta span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--grey-dim); }
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:var(--s6); z-index:2;
  display:flex; align-items:center; gap:var(--s2); color:var(--grey-dim);
  font-family:var(--mono); font-size:.54rem; letter-spacing:.32em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero-scroll .line{ width:1px; height:56px; background:linear-gradient(var(--accent),transparent); animation:scrolldot 2.6s var(--ease) infinite; transform-origin:top; }
@keyframes scrolldot{ 0%,100%{ transform:scaleY(.25); opacity:.3 } 50%{ transform:scaleY(1); opacity:.9 } }

/* Sits on the page, not floating above it. A rule, not a glass slab. */
.trust-banner{
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s10); align-items:center;
  padding-top:var(--s5); margin-top:var(--s6); max-width:fit-content;
  border-top:1px solid var(--line);
}
.trust-banner .tb{ display:flex; align-items:center; gap:var(--s3); font-size:.86rem; color:var(--titanium); font-weight:300; }
.trust-banner svg{ width:15px; height:15px; color:var(--accent); flex:none; stroke-width:1.6; }

/* ---- Press ------------------------------------------------------------ */
.press{ border-block:1px solid var(--line-soft); background:var(--charcoal); padding-block:var(--s10); }
/* Static, not a marquee. Six marks repeating on a loop read as "only six",
   which undersells it. Sitting still and large reads as a wall of credentials. */
.press-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s8) clamp(28px,4vw,56px);
}
/* Each mark carries its own --cap. A wide one-line logotype and a three-line
   stacked one cannot share a height without one of them becoming unreadable. */
.press-row img{
  height:auto; width:auto;
  max-height:var(--cap,40px);
  object-fit:contain; flex:0 0 auto;
  opacity:.78; filter:grayscale(1); transition:opacity .4s var(--ease);
}
.press-row img:hover{ opacity:1; }
.press-row img:hover{ opacity:1; }
@media (max-width:760px){
  .press-row{ justify-content:center; gap:var(--s8) var(--s10); }
  .press-row img{ max-height:calc(var(--cap,40px) * .78); }
}
.press-label{ text-align:center; font-family:var(--mono); font-size:.54rem; letter-spacing:.36em; text-transform:uppercase; color:var(--grey-dim); margin-bottom:var(--s6); }
.marquee{ display:flex; gap:clamp(40px,6vw,96px); width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee span{
  font-family:var(--display); font-weight:300;
  font-size:clamp(.9rem,1.3vw,1.1rem); letter-spacing:.26em; text-transform:uppercase;
  color:var(--steel); opacity:.7; white-space:nowrap; transition:opacity .4s, color .4s;
}
.marquee span:hover{ opacity:1; color:var(--ice); }
.marquee-mask{ position:relative; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---- Split ----------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,88px); align-items:center; }
/* Pins the portrait beside long copy on desktop. Must switch off once the
   split stacks, or the photo sticks and the copy scrolls over the top of it. */
.split-media.sticky-media{ position:sticky; top:110px; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; height:auto; display:block; object-fit:cover; border-radius:var(--radius-img); box-shadow:var(--shadow); }
.split-media.tall,.split-media.wide{ overflow:hidden; border-radius:var(--radius-img); box-shadow:var(--shadow); }
.split-media.tall{ aspect-ratio:4/5; }
.split-media.wide{ aspect-ratio:5/4; }
.split-media.tall img,.split-media.wide img{ height:100%; box-shadow:none; }
.frame{ position:relative; }
.frame::before{ content:""; position:absolute; inset:16px; border:1px solid rgba(209,213,219,.14); border-radius:2px; z-index:2; pointer-events:none; }
.frame .tag{
  position:absolute; z-index:3; left:16px; top:16px;
  font-family:var(--mono); font-size:.54rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--titanium); background:rgba(11,12,14,.7); padding:var(--s2) var(--s3); backdrop-filter:blur(8px);
}
.stat-badge{
  position:absolute; z-index:4; padding:var(--s5) var(--s6);
  background:linear-gradient(180deg, rgba(36,40,46,.72), rgba(20,22,26,.66));
  border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--shadow);
}
.stat-badge b{ font-family:var(--display); font-size:2rem; font-weight:200; color:var(--ice); display:block; line-height:1; }
.stat-badge span{ font-family:var(--mono); font-size:.54rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-dim); }

/* ---- Mechanics ------------------------------------------------------- */
.mech{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); overflow:hidden; }
.mech-item{ background:var(--obsidian); padding:clamp(32px,3.2vw,48px); position:relative; overflow:hidden; transition:background .5s var(--ease); }
.mech-item::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.mech-item:hover{ background:var(--charcoal); }
.mech-item:hover::after{ transform:scaleX(1); }
.mech-item .idx{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; color:var(--accent);
  display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s10);
}
.mech-item .idx::after{ content:""; flex:1; height:1px; background:var(--line); }
.mech-item .mech-ico{ width:40px; height:40px; color:var(--titanium); margin-bottom:var(--s6); }
.mech-item .mech-ico svg{ width:100%; height:100%; stroke-width:1; }
.mech-item h3{ font-size:1.3rem; margin-bottom:var(--s3); font-weight:300; }
.mech-item p{ color:var(--grey); font-size:.94rem; margin:0; line-height:1.75; }

/* ---- Case portfolio --------------------------------------------------- */
.case{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(32px,4vw,56px); align-items:center; padding-block:clamp(40px,5vw,64px); border-top:1px solid var(--line); }
.case:last-of-type{ border-bottom:1px solid var(--line); }
.case-media{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); align-items:start; }
.case-shot{ position:relative; overflow:hidden; border-radius:var(--radius-img); background:var(--charcoal); aspect-ratio:16/10; width:100%; }
.case-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--ease); }
.case:hover .case-shot img{ transform:scale(1.035); }
.case-shot span{
  position:absolute; bottom:var(--s2); left:var(--s2);
  font-family:var(--mono); font-size:.5rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ice); background:rgba(11,12,14,.62); padding:var(--s1) var(--s3); backdrop-filter:blur(6px);
}
.case-body{ display:flex; flex-direction:column; justify-content:center; }
.case-num{ font-family:var(--display); font-weight:400; font-size:.62rem; letter-spacing:.28em; color:var(--accent); margin-bottom:var(--s4); }
.case-body h3{ font-size:clamp(1.2rem,1.8vw,1.6rem); margin-bottom:var(--s6); max-width:20ch; font-weight:300; }
.spec{ border-top:1px solid var(--line); }
.spec-row{ display:grid; grid-template-columns:150px 1fr; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--line-soft); }
.spec-row dt{ font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-dim); padding-top:4px; }
.spec-row dd{ margin:0; color:var(--titanium); font-size:.92rem; font-weight:300; }
.case-note{ font-size:.78rem; color:var(--grey-dim); margin-top:var(--s5); }

/* ---- Quotes ----------------------------------------------------------- */
.quote-track{ display:flex; gap:var(--s6); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:var(--s2); }
.quote-track::-webkit-scrollbar{ display:none; }
.quote{
  scroll-snap-align:center; flex:0 0 min(500px,86vw);
  background:var(--charcoal);
  border-top:1px solid var(--accent); border-radius:0;
  padding:clamp(28px,3vw,44px); margin:0;
}
.quote .stars{ display:flex; gap:3px; margin-bottom:var(--s5); color:var(--accent); }
.quote .stars svg{ width:12px; height:12px; }
.quote p{ font-size:1rem; line-height:1.8; color:var(--titanium); margin:0 0 var(--s6); font-weight:300; }
.quote cite{ font-style:normal; font-family:var(--mono); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--grey-dim); }
.quote-nav{ display:flex; gap:var(--s2); justify-content:flex-end; margin-top:var(--s6); }
.quote-nav button{ width:44px; height:44px; border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:transparent; color:var(--ice); display:flex; align-items:center; justify-content:center; transition:.4s var(--ease); }
.quote-nav button:hover{ border-color:var(--accent); color:var(--accent); }
.quote-nav svg{ width:15px; height:15px; }

/* ---- Awards ----------------------------------------------------------- */
.awards{ display:grid; gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); }
.award{
  background:var(--obsidian); display:grid; grid-template-columns:132px 1fr auto;
  gap:var(--s6); align-items:center; padding:var(--s8) clamp(8px,2vw,24px);
  transition:background .45s var(--ease); position:relative; overflow:hidden;
}
.award:hover{ background:var(--charcoal); }
.award .yr{ font-family:var(--display); font-size:2.4rem; font-weight:200; letter-spacing:-.01em; color:var(--ice); line-height:1; }
.award .ttl{ font-family:var(--display); font-weight:300; font-size:1.15rem; color:var(--ice); letter-spacing:.005em; }
.award .ttl small{ display:block; font-family:var(--sans); font-weight:300; letter-spacing:.005em; color:var(--grey); font-size:.86rem; margin-top:var(--s2); }
.award .src{ font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); text-align:right; }

/* Award cards. Real event photography behind, his own award badge on top.
   The 2025 Headliner leads because it is the only one where he was the sole
   dentist selected, so it earns the width. */
.honors{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.honor{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--charcoal); border:1px solid var(--line);
  display:flex; flex-direction:column; min-height:340px;
  transition:border-color .45s var(--ease);
}
.honor:hover{ border-color:var(--line-strong); }
/* Taller box brings the frame closer to the photos' own 3:2, so cover has less
   to throw away and the crop cannot reach his head. */
.honor-photo{ position:relative; overflow:hidden; flex:1 1 auto; min-height:230px; }
/* These boxes are wider than the photos, so cover trims the top and bottom.
   Bias the crop upward or it takes the top of his head off. */
.honor-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; opacity:.55; transition:opacity .6s var(--ease), transform 1.2s var(--ease); }
.honor:hover .honor-photo img{ opacity:.72; transform:scale(1.03); }
.honor-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--charcoal) 2%, rgba(20,22,26,.35) 55%, rgba(20,22,26,.1) 100%);
}
.honor-body{ position:relative; z-index:1; padding:var(--s6) var(--s6) var(--s8); margin-top:-40px; }
/* The publication's own logo, not a badge. Height-locked so marks of very
   different proportions still sit on one optical baseline. */
.honor-logo{
  width:auto; height:auto; max-height:46px; max-width:178px;
  object-fit:contain; object-position:left bottom;
  margin-bottom:var(--s5); opacity:.9;
}
.honor .hn{ font-family:var(--display); font-weight:300; font-size:clamp(1.25rem,1.8vw,1.6rem); color:var(--ice); line-height:1.2; margin-bottom:var(--s2); letter-spacing:-.005em; }
.honor .hs{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.honor .hd{ color:var(--grey); font-size:.9rem; margin-top:var(--s3); line-height:1.65; }
/* Only appears on awards whose source article has been checked. */
.honor-link{
  display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s5);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); transition:gap .3s var(--ease), opacity .3s;
}
.honor-link svg{ width:14px; height:14px; stroke-width:1.5; }
.honor-link:hover{ gap:var(--s4); opacity:.8; }

/* Lead card runs full width with the photo alongside the text */
.honor-lead{ grid-column:1 / -1; flex-direction:row; min-height:0; }
.honor-lead .honor-photo{ flex:0 0 46%; min-height:300px; }
.honor-lead .honor-photo img{ opacity:.72; }
.honor-lead .honor-photo::after{ background:linear-gradient(90deg, rgba(20,22,26,.1) 40%, var(--charcoal) 99%); }
.honor-lead .honor-body{ flex:1; margin-top:0; align-self:center; padding:var(--s10); }
.honor-lead .honor-logo{ max-height:62px; max-width:250px; }
.honor-lead .hn{ font-size:clamp(1.7rem,2.8vw,2.4rem); }
.honor-lead .hd{ max-width:46ch; font-size:.98rem; }

/* No usable event photo for this one, so it is type only rather than a weak image */
.honor-quiet{ justify-content:center; }
.honor-quiet .honor-body{ margin-top:0; }

@media (max-width: 980px){
  .honors{ grid-template-columns:1fr 1fr; }
  .honor-lead{ flex-direction:column; }
  .honor-lead .honor-photo{ flex:0 0 240px; }
  .honor-lead .honor-photo::after{ background:linear-gradient(0deg, var(--charcoal) 2%, rgba(20,22,26,.2) 70%); }
  .honor-lead .honor-body{ padding:var(--s6); margin-top:-40px; }
}
@media (max-width: 620px){ .honors{ grid-template-columns:1fr; } }

/* ---- Metric strip ------------------------------------------------------ */
.metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line-soft); overflow:hidden; }
.metric{ background:var(--obsidian); padding:var(--s10) var(--s6); text-align:center; position:relative; }
.metric b{ display:block; font-family:var(--display); font-weight:200; font-size:clamp(2.2rem,3.6vw,3.2rem); color:var(--ice); line-height:1; letter-spacing:-.02em; }
.metric span{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--grey-dim); margin-top:var(--s3); }

/* ---- Quiz -------------------------------------------------------------- */
.quiz{ background:var(--charcoal); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.quiz-head{ padding:clamp(24px,3vw,36px); border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.quiz-head h3{ font-size:1.15rem; font-weight:300; }
.quiz-timer{ font-family:var(--mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-dim); display:flex; align-items:center; gap:var(--s2); }
.quiz-timer i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.quiz-progress{ display:flex; gap:var(--s1); }
.quiz-progress i{ width:36px; height:2px; border-radius:2px; background:var(--gunmetal); transition:background .4s, box-shadow .4s; }
.quiz-progress i.on{ background:var(--accent); box-shadow:0 0 8px var(--glow); }
.quiz-body{ padding:clamp(24px,3vw,36px); }
.quiz-q{ font-size:1.3rem; font-weight:300; font-family:var(--display); letter-spacing:-.01em; color:var(--ice); margin-bottom:var(--s2); }
.quiz-sub{ font-size:.85rem; color:var(--grey-dim); margin-bottom:var(--s6); }
.quiz-nav{ display:flex; justify-content:space-between; align-items:center; padding:0 clamp(24px,3vw,36px) clamp(24px,3vw,36px); gap:var(--s4); }

.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.opt{
  text-align:left; background:var(--obsidian); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s5); color:var(--titanium); font-size:.92rem; line-height:1.5; font-weight:300;
  transition:border-color .35s, background .35s, transform .35s, box-shadow .35s;
}
.opt small{ display:block; color:var(--grey-dim); font-size:.76rem; margin-top:var(--s1); }
.opt:hover{ border-color:var(--line-strong); background:var(--graphite); }
.opt.selected{ border-color:var(--accent); background:var(--graphite); box-shadow:0 0 0 1px rgba(56,189,248,.25), 0 0 24px -8px var(--glow); }
.intake-back{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-dim); background:none; border:0; padding:var(--s2) 0; transition:color .3s; }
.intake-back:hover{ color:var(--ice); }
.intake-back[disabled]{ opacity:0; pointer-events:none; }
.intake-summary{ border:1px solid var(--line); border-radius:var(--radius); background:var(--obsidian); padding:var(--s5) var(--s6); margin-bottom:var(--s6); }
.intake-summary .row{ display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s2) 0; border-bottom:1px solid var(--line-soft); font-size:.88rem; }
.intake-summary .row:last-child{ border-bottom:0; }
.intake-summary .k{ font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-dim); padding-top:4px; }
.intake-summary .v{ color:var(--titanium); text-align:right; }
.intake-actions{ display:grid; gap:var(--s3); }
/* Third action in the stack, kept as quiet text so the two real ways to book
   stay the only things that look like buttons. */
.intake-copy{
  display:block; width:100%; margin-top:var(--s4); padding:var(--s2) 0;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey-dim); background:none; border:0; transition:color .3s;
}
.intake-copy:hover{ color:var(--ice); }

.field{ margin-bottom:var(--s4); }
.field label{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-dim); margin-bottom:var(--s2); }
.field input,.field textarea{
  width:100%; background:var(--obsidian); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ice); font-family:var(--sans); font-size:1rem; font-weight:300; padding:var(--s4) var(--s5);
  transition:border-color .3s, box-shadow .3s; outline:none;
}
.field input:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(56,189,248,.2); }
.field input::placeholder{ color:var(--grey-dim); }

/* ---- Plan -------------------------------------------------------------- */
.plan{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); overflow:hidden; }
.plan-step{ background:var(--charcoal); padding:clamp(32px,3.2vw,48px); position:relative; transition:background .5s; overflow:hidden; }
.plan-step::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.plan-step:hover{ background:var(--graphite); }
.plan-step:hover::after{ transform:scaleX(1); }
.plan-step .pn{ font-family:var(--mono); font-size:.62rem; letter-spacing:.28em; color:var(--accent); display:block; margin-bottom:var(--s6); }
.plan-step h3{ font-size:1.25rem; margin-bottom:var(--s3); font-weight:300; }
.plan-step p{ color:var(--grey); font-size:.92rem; margin:0; }
.plan-step .pico{ width:40px; height:40px; color:var(--titanium); margin-bottom:var(--s6); }
.plan-step .pico svg{ width:100%; height:100%; stroke-width:1; }

/* ---- Contact rows ------------------------------------------------------ */
.info-row{ display:flex; align-items:flex-start; gap:var(--s5); padding:var(--s6) 0; border-bottom:1px solid var(--line-soft); }
.info-row:last-child{ border-bottom:0; }
.info-row svg{ width:18px; height:18px; color:var(--accent); flex:none; margin-top:5px; stroke-width:1.2; }
.info-row .k{ font-family:var(--mono); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-dim); margin-bottom:var(--s1); }
.info-row .v{ color:var(--ice); font-size:.96rem; font-weight:300; }
.info-row a.v:hover{ color:var(--accent); }
.phone-hero{ display:inline-block; padding:6px 0; font-family:var(--display); font-weight:200; font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:.01em; color:var(--ice); }
.phone-hero:hover{ color:var(--accent); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer{ background:var(--charcoal); border-top:1px solid var(--line-soft); padding-block:clamp(56px,6vw,88px) var(--s10); }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(32px,4vw,64px); padding-bottom:var(--s12); border-bottom:1px solid var(--line-soft); }
.footer-brand b{ font-family:var(--display); font-weight:300; font-size:1.2rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); display:block; }
.footer-brand span{ font-family:var(--mono); font-size:.5rem; letter-spacing:.38em; text-transform:uppercase; color:var(--steel); }
.footer-brand p{ color:var(--grey); max-width:34ch; margin-top:var(--s5); font-size:.9rem; }
.footer-col h4{ font-family:var(--mono); font-size:.56rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--grey-dim); margin:0 0 var(--s5); }
.footer-col a{ display:block; color:var(--grey); font-size:.9rem; padding:var(--s2) 0; transition:color .3s, padding-left .3s; font-weight:300; }
.footer-col a:hover{ color:var(--accent); padding-left:var(--s1); }
.footer-actions{ display:none; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; padding-top:var(--s8); }
.footer-bottom .legal{ display:flex; gap:var(--s6); flex-wrap:wrap; }
.footer-bottom .legal a{ font-size:.7rem; color:var(--grey-dim); }
.footer-bottom .legal a:hover{ color:var(--grey); }
.socials{ display:flex; gap:var(--s2); }
.socials a{ width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--grey); transition:.4s var(--ease); }
.socials a:hover{ border-color:var(--accent); color:var(--accent); }
.socials svg{ width:16px; height:16px; }
.copy{ font-size:.7rem; color:var(--grey-dim); }
.discretion{ font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-dim); border:1px solid var(--line-soft); border-radius:2px; padding:var(--s3) var(--s4); display:inline-flex; gap:var(--s2); align-items:center; margin-top:var(--s6); }
.discretion svg{ width:12px; height:12px; color:var(--accent); }

/* ---- Page hero --------------------------------------------------------- */
/* Only the homepage (.hero-split) is a hero. Inner pages open near the top of
   the screen: just enough to clear the 80px fixed header, not a tall empty
   band that makes every page pretend to be a landing page. */
.page-hero{ padding-top:clamp(104px,8vw,128px); padding-bottom:clamp(32px,4vw,56px); }
/* The hero already pads its own bottom, so the section under it must not pad
   again or the two stack into a dead band. */
.page-hero + .section-tight,
.page-hero + .section{ padding-top:var(--s6); }
.page-hero h1{ max-width:22ch; }
.page-hero .lede{ max-width:60ch; margin-top:var(--s6); color:var(--grey); }
.breadcrumb{ font-family:var(--mono); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-dim); margin-bottom:var(--s8); display:flex; gap:var(--s2); align-items:center; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb span{ opacity:.4; }

/* ---- Prose -------------------------------------------------------------- */
.prose h2{ margin:var(--s10) 0 var(--s4); font-size:clamp(1.3rem,2vw,1.75rem); font-weight:300; }
.prose h3{ font-size:1.15rem; margin:var(--s8) 0 var(--s3); font-weight:300; }
.prose p{ color:var(--grey); }
.prose .lead-para{ color:var(--titanium); font-size:1.14rem; line-height:1.8; font-weight:250; }
.prose ul{ list-style:none; padding:0; margin:var(--s5) 0; }
.prose ul li{ position:relative; padding-left:var(--s6); margin-bottom:var(--s3); color:var(--grey); }
.prose ul li::before{ content:""; position:absolute; left:0; top:.78em; width:5px; height:5px; border:1px solid var(--accent); transform:rotate(45deg); }

/* ---- Education ---------------------------------------------------------- */
.edu-nav{
  position:sticky; top:88px; z-index:50; background:rgba(11,12,14,.82); backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:2px; padding:var(--s1);
  display:flex; gap:2px; flex-wrap:wrap; justify-content:center; margin-bottom:var(--s12);
}
.edu-nav a{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); padding:var(--s3) var(--s5); border-radius:2px; transition:.35s var(--ease); white-space:nowrap;
}
.edu-nav a:hover,.edu-nav a.active{ background:var(--graphite); color:var(--accent); }
.edu-block{ scroll-margin-top:176px; padding-block:clamp(40px,5vw,64px); border-top:1px solid var(--line-soft); }
/* The block padding exists to separate stacked topics. The first block on a
   page has the hero above it instead, so it must not pad again. */
.edu-block:first-of-type{ border-top:0; padding-top:0; }

.compare-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; }
.compare-table th,.compare-table td{ text-align:left; padding:var(--s4) var(--s5); border-bottom:1px solid var(--line-soft); vertical-align:top; }
.compare-table thead th{
  font-family:var(--display); font-weight:300; letter-spacing:.02em;
  font-size:1rem; color:var(--ice); border-bottom:1px solid var(--line-strong); background:var(--charcoal);
}
.compare-table tbody th{ font-family:var(--mono); font-weight:400; color:var(--accent); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
.compare-table td{ color:var(--grey); font-weight:300; }
.compare-table tr:hover td,.compare-table tr:hover th{ background:var(--charcoal); }
.table-scroll{ overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--radius); -webkit-overflow-scrolling:touch; }

/* Intro video, sat under the bio copy. Poster only until play, so it costs
   nothing on load. */
.intro-video{ margin:var(--s7) 0 0; }
.intro-video video{
  width:100%; height:auto; display:block; background:var(--obsidian);
  border-radius:var(--radius-img); box-shadow:var(--shadow);
}
.intro-video figcaption{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey-dim); margin-top:var(--s3);
}

/* Cost figure. The number is set at display size because the whole point is
   that it is not hidden behind a phone call. */
.price-fig{ border-top:1px solid var(--accent); padding:var(--s7) 0 var(--s8); margin-bottom:var(--s7); }
.price-k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--grey-dim); }
.price-n{
  font-family:var(--display); font-weight:200; color:var(--ice);
  font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.05; letter-spacing:-.01em;
  margin:var(--s4) 0 var(--s5);
}
.price-n i{ font-style:normal; color:var(--grey-dim); font-size:.42em; }
.price-n em{ font-style:normal; color:var(--titanium); font-size:.28em; letter-spacing:.02em; display:inline-block; margin-left:var(--s2); }
.price-note{ color:var(--grey); font-size:.94rem; font-weight:300; line-height:1.8; max-width:62ch; margin:0; }

.edu-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--line-soft); overflow:hidden; }
.edu-card{ background:var(--charcoal); padding:var(--s8); }
.edu-card .n{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; color:var(--accent); }
.edu-card h4{ font-size:1.05rem; margin:var(--s4) 0 var(--s2); font-weight:300; }
.edu-card p{ color:var(--grey); font-size:.88rem; margin:0; }

.callout{ background:linear-gradient(180deg, rgba(26,29,34,.6), rgba(20,22,26,.5)); border:1px solid var(--line-soft); border-left:2px solid var(--accent); border-radius:var(--radius); padding:var(--s6) var(--s8); margin:var(--s8) 0; }
.callout p{ margin:0; color:var(--titanium); font-size:.94rem; font-weight:300; }
/* A claim that carries itself on type alone. No box, no rule, no left strip:
   the size is the emphasis. */
.claim{ font-family:var(--display); font-weight:200; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.9rem,4.4vw,3.1rem); color:var(--ice); margin:var(--s20) 0 var(--s6); max-width:18ch; }
.claim-sub{ font-size:1rem; line-height:1.75; color:var(--grey); max-width:56ch; margin:0; font-weight:300; }

/* Legal notice. Deliberately not styled as a "callout" card: rules top and
   bottom, no fill, no accent strip, so it reads as a legal notice rather than
   as another piece of marketing furniture. */
.legal-band{ display:block; margin:var(--s12) 0 0; padding:var(--s6) 0;
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-soft); }
.legal-band p{ margin:0; font-size:.82rem; line-height:1.75; color:var(--grey-dim); max-width:72ch; }
.legal-band strong{ color:var(--grey); font-weight:400; }
.legal-band a{ color:var(--steel); text-decoration:underline; text-underline-offset:3px; }
.legal-band a:hover{ color:var(--accent); }

.table-scroll{ overflow-x:auto; margin:var(--s6) 0 var(--s8); }

.src-note{ font-size:.76rem; line-height:1.7; color:var(--grey-dim); border-top:1px solid var(--line-soft); padding-top:var(--s5); margin-top:var(--s10); }
.src-note a{ color:var(--steel); text-decoration:underline; text-underline-offset:3px; }
.src-note a:hover{ color:var(--accent); }

.print-hint{ display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-dim); }
.print-hint svg{ width:13px; height:13px; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq{ border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding:var(--s6) 0;
  display:flex; justify-content:space-between; gap:var(--s8); align-items:center;
  font-family:var(--display); font-weight:300; letter-spacing:-.005em;
  font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ice); transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq .ico{ flex:none; width:22px; height:22px; position:relative; }
.faq .ico::before,.faq .ico::after{ content:""; position:absolute; background:var(--accent); transition:transform .4s var(--ease); }
.faq .ico::before{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.faq .ico::after{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.faq details[open] .ico::after{ transform:translateX(-50%) scaleY(0); }
.faq .ans{ padding:0 0 var(--s6); color:var(--grey); max-width:72ch; }
.faq .ans a{ color:var(--accent); }

/* ---- Reveal ------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } .marquee,.hero-scroll .line,.quiz-timer i{ animation:none; } }

/* ---- Utilities ----------------------------------------------------------- */
.mt-1{ margin-top:var(--s4) } .mt-2{ margin-top:var(--s8) } .mt-3{ margin-top:var(--s12) } .mb-0{ margin-bottom:0 }
.maxw-sm{ max-width:46ch } .maxw-md{ max-width:62ch } .mx-auto{ margin-inline:auto }
.text-accent{ color:var(--accent) } .text-titanium{ color:var(--titanium) }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 980px){
  .split{ grid-template-columns:1fr; gap:var(--s10); }
  /* Once the split stacks there is nothing to pin against, and leaving it
     sticky parks the portrait under the header while the copy scrolls over it. */
  .split-media.sticky-media{ position:static; }
  .split.reverse .split-media{ order:0; }
  .mech{ grid-template-columns:1fr; }
  .plan{ grid-template-columns:1fr; }
  .case{ grid-template-columns:1fr; }
  .award{ grid-template-columns:auto 1fr; }
  .award .src{ grid-column:2; text-align:left; }
  .opt-grid{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .eyebrow{ display:block; font-size:.58rem; letter-spacing:.26em; line-height:1.7; }
  .eyebrow::before,.eyebrow::after{ display:none; }
  /* Two columns, not one: a single stack turns fifteen links into a wall. */
  .footer-top{ grid-template-columns:1fr 1fr; gap:var(--s8) var(--s6); }
  .footer-brand{ grid-column:1 / -1; }
  .footer-brand p{ display:none; }

  .footer-actions{
    display:grid; grid-column:1 / -1; gap:var(--s3);
    padding-bottom:var(--s6); border-bottom:1px solid var(--line-soft); margin-bottom:var(--s2);
  }
  .footer-actions .btn{ width:100%; --pad-y:18px; }
  .footer-actions .btn svg{ width:13px; height:13px; }

  .footer-col h4{ margin-bottom:var(--s3); }
  .footer-col a{ padding:var(--s2) 0; font-size:.86rem; }
  /* The Book column duplicates the two buttons above it on mobile. */
  .footer-col:last-child a[href^="/book"],
  .footer-col:last-child a[href^="tel:"]{ display:none; }

  .footer-bottom{ flex-direction:column-reverse; align-items:flex-start; }
  .hero-cta .btn{ flex:1 1 100%; }
  .nav-cta .btn{ display:none; }
  .case-media{ grid-template-columns:1fr; }
  .spec-row{ grid-template-columns:1fr; gap:var(--s1); }
  .hero-scroll{ display:none; }
}

/* ---- Print ---------------------------------------------------------------- */
@media print{
  body{ background:#fff; color:#111; }
  body::after,.site-header,.site-footer,.edu-nav,.hero-scroll,.mobile-menu,.btn,.breadcrumb,.scroll-rail{ display:none !important; }
  .edu-block{ page-break-inside:avoid; border:0; }
  .compare-table th,.compare-table td{ color:#111 !important; border-color:#ccc !important; background:#fff !important; }
  .compare-table thead th{ background:#f2f2f2 !important; }
  .stage,.edu-card,.callout{ background:#fff !important; border-color:#ccc !important; }
  h1,h2,h3,h4,.stage h4,.edu-card h4,.callout p{ color:#111 !important; }
  .prose p,.prose ul li,.stage p,.edu-card p{ color:#222 !important; }
  a{ color:#111; }
}

/* ---- Press logo marquee -------------------------------------------------- */
.marquee.logos{ align-items:center; gap:clamp(40px,5vw,80px); }
.marquee.logos img{
  height:clamp(22px,2.4vw,30px); width:auto; flex:none;
  opacity:.5; filter:grayscale(1); transition:opacity .45s var(--ease);
}
.marquee.logos img:hover{ opacity:.95; }

/* Award grid: numerals lead, bloom behind, room for a real photo later */
.honors{ margin-top:var(--s2); }


/* ==========================================================================
   Chairside tooth replacement chart.
   Different job from the rest of the site: this stays on a monitor while a
   treatment coordinator talks through it, so it is sized for reading across
   the room and for scanning down a column or across a row. A real <table>
   because the rows genuinely have to line up.
   ========================================================================== */
.tr-chart-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* fixed layout so all four columns are identical width. Without it the
   photos render at different heights and the rows stop lining up. */
.tr-chart{ width:100%; border-collapse:separate; border-spacing:0; min-width:920px; table-layout:fixed; }
.tr-chart col.lbl{ width:120px; }

.tr-chart th,.tr-chart td{ vertical-align:top; text-align:left; padding:var(--s5); }

/* Row labels down the left */
.tr-chart tbody th{
  width:112px; white-space:nowrap;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey-dim); border-right:1px solid var(--line);
}

/* Column heads carry the photo */
.tr-chart thead th{ padding:0 var(--s1) var(--s5); border-bottom:1px solid var(--line); }
.tr-chart thead th.corner{ border-bottom:1px solid var(--line); }
.tr-photo{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  background:var(--charcoal); border-radius:var(--radius-img); margin-bottom:var(--s4);
}
.tr-name{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.45rem); color:var(--ice); padding-inline:var(--s4);
}
.tr-flag{
  display:inline-block; margin:var(--s2) var(--s4) 0;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(56,189,248,.4); padding:4px 8px; border-radius:var(--radius-pill);
}

/* Cells. Bigger and lighter than site body copy, for across-the-room reading. */
.tr-chart td{ border-bottom:1px solid var(--line-soft); font-size:1rem; line-height:1.6; color:var(--titanium); }
.tr-chart tbody tr:last-child td,.tr-chart tbody tr:last-child th{ border-bottom:0; }
.tr-chart .big{ font-family:var(--display); font-weight:300; font-size:1.5rem; color:var(--ice); }
.tr-chart ul{ list-style:none; margin:0; padding:0; }
.tr-chart li{ position:relative; padding-left:var(--s5); margin-bottom:var(--s2); }
.tr-chart li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--accent);
}
.tr-chart li.warn::before{ background:#c86b6b; }
/* Each option is a standalone vertical band. Alternating tints plus a divider
   so a patient can see at a glance where one column stops and the next starts. */
.tr-chart thead th:not(.corner),
.tr-chart td{ border-left:1px solid var(--line); }
.tr-chart thead th:nth-child(odd):not(.corner),
.tr-chart td:nth-child(odd){ background:rgba(255,255,255,.022); }
.tr-chart thead th:nth-child(even):not(.corner),
.tr-chart td:nth-child(even){ background:rgba(255,255,255,.055); }

/* The recommendation gets the accent band, not just a tag */
.tr-chart thead th:nth-child(2),
.tr-chart td:nth-child(2){ background:rgba(56,189,248,.07); border-left:1px solid rgba(56,189,248,.3); }
.tr-chart tbody tr:last-child td:nth-child(2){ border-bottom:1px solid rgba(56,189,248,.3); }

/* Doing nothing reads muted on purpose */
.tr-chart thead th:nth-child(5),
.tr-chart td:nth-child(5){ background:rgba(200,107,107,.05); }

/* Header band: the option name sits in a solid plate so the column has a top */
.tr-chart thead th:not(.corner){ padding:0 0 var(--s5); }
.tr-photo{ margin-bottom:0; border-radius:0; }
.tr-head-plate{
  display:block; padding:var(--s4) var(--s5) var(--s2);
  border-bottom:1px solid var(--line);
}
.tr-name{
  display:block; padding:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2vw,1.75rem); color:var(--ice); letter-spacing:.01em;
}
.tr-sub{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-dim); margin-top:6px; }
/* Flags the recommended option on the tooth-replacement chart. Scoped so the
   gum chart, where column two carries no recommendation, does not inherit it. */
.tr-chart:not(.perio-chart) thead th:nth-child(2) .tr-name{ color:var(--accent); }
.tr-flag{
  display:inline-block; margin-top:var(--s3);
  font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--obsidian); background:var(--accent); padding:5px 11px; border-radius:var(--radius-pill);
}
/* keep every column head the same height so the Cost row still lines up */
.tr-chart thead th:not(.corner){ vertical-align:top; }
.tr-head-plate{ min-height:118px; }


@media (max-width: 700px){
  .tr-chart{ min-width:720px; }
  .tr-chart th,.tr-chart td{ padding:var(--s4) var(--s3); }
}
@media print{
  .tr-chart{ min-width:0; }
  .tr-chart td,.tr-chart tbody th{ color:#111 !important; border-color:#bbb !important; background:#fff !important; }
  .tr-chart .big,.tr-name{ color:#000 !important; }
  .tr-chart .col-best{ background:#f4f8fb !important; }
  .tr-photo{ border:1px solid #ddd; }
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Clinical diagrams come on a white ground. Reversing them out would destroy
   the anatomy, so they get a light plate instead and read as a printed insert. */
.diagram{ margin:0 0 var(--s8); }
.diagram img{
  width:100%; height:auto; display:block;
  background:#fff; border-radius:var(--radius); padding:var(--s5);
}
.diagram figcaption{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey-dim); margin-top:var(--s3); line-height:1.7;
}
/* When the caption is a real sentence rather than a label, it has to be read,
   not just glanced at. Drops the mono/uppercase treatment. */
.diagram-explain figcaption{
  font-family:var(--sans); font-size:.84rem; letter-spacing:0; text-transform:none;
  color:var(--grey); line-height:1.75; max-width:70ch; margin-top:var(--s4);
}
.diagram-explain figcaption strong{ color:var(--titanium); font-weight:400; }
@media print{ .diagram img{ padding:0; } }

/* Hero smile inset. A cosmetic dentistry site whose hero shows no teeth is a
   positioning failure, so a real finished case overlaps the portrait. */
.hero-smile{
  position:absolute; z-index:1; margin:0;
  right:clamp(24px,6vw,110px); bottom:clamp(96px,14vh,160px);
  width:clamp(200px,24vw,330px);
  border:1px solid rgba(209,213,219,.28);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.hero-smile img{ width:100%; height:auto; display:block; }
.hero-smile figcaption{
  position:absolute; left:0; bottom:0; right:0;
  font-family:var(--mono); font-size:.5rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ice); background:rgba(11,12,14,.7); padding:6px 10px; backdrop-filter:blur(6px);
}
@media (max-width:1100px){
  .hero-smile{ right:auto; left:var(--gutter); bottom:auto; top:clamp(96px,13vh,132px); width:clamp(160px,34vw,220px); }
}
@media (max-width:620px){ .hero-smile{ display:none; } }

/* Byline. Unused since the guides moved out of the journal, kept because
   article-style pages may want a credit line again. */
.byline{
  font-family:var(--sans); font-size:.82rem; font-weight:300;
  color:var(--grey-dim); margin:var(--s4) 0 0; letter-spacing:.01em;
}

/* Clinical renders that already sit on a dark ground need no white plate. */
.diagram img[src*="illus-"]{ background:transparent; padding:0; border:1px solid var(--line); }

/* ==========================================================================
   "What you actually need" selector.
   Two columns: the picker, and a result panel that answers immediately.
   Modelled on a configurator, not a quiz. No progress bar, no steps, no
   submit. Tap a chip and the answer is already there.
   ========================================================================== */
.need{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.need-pick{ background:var(--obsidian); padding:clamp(24px,3vw,40px); position:relative; }
.need-out{ background:var(--charcoal); padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; justify-content:center; }

.need-q{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-dim); margin-bottom:var(--s6); }
.need-chips{ display:grid; gap:var(--s2); }
.need-chip{
  text-align:left; background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s4) var(--s5); color:var(--titanium);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.need-chip b{ display:block; font-weight:400; font-size:.98rem; line-height:1.4; }
.need-chip small{ display:block; color:var(--grey-dim); font-size:.76rem; margin-top:2px; }
.need-chip:hover{ border-color:var(--line-strong); background:var(--graphite); }
.need-chip.on{
  border-color:var(--accent); background:rgba(56,189,248,.09); color:var(--ice);
  box-shadow:inset 2px 0 0 var(--accent);
}
.need-chip.on small{ color:var(--titanium); }
.need-reset{
  margin-top:var(--s5); background:none; border:0; padding:var(--s2) 0;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-dim);
  transition:color .3s;
}
.need-reset:hover{ color:var(--ice); }

.need-empty p{ color:var(--grey-dim); font-size:.95rem; max-width:34ch; margin:0; }

.need-label{ font-family:var(--mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 var(--s3); }
.need-name{ font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,2.4vw,2.1rem); color:var(--ice); margin:0; letter-spacing:-.01em; }
.need-tag{
  display:inline-block; margin-top:var(--s3);
  font-family:var(--mono); font-size:.54rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--titanium); border:1px solid var(--line-strong); padding:4px 10px; border-radius:var(--radius-pill);
}
.need-why{ color:var(--grey); font-size:.95rem; margin:var(--s5) 0 0; max-width:46ch; }

.need-case{ margin:var(--s6) 0 0; }
.need-case-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.need-case-imgs span{ position:relative; display:block; overflow:hidden; aspect-ratio:16/10; background:var(--obsidian); }
.need-case-imgs img{ width:100%; height:100%; object-fit:cover; display:block; }
.need-case-imgs i{
  position:absolute; bottom:6px; left:6px; font-style:normal;
  font-family:var(--mono); font-size:.48rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ice); background:rgba(11,12,14,.66); padding:3px 7px;
}
.need-case figcaption{ font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-dim); margin-top:var(--s3); }

.need-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.need-note{ font-size:.76rem; color:var(--grey-dim); margin:var(--s5) 0 0; line-height:1.6; max-width:46ch; }

@media (max-width:900px){
  .need{ grid-template-columns:1fr; }
  .need-out{ min-height:0; }
}

/* ==========================================================================
   MOBILE
   The micro-typography that reads as precision on a 27" monitor becomes
   illegible on a phone. Below 900px every mono label, caption and control
   scales back up, and touch targets go to 44px. Nothing here is decorative;
   if it cannot be read at arm's length on a phone it does not belong.
   ========================================================================== */
@media (max-width: 900px){

  /* --- Body copy --- */
  body{ font-size:1rem; line-height:1.75; }
  .lede{ font-size:1.08rem; line-height:1.65; }
  .muted, .prose p, .prose ul li{ font-size:.98rem; }

  /* --- Headings: tighter leading, they wrap more --- */
  .display{ font-size:clamp(2.1rem,8.4vw,3rem); line-height:1.08; }
  .h-xl{ font-size:clamp(1.7rem,6.6vw,2.3rem); line-height:1.14; }
  .h-lg{ font-size:clamp(1.5rem,5.6vw,2rem); }

  /* --- Mono labels. These were 8 to 10px. Now legible. --- */
  .press-label,
  .need-q, .need-label, .need-reset,
  .case-num, .plan-step .pn, .mech-item .idx,
  .info-row .k, .intake-summary .k, .field label,
  .quiz-timer, .quiz-q, .quote cite,
  .stat-badge span, .hero-meta span, .metric span,
  .edu-card .n, .stage .lvl, .honor .hs,
  .spec-row dt, .compare-table tbody th,
  .tr-chart tbody th, .tr-sub,
  .discretion, .print-hint, .breadcrumb, .byline,
  .footer-col h4, .footer-brand span, .brand span{
    font-size:.72rem; letter-spacing:.16em;
  }
  .need-tag, .tr-flag, .case-shot span, .need-case-imgs i,
  .frame .tag, .diagram figcaption, .need-case figcaption{
    font-size:.73rem; letter-spacing:.13em;
  }
  .press-label{ font-size:.72rem; }

  /* --- Readable secondary copy --- */
  .spec-row dd, .footer-col a, .quote p, .need-why,
  .edu-card p, .stage p, .mech-item p, .plan-step p,
  .honor .hd, .case-note, .need-note, .compare-table td{ font-size:.96rem; }
  .copy, .footer-bottom .legal a{ font-size:.82rem; }
  .dim{ font-size:.88rem; }

  /* --- Controls: 44px minimum, always --- */
  .btn{ font-size:.74rem; letter-spacing:.16em; min-height:52px; padding:16px 26px; }
  .btn-sm{ font-size:.75rem; min-height:48px; padding:14px 22px; }
  .link-underline{ font-size:.74rem; letter-spacing:.16em; min-height:44px; align-items:center; }
  .need-reset{ min-height:44px; }
  .footer-col a{ padding:12px 0; min-height:44px; display:flex; align-items:center; }
  .footer-bottom .legal a{ padding:10px 0; min-height:44px; display:inline-flex; align-items:center; }
  .socials a{ width:48px; height:48px; }
  .quote-nav button{ width:48px; height:48px; }
  .mobile-menu a{ padding:14px 0; }
  .nav-toggle{ padding:12px; margin-right:-12px; }
  .faq summary{ padding:22px 0; }
  .opt, .need-chip{ min-height:64px; display:flex; flex-direction:column; justify-content:center; }

  /* --- Breathing room. Cramped padding reads as cheap. --- */
  .section{ padding-block:clamp(56px,13vw,88px); }
  .section-tight{ padding-block:clamp(40px,9vw,64px); }
  .mech-item, .plan-step{ padding:28px 24px; }
  .quote{ padding:26px 24px; }
  .need-pick, .need-out{ padding:24px 20px; }
  .honor-body{ padding:24px 22px 28px; }

  /* --- Hero --- */
  .hero-inner{ padding-top:104px; padding-bottom:40px; }
  .hero .lede{ margin-bottom:32px; }
  .hero-cta{ gap:12px; }
  /* Phones get their own portrait crop, so the scrim only needs to protect
     the lower third where the headline sits. */
  .hero-media img{ object-position:center top; }
  .hero-media::after{
    background:linear-gradient(0deg, rgba(11,12,14,.97) 34%, rgba(11,12,14,.4) 62%, rgba(11,12,14,0) 88%);
  }

  /* --- Case studies: image pairs stay side by side, they are a comparison --- */
  .case-media{ grid-template-columns:1fr 1fr; gap:6px; }
  .case{ padding-block:36px; gap:28px; }
  .spec-row{ grid-template-columns:1fr; gap:2px; padding:12px 0; }

  /* --- Need selector --- */
  .need-case-imgs{ gap:6px; }
  .need-name{ font-size:1.6rem; }

  /* Two-up so five credentials do not become five full screens of scrolling */
  .metrics{ grid-template-columns:1fr 1fr; }
  .metric b{ font-size:2rem; }

  /* --- Footer --- */
  .footer-top{ gap:36px; padding-bottom:36px; }
}

@media (max-width: 620px){
  .display{ font-size:clamp(2rem,9vw,2.6rem); }
  .quote{ flex-basis:88vw; }
  .btn{ width:100%; }
  .hero-cta .btn, .need-actions .btn, .intake-actions .btn{ width:100%; }
  .need-actions{ flex-direction:column; }
  .metric{ padding:28px 20px; }
  .stat-badge{ padding:16px 18px; }
  .stat-badge b{ font-size:1.7rem; }
}

/* Tooth replacement on phones. A four-column comparison cannot be read at
   390px, and side-scrolling a table is not an answer, so it becomes one card
   per option carrying exactly the same information in the same order. */
.tr-cards{ display:none; }
@media (max-width: 900px){
  .tr-cards{ display:grid; gap:12px; }
  .tr-chart-wrap{ display:none; }

  .tr-card{
    background:var(--charcoal); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
  }
  .tr-card-best{ border-color:rgba(56,189,248,.38); background:rgba(56,189,248,.05); }
  .tr-card-none{ background:rgba(200,107,107,.05); }
  .tr-card-photo{ width:100%; height:190px; object-fit:cover; display:block; }
  .tr-card-body{ padding:22px 20px 26px; }
  .tr-card-name{ font-family:var(--display); font-weight:400; font-size:1.6rem; color:var(--ice); margin:0; letter-spacing:.01em; }
  .tr-card-best .tr-card-name{ color:var(--accent); }
  .tr-card-sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-dim); margin:6px 0 0; }
  .tr-card .tr-flag{ margin-top:14px; }

  .tr-card-meta{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 22px; padding:16px 0; border-block:1px solid var(--line); }
  .tr-card-meta div{ min-width:0; }
  .tr-card-meta dt{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-dim); }
  .tr-card-meta dd{ margin:6px 0 0; color:var(--ice); font-size:1rem; }
  .tr-card-meta dd.big{ font-family:var(--display); font-weight:300; font-size:1.4rem; }

  .tr-card-h{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-dim); margin:0 0 10px; }
  .tr-card-list{ list-style:none; margin:0 0 20px; padding:0; }
  .tr-card-list:last-child{ margin-bottom:0; }
  .tr-card-list li{ position:relative; padding-left:18px; margin-bottom:8px; color:var(--titanium); font-size:.96rem; line-height:1.55; }
  .tr-card-list li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--accent); }
  .tr-card-list li.warn::before{ background:#c86b6b; }
}

/* ==========================================================================
   Split hero. Asymmetric 60/40 editorial split: a typography column on the
   left against a slate card holding the macro on the right. Deliberately not
   centred and not symmetrical. There is no radial spotlight behind anything;
   the card separates from the page by its own fill, not by a hairline border.
   ========================================================================== */
.hero-split{ min-height:100svh; display:flex; align-items:center; background:var(--obsidian); overflow:hidden; }
.hero-split .hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:60fr 40fr;
  gap:clamp(40px, 5vw, 88px); align-items:center;
  padding-top:120px; padding-bottom:64px;
}
.hero-split .hero-copy{ min-width:0; }

/* Set hard: heavy, uppercase, tight leading and negative tracking. The rest of
   the site uses Jost at 200; this is the one place it goes to 600, which is
   what makes the hero read as a masthead rather than another section. */
.hero-head{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(2.3rem, 4.6vw, 4.35rem);
  line-height:.95; letter-spacing:-.028em;
  color:var(--ice); margin:0 0 var(--s6); max-width:15ch;
}
.hero-split .lede{ max-width:46ch; margin-bottom:var(--s10); color:var(--steel); }

/* Sharp corners, and no border. A third radius class on purpose: containers
   sit at 2px, buttons are pills, this is square. */
.hero-card{
  position:relative; margin:0;
  background:var(--slate);
  border-radius:0;
  box-shadow:0 48px 110px -40px rgba(0,0,0,.95);
  overflow:hidden;
}
.hero-card img{ width:100%; height:auto; display:block; }
.hero-card figcaption{
  display:flex; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) var(--s6) var(--s6);
  font-family:var(--mono); font-size:.55rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--grey-dim);
}
.hero-card figcaption span:last-child{ color:var(--accent); }

@media (max-width: 1000px){
  .hero-split .hero-inner{ grid-template-columns:1fr; gap:clamp(32px,5vw,48px); }
  .hero-split{ align-items:flex-start; min-height:0; }
  .hero-card{ max-width:26rem; }
  .hero-head{ max-width:none; }
  .hero-split .lede{ max-width:none; margin-bottom:var(--s8); }
  .hero-split .hero-scroll{ display:none; }
}

@media (max-width: 640px){
  .hero-split .hero-inner{ padding-top:104px; padding-bottom:48px; }
  .hero-card{ max-width:none; }
}


/* ==========================================================================
   Gum disease chart. Same object as the tooth-replacement chart above it:
   wide table on desktop, one card per band under 900px. Columns run left to
   right in order of severity, so the progression is the layout.
   ========================================================================== */
.perio-chart{ min-width:1040px; }
.perio-chart col.lbl{ width:130px; }
.perio-chart thead th{ padding:0 var(--s1) var(--s5); }

/* Column head: the measurement is the headline, so it is set like the tooth
   names opposite rather than as a label. */
.pd-num{
  display:block; font-family:var(--display); font-weight:200;
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1; letter-spacing:-.01em;
  padding-inline:var(--s4); margin-bottom:var(--s2); color:var(--ice);
}
.pd-num.ok{ color:#4ade80; }
.pd-num.warn{ color:#facc15; }
.pd-num.bad{ color:#f87171; }
.pd-when{
  display:block; font-family:var(--sans); font-size:.78rem; color:var(--grey-dim);
  padding-inline:var(--s4); margin-bottom:var(--s4);
}
.perio-chart .tr-name{ font-size:clamp(1rem,1.4vw,1.15rem); }
.perio-chart td strong{ display:block; color:var(--ice); font-weight:400; margin-bottom:4px; }

/* ---- Mobile: one card per depth band ---- */
.perio-cards{ display:none; }
@media (max-width: 900px){
  .perio-cards{ display:grid; gap:12px; }
  .perio-chart-wrap{ display:none; }

  .perio-card{
    background:var(--charcoal); border:1px solid var(--line);
    border-radius:var(--radius); padding:22px 20px 24px;
  }
  .perio-card.ok{ border-color:rgba(74,222,128,.3); }
  .perio-card.warn{ border-color:rgba(250,204,21,.28); }
  .perio-card.bad{ border-color:rgba(248,113,113,.3); }
  .perio-card .pd-num{ padding-inline:0; margin-bottom:2px; font-size:2rem; }
  .perio-card .pd-when{ padding-inline:0; margin-bottom:14px; }
  .perio-card h3{
    font-family:var(--display); font-weight:400; font-size:1.35rem;
    color:var(--ice); margin:0 0 8px; letter-spacing:.01em;
  }
  .perio-card p{ margin:0; color:var(--titanium); font-size:.96rem; line-height:1.6; }
  .perio-card .fix{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  .perio-card .fix span{
    display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--accent); margin-bottom:8px;
  }
}

/* ==========================================================================
   Patient education library. An index, not a page of content: rules and type,
   no containers. A boxed card grid here would add nine borders and nine
   shadows to a page whose whole job is "pick one and go".
   ========================================================================== */
.lib-shelf{ margin-bottom:var(--s12); }
.lib-group{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:400; color:var(--grey-dim); margin:0 0 var(--s2);
}
.lib-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft); }
.lib-list li{ border-bottom:1px solid var(--line-soft); }

.lib-list a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
  padding:var(--s5) 0; text-decoration:none; color:var(--ice);
  font-family:var(--display); font-weight:200; letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.2;
  transition:color .4s var(--ease), padding-left .4s var(--ease);
}
.lib-list a:hover{ color:var(--accent); padding-left:var(--s3); }
.lib-list a svg{ width:18px; height:18px; flex:none; color:var(--accent); opacity:.4; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.lib-list a:hover svg{ opacity:1; transform:translateX(4px); }

.lib-list .is-soon{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
  padding:var(--s5) 0; color:var(--grey-dim);
  font-family:var(--display); font-weight:200; letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.2;
}
.lib-list .is-soon em{
  font-style:normal; font-family:var(--mono); font-size:.54rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--grey-dim); flex:none;
}

@media (max-width: 620px){
  .lib-list a,.lib-list .is-soon{ padding:var(--s5) 0; }
}

/* ---- Lead testimonial ---------------------------------------------------
   Display-size pull quote so social proof carries real weight instead of
   sitting in the scroller as one card among six. No box: the type is the
   emphasis, consistent with the rest of the editorial treatment. */
.quote-lead{ margin:0 0 clamp(2.5rem,5vw,4rem); max-width:24ch; }
.quote-lead .stars{ display:flex; gap:4px; color:var(--accent); margin-bottom:var(--s5); }
.quote-lead .stars svg{ width:15px; height:15px; }
.quote-lead blockquote{
  margin:0; font-family:var(--display); font-weight:200; letter-spacing:-.015em;
  font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.25; color:var(--ice);
  max-width:20ch;
}
.quote-lead figcaption{
  margin-top:var(--s6); font-family:var(--mono); font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--titanium);
}
.quote-lead figcaption span{
  display:block; margin-top:var(--s2); letter-spacing:.2em; color:var(--grey-dim); font-size:.54rem;
}
@media (max-width: 760px){
  .quote-lead{ max-width:none; }
  .quote-lead blockquote{ max-width:none; }
}