/* ===========================================================
   Kevin Shively, DMD — teaser rebuild  ·  v3 "Cinematic Calm"
   Bend Club editorial calm  ×  Klaas blue / futuristic
   Elevation pass: living atmosphere, full-bleed hero, film intro,
   pinned smile scene, grain, grander editorial type.
   =========================================================== */

:root{
  --paper:     #F4F7FB;
  --paper-2:   #E9F0F8;
  --sand:      #F2ECE2;   /* warm west-texas tone (Meet band) */
  --sand-2:    #E7DDCC;
  --surface:   #FFFFFF;
  --navy:      #06121F;   /* deeper cinematic navy */
  --navy-2:    #0B2641;
  --ink:       #0E2236;
  --ink-2:     #56697C;
  --line:      rgba(14,34,54,.10);
  --line-d:    rgba(255,255,255,.14);
  --brand:     #1379C6;
  --brand-deep:#0B4E88;
  --brand-bright:#5BB6F5;
  --brand-ink: #0A2F4F;
  --gold:      #C49A4A;
  --radius:    20px;
  --radius-sm: 13px;
  --shadow:    0 24px 60px -26px rgba(7,24,43,.42);
  --shadow-sm: 0 14px 34px -18px rgba(7,24,43,.34);
  --maxw:      1240px;
  --pad:       clamp(20px, 5vw, 56px);
  --serif:     "Sentient", Georgia, serif;
  --display:   "Zodiak", "Sentient", Georgia, serif;   /* cinematic hero voice */
  --sans:      "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:      ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0; background:var(--navy); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:where(a, button, .btn, input, textarea):focus-visible{
  outline:2px solid var(--brand-bright); outline-offset:3px; border-radius:6px;
}
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(84px, 11vw, 156px); position:relative; }

/* ---------- type ---------- */
.h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.2rem, 4.8vw, 3.9rem); line-height:1.03;
  letter-spacing:-.02em; color:var(--brand-ink); margin:0 0 .55em;
}
.h2 em, .hero-title em{ font-style:italic; color:var(--brand); }
.h2-light{ color:#fff; }
.h2-light em{ color:var(--brand-bright); }

.hud{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand-deep); margin:0 0 1.3rem;
}
.hud-num{ color:var(--brand); }
.hud-sep{ width:30px; height:1px; background:currentColor; opacity:.4; }
.hud-light{ color:rgba(255,255,255,.74); }
.hud-light .hud-num{ color:var(--brand-bright); }

.lead{ font-size:1.18rem; line-height:1.62; color:var(--ink-2); margin:0 0 1.9rem; max-width:46ch; }
.lead.center{ margin-inline:auto; text-align:center; }
.lead-light{ color:rgba(255,255,255,.82); }
.section-head{ max-width:820px; margin:0 auto clamp(48px,5.5vw,76px); text-align:center; }
.section-head .hud{ justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  --bpad:14px 26px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:var(--bpad); border-radius:100px; font-family:var(--sans);
  font-weight:600; font-size:.98rem; letter-spacing:.005em; cursor:pointer;
  border:1.5px solid transparent; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn .ic{ width:18px; height:18px; fill:currentColor; }
.btn-lg{ --bpad:17px 34px; font-size:1.05rem; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 14px 30px -12px rgba(19,121,198,.7); }
.btn-primary::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); }
.btn-primary:hover{ background:var(--brand-deep); transform:translateY(-2px); box-shadow:0 22px 40px -12px rgba(19,121,198,.8); }
.btn-primary:hover::after{ transform:translateX(120%); transition:transform .8s ease; }
.btn-ghost{ background:transparent; color:var(--brand-deep); border-color:rgba(11,78,136,.3); }
.btn-ghost:hover{ border-color:var(--brand); background:rgba(19,121,198,.06); transform:translateY(-2px); }
.btn-glass{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.34); backdrop-filter:blur(6px); }
.btn-glass:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }

/* =========================================================
   FILM GRAIN + PAGE VIGNETTE (cinematic unifier)
   ========================================================= */
.grain{
  position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
.page-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(125% 115% at 50% 42%, transparent 62%, rgba(4,12,22,.16) 100%);
}

/* =========================================================
   INTRO (film-title open)
   ========================================================= */
