/* Lenis smooth scroll — required setup CSS */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }

:root{
    --cream: #FDFBF7;
    --cream-deep: #F1E9D8;
    --ink: #26312A;
    --ink-soft: #5B6B60;
    --clay: #B85C38;
    --clay-deep: #96431F;
    --sage: #7A9A85;
    --olive: #5F8D7F;
    --gold-line: #D6D8C6;
    --white: #FFFFFF;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.serif{font-family:'Fraunces', serif;}
  .mono{font-family:'JetBrains Mono', monospace;}
  a{color:inherit;}
  img{max-width:100%;display:block;}

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 5vw;
    background:transparent;
    backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:padding .3s ease, background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  nav.scrolled{
    /* background:rgba(246,240,228,0.9); */
    background: #ADADAD;
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--gold-line);
  }
  .logo{display:flex; align-items:center; text-decoration:none;}
  .logo img{height:40px; width:auto; display:block; transition:filter .3s ease;}
  nav.scrolled .logo img{filter:brightness(0.35) saturate(1.3);}
  .nav-links{display:flex; gap:36px; list-style:none;}
  .nav-links a{
    font-size:0.92rem; text-decoration:none; 
    /* color:rgba(255,244,230,0.78); */
    color: darkslategray;
    position:relative; padding-bottom:4px; transition:color .3s ease;
  }
  nav.scrolled .nav-links a{color:white;}
  .nav-links a::after{
    content:''; position:absolute; bottom:0; left:0; width:0; height:1px;
    background:#F2A868; transition:width .25s ease;
  }
  nav.scrolled .nav-links a::after{background:var(--clay);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    background:darkslategray; color:#F7ECDD; padding:10px 22px;
    border:2px solid lightgray; border-radius:5px; font-size:0.88rem; text-decoration:none;
    letter-spacing:0.3px; transition:background .25s ease, border-color .25s ease, color .3s ease;
  }
  .nav-cta:hover{background:rgba(255,244,230,0.12); border-color:rgba(255,244,230,0.8);}
  nav.scrolled .nav-cta{background:var(--ink); color:var(--white); border-color:var(--ink);}
  nav.scrolled .nav-cta:hover{background:var(--clay-deep); border-color:var(--clay-deep);}
  .nav-overlay{
    display:none; position:fixed; inset:0; z-index:140;
    background:rgba(26,9,4,0.45); backdrop-filter:blur(2px);
    opacity:0; transition:opacity .3s ease;
  }
  .nav-overlay.open{display:block; opacity:1;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; display:flex; align-items:center; min-height: 100vh;
    /* background: #2A1006;
    background: radial-gradient(120% 110% at 62% 48%, #C1551F 0%, #8C3814 30%, #4A1A0B 60%, #200C05 100%); */
    background: url('./assets/banner/banner2_1.png') center center / cover no-repeat;
    /* background:
  radial-gradient(ellipse 60% 45% at 55% 20%, #e8e9ea 0%, rgba(232,233,234,0) 70%),
  radial-gradient(ellipse 70% 40% at 55% 78%, rgba(220,222,224,0.85) 0%, rgba(220,222,224,0) 65%),
  linear-gradient(180deg, #c9cbce 0%, #b7b9bc 50%, #cdd0d2 100%); */
    padding:132px 5vw 96px; overflow:hidden;
  }


  .hero-left{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }

  .hero-pair-1{
    position: absolute;
    top: 15%;
    left: 5vw;
    pointer-events: all;
  }
  .hero-pair-2{
    position: absolute;
    top: 70%;
    left: 5vw;
    transform: translateY(-50%);
    max-width: 800px;
    display: flex;
    flex-direction: column;
    pointer-events: all;
  }
  .hero-pair-3{
    position: absolute;
    top: 11%;
    right: 5%;
    max-width: 560px;
    pointer-events: all;
    text-align: right;
  }


  #hero-canvas{
    position:fixed; top:0; left:0%; width:100vw; height:100vh;
    pointer-events:none; z-index:1;
  }

  #hero-loader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  #hero-loader.hidden{
    opacity: 0;
    pointer-events: none;
  }
  .hero-loader-gif{
    width: 120px;
    height: 120px;
    object-fit: contain;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

.hero-content-blur {
  transition: filter 0.6s ease;
  filter: blur(8px);
}
.hero-content-blur.loaded {
  filter: blur(0px);
}

  .hero-brand{display:flex; flex-direction:column; gap:10px; margin-bottom:30px;}
  .hero-brand-logo{height:38px; width:auto; display:block;}
  .hero-brand-name {
    /* Use 'Anton' or fallback to the system font 'Impact' */
      font-family: 'Playwrite ID', cursive;

    
    /* Text styling */
    font-size: 2rem; /* Adjust size as needed */
    font-weight: 900;
    color: whitesmoke; /* Pure white interior filling */
    text-transform: none;
    letter-spacing: 1px;
    line-height: 0.5;
    text-shadow: 3px 4px 6px grey;
    
    /* The Outline Effect (Purple) */
    /* -webkit-text-stroke: 1px grey; */
     /* Width and Color of the border */
  }
  .hero-brand-name .accent{color:darkslateblue;
  /* -webkit-text-stroke: 0.5px white;  */
  /* Width and Color of the border */
  font-size: 0.8rem;
  }
  .eyebrow{
    font-family: 'bebas neue';
    font-weight:1000; font-size:3rem; letter-spacing:2px;
    text-transform:uppercase;
    /* color:#F7ECDD; */
    color: black;
    margin-bottom:22px; display:flex; align-items:baseline; flex-wrap:wrap;
  }
  .eyebrow-sub{
    display:block;
    width:100%;
    font-family: 'bebas neue', bold;
    font-weight:1000;
    font-size:2rem;
    letter-spacing:3.5px;
    /* color:rgba(247,236,221,0.65); */
    color: black;
    margin-top:6px;
    line-height:0;
  }
.drop-cap-d {
  position: relative;
  left: 15px;
  font-family: 'Pinyon Script', cursive;
  font-size: 2.2em;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  vertical-align: -0.35em;
  margin-right: 2px;

  padding-right: 0.3em; /* ← fixes the clipped swash */
  display: inline-block; /* ← required for padding to work on inline elements */

background: linear-gradient(135deg, black 0%, black 30%, #FFF0A0 55%, #C8860A 75%, #7B4F12 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
  .hero h1{
    font-size:clamp(2.6rem, 5.2vw, 4.1rem); font-weight:500; line-height:1.05;
    letter-spacing:-1px; 
    /* color:#E3A874; */
    color: darkslategray;
  }
  .hero h1 em{font-style:normal; 
    /* color:#FBF3E7;  */
    color: darkslategray;
    font-weight:600;}
  .hero p.lead{
    margin-top:24px; font-size:0.95rem; 
    /* color:rgba(255,244,230,0.68);  */
    /* color: #717171; */
    color: white;
    max-width:600px;
  }
  .lead-short { display: none; }
  .lead-full  { display: block; }
  .lead-toggle{ display: none; } /* only shown at breakpoints that truncate, below */

  /* Toggled-open state — works at ANY breakpoint that's currently
     truncating, without being repeated inside every media query. This
     selector's specificity (two classes) is higher than the plain
     single-class .lead-short/.lead-full rules above and inside each
     media query, so it always wins over whichever one is currently
     active, regardless of source order. */
  .lead.is-expanded .lead-full{ display: inline; }
  .lead.is-expanded .lead-short{ display: none; }
  
  .hero-actions{display:flex; gap:18px; margin-top:40px; align-items:center; flex-wrap:wrap;}
  .btn-primary{
    background:var(--clay); color:var(--white); padding:15px 32px; text-decoration:none;
    border-radius:2px; font-size:0.95rem; font-weight:500; letter-spacing:0.3px;
    transition:transform .25s ease, background .25s ease; display:inline-block;
  }
  .btn-primary:hover{background:var(--clay-deep); transform:translateY(-2px);}
  .btn-ghost{
    text-decoration:none; color:#FBF3E7; font-size:0.92rem; border-bottom:1px solid rgba(255,244,230,0.5);
    padding-bottom:3px;
  }
  /* ---------- HERO STATS — GLASSMORPHISM CARDS ---------- */
  .hero-stats{
    position: absolute;
    right: 5vw;
    top: 70%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 2;
    width: 170px;
    isolation: isolate; /* contains repaint/blur recompute to this layer instead of the whole hero */
  }

  .stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 22px 20px 18px;
    width: 100%;
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 60%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.28),
      0 1px 4px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
    cursor: default;
    contain: layout style paint;
    will-change: transform;
    transition: transform 350ms cubic-bezier(.22,.68,0,1.05), background 350ms ease;
  }

  .stat-card:hover {
    transform: translateY(-10px) scale(1.10);
  }

  /* Elevated shadow on hover is a separate, pre-painted layer that only
     fades opacity in/out (compositor-only — no per-frame box-shadow
     repaint, which is what was fighting the WebGL render loop). */
  .stat-card::before{
    content:'';
    position:absolute; inset:0; border-radius:20px;
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.28),
      0 6px 16px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
    opacity:0;
    transition:opacity 350ms ease;
    pointer-events:none;
    z-index:-1;
  }

  /* Subtle glow ring on hover */
  .stat-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 23px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }

  .stat-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
    transition: opacity 350ms ease, transform 350ms ease;
  }
  .stat-card:hover .stat-img {
    opacity: 0.18;
  }

  .stat-num {
    font-family: 'Fraunces', serif;
    font-size: 2.1rem;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: -1px;
    display: block;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
    transition: color 350ms ease, text-shadow 350ms ease;
  }
  .stat-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    /* color: rgba(255, 244, 230, 0.72); */
    color: white;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
  }

  /* ---------- SECTION SHELL ---------- */
  section{padding:144px clamp(24px, 7.5vw, 144px); position:relative;}
  .tooth-dock{
    position:absolute; width:190px; height:190px; pointer-events:none;
  }
  #toothDockServices{ top:4%; right:25%; height: 450px; width: 450px; }
  #toothDockWhy{ top:1%; right:30%; height: 450px; width: 450px; }
  #toothDockTestimonials{ top:10%; right:24%; height: 300px; width: 300px;}
  #toothDockBooking{ top:8%; left:10%; height: 150px; width: 300px;}
  .section-head{max-width:640px; margin-bottom:64px;}
  .section-head .eyebrow{color:darkslategray}
  .section-head h2{ color: darkslategray; font-size:clamp(2rem, 3.4vw, 2.8rem); font-weight:500; letter-spacing:-0.5px;}
  .section-head p{color:#717171; margin-top:16px; font-size:1.02rem; max-width:520px;}

  /* ---------- ABOUT ---------- */
  .about{background:whitesmoke; display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; position:relative;}
  #toothDockAbout{
    bottom:30%; right:0; height: 400px; width: 400px;
  }


  /* ---------- ABOUT CAROUSEL ---------- */
  .about-carousel{
    aspect-ratio:4/5;
    border-radius:4px;
    position:relative;
    overflow:hidden;
    background:var(--cream-deep);
  }
  .about-carousel img{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 0.7s ease;
    pointer-events:none;
  }
  .about-carousel img.active{
    opacity:1;
  }
  .about-carousel-dots{
    position:absolute;
    bottom:14px; left:50%;
    transform:translateX(-50%);
    display:flex; gap:7px;
    z-index:2;
  }
  .about-carousel-dots span{
    width:7px; height:7px;
    border-radius:50%;
    background:rgba(255,255,255,0.45);
    transition:background 0.3s ease, transform 0.3s ease;
    cursor:pointer;
  }
  .about-carousel-dots span.active{
    background:#fff;
    transform:scale(1.25);
  }

  .about-text .eyebrow{color:var(--sage);}
  .about-text h2{ font-size:2rem; margin-bottom:22px; font-weight:500;}
  .about-text p{color:var(--ink-soft); margin-bottom:16px; max-width:520px;}
  .creds{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}
  .cred-pill{
    border:1px solid var(--gold-line); padding:8px 16px; border-radius:20px;
    font-size:0.82rem; font-family:'JetBrains Mono', monospace; color:var(--ink-soft);
  }

  /* ---------- SERVICES ---------- */
  #services {
    background: url('./assets/banner/banner2_1.png') center center / cover no-repeat;
  }
  .services-grid{
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap:2px; 
    /* background:var(--gold-line);  */
    /* border:1px solid var(--gold-line);  */
    border-radius: 5px;
  }

  .service-card{
    background:whitesmoke; position:relative; min-height:230px;
    overflow:hidden; contain:layout paint style; margin: 5px; border-radius: 8px;
    touch-action:manipulation; /* skip synthetic-hover/tap-delay handling on mobile */
  }

  /* Text layer — always visible, slides left on hover */
  .card-front{
    padding:32px 28px; display:flex; flex-direction:column;
    position:relative; z-index:1; height:100%; min-height:230px;
    transition:transform 0.45s cubic-bezier(.4,0,.2,1), opacity 0.35s ease;
  }

  /* Image panel — starts clipped off the right edge, slides in to cover 75%.
     Holds a real <img> (native browser preloading/decoding) instead of a
     CSS background-image, so the photo is fetched the moment the browser
     parses the HTML — well before any JS runs — and painted using the
     browser's own decode pipeline rather than a manual decode() hack. */
  .card-back{
    position:absolute; inset:0; left:25%;          /* anchored to right 75% */
    overflow:hidden;
    transform:translateX(100%);                     /* starts hidden off-right */
    transition:transform 0.45s cubic-bezier(.4,0,.2,1);
    z-index:2;
  }
  .card-back-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
    pointer-events:none; user-select:none;
  }
  .card-back-gradient{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to right, rgba(20,10,4,0.72) 0%, rgba(20,10,4,0.1) 60%, transparent 100%);
  }
  .card-back .card-back-label{
    position:absolute; bottom:22px; left:18px; z-index:1; color:#FBF3E7;
    font-family:'Fraunces', serif; font-size:1.0rem; font-weight:500;
    writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:1px;
    opacity:0; transform:translateY(8px);
    transition:opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
  }


  /* Hover states — pure translateX, cheapest GPU path */
  @media (hover: hover){
    .service-card:hover .card-front{
      transform:translateX(-18%); opacity:0.55;
    }
    .service-card:hover .card-back{
      transform:translateX(0);
    }
    .service-card:hover .card-back .card-back-label{
      opacity:1; transform:translateY(0);
    }
  }
  /* Touch tap-to-reveal fallback */
  .service-card.revealed .card-front{transform:translateX(-18%); opacity:0.55;}
  .service-card.revealed .card-back{transform:translateX(0);}
  .service-card.revealed .card-back .card-back-label{opacity:1; transform:translateY(0);}
  .service-card:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }

  .service-num{font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--sage); margin-bottom:24px; display:block;}
  .service-card h3{font-size:1.3rem; font-weight:500; margin-bottom:12px;}
  .service-card p{font-size:0.92rem; color:var(--ink-soft);}
  .service-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
    user-select: none;
    pointer-events: none;
}

  /* ---------- SERVICE CATEGORY TABS ---------- */
  .tab-nav{
    display:flex; gap:8px; margin-bottom:36px;
    /* border-bottom:1px solid rgba(255,255,255,0.35); */
    border-bottom: rebeccapurple;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tab-nav::-webkit-scrollbar{ display:none; }
  .tab-btn{
    flex:0 0 auto; background:none; border:none; cursor:pointer;
    font-family:'Work Sans', sans-serif; font-size:1.2rem; font-weight:500;
    color:whitesmoke; padding:12px 18px; position:relative;
    letter-spacing:0.2px; white-space:nowrap; transition:color .25s ease;
  }
  .tab-btn::after{
    content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
    background:rebeccapurple; transform:scaleX(0); transition:transform .25s ease;
  }
  .tab-btn:hover{ color:#fff; }
  .tab-btn.active{ color:rebeccapurple; font-weight:600; }
  .tab-btn.active::after{ transform:scaleX(1); }
  .tab-btn:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }

  /* Panels: default hidden state set inline via style/JS so responsive
     display (grid on desktop/tablet, flex-column on phone) never fights
     a hardcoded display value here — this block only handles the fade. */
  .tab-panel.tab-panel-enter{ animation:tabFadeIn .4s ease both; }
  @keyframes tabFadeIn{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
  }

  @media (max-width: 640px){
    .tab-nav{ gap:4px; margin-bottom:24px; }
    .tab-btn{ font-size:0.78rem; padding:10px 12px; }
    .lead-short { display: inline; }
    .lead-full  { display: none; }
    .lead-toggle{ display: inline; }
  }

  /* ---------- WHY / TIMELINE ---------- */
  .why{
    /* background:var(--olive);  */
    background-color: #5b6467;
    background-image: linear-gradient(315deg, #5b6467 0%, #8b939a 74%);
    color:var(--cream);
  }
  .why .section-head p{color:#DCE7DE;}
  .why .eyebrow{color:white;}
  .timeline{display:flex; flex-direction:column; gap:0; position:relative;}
  .tl-row{
    display:grid; grid-template-columns:120px 1fr 2fr; gap:30px; padding:26px 0;
    border-top:1px solid rgba(255,253,248,0.15); align-items:baseline;
    position:relative;
  }
  .tl-row:last-child{border-bottom:1px solid rgba(255,253,248,0.15);}
  .tl-year{font-family:'JetBrains Mono', monospace; color:darkslategray; font-size:0.95rem;}
  .tl-title{font-family:'Fraunces', serif; font-size:1.15rem;}
  .tl-desc{color:#D3DED7; font-size:0.92rem;}

  /* Connects timeline rows earned from the same institution as a small
     tree: one vertical trunk (the university) with a short horizontal
     branch reaching out to each certificate's own dot. */
  .tl-row.tl-linked{ --tl-rail-x:95px; --tl-dot-x:135px; }

  .tl-row.tl-linked::before{ /* vertical trunk */
    content:'';
    position:absolute;
    left:var(--tl-rail-x);
    top:0; bottom:0;
    width:2px;
    background:white;
  }
  .tl-row.tl-linked-start::before{ top:50%; } /* trunk starts at the university row */
  .tl-row.tl-linked-end::before{ bottom:50%; } /* trunk ends at the last branch */

  .tl-row.tl-linked::after{ /* horizontal branch, trunk → this row's dot */
    content:'';
    position:absolute;
    left:var(--tl-rail-x);
    top:50%; transform:translateY(-50%);
    width:calc(var(--tl-dot-x) - var(--tl-rail-x));
    height:2px;
    background:white;
  }

  .tl-node-dot{
    position:absolute;
    left:calc(135px - 4px); top:50%; transform:translateY(-50%);
    width:9px; height:9px; border-radius:50%;
    background:#F0B98F;
    box-shadow:0 0 0 3px rgba(240,185,143,0.25);
    z-index:1;
  }
  /* The trunk's source — larger marker on the university row itself */
  .tl-row.tl-linked-start .tl-node-dot{
    left:calc(var(--tl-rail-x) - 6px);
    width:13px; height:13px;
    background:#F2C79E;
    box-shadow:0 0 0 4px rgba(242,199,158,0.3);
  }

  .tl-linked-label{
    grid-column:1 / -1;
    font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.5px;
    color:rgba(240,185,143,0.85); text-transform:uppercase; margin-top:6px; display:block;
  }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials{background:whitesmoke;}
  .testimonials-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}

  /* Slider shell */
  .t-slider{display:flex; flex-direction:column; gap:14px;}
  .t-slider-controls{display:flex; gap:8px; justify-content:flex-end;}
  .t-slider-viewport{overflow:hidden; width:100%; min-width:0;}
  .t-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1);}
  .t-card{
    background:var(--white); padding:34px 30px; border-radius:3px; border:1px solid var(--gold-line);
    flex:0 0 100%; width:100%; box-sizing:border-box; margin-right:0;
  }
  .t-quote{font-family:'Fraunces', serif; font-size:1.1rem; font-style:italic; color:var(--ink); line-height:1.5;}
  .t-author{margin-top:22px; font-size:0.85rem; color:var(--ink-soft); font-family:'JetBrains Mono', monospace;}

  .t-arrow{
    flex-shrink:0; width:46px; height:46px; border-radius:50%;
    background:var(--white); border:1px solid var(--gold-line); color:var(--ink);
    font-size:1.3rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .t-arrow:hover{background:var(--clay); border-color:var(--clay); color:var(--white);}
  .t-arrow:disabled{opacity:0.35; cursor:default; background:var(--white); color:var(--ink); border-color:var(--gold-line);}

  .t-dots{display:flex; gap:8px; justify-content:center; margin-top:24px;}
  .t-dots span{
    width:7px; height:7px; border-radius:50%; background:var(--gold-line);
    transition:background .3s ease, transform .3s ease; cursor:pointer;
  }
  .t-dots span.active{background:var(--clay); transform:scale(1.25);}

  /* Inline "Leave a Review" button (replaces the old floating FAB) */
  .review-fab{
    background:var(--clay); color:var(--white); border:none; border-radius:2px;
    padding:12px 22px; font-size:0.9rem; font-weight:500; letter-spacing:0.3px;
    font-family:'Work Sans', sans-serif; cursor:pointer; white-space:nowrap;
    transition:background .25s ease, transform .2s ease;
  }
  .review-fab:hover{ background:var(--clay-deep); transform:translateY(-2px); }

  /* ---------- BOOKING ---------- */
  .booking{background:var(--white);}
  .booking-wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px;}
  .booking-info h2{font-size:2rem; margin-bottom:20px;}
  .booking-info p{color:var(--ink-soft); margin-bottom:30px; max-width:420px;}
  .info-row{display:flex; gap:16px; margin-bottom:22px; align-items:flex-start;}
  .info-row svg{width:20px; height:20px; stroke:var(--clay); fill:none; stroke-width:1.6; margin-top:3px; flex-shrink:0;}
  .info-row .info-label{font-size:0.78rem; color:var(--sage); font-family:'JetBrains Mono', monospace; letter-spacing:0.5px;}
  .info-row .info-val{font-size:0.98rem;}

  /* ---------- SOCIAL ORBIT ---------- */
  .social-orbit{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
  .social-orbit li{
    position:relative; list-style:none; width:52px; height:52px; background:var(--white);
    box-shadow:0 10px 25px rgba(38,49,42,0.12); border-radius:52px; cursor:pointer;
    display:flex; justify-content:center; align-items:center; transition:0.5s; overflow:hidden;
  }
  .social-orbit li::before{
    content:""; position:absolute; inset:0; border-radius:52px;
    background:linear-gradient(45deg, var(--i), var(--j)); opacity:0; transition:0.5s;
  }
  .social-orbit li::after{
    content:""; position:absolute; top:10px; width:100%; height:100%; border-radius:52px;
    background:linear-gradient(45deg, var(--i), var(--j)); transition:0.5s; filter:blur(15px); z-index:-1; opacity:0;
  }
  .social-orbit li ion-icon{color:var(--ink-soft); font-size:1.5em; transition:0.5s; transition-delay:0.25s;}
  .social-orbit li span{position:absolute;}
  .social-orbit li .title{
    color:#fff; font-size:0.82em; font-family:'JetBrains Mono', monospace; letter-spacing:0.1em;
    text-transform:uppercase; transform:scale(0); transition:0.5s; transition-delay:0s;
  }
  .social-orbit li a {
    display: contents;
    color: inherit;
    text-decoration: none;
  }

  /* Hover-expand choreography (pill widens, icon fades, title reveals) —
     real hover devices only. On touch this whole interaction is skipped:
     no expand, no fade, nothing to wait on. A tap just follows the link
     immediately, like a normal link, instead of "hovering" first. */
  @media (hover: hover){
    .social-orbit li:hover{width:150px; box-shadow:0 10px 25px rgba(38,49,42,0);}
    .social-orbit li:hover::before{opacity:1;}
    .social-orbit li:hover::after{opacity:0;}
    .social-orbit li:hover ion-icon{transform:scale(0); color:#fff; transition-delay:0s;}
    .social-orbit li:hover .title{transform:scale(1); transition-delay:0.25s;}
  }
  /* Belt-and-suspenders: zero out every transition on touch devices so
     nothing animates before the tap's native navigation, even if some
     browser-applied state (e.g. a lingering :active) would otherwise
     trigger one. */
  @media (hover: none){
    .social-orbit li,
    .social-orbit li::before,
    .social-orbit li::after,
    .social-orbit li ion-icon,
    .social-orbit li .title{
      transition:none;
    }
  }
  

  form.appointment{
    background:var(--cream); border:1px solid var(--gold-line); padding:42px; border-radius:4px;
  }
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  .field.full{grid-column:1/-1;}
  label{font-size:0.78rem; font-family:'JetBrains Mono', monospace; color:var(--ink-soft); letter-spacing:0.3px;}
  input, select, textarea{
    border:1px solid var(--gold-line); background:var(--white); padding:12px 14px;
    font-family:'Work Sans', sans-serif; font-size:0.94rem; color:var(--ink); border-radius:2px;
    outline:none; transition:border-color .2s ease;
  }
  input:focus, select:focus, textarea:focus{border-color:var(--clay);}
  textarea{resize:vertical; min-height:80px;}

  /* ---------- Custom "Service Needed" dropdown ---------- */
  .custom-select{ position:relative; }
  .custom-select-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    border:1px solid var(--gold-line); background:var(--white); padding:12px 14px;
    font-family:'Work Sans', sans-serif; font-size:0.94rem; color:var(--ink);
    border-radius:10px; cursor:pointer; text-align:left;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .custom-select-trigger:hover{border-color:var(--clay);}
  .custom-select-trigger:focus-visible,
  .custom-select-trigger[aria-expanded="true"]{
    border-color:var(--clay); box-shadow:0 0 0 3px rgba(184,92,56,0.14);
  }
  .custom-select-value{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft);
  }
  .custom-select-trigger.has-value .custom-select-value{ color:var(--ink); }
  .custom-select-arrow{
    width:16px; height:16px; flex-shrink:0; color:var(--ink-soft);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .custom-select-trigger[aria-expanded="true"] .custom-select-arrow{ transform:rotate(180deg); color:var(--clay); }

  .custom-select-options{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
    background:var(--white); border:1px solid var(--gold-line); border-radius:12px;
    box-shadow:0 16px 40px rgba(38,29,20,0.16); padding:6px; max-height:260px; overflow-y:auto;
    list-style:none; margin:0;
    transform-origin:top center;
    animation:selectOpen .18s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes selectOpen{
    from{ opacity:0; transform:translateY(-6px) scale(.98); }
    to  { opacity:1; transform:translateY(0) scale(1); }
  }
  .custom-select-options[hidden]{ display:none; }
  .custom-select-options li{
    padding:10px 12px; border-radius:8px; font-size:0.9rem; color:var(--ink);
    cursor:pointer; transition:background-color .15s ease, color .15s ease;
  }
  .custom-select-options li:hover,
  .custom-select-options li.is-active{ background:rgba(184,92,56,0.1); }
  .custom-select-options li[aria-selected="true"]{
    background:var(--clay); color:var(--white); font-weight:500;
  }
  .custom-select-options li[aria-selected="true"].is-active{ background:var(--clay-deep); }
  .slots{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px;}
  .slot{
    border:1px solid var(--gold-line); background:var(--white); text-align:center; padding:9px 4px;
    font-size:0.8rem; font-family:'JetBrains Mono', monospace; cursor:pointer; border-radius:2px;
    transition:all .18s ease; color:var(--ink-soft);
  }
  .slot:hover{border-color:var(--clay);}
  .slot.selected{background:var(--clay); color:var(--white); border-color:var(--clay);}
  .slot.disabled{
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
  }
  .submit-btn{
    width:100%; background:var(--ink); color:var(--white); padding:16px; border:none;
    border-radius:2px; font-size:0.98rem; font-family:'Work Sans',sans-serif; font-weight:500;
    cursor:pointer; margin-top:8px; transition:background .25s ease; letter-spacing:0.3px;
  }
  .submit-btn:hover{background:var(--clay-deep);}
  .confirm-box{
    display:none; text-align:center; padding:50px 20px;
  }
  .confirm-box.show{display:block;}
  .confirm-box svg{width:52px; height:52px; stroke:var(--sage); fill:none; stroke-width:1.4; margin:0 auto 20px;}
  .confirm-box h3{font-family:'Fraunces', serif; font-size:1.5rem; margin-bottom:10px;}
  .confirm-box p{color:var(--ink-soft); font-size:0.94rem;}
  .form-svg{ height: 150px; width: 150px; display:block; margin: 0 auto 12px; }

  /* ---------- FOOTER ---------- */
  footer{
    /* background:var(--olive);  */
    background-color: #5b6467;
    background-image: linear-gradient(315deg, #5b6467 0%, #8b939a 74%);
    color:var(--cream); 
    padding:60px 5vw 30px;
  }
  .footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.15);}
  .footer-brand-block{display:flex; flex-direction:column; gap:8px;}
  .footer-brand{font-family:'Fraunces', serif; font-size:1.4rem;}
  .footer-brand span{color:var(--clay);}
  .footer-admin-link{font-size:0.78rem; color:#AABDB2; text-decoration:none; width:fit-content; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease;}
  .footer-admin-link:hover{color:var(--cream); border-bottom-color:#AABDB2;}
  .footer-links{display:flex; gap:60px; flex-wrap:wrap;}
  .footer-col h4{font-size:0.8rem; letter-spacing:1px; text-transform:uppercase; color:#F0B98F; margin-bottom:16px; font-weight:500;}
  .footer-col a{display:block; font-size:0.9rem; color:#DCE7DE; text-decoration:none; margin-bottom:10px;}
  .footer-col a:hover{color:var(--cream);}
  .footer-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:0.8rem; color:#AABDB2; flex-wrap:wrap; gap:10px;}

  /* ---------- RESPONSIVE ---------- */
  /* TABLET: keeps the exact desktop structure (multi-column grids, sidebar
     stats, nav links, Journey section, full 3D docking across all sections)
     — nothing here converts to a stacked/mobile layout, it's purely scale-
     down so the same design fits comfortably on tablet-sized screens. */

@media (min-width: 641px) and (max-width: 1180px){
    nav{padding:18px 4vw;}
    .logo img{height:40px;}
    .nav-links{gap:24px;}
    section{padding:96px clamp(24px, 6vw, 96px);}
    .hero{padding-top:110px; padding-bottom:72px; min-height:60vh;}
    /* Docking disabled at this width too now (see isMobileNoDock in
       index.js) — without this, the canvas would stay position:fixed at
       full-viewport size (its base rule) instead of settling into the
       hero, since nothing repositions it anymore once docking is off. */
    #hero-canvas{
      position:absolute; top:0; left:0; width:100%; height:100%;
    }
    .hero-left{ max-width: 100vw; }
    .hero-pair-1 {top: 20%;}
    .hero-pair-2 {top: 65%;}
    .hero-pair-3 {top: 11%;}
    .hero-pair-3 h1 {font-size: 2.7rem;}
    .hero-brand-name{font-size:1.5rem;}
    .hero-brand-name .accent{font-size:0.7rem;}
    .eyebrow{font-size:1.7rem;}
    .eyebrow-sub{font-size:1.2rem;}
    .drop-cap-d{font-size:2.5em; line-height:1; color: navy;}
    .hero p.lead{font-size:0.96rem; max-width:65%;}
    .lead-full  { display: block; }
    .hero-stats{ right:3vw; width:145px; gap:11px; }
    .stat-card{ padding:16px 14px 14px; border-radius:16px; }
    .stat-num{ font-size:1.65rem; }
    .stat-label{ font-size:0.62rem; letter-spacing:1.1px; }
    .stat-icon{ font-size:1.25rem; margin-bottom:1px; }
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .about{gap:40px;}
    #toothDockAbout{width:280px; height:280px;}
    #toothDockServices{width:300px; height:300px; right:8%;}
    #toothDockWhy{width:300px; height:300px; right:8%;}
    #toothDockTestimonials{width:220px; height:220px;}
    #toothDockBooking{width:220px; height:220px;}
  }

  @media (max-width: 900px){
    .about { display: flex; flex-direction: column; }
    .about-text { display: flex; flex-direction: column;}
    .booking-wrap{display:flex; flex-direction:column; gap:48px;}
    .booking-info p{max-width:100%;}
    .hero{min-height: 65vh;}
    .hero-pair-3 h1 { font-size: 2.7rem; }
    .about-carousel{
      width: 70%;
      aspect-ratio: 9/16;
      max-height: 520px;
    }
    .why{ display: block; }
    .tl-year{ font-size: 0.85rem; }
    .tl-title{ font-size: 1rem; }
    .tl-desc{ font-size: 0.86rem; }
  }

  @media (max-width: 768px){
    .lead-short { display: inline; }
    .lead-full  { display: none; }
    .lead-toggle{ display: inline; }
  }

  /* PHONE: same structure as desktop/tablet, scaled down further, 50vh hero */
  @media (max-width: 640px){
  nav{padding:14px 4vw;}
  .logo img{height:34px;}
  .nav-links{
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    position:fixed; top:0; right:0; height:100vh; width:min(76vw, 300px);
    background:var(--cream); box-shadow:-12px 0 40px rgba(0,0,0,0.25);
    padding:96px 32px 32px; z-index:150;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links li{width:100%;}
  .nav-links a{
    display:block; width:100%; padding:16px 0; font-size:1.05rem;
    color:var(--ink) !important; border-bottom:1px solid var(--gold-line);
  }
  nav.scrolled .nav-links a{color:var(--ink) !important;}
  .nav-links a::after{display:none;}
  .nav-cta{padding:8px 14px; font-size:0.78rem;}
    section{padding:64px clamp(20px, 6vw, 64px);}
    .hero{padding-top:90px; padding-bottom:120px; min-height:55vh;}
    /* Tooth no longer travels between sections on mobile (see isMobileNoDock
       in index.js) — position:fixed would otherwise keep it pinned to the
       viewport regardless of scroll. Anchoring it to .hero itself (which
       already has position:relative) lets it scroll away naturally once
       the hero section passes, instead of floating in place over content
       below it. */
    #hero-canvas{
      position:absolute; top:0; left:0; width:100%; height:100%;
    }
    .hero-left{ max-width: 100vw; transform: none; }
    .hero-brand-name{font-size:1rem;}
    .hero-brand-name .accent{font-size:0.6rem;}
    .hero p.lead{display:none;}
    .hero-stats{
      position: absolute;
      right: auto;
      top: auto;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      flex-direction: row;
      gap: 8px;
      max-width: 96vw;
    }
    .stat-card{
      flex-direction: column;
      align-items: center;
      padding: 12px 14px 10px;
      border-radius: 14px;
      width: auto;
      min-width: 88px;
      gap: 8px;
    }
    .stat-icon{ font-size: 1.1rem; margin-bottom: 1px; }
    .stat-num{ font-size: 1.35rem; letter-spacing: -0.5px; }
    .stat-label{ font-size: 0.58rem; letter-spacing: 1px; }

    .eyebrow{font-size:1.5rem;}
    .eyebrow-sub { font-size: 0.8rem; }
    .drop-cap-d{font-size: 3rem;}

    .hero-pair-1 { top: 15%; }
    .hero-pair-2 { top: 55%; }
    .hero-pair-3 { top: 12%; width: 45%;}
    .hero-pair-3 h1{ font-size: 1rem; }
    .hero p.lead{ display: block; font-size: 0.7rem; width: 70%;}

    .hero-actions{ gap: 12px; margin-top: 20px; }
    .btn-primary{ padding: 10px 10px; font-size: 0.6rem; }
    .btn-ghost{ font-size: 0.78rem; }

    .lead-short { display: inline; }
    .lead-full  { display: none; }
    .lead-toggle{ display: inline; }

    .services-grid{display: flex; flex-direction: column;}
    .booking-wrap{display: flex; flex-direction: column;}
    .about{display: flex; flex-direction: column; gap:24px;}

    .services-grid{display: flex; flex-direction: column; gap: 10px; background: transparent; border: none;}
    .service-card{min-height: 110px; border-radius: 4px;}
    .card-front{padding: 22px 24px; min-height: 110px; flex-direction: column; justify-content: center;}
    .card-front .service-num{margin-bottom: 8px;}
    .card-front .service-icon{margin-bottom: 10px;}
    .card-front h3{margin-bottom: 4px; font-size: 1.05rem;}
    .card-front p{font-size: 0.84rem;}
    .card-back{left: 35%;}
    .tab-btn{ color: grey; }

    .form-row{grid-template-columns:1fr;}
    .slots{grid-template-columns:repeat(2,1fr);}
    #toothDockAbout{width:160px; height:160px;}
    #toothDockServices{width:180px; height:180px; right:6%;}
    #toothDockWhy{width:180px; height:180px; right:6%;}
    #toothDockTestimonials{width:140px; height:140px;}
    #toothDockBooking{width:140px; height:140px;}

    .why{ display: block; }
    .tl-year{ font-size: 0.78rem; }
    .tl-title{ font-size: 0.95rem; }
    .tl-desc{ font-size: 0.82rem; text-align: right;}
  }

  @media (max-width: 400px){
  .hero{ padding-bottom: 130px; min-height: 60vh;}
  .about-carousel{ aspect-ratio: 9/16; max-height: 300px; }
  .hero-actions{ gap: 10px; margin-top: 16px; }
  .btn-primary{ padding: 9px 16px; font-size: 0.78rem; }
  .btn-ghost{ font-size: 0.74rem; }
  .hero-stats{ gap: 6px; bottom: 16px; }
  .stat-card{ min-width: 80px; padding: 10px 10px 9px; border-radius: 13px; }
  .stat-num{ font-size: 1.2rem; }
  .stat-label{ font-size: 0.54rem; letter-spacing: 0.9px; }
  .hero-pair-1 { top: 17%; }
  .hero-pair-2 { top: 60%; }
  .hero-pair-3 h1{ font-size: 1rem; }
  .hero-brand-name{ font-size: 1rem; }
  .hero-brand-name .accent { font-size: 0.6rem; }
  .eyebrow{ font-size: 1.2rem; letter-spacing: 2px; }
  .drop-cap-d{ font-size: 2.5rem; }
  .lead-short { display: inline; }
  .lead-full  { display: none; }
  .lead-toggle{ display: inline; }
  .tab-btn{ color: grey; }
  .why{ display: block; }
  .tl-row{ gap: 3px; padding: 14px 0; }
  .tl-year{ font-size: 0.72rem; }
  .tl-title{ font-size: 0.88rem; margin-left: 25px; width: 70%;}
  .tl-desc{ display: none; font-size: 0.78rem; }
}

  @media (max-width: 375px){
  nav{ padding: 10px 3.5vw; }
  .logo img{ height: 30px; }
  .nav-cta{ padding: 7px 11px; font-size: 0.74rem; }
  section{ padding: 56px 18px; }
  .hero{ padding-top: 78px; padding-bottom: 125px; min-height: 58vh; }
  .hero-pair-1{ top: 16%; }
  .hero-pair-2{ top: 58%; }
  .hero-pair-3{ width: 50%; }
  .hero-pair-3 h1{ font-size: 0.95rem; }
  .hero-brand-name{ font-size: 1rem; }
  .hero-brand-name .accent{ font-size: 0.6rem; }
  .eyebrow{ font-size: 1.1rem; letter-spacing: 1.5px; }
  .drop-cap-d{ font-size: 2.2rem; }
  .hero p.lead{ font-size: 0.64rem; width: 68%; }
  .hero-actions{ gap: 8px; margin-top: 14px; }
  .btn-primary{ padding: 8px 13px; font-size: 0.68rem; }
  .btn-ghost{ font-size: 0.68rem; }
  .hero-stats{ gap: 5px; bottom: 15px; }
  .stat-card{ min-width: 78px; padding: 10px 9px 8px; border-radius: 12px; }
  .stat-num{ font-size: 1.18rem; }
  .stat-label{ font-size: 0.53rem; letter-spacing: 0.85px; }
  .lead-short { display: inline; }
  .lead-full  { display: none; }
  .lead-toggle{ display: inline; }
  .about{ padding: 52px 18px; gap: 20px; }
  .about-carousel{ max-height: 220px; }
  .about-text h2{ font-size: 1.3rem; }
  .about-text p{ font-size: 0.82rem; }
  .cred-pill{ font-size: 0.72rem; padding: 6px 10px; }
  .card-front{ padding: 20px 18px; min-height: 220px; }
  .service-card h3{ font-size: 1rem; }
  .service-card p{ font-size: 0.82rem; }
  .tab-btn{ color: grey; }
  form.appointment{ padding: 24px 16px; }
  .slots{ grid-template-columns: repeat(2,1fr); gap: 5px; }
  .slot{ font-size: 0.7rem; padding: 7px 2px; }
  .tl-year{ font-size: 0.7rem; }
  .tl-title{ font-size: 0.85rem; }
  .tl-desc{ font-size: 0.76rem; }
  .t-card{ padding: 20px 16px; }
  .t-quote{ font-size: 0.9rem; }
  .footer-bottom{ flex-direction: column; gap: 6px; font-size: 0.74rem; }
  #toothDockAbout{ width: 125px; height: 125px; }
  #toothDockServices{ width: 145px; height: 145px; right: 4%; }
  #toothDockWhy{ width: 145px; height: 145px; right: 4%; }
  #toothDockTestimonials{ width: 115px; height: 115px; }
  #toothDockBooking{ width: 115px; height: 115px; }
}

  @media (max-width: 349px){
    nav{padding:10px 3vw;}
    .logo img{height:28px;}
    .nav-cta{padding:6px 10px; font-size:0.72rem; letter-spacing:0;}
    section{padding:52px 16px;}
    .hero{padding-top:72px; padding-bottom:36px; min-height:55vh;}
    .hero-brand-name{font-size:1rem;}
    .hero-brand-name .accent{ font-size: 0.5rem; }
    .hero h1{font-size:clamp(1.7rem, 8vw, 2.2rem); letter-spacing:-0.5px;}
    .hero p.lead{ font-size: 0.6rem; }
    .hero-pair-3 h1{ font-size: 0.9rem; }
    .hero-actions{ gap: 12px; margin-top: 20px; }
    .btn-primary{ padding: 10px 10px; font-size: 0.6rem; }
    .btn-ghost{ font-size: 0.6rem; }
    .section-head{margin-bottom:40px;}
    .section-head h2{font-size:clamp(1.4rem, 7vw, 1.8rem);}
    .section-head p{font-size:0.9rem;}
    .about{padding:52px 16px;}
    .creds{gap:8px;}
    .cred-pill{font-size:0.72rem; padding:6px 12px;}
    .card-front{padding:28px 20px; min-height:260px;}
    .card-back{left:30%;}
    .service-card{min-height:260px;}
    .service-card h3{font-size:1.1rem;}
    .service-card p{font-size:0.84rem;}
    .service-num{margin-bottom:16px;}
    .service-icon{width:30px; height:30px; margin-bottom:14px;}
    .tab-btn{ color: grey; }
    .tl-row{grid-template-columns:1fr; gap:6px; padding:18px 0;}
    .tl-year{font-size:0.78rem;}
    .tl-title{font-size:0.3rem; margin-left: 90px; text-align: right;}
    .tl-desc{display:none}
    .t-card{padding:24px 18px; margin-right:0;}
    .t-quote{font-size:0.96rem;}
    .t-arrow{width:38px; height:38px; font-size:1.1rem;}
    .booking-wrap{gap:40px;}
    form.appointment{padding:28px 18px;}
    .form-row{grid-template-columns:1fr;}
    .slots{grid-template-columns:repeat(2,1fr); gap:6px;}
    .slot{font-size:0.72rem; padding:8px 2px;}
    .social-orbit li:hover{width:130px;}
    .footer-top{gap:28px;}
    .footer-links{gap:32px;}
    .footer-brand{font-size:1.1rem;}
    .footer-col a{font-size:0.82rem;}
    .footer-bottom{flex-direction:column; gap:6px; font-size:0.74rem;}
    #toothDockAbout{width:120px; height:120px;}
    #toothDockServices{width:140px; height:140px; right:4%;}
    #toothDockWhy{width:140px; height:140px; right:4%;}
    #toothDockTestimonials{width:110px; height:110px;}
    #toothDockBooking{width:110px; height:110px;}
    .why{ display: block; }
    .tl-row{ gap: 2px; padding: 12px 0; }
    .tl-year{ font-size: 0.68rem; }
    .tl-title{ font-size: 0.82rem; }
    .tl-desc{ font-size: 0.74rem; }
    .hero-stats{ gap:5px; bottom:14px; }
    .stat-card{ min-width:74px; padding:10px 10px 8px; border-radius:12px; }
    .stat-icon{ font-size:0.95rem; }
    .stat-num{ font-size:1.15rem; }
    .stat-label{ font-size:0.52rem; letter-spacing:0.8px; }
    .lead-short { display: inline; }
    .lead-full  { display: none; }
    .lead-toggle{ display: inline; }
  }

  @media (max-width: 320px){
  nav{ padding: 9px 3vw; }
  .logo img{ height: 26px; }
  .nav-cta{ padding: 5px 9px; font-size: 0.7rem; letter-spacing: 0; }
  section{ padding: 48px 14px; }
  .hero{ padding-top: 68px; padding-bottom: 120px; min-height: 75vh; }
  .hero-pair-1{ top: 15%; }
  .hero-pair-2{ top: 56%; }
  .hero-pair-3{ width: 48%; }
  .hero-pair-3 h1{ font-size: 0.85rem; }
  .hero-brand-name{ font-size: 0.95rem; }
  .hero-brand-name .accent{ font-size: 0.5rem; }
  .eyebrow{ font-size: 1rem; letter-spacing: 1px; }
  .drop-cap-d{ font-size: 2rem; }
  .hero p.lead{ font-size: 0.6rem; width: 65%; }
  .hero-actions{ gap: 7px; margin-top: 12px; }
  .btn-primary{ padding: 7px 11px; font-size: 0.62rem; }
  .btn-ghost{ font-size: 0.62rem; }
  .hero-stats{ gap: 4px; bottom: 13px; }
  .stat-card{ min-width: 70px; padding: 9px 8px 7px; border-radius: 11px; }
  .stat-num{ font-size: 1.05rem; }
  .stat-label{ font-size: 0.5rem; letter-spacing: 0.7px; }
  .lead-short { display: inline; }
  .lead-full  { display: none; }
  .lead-toggle{ display: inline; }
  .about{ padding: 48px 14px; gap: 18px; }
  .about-carousel{ max-height: 220px; }
  .about-text h2{ font-size: 1.15rem; }
  .about-text p{ font-size: 0.78rem; }
  .cred-pill{ font-size: 0.68rem; padding: 5px 9px; }
  .card-front{ padding: 18px 14px; min-height: 200px; }
  .card-back{ left: 28%; }
  .service-card h3{ font-size: 0.92rem; }
  .service-card p{ font-size: 0.78rem; }
  .service-icon{ width: 26px; height: 26px; margin-bottom: 10px; }
  .tab-btn{ color: grey; }
  form.appointment{ padding: 20px 14px; }
  .slots{ grid-template-columns: repeat(2,1fr); gap: 4px; }
  .slot{ font-size: 0.66rem; padding: 6px 2px; }
  .tl-year{ font-size: 0.66rem; }
  .tl-title{ font-size: 0.8rem; margin-left: 90px; text-align: right;}
  .tl-desc{ display: none; }
  .t-card{ padding: 18px 14px; margin-right: 0; }
  .t-quote{ font-size: 0.84rem; }
  .t-arrow{ width: 34px; height: 34px; font-size: 1rem; }
  .footer-brand{ font-size: 1rem; }
  .footer-col a{ font-size: 0.78rem; }
  .footer-bottom{ font-size: 0.7rem; }
  #toothDockAbout{ width: 110px; height: 110px; }
  #toothDockServices{ width: 125px; height: 125px; right: 3%; }
  #toothDockWhy{ width: 125px; height: 125px; right: 3%; }
  #toothDockTestimonials{ width: 100px; height: 100px; }
  #toothDockBooking{ width: 100px; height: 100px; }
  .why{ display: block; }
  .tl-row{ gap: 2px; padding: 10px 0; }
}


  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- REVIEW MODAL ---------- */
  .review-modal-overlay{
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(26,9,4,0.65); backdrop-filter:blur(4px);
    align-items:center; justify-content:center;
  }
  .review-modal-overlay.open{ display:flex; }
  .review-modal{
    background:var(--cream); border-radius:6px; padding:44px 40px;
    width:100%; max-width:480px; position:relative;
    box-shadow:0 24px 60px rgba(0,0,0,0.3);
    animation:modalIn .3s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes modalIn{
    from{ opacity:0; transform:scale(0.92) translateY(16px); }
    to  { opacity:1; transform:scale(1)    translateY(0);     }
  }
  .review-modal-close{
    position:absolute; top:16px; right:18px;
    background:none; border:none; font-size:1.4rem; color:var(--ink-soft);
    cursor:pointer; line-height:1; transition:color .2s ease;
  }
  .review-modal-close:hover{ color:var(--clay); }
  .review-modal h3{
    font-family:'Fraunces',serif; font-size:1.45rem; font-weight:500;
    color:var(--ink); margin-bottom:6px;
  }
  .review-modal .modal-sub{
    font-size:0.82rem; color:var(--ink-soft); font-family:'JetBrains Mono',monospace;
    letter-spacing:0.3px; margin-bottom:28px;
  }
  .review-modal .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
  .review-modal label{
    font-size:0.75rem; font-family:'JetBrains Mono',monospace;
    color:var(--ink-soft); letter-spacing:0.4px; text-transform:uppercase;
  }
  .review-modal input,
  .review-modal textarea{
    border:1px solid var(--gold-line); background:var(--white);
    padding:11px 14px; font-family:'Work Sans',sans-serif;
    font-size:0.93rem; color:var(--ink); border-radius:2px;
    outline:none; transition:border-color .2s ease;
  }
  .review-modal input:focus,
  .review-modal textarea:focus{ border-color:var(--clay); }
  .review-modal textarea{ resize:vertical; min-height:90px; }

  /* Star rating */
  .star-row{ display:flex; gap:6px; flex-direction:row-reverse; justify-content:flex-end; }
  .star-row input[type="radio"]{ display:none; }
  .star-row label{
    font-size:1.5rem; color:var(--gold-line); cursor:pointer;
    transition:color .15s ease; font-family:inherit; letter-spacing:0;
    text-transform:none; padding:0;
  }
  .star-row input[type="radio"]:checked ~ label,
  .star-row label:hover,
  .star-row label:hover ~ label{ color:#F2A868; }

  .review-submit-btn{
    width:100%; background:var(--ink); color:var(--white); padding:14px;
    border:none; border-radius:2px; font-size:0.95rem;
    font-family:'Work Sans',sans-serif; font-weight:500;
    cursor:pointer; margin-top:6px; transition:background .25s ease;
    letter-spacing:0.3px;
  }
  .review-submit-btn:hover{ background:var(--clay-deep); }

  /* New review card animation */
  .t-card{ transition:opacity .6s ease, transform .6s ease; }
  .t-card.card-enter{
    animation:cardSlideIn .5s cubic-bezier(.34,1.2,.64,1) both;
  }
  .t-card.card-exit{
    animation:cardFadeOut .6s ease forwards;
  }
  @keyframes cardSlideIn{
    from{ opacity:0; transform:translateY(20px); }
    to  { opacity:1; transform:translateY(0); }
  }
  @keyframes cardFadeOut{
    from{ opacity:1; transform:scale(1); }
    to  { opacity:0; transform:scale(0.92); }
  }