/* Floss City Dental — shared stylesheet for every page. Built by Eighty8 Agency. */
  :root{
    --bg:#FFFFFF;
    /* a blue-tinted wash rather than flat grey — reads warmer against the brand */
    --bg-alt:#F4F8FB;
    --ink:#2A2F42;
    --ink-soft:#6B7480;
    --pine:#3DB3E3;
    --pine-dark:#34394D;
    --gold:#3DB3E3;
    --gold-dark:#2C93BE;
    --navy-deep:#232739;
    --blue-deep:#1E4356;
    --blue-tint:#EAF6FC;
    --white:#FFFFFF;
    --line:rgba(52,57,77,0.12);
    --line-soft:rgba(52,57,77,0.07);

    --radius:10px;
    --radius-lg:18px;
    --max:1180px;

    --shadow-sm:0 2px 10px rgba(30,33,45,.05);
    --shadow-md:0 14px 36px -10px rgba(30,33,45,.14);
    --shadow-lg:0 34px 70px -22px rgba(30,33,45,.30);

    --ease:cubic-bezier(.22,.61,.36,1);

    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Work Sans', -apple-system, sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  /* height:auto is required alongside the width/height attributes on <img>:
     without it the height attribute sticks while the width scales. */
  img{max-width:100%; height:auto; display:block;}
  a{color:inherit;}

  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:500;
    line-height:1.08;
    margin:0;
    color:var(--pine-dark);
  }

  h2{font-size:clamp(2rem, 1.4rem + 2.2vw, 2.9rem); font-weight:500; letter-spacing:-.015em;}
  h3{font-size:1.2rem; font-weight:600; letter-spacing:-.005em;}

  p{margin:0 0 1em; max-width:62ch;}
  .lead{font-size:1.1rem; color:var(--ink-soft); max-width:52ch;}

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  a.skip-link{
    position:absolute; left:12px; top:-60px;
    background:var(--pine); color:var(--white);
    padding:10px 16px; border-radius:var(--radius);
    z-index:100; transition:top .15s ease;
  }
  a.skip-link:focus{top:12px;}

  :focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px;}

  /* never let a reveal hide content on paper, or in a hidden render */
  @media print{
    .js [data-reveal]{opacity:1 !important; transform:none !important;}
  }
  .js.reveal-instant [data-reveal]{transition:none !important;}

  /* ---------- scroll reveal ----------
     Elements hinge down from their top edge as they enter. The `.js` gate means
     that with JS off (or if the observer never runs) everything renders plainly
     visible instead of staying stuck at opacity:0. */
  @media (prefers-reduced-motion: no-preference){
    .js [data-reveal]{
      opacity:0;
      transform:perspective(1200px) rotateX(-9deg) translateY(-26px);
      transform-origin:50% 0%;
      transition:opacity .8s var(--ease) var(--d,0s),
                 transform .8s var(--ease) var(--d,0s);
    }
    .js [data-reveal].is-in{
      opacity:1;
      transform:perspective(1200px) rotateX(0deg) translateY(0);
    }
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:var(--font-body); font-weight:600; font-size:.98rem;
    padding:14px 26px; border-radius:var(--radius);
    text-decoration:none; border:1.5px solid transparent; white-space:nowrap;
    cursor:pointer; position:relative;
    transition:background-color .2s var(--ease), color .2s var(--ease),
               border-color .2s var(--ease), transform .2s var(--ease),
               box-shadow .25s var(--ease);
  }
  .btn:active{transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){ .btn{transition:background-color .2s, color .2s;} }

  .btn-primary{background:var(--gold); color:var(--white); box-shadow:0 4px 14px -4px rgba(61,179,227,.55);}
  .btn-primary:hover{background:var(--gold-dark); transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(44,147,190,.6);}
  .btn-ghost{background:rgba(255,255,255,.06); color:var(--white); border-color:rgba(255,255,255,.5); backdrop-filter:blur(6px);}
  .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.14); transform:translateY(-2px);}
  .btn-outline{background:transparent; color:var(--pine); border-color:rgba(61,179,227,.5);}
  .btn-outline:hover{background:var(--pine); color:var(--white); border-color:var(--pine); transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(61,179,227,.6);}
  .btn-on-gold{background:var(--pine-dark); color:var(--white);}
  .btn-on-gold:hover{background:var(--navy-deep); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(35,39,57,.5);}

  /* ---------- header ---------- */
  header.site{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:transparent;
    transition:background-color .25s ease, box-shadow .25s ease, padding .25s ease;
    padding:22px 0;
  }
  header.site.scrolled{
    background:var(--bg); box-shadow:0 1px 0 var(--line); padding:12px 0;
  }
  header.site .bar{display:flex; align-items:center; justify-content:space-between; gap:24px;}
  .logo{display:flex; align-items:center; gap:10px; text-decoration:none;}
  /* One white (REV) PNG, recolored per context via CSS mask — no second logo file needed. */
  .logo-mark{
    display:block; height:58px; aspect-ratio:594/256; flex:none;
    background-color:var(--white);
    -webkit-mask:url("logo-floss-city-dental.png") center/contain no-repeat;
            mask:url("logo-floss-city-dental.png") center/contain no-repeat;
    transition:background-color .25s ease, height .25s ease;
  }
  header.site.scrolled .logo-mark{background-color:var(--pine-dark); height:46px;}

  nav.primary{display:flex; align-items:center; gap:22px;}
  nav.primary a.navlink{
    font-size:.95rem; font-weight:500; text-decoration:none; white-space:nowrap;
    color:rgba(255,255,255,.92); padding-bottom:2px; border-bottom:1px solid transparent;
    transition:color .25s ease, border-color .2s ease;
  }
  header.site.scrolled nav.primary a.navlink{color:var(--ink-soft);}
  nav.primary a.navlink:hover{border-color:currentColor;}

  .header-actions{display:flex; align-items:center; gap:14px;}
  .header-phone{
    display:flex; align-items:center; gap:7px; text-decoration:none;
    font-weight:600; font-size:.95rem; color:#fff; transition:color .25s ease;
  }
  header.site.scrolled .header-phone{color:var(--pine-dark);}
  .header-phone svg{width:16px; height:16px;}

  .header-actions .btn-primary .short{display:none;}

  /* ---------- mobile nav ---------- */
  .nav-toggle{
    display:none; align-items:center; justify-content:center;
    width:42px; height:42px; padding:0; flex:none;
    background:transparent; border:0; cursor:pointer;
    color:#fff; transition:color .25s ease;
  }
  header.site.scrolled .nav-toggle{color:var(--pine-dark);}
  .nav-toggle svg{width:26px; height:26px; stroke:currentColor; stroke-width:2; fill:none;}

  .mobile-nav-close{
    position:absolute; top:24px; right:22px;
    width:42px; height:42px; padding:0; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer; color:var(--pine-dark);
  }
  .mobile-nav-close svg{width:26px; height:26px; stroke:currentColor; stroke-width:2; fill:none;}

  .nav-scrim{
    position:fixed; inset:0; z-index:58;
    background:rgba(30,33,45,.5);
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  }
  .nav-scrim.open{opacity:1; visibility:visible;}

  .mobile-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:59;
    width:min(86vw, 340px);
    background:var(--bg); color:var(--ink);
    padding:96px 28px 32px;
    display:flex; flex-direction:column; gap:4px;
    overflow-y:auto; box-shadow:-8px 0 30px rgba(30,33,45,.18);
    /* visibility keeps the panel out of the tab order + a11y tree while closed,
       and (being discrete) holds it visible for the whole slide-out. */
    transform:translateX(100%); visibility:hidden;
    transition:transform .28s ease, visibility .28s ease;
  }
  .mobile-nav.open{transform:translateX(0); visibility:visible;}
  @media (prefers-reduced-motion: reduce){
    .mobile-nav{transition:none;}
    .nav-scrim{transition:none;}
  }
  .mobile-nav a.navlink{
    font-family:var(--font-display); font-size:1.35rem; font-weight:500;
    color:var(--pine-dark); text-decoration:none;
    padding:15px 0; border-bottom:1px solid var(--line);
  }
  .mobile-nav a.navlink:hover{color:var(--gold-dark);}
  .mobile-nav .mobile-nav-foot{margin-top:26px; display:grid; gap:14px;}
  .mobile-nav .mobile-phone{
    display:inline-flex; align-items:center; gap:9px; text-decoration:none;
    font-weight:600; color:var(--pine); font-size:1.05rem;
  }
  .mobile-nav .mobile-phone svg{width:18px; height:18px;}
  .mobile-nav .btn{justify-content:center;}
  .mobile-nav .mobile-hours{font-size:.88rem; color:var(--ink-soft); margin:0;}
  body.nav-open{overflow:hidden;}

  @media (max-width:900px){
    nav.primary{display:none;}
    .nav-toggle{display:flex;}
  }
  /* the slide-out is a small-screen affordance only */
  @media (min-width:901px){
    .mobile-nav, .nav-scrim{display:none;}
  }
  /* five nav items + phone + CTA gets tight before the mobile breakpoint;
     the number still shows in the hero strip and the slide-out menu */
  @media (max-width:1040px){
    .header-phone{display:none;}
  }
  @media (max-width:520px){
    .header-phone span{display:none;}
  }
  @media (max-width:430px){
    header.site{padding:16px 0;}
    header.site.scrolled{padding:10px 0;}
    .header-actions{gap:10px;}
    .logo-mark{height:44px;}
    header.site.scrolled .logo-mark{height:38px;}
    .header-phone{display:none;}
    .header-actions .btn-primary .full{display:none;}
    .header-actions .btn-primary .short{display:inline;}
    .header-actions .btn-primary{padding:11px 16px; font-size:.9rem;}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
    overflow:hidden; color:#fff;
  }
  .hero-media{position:absolute; inset:0; z-index:0;}
  .hero-fallback{
    position:absolute; inset:0; z-index:1;
    transition:opacity .9s var(--ease);
    background:linear-gradient(118deg, #16303F 0%, #1E4356 26%, #2C93BE 52%, #3DB3E3 68%, #17323F 100%);
    background-size:230% 230%;
  }
  /* soft light bloom + vignette, so the placeholder reads as art direction
     rather than a flat CSS gradient */
  .hero-bloom{
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      radial-gradient(70% 55% at 72% 18%, rgba(190,231,247,.34), transparent 62%),
      radial-gradient(90% 70% at 12% 92%, rgba(20,40,54,.55), transparent 68%);
  }
  /* fine grain — kills the banding you get on wide flat gradients */
  .hero-grain{
    position:absolute; inset:0; z-index:3; pointer-events:none;
    opacity:.15; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size:300px 300px;
  }
  @media (prefers-reduced-motion: no-preference){
    .hero-fallback{animation:driftGradient 18s ease-in-out infinite;}
  }
  @keyframes driftGradient{
    0%{background-position:0% 30%;}
    50%{background-position:100% 70%;}
    100%{background-position:0% 30%;}
  }
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
  }
  /* Once the reel is actually playing the gradient drops back to a colour
     grade over it, rather than hiding it. Until then it stays fully opaque,
     so a missing or blocked video just looks like the original treatment. */
  .hero.has-video .hero-fallback{opacity:.55; animation:none;}
  .hero-scrim{
    position:absolute; inset:0; z-index:4;
    background:linear-gradient(180deg, rgba(35,39,57,.30) 0%, rgba(35,39,57,.50) 52%, rgba(24,27,38,.92) 100%);
  }

  .hero-content{position:relative; z-index:5; width:100%; padding:180px 0 60px;}
  .hero-content .wrap{max-width:var(--max);}
  .hero-text{max-width:720px;}
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.82rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
    color:#BEE7F7; margin:0 0 20px;
    padding:8px 16px 8px 13px; border-radius:100px;
    background:rgba(255,255,255,.08); border:1px solid rgba(190,231,247,.28);
    backdrop-filter:blur(8px);
  }
  .hero-eyebrow .dot{
    width:7px; height:7px; border-radius:50%; background:#7FD4F5; flex:none;
    box-shadow:0 0 0 4px rgba(127,212,245,.22);
  }
  .hero h1{
    font-size:clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem);
    color:#fff; letter-spacing:-.025em; line-height:1.02;
  }
  .hero h1 em{font-style:italic; font-weight:400; color:#BEE7F7;}
  .hero p.lead{color:rgba(255,255,255,.86); margin-top:22px; font-size:1.16rem; max-width:46ch;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}

  /* thin info strip under hero copy */
  .hero-strip{
    position:relative; z-index:5;
    border-top:1px solid rgba(255,255,255,.16);
    background:rgba(20,23,33,.45);
    backdrop-filter:blur(14px);
  }
  .hero-strip .wrap{
    display:flex; flex-wrap:wrap; gap:32px; padding:22px 24px;
  }
  .hero-strip-item{
    display:flex; align-items:center; gap:11px; font-size:.92rem;
    color:rgba(255,255,255,.9); text-decoration:none;
    transition:color .2s var(--ease);
  }
  a.hero-strip-item:hover{color:#fff;}
  a.hero-strip-item:hover svg{color:#BEE7F7;}
  .hero-strip-item svg{width:17px; height:17px; flex:none; color:#7FD4F5;}

  /* ---------- generic section spacing ---------- */
  section{padding:clamp(76px, 6vw, 116px) 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{margin-bottom:16px;}
  .eyebrow{
    display:block; font-family:var(--font-body);
    font-size:.78rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
    color:var(--gold-dark); margin:0 0 16px;
  }
  .book .eyebrow, .membership .eyebrow{color:rgba(255,255,255,.62);}

  /* ---------- welcome / intro ---------- */
  .intro{background:var(--bg);}
  .intro-grid{
    display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
  }
  .intro-photo{
    aspect-ratio:3/2; border-radius:var(--radius-lg); overflow:hidden;
    background:linear-gradient(155deg,#EAF6FC,#BEE0EF);
    display:flex; align-items:center; justify-content:center;
    position:relative; box-shadow:var(--shadow-md);
  }
  .intro-photo img{width:100%; height:100%; object-fit:cover;}
  @media (max-width:880px){
    .intro-grid{grid-template-columns:1fr; gap:36px;}
    .intro-photo{order:-1; aspect-ratio:16/9;}
  }

  /* ---------- services (row list, not cards) ---------- */
  .services{background:var(--bg-alt);}
  .service-row{
    position:relative;
    display:grid; grid-template-columns:56px 1fr auto; gap:22px; align-items:center;
    padding:26px 20px 26px 18px; margin:0 -20px;
    border-top:1px solid var(--line);
    border-radius:var(--radius-lg);
    transition:background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .service-list .service-row:last-child{border-bottom:1px solid var(--line);}
  .service-row:hover{
    background:var(--white);
    box-shadow:var(--shadow-md);
    border-top-color:transparent;
    transform:translateX(6px);
  }
  /* the row above loses its bottom edge to the hovered row's rounded corner */
  .service-row:hover + .service-row{border-top-color:transparent;}
  .service-icon{
    width:48px; height:48px; border-radius:14px;
    background:var(--pine); display:flex; align-items:center; justify-content:center;
    flex:none;
    box-shadow:0 6px 16px -6px rgba(61,179,227,.7);
    transition:transform .3s var(--ease), border-radius .3s var(--ease);
  }
  .service-row:hover .service-icon{transform:rotate(-6deg) scale(1.06); border-radius:16px;}
  .service-icon svg{width:22px; height:22px; stroke:#FFFFFF;}
  .service-row h3{margin-bottom:6px;}
  .service-row p{margin:0; color:var(--ink-soft); max-width:56ch;}
  .service-arrow{
    width:22px; height:22px; color:var(--pine);
    opacity:0; transform:translateX(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .service-row:hover .service-arrow{opacity:1; transform:translateX(0);}
  @media (max-width:600px){
    .service-row{grid-template-columns:48px 1fr; gap:18px;}
    .service-arrow{display:none;}
  }
  .services-foot{margin-top:44px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;}

  /* ---------- "also offered" (quiet secondary services) ---------- */
  .also{
    margin-top:46px; padding:32px 36px;
    background:var(--white); border:1px solid var(--line-soft);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  }
  .also > h3{font-size:1.05rem; margin-bottom:4px;}
  .also > p.also-lead{margin:0; color:var(--ink-soft); font-size:.95rem;}
  .also-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:20px 44px;
    margin-top:26px; padding-top:24px; border-top:1px solid var(--line-soft);
  }
  .also-item h3{font-size:.98rem; margin:0 0 4px;}
  .also-item p{margin:0; color:var(--ink-soft); font-size:.9rem; max-width:44ch;}
  @media (max-width:640px){
    .also{padding:26px 24px;}
    .also-grid{grid-template-columns:1fr; gap:20px;}
  }

  /* ---------- membership band ---------- */
  .membership{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, #46BCE9 0%, #3DB3E3 42%, #2C93BE 100%);
    color:#fff;
  }
  .membership::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(60% 80% at 88% 12%, rgba(255,255,255,.22), transparent 62%);
  }
  .membership .wrap{position:relative; z-index:1;}
  .price-block{
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
    border-radius:var(--radius-lg); padding:32px 40px;
    backdrop-filter:blur(10px); text-align:center;
  }
  .membership-grid{
    display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center;
  }
  .price-block .label{
    font-family:var(--font-body); font-size:.95rem; font-weight:600;
    color:rgba(255,255,255,.75); margin-bottom:6px;
  }
  .price-figure{display:flex; align-items:baseline; justify-content:center; gap:6px; font-family:var(--font-display);}
  .price-block .amount{font-size:clamp(3.2rem, 2rem + 4vw, 5rem); font-weight:500; color:#fff; letter-spacing:-.03em;}
  .price-block .period{font-size:1.1rem; color:rgba(255,255,255,.75);}
  .membership h2{color:#fff;}
  .membership .lead{color:rgba(255,255,255,.85); margin-top:14px;}
  .membership-list{list-style:none; margin:26px 0 30px; padding:0; display:grid; gap:12px;}
  .membership-list li{display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.92);}
  .membership-list svg{width:18px; height:18px; margin-top:3px; flex:none; color:#fff; opacity:.95;}
  @media (max-width:760px){
    .membership-grid{grid-template-columns:1fr; gap:28px;}
  }

  /* ---------- doctor ---------- */
  .doctor{background:var(--bg);}
  .doctor-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;}
  .doctor-photo{
    aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
    background:#EAF6FC; box-shadow:var(--shadow-md);
    /* capped to stay near the source file's native 326px — see README re: hi-res re-export */
    max-width:380px;
  }
  .doctor-photo img{width:100%; height:100%; object-fit:cover;}
  .doctor h2{margin-bottom:6px;}
  .doctor .role{color:var(--gold-dark); font-weight:600; margin-bottom:18px;}
  .credentials{list-style:none; padding:0; margin:22px 0; display:grid; gap:10px; border-top:1px solid var(--line); padding-top:20px;}
  .credentials li{color:var(--ink-soft); font-size:.96rem;}
  .credentials strong{color:var(--ink); font-weight:600;}
  @media (max-width:880px){
    .doctor-grid{grid-template-columns:1fr; gap:32px;}
    .doctor-photo{order:-1; max-width:320px;}
  }

  /* ---------- office gallery ---------- */
  .gallery{background:var(--bg-alt);}
  /* every tile on the pediatric-dentist ratio (960x861); sources run 2:1 to 4:5,
     so object-position steers each crop instead of blindly taking the centre */
  /* Six tracks so five photos sit 3-up then 2-up, both rows full width, rather
     than leaving a gap at the end. With six photos, drop the :nth-child rules. */
  .gallery-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
  .gallery-grid figure{grid-column:span 2;}
  .gallery-grid figure:nth-child(4), .gallery-grid figure:nth-child(5){grid-column:span 3;}
  .gallery-grid figure{
    margin:0; aspect-ratio:960/861;
    border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-sm); background:var(--white);
    transition:box-shadow .35s var(--ease);
  }
  .gallery-grid figure:hover{box-shadow:var(--shadow-md);}
  .gallery-grid img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    transition:transform .6s var(--ease);
  }
  .gallery-grid figure:hover img{transform:scale(1.035);}
  @media (prefers-reduced-motion: reduce){ .gallery-grid img{transition:none;} }
  @media (max-width:900px){
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-grid figure, .gallery-grid figure:nth-child(4), .gallery-grid figure:nth-child(5){grid-column:auto;}
  }
  @media (max-width:560px){ .gallery-grid{grid-template-columns:1fr;} }

  /* ---------- hours / location ---------- */
  .visit{background:var(--bg);}
  .visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .hours-table{width:100%; border-collapse:collapse; margin-top:6px;}
  .hours-table tr{border-top:1px solid var(--line);}
  .hours-table tr:last-child{border-bottom:1px solid var(--line);}
  .hours-table td{padding:15px 0; font-size:.98rem;}
  .hours-table tr.is-today td{color:var(--pine); }
  .hours-table tr.is-today td:first-child{color:var(--pine); font-weight:700;}
  .hours-table .today-tag{
    display:inline-block; margin-left:9px; padding:2px 9px; border-radius:100px;
    background:var(--blue-tint); color:var(--gold-dark);
    font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    vertical-align:middle;
  }
  .hours-table td:first-child{color:var(--ink-soft); font-weight:500;}
  .hours-table td:last-child{text-align:right; font-weight:600;}
  .visit-exterior{
    border-radius:var(--radius-lg); overflow:hidden; margin-bottom:18px;
    box-shadow:var(--shadow-md); background:var(--white);
  }
  .visit-exterior img{width:100%; display:block;}
  .visit-map{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:var(--shadow-md);}
  .visit-map iframe{width:100%; height:100%; border:0; display:block;}
  .visit-detail{margin-top:26px; display:grid; gap:10px;}
  .visit-detail a{text-decoration:none; font-weight:600; color:var(--pine);}
  @media (max-width:820px){ .visit-grid{grid-template-columns:1fr; gap:36px;} }

  /* ---------- book appointment ---------- */
  .book{position:relative; overflow:hidden; background:var(--pine-dark); color:#fff;}
  .book::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(65% 60% at 82% 8%, rgba(61,179,227,.24), transparent 64%);
  }
  .book .wrap{position:relative; z-index:1;}
  .book .section-head h2{color:#fff;}
  .book .section-head p{color:rgba(255,255,255,.78);}
  .book-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  .book-form{display:grid; gap:16px;}
  .field{display:grid; gap:6px;}
  .field label{font-size:.88rem; color:rgba(255,255,255,.75); font-weight:500;}
  .field input, .field select, .field textarea{
    font-family:var(--font-body); font-size:1rem; padding:14px 16px;
    border-radius:var(--radius); border:1px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.06); color:#fff;
    transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .field input:hover, .field textarea:hover{border-color:rgba(255,255,255,.4);}
  .field input:focus, .field textarea:focus{
    outline:none; border-color:var(--pine); background:rgba(255,255,255,.1);
    box-shadow:0 0 0 4px rgba(61,179,227,.22);
  }
  .field textarea{resize:vertical; min-height:90px;}
  .field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.45);}
  .book-note{font-size:.85rem; color:rgba(255,255,255,.6); margin-top:2px;}
  .book-confirm{
    display:none; padding:16px 18px; border-radius:var(--radius);
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3);
    margin-top:14px; font-size:.95rem;
  }
  .book-confirm.show{display:block;}
  .book-alt{border-left:1px solid rgba(255,255,255,.18); padding-left:56px;}
  .book-alt h3{color:#fff; margin-bottom:10px;}
  .book-alt p{color:rgba(255,255,255,.78);}
  .book-alt .book-cta{margin:4px 0 0;}
  .book-alt-divider{height:1px; background:rgba(255,255,255,.18); margin:30px 0 26px;}
  .book-alt .phone-big{
    display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
    font-size:1.9rem; color:#BEE7F7; text-decoration:none; margin:8px 0 22px;
  }
  @media (max-width:880px){
    .book-grid{grid-template-columns:1fr; gap:36px;}
    .book-alt{border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.18); padding-top:32px;}
  }

  /* ---------- footer ---------- */
  footer.site{background:var(--pine-dark); color:rgba(255,255,255,.7); padding:48px 0 28px; border-top:1px solid rgba(255,255,255,.1);}
  .footer-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; padding-bottom:32px;}
  .footer-brand .logo-mark{height:52px; background-color:#fff;}
  .footer-brand p{color:rgba(255,255,255,.6); margin-top:10px; max-width:32ch;}
  .footer-links{display:flex; gap:56px; flex-wrap:wrap;}
  .footer-col h3{font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.5); font-weight:600; margin-bottom:14px;}
  .footer-col a{display:block; color:rgba(255,255,255,.78); text-decoration:none; font-size:.95rem; margin-bottom:10px;}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    border-top:1px solid rgba(255,255,255,.12); padding-top:22px; font-size:.85rem; color:rgba(255,255,255,.5);
  }
  .footer-bottom a{text-decoration:underline; color:rgba(255,255,255,.6);}
  .social-row{display:flex; gap:14px;}
  .social-row a{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;}
  .social-row svg{width:16px; height:16px;}

  /* ---------- read-more link out of the homepage bio ---------- */
  .doctor .read-more{margin-top:10px;}
  .read-more svg{flex:none; transition:transform .25s var(--ease);}
  .read-more:hover svg{transform:translateX(3px);}

  /* ---------- FAQ ---------- */
  .faq{background:var(--bg-alt);}
  .faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start;}
  .faq-head{position:sticky; top:110px;}
  .faq-head h2{margin-bottom:16px;}
  .faq-more{margin:22px 0 0; color:var(--ink-soft);}
  .faq-more a{color:var(--gold-dark); font-weight:600; text-decoration:none;}
  .faq-more a:hover{text-decoration:underline;}
  .faq-list{display:grid; gap:12px;}
  .faq-item{
    background:var(--white); border:1px solid var(--line-soft);
    border-radius:var(--radius); box-shadow:var(--shadow-sm);
    transition:box-shadow .25s var(--ease);
  }
  .faq-item[open]{box-shadow:var(--shadow-md);}
  .faq-item summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:20px 22px; font-weight:600; font-size:1.02rem; color:var(--pine-dark);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary:focus-visible{outline:3px solid var(--gold); outline-offset:-3px; border-radius:var(--radius);}
  /* plus that turns into a minus */
  .faq-item summary i{
    flex:none; position:relative; width:26px; height:26px; border-radius:50%;
    background:var(--blue-tint); transition:background-color .25s var(--ease);
  }
  .faq-item summary i::before,
  .faq-item summary i::after{
    content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; border-radius:2px;
    background:var(--gold-dark); transform:translate(-50%,-50%);
    transition:transform .3s var(--ease), background-color .25s var(--ease);
  }
  .faq-item summary i::after{transform:translate(-50%,-50%) rotate(90deg);}
  .faq-item[open] summary i{background:var(--pine);}
  .faq-item[open] summary i::before,
  .faq-item[open] summary i::after{background:#fff;}
  .faq-item[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg);}
  .faq-a{padding:0 22px 20px; color:var(--ink-soft);}
  .faq-a p{margin:0 0 .8em; max-width:none;}
  .faq-a p:last-child{margin-bottom:0;}
  .faq-a ul{margin:0 0 .8em; padding-left:1.15em; display:grid; gap:6px;}
  .faq-a strong{color:var(--ink);}
  .faq-a a{color:var(--gold-dark); font-weight:600;}
  @media (max-width:900px){
    .faq-grid{grid-template-columns:1fr; gap:32px;}
    .faq-head{position:static;}
  }

  /* ---------- inner-page hero (bio page) ---------- */
  .page-hero{
    position:relative; overflow:hidden; color:#fff;
    padding:168px 0 76px;
    background:linear-gradient(118deg, #16303F 0%, #1E4356 34%, #2C93BE 74%, #3DB3E3 100%);
  }
  .page-hero::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(60% 80% at 82% 10%, rgba(190,231,247,.30), transparent 62%),
      radial-gradient(70% 90% at 8% 100%, rgba(20,40,54,.55), transparent 66%);
  }
  .page-hero .wrap{position:relative; z-index:1;}
  .page-hero h1{
    font-size:clamp(2.4rem, 1.5rem + 3.6vw, 3.9rem);
    color:#fff; letter-spacing:-.025em; line-height:1.03;
  }
  .page-hero .page-sub{color:rgba(255,255,255,.86); margin:16px 0 0; font-size:1.12rem;}
  .crumbs{margin:0 0 22px; font-size:.86rem; color:rgba(255,255,255,.66);}
  .crumbs a{color:rgba(255,255,255,.92); text-decoration:none;}
  .crumbs a:hover{text-decoration:underline;}
  .crumbs span{margin:0 8px;}

  /* ---------- bio page body ---------- */
  .bio{background:var(--bg);}
  .bio-grid{display:grid; grid-template-columns:340px 1fr; gap:64px; align-items:start;}
  .bio-aside{position:sticky; top:110px; display:grid; gap:20px;}
  .bio-photo{
    aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
    background:var(--blue-tint); box-shadow:var(--shadow-md);
  }
  .bio-photo img{width:100%; height:100%; object-fit:cover;}
  .bio-facts{
    background:var(--bg-alt); border:1px solid var(--line-soft);
    border-radius:var(--radius-lg); padding:22px 24px;
  }
  .bio-facts h2{
    font-family:var(--font-body); font-size:.76rem; font-weight:600;
    letter-spacing:.13em; text-transform:uppercase; color:var(--gold-dark); margin:0 0 14px;
  }
  .bio-facts dl{margin:0; display:grid; gap:13px;}
  .bio-facts dt{font-weight:600; color:var(--ink); font-size:.9rem;}
  .bio-facts dd{margin:1px 0 0; color:var(--ink-soft); font-size:.9rem; line-height:1.45;}
  .bio-intro{font-size:1.2rem; color:var(--ink); max-width:60ch; margin:0 0 40px;}
  .bio-block + .bio-block{margin-top:40px; padding-top:38px; border-top:1px solid var(--line);}
  .bio-block h2{font-size:clamp(1.45rem, 1.2rem + .9vw, 1.85rem); margin:0 0 14px;}
  .bio-block p{font-size:1.04rem; color:var(--ink-soft);}
  .bio-block p:last-child{margin-bottom:0;}
  @media (max-width:900px){
    .bio-grid{grid-template-columns:1fr; gap:40px;}
    .bio-aside{position:static; max-width:420px;}
  }

  /* ---------- bio page closing call to action ---------- */
  .bio-cta{padding:70px 0; background:var(--pine-dark); color:#fff; position:relative; overflow:hidden;}
  .bio-cta::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(60% 90% at 90% 0%, rgba(61,179,227,.26), transparent 64%);
  }
  .bio-cta .wrap{position:relative; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
  .bio-cta h2{color:#fff; margin:0 0 8px;}
  .bio-cta p{color:rgba(255,255,255,.78); margin:0;}
  .bio-cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

  /* ---------- service pages ---------- */
  .page-hero--svc h1{font-size:clamp(2.1rem, 1.4rem + 3vw, 3.4rem); max-width:18ch;}
  .svc{background:var(--bg);}
  .svc-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:64px; align-items:start;}
  .svc-body{max-width:68ch;}
  .svc-block + .svc-block, .svc-note + .svc-block{margin-top:38px; padding-top:36px; border-top:1px solid var(--line);}
  .svc-block h2{font-size:clamp(1.4rem, 1.15rem + .9vw, 1.8rem); margin:0 0 14px;}
  .svc-block p, .svc-block li{font-size:1.04rem; color:var(--ink-soft); line-height:1.65;}
  .svc-block p:last-child{margin-bottom:0;}
  .svc-block:first-child > p:first-child{font-size:1.18rem; color:var(--ink);}
  .svc-block ul{margin:0 0 18px; padding:0; list-style:none; display:grid; gap:8px;}
  .svc-block li{position:relative; padding-left:24px;}
  .svc-block li::before{
    content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px;
    border-radius:50%; background:var(--pine); box-shadow:0 0 0 4px var(--blue-tint);
  }
  .svc-block li strong{color:var(--ink);}
  .svc-body a:not(.btn){color:var(--gold-dark); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
  .svc-body a:not(.btn):hover{color:var(--pine-dark);}
  .svc-note{
    margin:36px 0 0; padding:14px 18px; font-size:.92rem; color:var(--ink-soft);
    background:var(--bg-alt); border-left:3px solid var(--pine); border-radius:0 var(--radius) var(--radius) 0;
  }
  .svc-aside{position:sticky; top:110px; display:grid; gap:20px;}
  .svc-card{
    display:grid; gap:12px; padding:26px 24px;
    background:var(--white); border:1px solid var(--line-soft);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  }
  .svc-card h2, .svc-related h2{
    font-family:var(--font-body); font-size:.76rem; font-weight:600;
    letter-spacing:.13em; text-transform:uppercase; color:var(--gold-dark); margin:0;
  }
  .svc-card > p{margin:0 0 4px; color:var(--ink-soft); font-size:.92rem;}
  .svc-card .btn{width:100%; justify-content:center;}
  .svc-card dl{margin:8px 0 0; padding-top:14px; border-top:1px solid var(--line-soft); display:grid; gap:12px;}
  .svc-card dt{font-weight:600; font-size:.86rem;}
  .svc-card dd{margin:2px 0 0; color:var(--ink-soft); font-size:.9rem; line-height:1.45;}
  .svc-card dd a{text-decoration:none;}
  .svc-card dd a:hover{color:var(--gold-dark); text-decoration:underline;}
  .svc-related{
    padding:22px 24px; background:var(--bg-alt);
    border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  }
  .svc-related ul{list-style:none; margin:12px 0 14px; padding:0; display:grid; gap:2px;}
  .svc-related li a{display:block; padding:6px 0; color:var(--ink); text-decoration:none; font-size:.95rem;}
  .svc-related li a:hover{color:var(--gold-dark);}
  .svc-all{display:inline-flex; align-items:center; gap:6px; color:var(--gold-dark); font-weight:600; font-size:.9rem; text-decoration:none;}
  .svc-all svg{width:16px; height:16px; transition:transform .25s var(--ease);}
  .svc-all:hover svg{transform:translateX(3px);}
  @media (max-width:900px){
    .svc-grid{grid-template-columns:1fr; gap:48px;}
    .svc-aside{position:static; max-width:520px;}
  }

  /* ---------- services index ---------- */
  .svc-index{background:var(--bg-alt);}
  .svc-cat + .svc-cat{margin-top:72px;}
  .svc-cat-head{max-width:60ch; margin-bottom:26px;}
  .svc-cat-head h2{margin:0 0 8px; font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);}
  .svc-cat-head p{margin:0; color:var(--ink-soft);}
  .svc-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px;}
  .svc-tile{
    position:relative; display:block; padding:22px 48px 22px 22px; text-decoration:none;
    background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  .svc-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(61,179,227,.4);}
  .svc-tile h3{font-size:1.06rem; margin:0 0 6px;}
  .svc-tile p{margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5;}
  .svc-tile svg{position:absolute; right:18px; top:22px; width:18px; height:18px; color:var(--pine);
    transition:transform .3s var(--ease);}
  .svc-tile:hover svg{transform:translateX(3px);}

  /* homepage service rows and "also offered" items are links now */
  a.service-row, a.also-item{text-decoration:none; color:inherit;}
  a.also-item{display:block; border-radius:var(--radius); margin:-8px -10px; padding:8px 10px; transition:background-color .25s var(--ease);}
  a.also-item:hover{background:var(--bg-alt);}
  a.also-item:hover h3{color:var(--gold-dark);}
  .services-call{color:var(--ink-soft); font-size:.95rem; text-decoration:none;}
  .services-call:hover{color:var(--gold-dark); text-decoration:underline;}

  /* ---------- membership page ---------- */
  .plans{background:var(--bg-alt);}
  .plan-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; align-items:start;}
  .plan{
    display:grid; gap:2px; padding:34px 32px;
    background:var(--white); border:1px solid var(--line-soft);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  }
  .plan h2{font-size:1.5rem; margin:0;}
  .plan-ages{margin:0; color:var(--ink-soft); font-size:.95rem;}
  .plan-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin:18px 0 0;}
  .plan-from{
    width:100%; font-size:.76rem; font-weight:600; letter-spacing:.13em;
    text-transform:uppercase; color:var(--gold-dark);
  }
  .plan-price strong{
    font-family:var(--font-display); font-weight:500; letter-spacing:-.03em;
    font-size:clamp(2.6rem, 2rem + 2.2vw, 3.4rem); color:var(--pine-dark); line-height:1;
  }
  .plan-per{color:var(--ink-soft);}
  .plan ul{
    list-style:none; margin:22px 0 26px; padding:22px 0 0; display:grid; gap:10px;
    border-top:1px solid var(--line-soft);
  }
  .plan li{position:relative; padding-left:26px; color:var(--ink-soft); font-size:.98rem;}
  .plan li::before{
    content:""; position:absolute; left:2px; top:.42em; width:12px; height:7px;
    border-left:2px solid var(--pine); border-bottom:2px solid var(--pine);
    transform:rotate(-45deg);
  }
  .plan .btn{justify-content:center;}
  .plan-notes{
    margin-top:26px; padding:24px 28px; background:var(--white);
    border:1px solid var(--line-soft); border-left:3px solid var(--pine);
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  }
  .plan-notes h2, .plan-next h2{
    font-family:var(--font-body); font-size:.76rem; font-weight:600;
    letter-spacing:.13em; text-transform:uppercase; color:var(--gold-dark); margin:0 0 12px;
  }
  .plan-notes ul{margin:0; padding-left:20px; display:grid; gap:8px;}
  .plan-notes li{color:var(--ink-soft); font-size:.94rem;}
  .plan-next{margin-top:56px; max-width:68ch;}
  .plan-next h2{font-size:1rem; letter-spacing:0; text-transform:none; font-family:var(--font-display);
    font-weight:500; color:var(--pine-dark); margin-bottom:14px;}
  .plan-next p{color:var(--ink-soft); font-size:1.04rem; line-height:1.65;}
  .plan-next a{color:var(--gold-dark); text-decoration:underline; text-underline-offset:3px;}
  @media (max-width:760px){
    .plan-grid{grid-template-columns:1fr;}
    .plan{padding:28px 24px;}
  }
  .price-block .price-sub{margin-top:10px; font-size:.86rem; color:rgba(255,255,255,.8);}
  .membership-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .membership-ask{color:rgba(255,255,255,.85); font-size:.95rem; text-decoration:none;}
  .membership-ask:hover{color:#fff; text-decoration:underline;}
  .footer-legal{display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px 20px;}
  .footer-legal a{color:inherit; text-decoration:none; white-space:nowrap;}
  .footer-legal a:hover{color:rgba(255,255,255,.85); text-decoration:underline;}
  /* a hairline between the links, dropped when they wrap onto their own lines */
  .footer-legal a + a{position:relative;}
  .footer-legal a + a::before{
    content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
    width:1px; height:11px; background:rgba(255,255,255,.22);
  }
  @media (max-width:600px){
    .footer-bottom{flex-direction:column; align-items:flex-start; gap:14px;}
  }

  /* honeypot: off-screen rather than display:none, which some bots skip */
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}