.intro{
  position:fixed; inset:0; z-index:200; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.intro-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.intro-mark{ width:56px; height:auto; opacity:0; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.intro-line{ display:block; width:0; height:1px; overflow:hidden; }
.intro-line i{ display:block; width:200px; height:1px; margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--brand-bright),transparent); }
.intro-label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.6); opacity:0; }
body.no-intro .intro{ display:none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding-block:18px; transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.scrolled{
  background:rgba(6,16,28,.74); backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 var(--line-d), 0 14px 36px -24px rgba(0,0,0,.7);
  padding-block:11px;
}
.header-inner{ display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:42px; height:auto; transition:filter .35s ease; }
.brand-lock{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-family:var(--serif); font-weight:600; font-size:1.18rem; color:#fff; letter-spacing:.01em; transition:color .35s ease; }
.brand-cred{ color:var(--brand-bright); font-style:italic; font-weight:500; }
.brand-sub{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:3px; white-space:nowrap; transition:color .35s ease; }

.nav{ display:flex; gap:6px; margin-inline:auto; }
.nav a{ font-size:.94rem; font-weight:500; color:rgba(255,255,255,.82); position:relative; padding:6px 14px; transition:color .2s; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:1px; height:1.5px; background:var(--brand-bright); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.nav a:hover{ color:#fff; }
.nav a:hover::after{ transform:scaleX(1); }

.header-cta{ display:flex; align-items:center; gap:20px; }
.phone-link{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.96rem; color:#fff; white-space:nowrap; transition:color .35s ease; }
.phone-dot{ width:8px; height:8px; border-radius:50%; background:#46d08a; box-shadow:0 0 0 4px rgba(70,208,138,.2); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:40px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; }
.menu-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(84vw,360px); z-index:55;
  background:var(--navy); box-shadow:-30px 0 70px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:6px; padding:104px 30px 30px;
  transform:translateX(105%); transition:transform .42s cubic-bezier(.5,0,.2,1);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-size:1.1rem; font-weight:500; color:#fff; padding:13px 0; border-bottom:1px solid var(--line-d); }
.mobile-menu .btn{ margin-top:16px; border-bottom:0; }
.mobile-menu .phone-link{ border-bottom:0; }

/* =========================================================
   HERO  (cinematic rack-focus arrival — one full-bleed frame)
   The screen opens dark & out of focus (anxiety), then racks
   into a warm in-focus smile (relief). Then it keeps breathing.
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(132px,16vw,196px); padding-bottom:clamp(110px,14vw,170px);
  background:var(--navy); color:#fff; overflow:hidden; isolation:isolate;
}
.hero-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; }

/* two copies of the same photo: sharp beneath, blurred/dark on top.
   the blurred copy dissolves away = a camera pulling into focus */
.hero-plate{
  position:absolute; inset:-3%; background-size:cover;
  background-position:39% 50%; will-change:transform, opacity;
}
.hero-plate-sharp{
  background-image:url("assets/img/hero-family.jpg");
  animation:heroKen 32s ease-in-out 2.4s infinite alternate;
}
.hero-plate-blur{
  background-image:url("assets/img/hero-family.jpg");
  filter:blur(46px) saturate(.55) brightness(.5);
  transform:scale(1.14);
}

/* teal-&-orange cinematic grade + a left/bottom darken so type pops,
   keeps her warm and bright on the right */
.hero-grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* gentle left tint — enough for type, not so heavy it crushes the child */
    linear-gradient(94deg, rgba(5,15,26,.72) 0%, rgba(5,15,26,.34) 26%, rgba(6,18,31,.06) 54%, transparent 74%),
    /* bottom scrim carries type legibility so the faces above stay bright */
    linear-gradient(0deg, rgba(4,12,22,.9) 1%, rgba(5,14,24,.4) 26%, rgba(6,18,31,.06) 54%, transparent 78%),
    radial-gradient(130% 120% at 60% 32%, transparent 50%, rgba(5,14,24,.4) 100%);
}
/* warm breathing bloom around her light — the "exhale" rhythm */
.hero-bloom{
  position:absolute; z-index:1; right:18%; top:24%;
  width:62vmax; height:62vmax; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,128,.20), rgba(91,182,245,.05) 42%, transparent 70%);
  mix-blend-mode:screen; filter:blur(10px);
  animation:heroBreathe 9s ease-in-out infinite;
}
/* the opening darkness that lifts as we come into focus */
.hero-veil{ position:absolute; inset:0; z-index:1; background:var(--navy); pointer-events:none; }
/* faint film grain bound to the hero only (over the page-wide grain) */
.hero-grain-l{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
@keyframes heroKen{ from{ transform:scale(1.0) translate(0,0); } to{ transform:scale(1.05) translate(-1.2%,-1.0%); } }
@keyframes heroBreathe{ 0%,100%{ opacity:.62; transform:scale(.95); } 50%{ opacity:1; transform:scale(1.07); } }

.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width:min(680px, 94%); }
.hero-eyebrow{ margin-bottom:1.6rem; }
.hero-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.7rem, 6.2vw, 5.4rem); line-height:1.0; letter-spacing:-.018em;
  color:#fff; margin:0 0 1.5rem;
  /* drop-shadow on the (unclipped) parent — NOT text-shadow on the masked lines */
  filter:drop-shadow(0 3px 26px rgba(0,0,0,.45));
}
.hero-title .ln{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero-title .ln-i{ display:block; will-change:transform, opacity, filter; }
.hero-title em{ font-style:italic; color:var(--brand-bright); }
.hero-lead{ font-size:clamp(1.12rem,1.5vw,1.32rem); line-height:1.58; color:rgba(255,255,255,.84); margin:0 0 2.2rem; max-width:40ch; text-shadow:0 1px 20px rgba(0,0,0,.4); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-proof-line{
  display:flex; align-items:center; flex-wrap:wrap; gap:.55em;
  margin-top:2.4rem; font-size:.9rem; color:rgba(255,255,255,.78); letter-spacing:.005em;
}
.hero-proof-line strong{ color:#fff; font-weight:600; }
.stars{ color:var(--gold); letter-spacing:2px; font-size:.92rem; }

.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.scroll-cue-line{ width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); position:relative; overflow:hidden; }
.scroll-cue-line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--brand-bright); animation:cueDrop 2.1s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes cueDrop{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(300%); } }

/* =========================================================
   STATEMENT (scroll word-fill)
   ========================================================= */
.statement{ background:var(--paper); padding-block:clamp(100px,14vw,200px); position:relative; }
.statement::before{ content:""; position:absolute; inset:0 0 auto 0; height:120px;
  background:linear-gradient(var(--navy), transparent); opacity:.0; }
.statement-hud{ margin-bottom:2.6rem; }
.statement-text{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.8rem, 4.1vw, 3.45rem); line-height:1.25; letter-spacing:-.014em;
  max-width:22ch; margin:0; color:var(--ink);
}
.statement-text .w{ color:rgba(14,34,54,.15); transition:color .15s linear; }
.statement-text .w.lit{ color:var(--ink); }
.statement-text .w-accent.lit{ color:var(--brand); }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust{ border-block:1px solid var(--line); background:var(--surface); }
.trust-inner{ display:flex; align-items:center; gap:clamp(24px,5vw,60px); padding-block:32px; flex-wrap:wrap; justify-content:center; }
.trust-label{ margin:0; }
.trust-logos{ display:flex; align-items:center; gap:clamp(22px,4vw,50px); flex-wrap:wrap; justify-content:center; }
.trust-logos img{ height:38px; width:auto; opacity:.62; filter:grayscale(1); transition:opacity .25s, filter .25s; }
.trust-logos img:hover{ opacity:1; filter:grayscale(0); }

