/* ============================================================
   Angel Smiles Dental — base.css (v2: FUTURISTIC direction, locked)
   Direction: warm editorial bones + one modern signal
   Type: Satoshi only (single family, weight contrast for editorial feel)
   Motion: scroll-linked + ambient mesh animation; reduced-motion safe
   ============================================================ */

@font-face { font-family:'Satoshi'; src:url('../assets/font/satoshi-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/font/satoshi-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/font/satoshi-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/font/satoshi-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/font/satoshi-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root {
  /* Palette */
  --paper:#FAF9F4; --paper-2:#F1EFE6;
  --ink:#0F2A28; --soft:#53645A;
  --pine:#0F3D3A; --pine-hover:#0A2E2C; --pine-deep:#082523;
  --mint:#1AA68C; --mint-soft:#7FE7D4; --mint-deep:#0F7359;
  --amber:#E8A95A; --amber-soft:#F0C180;
  --sand:#F0E8D6; --sage:#E2EFEA; --sage-deep:#CFE3DC;
  --line:#E0DDCD; --line-soft:#E9E6D8;
  --line-dark:rgba(244,239,230,.12);
  --on-dark:#EEF5F2; --on-dark-soft:#B7C9C2;

  /* Type */
  --font:'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Rhythm */
  --maxw:1280px;
  --gut:clamp(1rem, 3.5vw, 2.5rem);
  --section:clamp(2rem, 1.6rem + 2.5vw, 4.2rem);
  --section-sm:clamp(1.5rem, 2vw, 2.5rem);

  /* Motion */
  --t-hover:180ms; --t-reveal:380ms;
  --ease:cubic-bezier(.22,.6,.25,1);

  /* Vocabulary */
  --radius:18px; --radius-lg:28px;
  --shadow:0 12px 32px rgba(15,42,40,.10);
  --shadow-lg:0 30px 60px -30px rgba(15,42,40,.30);
  --shadow-glow:0 14px 30px -10px rgba(127,231,212,.50);
}

/* Reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; max-width:100%; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100vw; scroll-behavior:smooth; }
body {
  font-family:var(--font); font-weight:400;
  font-size:clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height:1.6; letter-spacing:-0.003em;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; max-width:100vw; min-height:100vh; position:relative;
}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}

/* Film grain overlay (premium texture, site-wide) */
body::after{
  content:""; position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress (futuristic signal) */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--mint-soft), var(--mint));
  z-index:130; box-shadow:0 0 12px var(--mint-soft);
  transition:width 80ms linear;
}