/* =========================================================
   WHY
   ========================================================= */
.why{ background:var(--paper); }
.why-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,5vw,88px); align-items:center; }
.why-head .lead{ max-width:42ch; }
.why-cards{ display:grid; gap:18px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 32px 28px; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(19,121,198,.3); }
.card-ic{ display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:14px; background:rgba(19,121,198,.1); margin-bottom:16px; }
.card-ic svg{ width:26px; height:26px; fill:none; stroke:var(--brand); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card h3{ font-family:var(--serif); font-weight:600; font-size:1.32rem; color:var(--brand-ink); margin:0 0 .5em; line-height:1.2; }
.card p{ margin:0; color:var(--ink-2); font-size:1rem; }

/* =========================================================
   MEET DR. SHIVELY  (warm human interlude)
   ========================================================= */
.meet{ background:var(--sand); position:relative; overflow:hidden; isolation:isolate; }
.meet-tint{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 70% at 10% 6%, rgba(196,154,74,.16), transparent 60%),
    radial-gradient(72% 82% at 94% 98%, rgba(19,121,198,.10), transparent 62%);
}
.meet .container{ position:relative; z-index:1; }
.meet-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(44px,6vw,96px); align-items:center;
}
.meet-media{ position:relative; isolation:isolate; }
.meet-frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/4.4; box-shadow:var(--shadow); border:1px solid rgba(196,154,74,.28);
}
.meet-frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; }
.meet-accent{
  position:absolute; right:-16px; bottom:-24px; z-index:2; margin:0;
  width:56%; aspect-ratio:16/10; border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:var(--shadow); border:6px solid var(--sand);
}
.meet-accent img{ width:100%; height:100%; object-fit:cover; }
.meet-badge{
  position:absolute; top:22px; left:-16px; z-index:3;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:12px 18px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; line-height:1.2;
}
.meet-badge-k{ font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-deep); }
.meet-badge-v{ font-family:var(--serif); font-size:1.05rem; color:var(--brand-ink); margin-top:3px; }
.meet-note{ color:var(--ink-2); font-size:1.04rem; line-height:1.62; margin:0 0 2rem; max-width:48ch; }
.meet-sign{ display:flex; flex-direction:column; gap:3px; margin:0 0 1.9rem;
  padding-left:18px; border-left:2px solid var(--brand); }
.meet-sign-name{ font-family:var(--serif); font-style:italic; font-size:1.36rem; color:var(--brand-ink); line-height:1.1; }
.meet-sign-cred{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }

/* =========================================================
   SERVICES AS BENEFITS
   ========================================================= */
.help{ background:var(--paper-2); }
.help-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.help-card{
  background:var(--surface); border-radius:var(--radius); padding:34px 32px;
  border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.help-card::before{ content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--brand); transition:height .38s ease; }
.help-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.help-card:hover::before{ height:100%; }
.help-tag{ display:block; font-style:italic; font-family:var(--serif); font-size:1.04rem; color:var(--brand); margin-bottom:13px; }
.help-card h3{ font-family:var(--serif); font-weight:600; font-size:1.34rem; color:var(--brand-ink); margin:0 0 .45em; }
.help-card p{ margin:0; color:var(--ink-2); font-size:1rem; }

/* =========================================================
   COSMETIC ROW — pinned signature scene
   ========================================================= */
.smile{ background:var(--paper); position:relative; }
.smile-pin{
  position:relative; display:flex; align-items:center; overflow:hidden;
  padding-block:clamp(84px,11vw,156px);
}
.smile-bloom{
  position:absolute; z-index:0; left:4%; top:14%;
  width:62vw; max-width:780px; height:62vw; max-height:780px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(91,182,245,.24), transparent 62%);
  filter:blur(8px); pointer-events:none;
}
.smile-grid{ position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,88px); align-items:center; }
.smile-media{ position:relative; isolation:isolate; }
.smile-frame{ width:86%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/4.4; }
.smile-frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.smile-media-2{
  position:absolute; right:0; bottom:-30px; width:46%; border-radius:var(--radius-sm);
  box-shadow:var(--shadow); border:6px solid var(--surface); aspect-ratio:1/1; object-fit:cover; z-index:2;
}
.smile-list{ list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:13px; }
.smile-list li{ position:relative; padding-left:34px; color:var(--ink); font-size:1.05rem; }
.smile-list li::before{
  content:""; position:absolute; left:0; top:2px; width:21px; height:21px; border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* =========================================================
   THE OFFICE (dark, Klaas-style photo cards)
   ========================================================= */
.comfort{ background:var(--navy); color:#fff; overflow:hidden; isolation:isolate; }
.comfort-bg{ position:absolute; inset:0; z-index:0; }
.comfort-head{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(24px,4vw,60px); align-items:end; margin-bottom:clamp(40px,5vw,64px); position:relative; z-index:1; }
.comfort-head .h2{ margin:0; }
.comfort-sub{ color:rgba(255,255,255,.72); font-size:1.05rem; line-height:1.6; margin:0; }
.comfort-grid{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; position:relative; z-index:1; }
.ofc-card{ position:relative; margin:0; border-radius:var(--radius); overflow:hidden; min-height:300px;
  border:1px solid var(--line-d); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.ofc-tall{ grid-row:span 1; min-height:380px; }
.ofc-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.ofc-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(4,14,26,.86) 6%, rgba(4,14,26,.15) 52%, rgba(4,14,26,.05)); }
.ofc-card:hover img{ transform:scale(1.06); }
.ofc-card figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 26px 24px; display:flex; flex-direction:column; gap:6px; }
.ofc-tag{ font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-bright); }
.ofc-name{ font-family:var(--serif); font-size:1.34rem; line-height:1.16; color:#fff; }

/* =========================================================
   GOOGLE REVIEWS (clean, real-Google-module styling)
   ========================================================= */
.reviews{ background:var(--paper-2); }
.reviews-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(36px,5vw,80px); align-items:center; }
.reviews-summary .h2{ margin:.2rem 0 .55em; }
.reviews-summary .lead{ max-width:42ch; }
.g-brand{ display:inline-flex; align-items:center; gap:9px; font-weight:600; color:var(--ink);
  font-size:.96rem; letter-spacing:.005em; margin-bottom:.7rem; }
.g-logo{ width:21px; height:21px; }
.g-stars{ display:block; color:var(--gold); letter-spacing:3px; font-size:1.18rem; margin-bottom:.2rem; }