/* Layout */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); position:relative; z-index:2; }
section{ position:relative; }
.section{ padding-block:var(--section); }
.section--sm{ padding-block:var(--section-sm); }
.section--paper-2{ background:var(--paper-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.section--dark{
  background:
    radial-gradient(80% 100% at 80% 0%, rgba(127,231,212,.10), transparent 55%),
    linear-gradient(180deg, var(--pine) 0%, var(--pine-deep) 100%);
  color:var(--on-dark);
}
.section--sage{ background:var(--sage); border-top:1px solid var(--sage-deep); border-bottom:1px solid var(--sage-deep); }
.section--sand{ background:var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* Type */
.display{
  font-weight:900; line-height:1.08; letter-spacing:-0.035em; text-wrap:balance;
  font-size:clamp(1.75rem, 1.1rem + 2.5vw, 3.5rem);
}
.h1{
  font-weight:900; line-height:1.1; letter-spacing:-0.03em; text-wrap:balance;
  font-size:clamp(1.45rem, 1.05rem + 1.8vw, 2.8rem);
}
.h2{
  font-weight:700; line-height:1.15; letter-spacing:-0.02em; text-wrap:balance;
  font-size:clamp(1.3rem, 1.0rem + 1.4vw, 2.2rem);
}
.h3{ font-weight:700; font-size:1.15rem; line-height:1.2; letter-spacing:-0.015em; }
.lead{
  font-size:clamp(0.95rem, 0.9rem + 0.25vw, 1.12rem); line-height:1.55; letter-spacing:-0.008em;
  color:var(--soft); max-width:60ch;
}
.section--dark .lead{ color:var(--on-dark-soft); }
.body-text{ color:var(--soft); max-width:62ch; }
.section--dark .body-text{ color:var(--on-dark-soft); }
.small{ font-size:.875rem; color:var(--soft); }
.section--dark .small{ color:var(--on-dark-soft); }
.kicker{
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mint-deep); display:inline-flex; align-items:center; gap:.7rem;
}
.kicker::before{ content:""; width:24px; height:1px; background:var(--mint-deep); display:inline-block; }
.section--dark .kicker{ color:var(--mint-soft); }
.section--dark .kicker::before{ background:var(--mint-soft); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.4rem; font-weight:700; font-size:.92rem; letter-spacing:-0.005em;
  border-radius:999px; transition:transform var(--t-hover) var(--ease), background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover);
  min-height:48px; white-space:nowrap; max-width:100%;
}
.btn-lg{ padding:1rem 1.8rem; min-height:52px; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }
.btn--primary{ background:var(--pine); color:var(--paper); }
.btn--primary:hover{ background:var(--pine-hover); transform:translateY(-2px); box-shadow:var(--shadow-glow), 0 0 0 1px rgba(127,231,212,.25); }
.btn--mint{ background:var(--mint); color:#fff; }
.btn--mint:hover{ background:#168973; transform:translateY(-2px); box-shadow:var(--shadow-glow); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.section--dark .btn--ghost{ color:var(--on-dark); border-color:var(--line-dark); }
.section--dark .btn--ghost:hover{ border-color:var(--on-dark); }
.btn--block{ display:flex; width:100%; }

/* Top utility bar */
.utility-bar{ background:var(--pine-deep); color:var(--on-dark-soft); font-size:.82rem; border-bottom:1px solid var(--line-dark); position:relative; z-index:50; }
.utility-bar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.6rem; flex-wrap:wrap; }
.utility-bar a{ transition:color 200ms; }
.utility-bar a:hover{ color:var(--mint-soft); }
.utility-bar .util-loc{ display:inline-flex; align-items:center; gap:.45rem; }
.utility-bar .util-cta{ color:var(--mint-soft); font-weight:500; }
.util-divider{ color:var(--line-dark); margin-inline:.5rem; }

/* Header */
.site-header{ position:sticky; top:0; z-index:40; background:color-mix(in oklab, var(--paper) 80%, transparent); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line-soft); transition:box-shadow var(--t-hover) var(--ease); }
.site-header.scrolled{ box-shadow:0 8px 24px -16px rgba(15,42,40,.25); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand-logo{ height:44px; width:auto; max-height:44px; }
.nav-links{ display:flex; align-items:center; gap:.2rem; }
.nav-links a{ padding:.6rem .85rem; font-size:.92rem; font-weight:500; color:var(--soft); border-radius:999px; transition:color var(--t-hover), background var(--t-hover); white-space:nowrap; }
.nav-links a:hover{ color:var(--ink); background:color-mix(in oklab, var(--mint) 10%, transparent); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ content:""; display:block; height:2px; width:18px; margin:2px auto 0; background:var(--mint); border-radius:2px; }
.nav-cta{ display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; }
.nav-cta .btn{ padding:.7rem 1.3rem; min-height:44px; font-size:.88rem; }
.nav-toggle{ display:none; }

/* Mobile bottom bar */
.mobile-bar{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:60; background:rgba(15,61,58,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line-dark); padding:.5rem max(env(safe-area-inset-right),.6rem) max(env(safe-area-inset-bottom),.6rem) max(env(safe-area-inset-left),.6rem); }
.mobile-bar-inner{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem; }
.mobile-bar a, .mobile-bar button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem; padding:.55rem .3rem; border-radius:12px; color:var(--on-dark); font-size:.7rem; font-weight:500; min-height:52px; transition:background 200ms; }
.mobile-bar a:active, .mobile-bar button:active{ background:rgba(255,255,255,.08); }
.mobile-bar svg{ width:20px; height:20px; }
.mobile-bar .mb-call{ background:var(--mint); color:#fff; }

/* Motion */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; transition-delay:calc(var(--d, 0) * 70ms); }
.reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:none; transition-delay:calc(var(--d, 0) * 90ms); }
.parallax{ will-change:transform; transition:transform 100ms linear; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
}

/* Bento */
.bento{ display:grid; grid-template-columns:repeat(6, 1fr); gap:clamp(1rem, 1.8vw, 1.4rem); }
.bento > *{ grid-column:span 2; }
.bento .span-3{ grid-column:span 3; }
.bento .span-4{ grid-column:span 4; }
.bento .span-6{ grid-column:span 6; }