.g-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,3vw,38px); box-shadow:var(--shadow-sm); position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.g-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.g-card-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.g-avatar{
  width:50px; height:50px; border-radius:50%; background:#1a73e8; color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-size:1.4rem; font-weight:600;
  flex:0 0 auto; box-shadow:0 6px 16px -6px rgba(26,115,232,.55);
}
.g-id{ display:flex; flex-direction:column; line-height:1.25; }
.g-name{ font-weight:600; color:var(--ink); font-size:1.06rem; }
.g-when{ font-size:.82rem; color:var(--ink-2); }
.g-mark{ width:26px; height:26px; margin-left:auto; }
.g-card-stars{ color:var(--gold); letter-spacing:2px; font-size:1.06rem; display:block; margin-bottom:13px; }
.g-quote{ font-family:var(--serif); font-weight:400; font-size:clamp(1.16rem,1.55vw,1.42rem);
  line-height:1.5; color:var(--ink); margin:0; letter-spacing:-.005em; }

/* =========================================================
   FAQ (Bend Club hairlines)
   ========================================================= */
.faq{ background:var(--paper); }
.faq-head{ max-width:760px; margin-bottom:clamp(28px,4vw,48px); }
.faq-list{ border-top:1px solid var(--line); }
.faq-row{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(20px,5vw,70px);
  padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--line); align-items:start;
  position:relative;
}
.faq-row::after{ content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--brand); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.faq-row:hover::after{ width:100%; }
.faq-q{ font-family:var(--serif); font-size:clamp(1.18rem,2vw,1.5rem); line-height:1.24; color:var(--brand-ink); margin:0; }
.faq-a{ margin:0; color:var(--ink-2); font-size:1.06rem; line-height:1.6; max-width:50ch; }

/* =========================================================
   FINAL CTA / INQUIRY
   ========================================================= */
.final-cta{ background:var(--navy); color:#fff; overflow:hidden; isolation:isolate; }
.cta-bg{ position:absolute; inset:0; z-index:0; }
.cta-bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.cta-veil{ position:absolute; inset:0; background:linear-gradient(120deg, rgba(6,18,31,.94), rgba(6,18,31,.7) 60%, rgba(11,38,65,.55)); }
.cta-panel{
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(40px,6vw,84px); align-items:center;
  background:rgba(8,24,43,.5); backdrop-filter:blur(10px);
  border:1px solid var(--line-d); border-radius:var(--radius); padding:clamp(34px,5vw,62px);
  position:relative; z-index:1;
}
.cta-info{ border-left:1px solid var(--line-d); padding-left:clamp(24px,4vw,44px); }
.info-row{ display:flex; gap:24px; padding:18px 0; border-bottom:1px solid var(--line-d); }
.info-row:first-child{ padding-top:0; }
.info-row:last-child{ border-bottom:0; padding-bottom:0; }
.info-k{ flex:0 0 60px; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-bright); padding-top:4px; }
.info-v{ font-size:1.06rem; color:#fff; line-height:1.45; }
.info-v a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#040D18; color:rgba(255,255,255,.74); padding-block:52px 30px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid var(--line-d); }
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand .brand-mark{ width:46px; background:#fff; border-radius:10px; padding:6px; }
.footer-brand .brand-name{ color:#fff; font-size:1.1rem; }
.footer-brand .brand-sub{ color:rgba(255,255,255,.55); }
.footer-meta{ display:flex; flex-direction:column; gap:5px; text-align:right; font-size:.94rem; }
.footer-meta a{ color:#fff; font-weight:600; }
.footer-fine{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:rgba(255,255,255,.4); margin:22px 0 0; text-align:center; }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* hero arrival: defaults are the SETTLED state (sharp, lit) so a no-JS /
   reduced-motion / repeat visit shows the finished hero instantly.
   body.preload paints the OPENING state (covered + out of focus). */
.hero-veil{ opacity:0; }
.hero-plate-blur{ opacity:0; }
body.preload .hero-veil{ opacity:1; }
body.preload .hero-plate-blur{ opacity:1; }
body.preload .hero-eyebrow,
body.preload .hero-lead,
body.preload .hero-actions,
body.preload .hero-proof-line{ opacity:0; transform:translateY(24px); }
/* hide only — GSAP owns the transform so its y/yPercent caches don't collide */
body.preload .hero-title .ln-i{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .reveal,
  body.preload .hero-eyebrow, body.preload .hero-lead, body.preload .hero-actions,
  body.preload .hero-proof-line{ opacity:1; transform:none; transition:none; }
  body.preload .hero-title .ln-i{ opacity:1; transform:none; }
  body.preload .hero-veil, body.preload .hero-plate-blur{ opacity:0; }
  .hero-plate-sharp{ animation:none; }
  .hero-bloom{ animation:none; }
  .scroll-cue-line::after{ animation:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .nav, .header-cta .phone-link, .header-cta .btn{ display:none; }
  .menu-toggle{ display:flex; margin-left:auto; }
  .hero{ min-height:100svh; align-items:flex-end; padding-bottom:clamp(84px,16vw,120px); }
  .hero-plate{ background-position:46% 22%; }
  /* type sits at the bottom on mobile → bottom-weighted darken */
  .hero-grade{ background:
      linear-gradient(0deg, rgba(4,12,22,.95) 6%, rgba(5,14,24,.62) 38%, rgba(6,18,31,.18) 66%, transparent 92%),
      radial-gradient(120% 90% at 60% 18%, transparent 46%, rgba(5,14,24,.42) 100%); }
  .hero-bloom{ top:8%; right:2%; opacity:.85; }
  .hero-copy{ max-width:100%; }
  .hero-lead{ max-width:44ch; }
  .why-grid, .smile-grid, .cta-panel, .meet-grid, .reviews-grid{ grid-template-columns:1fr; }
  .reviews-summary{ text-align:left; }
  .meet-grid{ gap:64px; }
  .meet-media{ max-width:480px; margin:0 auto 18px; }
  .smile-pin{ min-height:auto; }
  .help-grid{ grid-template-columns:repeat(2,1fr); }
  .comfort-head{ grid-template-columns:1fr; }
  .comfort-grid{ grid-template-columns:1fr 1fr; }
  .ofc-tall{ grid-column:span 2; min-height:320px; }
  .faq-row{ grid-template-columns:1fr; gap:10px; }
  .cta-info{ border-left:0; border-top:1px solid var(--line-d); padding-left:0; padding-top:28px; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .help-grid, .comfort-grid{ grid-template-columns:1fr; }
  .ofc-tall{ grid-column:span 1; }
  .hero{ padding-top:120px; }
  .smile-media{ margin-bottom:30px; }
  .smile-media-2{ position:static; width:62%; margin:16px 0 0 auto; border-width:0; }
  .smile-frame{ width:100%; }
  .footer-inner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .footer-meta{ text-align:left; }
  .info-row{ flex-direction:column; gap:6px; }
  .scroll-cue{ display:none; }
}

/* =========================================================
   ELEVATION LAYER  (motion + micro-craft)
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:90;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--brand), var(--brand-bright));
  box-shadow:0 0 14px rgba(91,182,245,.6);
  will-change:transform;
}

@supports (scrollbar-width: thin){
  html{ scrollbar-width:thin; scrollbar-color:var(--brand) transparent; }
}
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--brand-deep), var(--brand)); border-radius:10px;
  border:2px solid var(--navy);
}
::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

/* parallax via the independent `translate` property */
[data-par]{ transition:translate .5s cubic-bezier(.2,.7,.2,1); will-change:translate; }

/* light sweep across the hero accent only */
.hero-title em{
  background:linear-gradient(100deg,
     currentColor 0%, currentColor 40%,
     rgba(255,255,255,.92) 50%,
     currentColor 60%, currentColor 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  background-position:130% 0;
  animation:sweep 9s ease-in-out 2s infinite;
}
@keyframes sweep{
  0%{ background-position:130% 0; }
  18%,100%{ background-position:-40% 0; }
}

/* ticker / marquee divider */
.marquee{
  background:var(--navy); color:#fff; overflow:hidden; position:relative;
  border-block:1px solid var(--line-d); padding-block:22px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:inline-flex; align-items:center; gap:22px; white-space:nowrap;
  animation:marquee 42s linear infinite; will-change:transform;
}
.marquee-track span:not(.marquee-dot){
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2vw,1.6rem);
  color:rgba(255,255,255,.86); letter-spacing:.005em;
}
.marquee-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-bright); flex:0 0 auto; opacity:.85; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  .hero-atmos{ opacity:1 !important; }
  .hero-title em{ animation:none; -webkit-text-fill-color:currentColor; background:none; }
  [data-par]{ transition:none; translate:none !important; }
}

/* =========================================================
   HERO V7 — two-column desktop: copy left, portrait right
   ========================================================= */
.hero-inner{
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:clamp(30px,4vw,56px);
}
.hero-copy{ max-width:none; }
.hero-portrait{ position:relative; flex:0 0 auto; }
.hero-portrait-frame{
  border-radius:var(--radius); overflow:hidden;
  height:clamp(340px,42vw,540px); width:clamp(200px,24vw,340px);
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.08);
  position:relative; isolation:isolate;
}
.hero-portrait-frame img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 12%;
}
.hero-portrait-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(4,14,26,.55));
}
.hero-portrait-badge{
  position:absolute; bottom:-18px; left:-18px; z-index:3;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:12px 18px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; line-height:1.2;
}
.hero-portrait-badge-k{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brand-deep);
}
.hero-portrait-badge-v{
  font-family:var(--serif); font-size:1.05rem; color:var(--brand-ink); margin-top:3px;
}
@media (max-width:1100px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-portrait{ display:none; }
}