.card{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:clamp(1.25rem, 2.4vw, 2.2rem); transition:transform 380ms var(--ease), box-shadow 380ms var(--ease), border-color 380ms var(--ease); display:flex; flex-direction:column; gap:.85rem; max-width:100%; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in oklab, var(--mint) 35%, var(--line-soft)); }
.section--dark .card{ background:color-mix(in oklab, var(--pine-deep) 65%, var(--pine)); border-color:var(--line-dark); color:var(--on-dark); }
.card-ico{ width:44px; height:44px; border-radius:12px; background:color-mix(in oklab, var(--mint) 14%, transparent); color:var(--mint-deep); display:grid; place-items:center; margin-bottom:.4rem; }
.card-ico svg{ width:22px; height:22px; }
.section--dark .card-ico{ background:rgba(127,231,212,.14); color:var(--mint-soft); }

/* Pillar (4-up feature grid on home) */
.pillar-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(.8rem, 1.5vw, 1.2rem); }
.pillar{ padding:clamp(1.25rem, 2vw, 2rem); border-radius:var(--radius); border:1px solid var(--line-soft); background:var(--paper); transition:transform var(--t-hover) var(--ease), box-shadow var(--t-hover); display:flex; flex-direction:column; gap:.7rem; }
.pillar:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.pillar.alt-1{ background:var(--sage); border-color:var(--sage-deep); }
.pillar.alt-2{ background:var(--sand); border-color:var(--line); }
.pillar-ico{ width:42px; height:42px; border-radius:12px; background:color-mix(in oklab, var(--mint) 14%, transparent); color:var(--mint-deep); display:grid; place-items:center; margin-bottom:.3rem; }
.pillar-ico svg{ width:22px; height:22px; }
.pillar h3{ font-weight:700; font-size:1.15rem; letter-spacing:-0.015em; }
.pillar p{ font-size:.93rem; color:var(--soft); line-height:1.55; }

/* Two-column split */
.split{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(1.8rem, 4vw, 5rem); align-items:center; }
.split--flip{ direction:rtl; }
.split--flip > *{ direction:ltr; }

/* Frame */
.frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--sage-deep); aspect-ratio:4/5; box-shadow:var(--shadow-lg); max-width:100%; }
.frame img{ width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.05) brightness(.97); }
.frame--wide{ aspect-ratio:16/11; }
.frame--tall{ aspect-ratio:3/4.4; }
.frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(15,42,40,.35)); pointer-events:none; }

/* Glassmorphism stat chip (futuristic signal) */
.glass-chip{ padding:.65rem .95rem; border-radius:14px; background:rgba(255,255,255,.55); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.70); display:flex; flex-direction:column; gap:.1rem; box-shadow:0 8px 22px -12px rgba(15,61,58,.30); max-width:100%; }
.glass-chip .chip-num{ font-weight:900; font-size:1.2rem; letter-spacing:-0.03em; color:var(--pine); line-height:1; }
.section--dark .glass-chip{ background:rgba(244,239,230,.08); border-color:rgba(244,239,230,.18); }
.section--dark .glass-chip .chip-num{ color:var(--mint-soft); }
.glass-chip .chip-label{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); font-weight:500; }
.section--dark .glass-chip .chip-label{ color:var(--on-dark-soft); }
.chip-row{ display:flex; flex-wrap:wrap; gap:.65rem; max-width:100%; }
.chip-row > *{ max-width:100%; }

/* Stat row */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:clamp(1.2rem, 3vw, 3rem); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding-block:clamp(1.8rem, 3vw, 3rem); }
.stat-num{ font-weight:900; font-size:clamp(1.8rem, 1.4rem + 1.8vw, 3.2rem); letter-spacing:-0.04em; line-height:1; color:var(--mint-soft); }
.stat-label{ font-size:.85rem; color:var(--on-dark-soft); margin-top:.5rem; }

/* Reviews */
.review{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:clamp(1.25rem, 2.4vw, 2.2rem); display:flex; flex-direction:column; gap:1rem; position:relative; max-width:100%; }
.section--dark .review{ background:color-mix(in oklab, var(--pine-deep) 65%, var(--pine)); border-color:var(--line-dark); color:var(--on-dark); }
.review-mark{ font-size:2.4rem; line-height:.6; color:var(--mint-deep); font-weight:900; height:1.2rem; }
.review-text{ font-size:1rem; line-height:1.55; letter-spacing:-0.005em; }
.review-attr{ font-size:.85rem; color:var(--soft); font-weight:500; margin-top:auto; }
.section--dark .review-attr{ color:var(--on-dark-soft); }
.stars{ color:var(--mint-deep); letter-spacing:.15em; font-size:.9rem; display:inline-flex; gap:.15rem; }
.section--dark .stars{ color:var(--mint-soft); }
.section--dark .review-mark{ color:var(--mint-soft); }
.stars svg{ width:14px; height:14px; }