/* =========================================================
   INNER PAGE HERO
   ========================================================= */
.pg-hero{
  background:var(--navy); color:#fff;
  padding-top:clamp(120px,15vw,180px);
  padding-bottom:clamp(64px,8vw,100px);
  position:relative; overflow:hidden; isolation:isolate;
}
.pg-hero-bg{ position:absolute; inset:0; z-index:0; }
.pg-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.18; filter:saturate(.8); }
.pg-hero-grade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(6,18,31,.97), rgba(6,18,31,.72) 60%, rgba(11,38,65,.58));
}
.pg-hero-inner{ position:relative; z-index:2; }
.pg-breadcrumb{
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:1.4rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.pg-breadcrumb a{ color:inherit; }
.pg-breadcrumb .sep{ opacity:.5; }
.pg-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,5.5vw,4.8rem); line-height:1.03;
  letter-spacing:-.02em; color:#fff; margin:0 0 1.4rem;
  filter:drop-shadow(0 3px 26px rgba(0,0,0,.45));
}
.pg-title em{ font-style:italic; color:var(--brand-bright); }
.pg-lead{
  font-size:clamp(1.1rem,1.5vw,1.28rem);
  color:rgba(255,255,255,.82); max-width:52ch; margin:0; line-height:1.6;
}

/* =========================================================
   SERVICE ROWS
   ========================================================= */
.svc-section{ padding-block:clamp(72px,9vw,120px); border-bottom:1px solid var(--line); }
.svc-section:last-of-type{ border-bottom:none; }
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.svc-flip{ direction:rtl; }
.svc-flip > *{ direction:ltr; }
.svc-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); }
.svc-media img{ width:100%; height:100%; object-fit:cover; }
.svc-copy h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem,3.5vw,3rem); line-height:1.08;
  letter-spacing:-.015em; color:var(--brand-ink); margin:0 0 .75em;
}
.svc-copy h2 em{ font-style:italic; color:var(--brand); }
.svc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 1.6rem; list-style:none; padding:0; }
.svc-tag{ background:rgba(19,121,198,.1); color:var(--brand-deep); border-radius:100px; padding:6px 16px; font-size:.88rem; font-weight:500; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.story-band{ background:var(--sand); }
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,6vw,96px); align-items:center; }
.story-num{
  font-family:var(--display); font-size:clamp(5rem,9vw,9rem);
  line-height:1; font-weight:400; color:rgba(19,121,198,.12);
  letter-spacing:-.02em; display:block; margin-bottom:.1em;
}
.cred-list{ list-style:none; padding:0; margin:1.6rem 0; display:grid; gap:12px; }
.cred-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:var(--surface); border-radius:var(--radius-sm);
  border:1px solid var(--line); font-size:.97rem; color:var(--ink);
}
.cred-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); flex:0 0 auto; }
.team-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:20px; align-items:start; }
.team-card{ background:var(--surface); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.team-photo{ aspect-ratio:3/3.4; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .8s ease; }
.team-card:hover .team-photo img{ transform:scale(1.05); }
.team-info{ padding:22px 22px 24px; }
.team-name{ font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--brand-ink); margin:0 0 .2em; }
.team-role{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand); display:block; }

/* =========================================================
   NEW PATIENTS
   ========================================================= */
.steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:clamp(48px,5vw,80px); }
.step{ text-align:center; padding:36px 28px; background:var(--surface); border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.step-num{ font-family:var(--display); font-size:3rem; font-weight:400; color:rgba(19,121,198,.2); letter-spacing:-.02em; display:block; margin-bottom:.2em; line-height:1; }
.step h3{ font-family:var(--serif); font-size:1.22rem; color:var(--brand-ink); margin:0 0 .5em; }
.step p{ margin:0; color:var(--ink-2); font-size:.97rem; }
.offer-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.offer-card{
  border-radius:var(--radius); padding:30px 30px 28px;
  border:1.5px solid rgba(19,121,198,.25);
  background:linear-gradient(135deg, rgba(19,121,198,.06), rgba(91,182,245,.03));
  position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.offer-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.offer-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), var(--brand-bright)); }
.offer-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:.8rem; }
.offer-price{ font-family:var(--display); font-size:clamp(2rem,3.5vw,3rem); font-weight:400; color:var(--brand-ink); line-height:1; margin-bottom:.3em; }
.offer-free{ font-family:var(--display); font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:400; color:var(--brand); line-height:1; margin-bottom:.3em; }
.offer-desc{ font-family:var(--serif); font-size:1.06rem; color:var(--ink-2); margin:0; line-height:1.5; }
.offer-note{ font-size:.82rem; color:var(--ink-2); margin-top:.6em; font-style:italic; }
.finance-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.finance-card{ padding:28px 24px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.finance-card h3{ font-family:var(--serif); font-size:1.15rem; color:var(--brand-ink); margin:0 0 .5em; }
.finance-card p{ margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.58; }

/* =========================================================
   REVIEWS PAGE
   ========================================================= */
.reviews-header{ text-align:center; margin-bottom:clamp(40px,5vw,70px); }
.reviews-header .g-stars{ font-size:1.6rem; letter-spacing:4px; }
.reviews-header .h2{ margin:.2rem auto .6rem; max-width:20ch; }
.reviews-header .lead{ margin:0 auto 2rem; }
.review-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.g-card-full{ grid-column:1 / -1; }
.leave-review{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(28px,3.5vw,44px);
  box-shadow:var(--shadow-sm); margin-top:48px;
}
.leave-review-copy h3{ font-family:var(--serif); font-size:1.42rem; color:var(--brand-ink); margin:0 0 .4em; }
.leave-review-copy p{ margin:0; color:var(--ink-2); font-size:1.02rem; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,6vw,88px); align-items:start; }
.contact-map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/10; border:1px solid var(--line); margin-bottom:24px; }
.contact-map iframe{ width:100%; height:100%; border:none; display:block; }
.contact-hours{ display:grid; gap:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-bottom:24px; }
.ch-row{ display:flex; justify-content:space-between; padding:13px 18px; font-size:.97rem; border-bottom:1px solid var(--line); }
.ch-row:last-child{ border-bottom:none; }
.ch-day{ color:var(--ink-2); }
.ch-time{ font-weight:600; color:var(--ink); }
.contact-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-deep); }
.field input, .field textarea{
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 16px;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  transition:border-color .25s ease, box-shadow .25s ease;
  outline:none; width:100%; resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(19,121,198,.12); }
.field textarea{ min-height:110px; }
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* =========================================================
   SPECIALS TEASER BAND (home page addition)
   ========================================================= */
.specials-band{
  background:linear-gradient(135deg, var(--brand-deep), var(--brand));
  color:#fff; padding-block:clamp(54px,7vw,84px);
}
.specials-inner{
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(30px,4vw,60px); align-items:center;
}
.specials-copy h2{ font-family:var(--serif); font-size:clamp(1.8rem,3.5vw,2.8rem); color:#fff; margin:0 0 .5em; line-height:1.1; }
.specials-copy p{ color:rgba(255,255,255,.88); margin:0 0 1.8rem; font-size:1.06rem; max-width:44ch; }
.specials-pills{ display:flex; flex-direction:column; gap:10px; list-style:none; padding:0; margin:0; min-width:240px; }
.spcl-pill{
  background:rgba(255,255,255,.15); border-radius:var(--radius-sm);
  padding:12px 18px; backdrop-filter:blur(4px); font-size:.94rem;
  color:#fff; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.spcl-pill strong{ font-family:var(--serif); font-size:1.05rem; }
.btn-white{ background:#fff; color:var(--brand); font-weight:700; }
.btn-white:hover{ background:var(--paper); transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(0,0,0,.35); }

/* nav active state on inner pages */
.nav a.active{ color:#fff; }
.nav a.active::after{ transform:scaleX(1); }

/* =========================================================
   RESPONSIVE — inner pages
   ========================================================= */
@media (max-width:1000px){
  .svc-grid, .svc-flip{ grid-template-columns:1fr; direction:ltr; }
  .svc-flip > *{ direction:ltr; }
  .story-grid, .contact-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .offer-grid{ grid-template-columns:1fr; }
  .finance-grid{ grid-template-columns:1fr 1fr; }
  .steps-row{ grid-template-columns:1fr; }
  .review-cards{ grid-template-columns:1fr; }
  .g-card-full{ grid-column:1; }
  .specials-inner{ grid-template-columns:1fr; }
  .specials-pills{ flex-direction:row; flex-wrap:wrap; min-width:unset; }
  .leave-review{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:620px){
  .finance-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .form-2col{ grid-template-columns:1fr; }
}