/* Service list */
.svc{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.svc-item{ display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:start; padding:clamp(1.25rem, 2vw, 2.2rem) 0; border-bottom:1px solid var(--line); transition:padding-left 320ms var(--ease); }
.svc-item:hover{ padding-left:.5rem; }
.svc-num{ font-size:.78rem; font-weight:500; color:var(--mint-deep); letter-spacing:.1em; margin-bottom:.4rem; }
.svc-title{ font-weight:700; font-size:1.2rem; letter-spacing:-0.015em; margin-bottom:.45rem; }
.svc-desc{ color:var(--soft); max-width:60ch; }
.svc-link{ font-size:.85rem; font-weight:700; color:var(--mint-deep); display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; transition:gap 240ms var(--ease), color 240ms; }
.svc-link:hover{ gap:.7rem; color:#0B6649; }

/* Hours table */
.hours-table{ display:grid; gap:.5rem; font-size:.95rem; }
.hours-row{ display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--line); gap:1rem; }
.hours-row:last-child{ border-bottom:none; }
.section--dark .hours-row{ border-color:var(--line-dark); }
.hours-row .day-name{ font-weight:500; }
.hours-row.closed{ color:rgba(15,42,40,.45); }
.section--dark .hours-row.closed{ color:rgba(244,239,230,.4); }

/* Form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.8rem; font-weight:500; color:var(--soft); letter-spacing:.02em; }
.field input, .field select, .field textarea{ font:inherit; padding:.85rem 1rem; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); transition:border-color 200ms, box-shadow 200ms; min-height:50px; max-width:100%; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--mint); box-shadow:0 0 0 3px rgba(26,166,140,.18); }

/* Portrait slot (pending Dr. Safadi photo) */
.portrait-slot{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:radial-gradient(circle at 40% 30%, color-mix(in oklab, var(--pine) 80%, var(--pine-deep)), var(--pine-deep) 75%); display:grid; place-items:center; box-shadow:var(--shadow-lg); }
.portrait-slot::after{ content:""; position:absolute; inset:0; 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); opacity:.08; mix-blend-mode:overlay; }
.portrait-slot-inner{ position:relative; z-index:2; text-align:center; color:var(--on-dark); padding:2rem; }
.portrait-initial{ font-weight:900; font-size:clamp(2.5rem, 6vw, 4.5rem); letter-spacing:-0.05em; color:var(--mint-soft); line-height:1; margin-bottom:.7rem; }
.portrait-label{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mint-soft); margin-bottom:.4rem; }
.portrait-name{ font-weight:700; font-size:1.2rem; letter-spacing:-0.02em; }
.portrait-note{ font-size:.82rem; color:var(--on-dark-soft); margin-top:.8rem; max-width:26ch; margin-inline:auto; }

/* Team */
.team{ display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(1rem, 1.8vw, 1.6rem); }
.team-card{ display:flex; flex-direction:column; gap:.7rem; }
.team-photo{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--pine-deep); box-shadow:0 18px 40px -22px rgba(15,42,40,.45); }
.team-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(.92) contrast(1.05); transition:transform 600ms var(--ease); }
.team-card:hover .team-photo img{ transform:scale(1.04); }
.team-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(15,42,40,.35)); pointer-events:none; }
.team-initial{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle at 40% 30%, color-mix(in oklab, var(--pine) 80%, var(--pine-deep)), var(--pine-deep) 75%); color:var(--mint-soft); font-weight:900; font-size:2.6rem; letter-spacing:-0.04em; }
.team-name{ font-weight:700; font-size:1.1rem; letter-spacing:-0.015em; line-height:1.1; }
.team-role{ font-size:.85rem; color:var(--mint-deep); font-weight:500; }

/* CTA band */
.cta-band{ background:linear-gradient(135deg, var(--pine-deep), var(--pine)); color:var(--on-dark); border-radius:var(--radius-lg); padding:clamp(1.8rem, 4vw, 4.5rem); display:grid; grid-template-columns:1.4fr auto; gap:2rem; align-items:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; border:1px solid rgba(127,231,212,.18); }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 100% at 90% 10%, rgba(127,231,212,.25), transparent 60%); pointer-events:none; }
.cta-band > *{ position:relative; z-index:1; }
.cta-band .h2{ color:var(--on-dark); }
.cta-band .lead{ color:var(--on-dark-soft); }
.cta-band .btn--primary{ background:var(--mint-soft); color:var(--pine-deep); }
.cta-band .btn--primary:hover{ background:#9FF0DC; }
.cta-band .btn--ghost{ color:var(--on-dark); border-color:color-mix(in oklab, var(--on-dark) 24%, transparent); }
.cta-band .btn--ghost:hover{ border-color:var(--on-dark); }

/* Footer */
.site-footer{ background:var(--pine-deep); color:var(--on-dark-soft); padding-block:clamp(2.5rem, 5vw, 5rem) 2rem; position:relative; z-index:2; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(1.8rem, 3.5vw, 3.5rem); padding-bottom:clamp(2rem, 3.5vw, 3.5rem); border-bottom:1px solid var(--line-dark); }
.footer-grid h4{ color:var(--on-dark); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-grid li{ margin-bottom:.55rem; }
.footer-grid a{ transition:color 200ms; font-size:.92rem; }
.footer-grid a:hover{ color:var(--mint-soft); }
.footer-brand .brand-logo{ height:52px; filter:brightness(1.4) saturate(.85); margin-bottom:.5rem; }
.footer-brand p{ font-size:.92rem; line-height:1.55; margin-top:1rem; max-width:32ch; }
.footer-hours{ font-size:.88rem; line-height:1.7; }
.footer-hours .day{ display:flex; justify-content:space-between; gap:1rem; }
.footer-hours .day span:first-child{ color:rgba(244,239,230,.55); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:2rem; flex-wrap:wrap; font-size:.8rem; color:rgba(244,239,230,.5); }

/* Page hero (interior pages) */
.page-hero{ position:relative; padding-block:clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem); background:radial-gradient(100% 80% at 75% 0%, rgba(127,231,212,.12), transparent 55%), linear-gradient(180deg, var(--pine) 0%, var(--pine-deep) 100%); color:var(--on-dark); overflow:hidden; }
.page-hero .lead{ color:var(--on-dark-soft); max-width:60ch; }

/* Mobile drawer & backdrop (fixed overlay, off-screen by default) */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,42,40,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 90; opacity: 0; visibility: hidden;
  transition: opacity 300ms var(--ease), visibility 300ms;
}
.nav-backdrop.open {
  opacity: 1; visibility: visible;
}

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px); background: var(--paper);
  box-shadow: -20px 0 50px rgba(15,42,40,.25);
  transform: translateX(100%); transition: transform 340ms var(--ease);
  z-index: 100; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  overflow-y: auto;
}
.nav-drawer.open {
  transform: translateX(0);
}
.nav-drawer a {
  padding: .85rem 1rem; border-radius: 12px; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--line-soft);
  font-size: 1rem; transition: background 180ms;
}
.nav-drawer a:hover, .nav-drawer a:active {
  background: color-mix(in oklab, var(--mint) 12%, transparent);
}

.nav-toggle { display: none; }
.mobile-bar { display: none; }

/* Responsive Media Queries */
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .nav-cta .btn { display: none !important; }
  .nav-toggle {
    display: inline-grid !important; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  /* Mobile bottom bar for quick thumb navigation */
  .mobile-bar {
    display: block !important; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 80; background: rgba(15,61,58,.96);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line-dark);
    padding: .5rem max(env(safe-area-inset-right),.6rem) max(env(safe-area-inset-bottom),.6rem) max(env(safe-area-inset-left),.6rem);
  }
  body { padding-bottom: 76px; }
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split--flip { direction: ltr; }
  .cta-band { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento > * { grid-column: span 2; }
  .bento .span-3, .bento .span-4, .bento .span-6 { grid-column: span 4; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr !important; }
  .bento > *, .bento .span-3, .bento .span-4, .bento .span-6 { grid-column: span 1 !important; }
  .pillar-grid { grid-template-columns: 1fr !important; }
  .team { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .svc-item { grid-template-columns: 1fr !important; gap: .8rem; }
  .cta-band { padding: 1.5rem 1.25rem; }
}

@media (max-width: 560px) {
  .utility-bar .util-loc { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .btn {
    padding: .75rem 1.2rem;
    font-size: .88rem;
    white-space: normal;
    text-align: center;
  }
  .btn-lg {
    padding: .85rem 1.4rem;
    font-size: .92rem;
  }
  .svc-link { white-space: normal; }
  .glass-chip { width: 100%; }
  .chip-row { flex-direction: column; align-items: stretch; }
  .chip-row .btn { width: 100%; }
}

@media print {
  .mobile-bar, .nav-toggle, .nav-drawer, .nav-backdrop, body::after, .scroll-progress { display: none !important; }
  body { padding-bottom: 0; }
}