:root{
    /* Back to the teal/gold identity, brightened: a whiter cream, a lighter
       teal tint, and a lighter slate charcoal than pure black so the whole
       site reads airier and more sunlit than either previous version. */
    --teal:#0B5D52;
    --teal-light:#127A6C;
    --charcoal:#1F2937;
    /* Fixed dark ink for bands meant to stay dark in both themes (offer
       band, footer, cookie banner, etc.) — --charcoal itself flips to a
       light color in dark mode since it also serves as body text color. */
    --ink:#1F2937;
    --gold:#C9A227;
    --cream:#FDFCF9;
    --teal-tint:#EEF8F6;
    --gray:#6B7280;
    --line:#E4E0D4;
    --paper:#FFFFFF;
    --max:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html.splash-locked, html.splash-locked body{overflow:hidden;height:100%;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--charcoal);
    font-family:'Inter',Arial,sans-serif;
    font-size:17px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-optical-sizing:auto;
    margin:0;
    line-height:1.08;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
  @media (max-width:640px){.wrap{padding:0 20px;}}

  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:var(--cream);
    border-bottom:1px solid var(--line);
  }

  /* On the homepage only: the nav floats transparent over the hero's photo
     (so the photo runs edge-to-edge behind it, like the reference site),
     then turns into the site's normal solid cream bar once the visitor
     scrolls past the hero (toggled by js/script.js). */
  header.header-on-photo{
    position:fixed;top:0;left:0;right:0;z-index:200;
    background:transparent;border-bottom-color:transparent;
    transition:background .3s ease, border-color .3s ease;
  }
  header.header-on-photo:not(.scrolled) .brand span,
  header.header-on-photo:not(.scrolled) .navlinks > a:not(.navcall),
  header.header-on-photo:not(.scrolled) .navcall{color:#fff;}
  header.header-on-photo:not(.scrolled) .navlinks a::after{background:#fff;}
  header.header-on-photo:not(.scrolled) .lang-toggle{border-color:rgba(255,255,255,.4);}
  header.header-on-photo:not(.scrolled) .lang-btn{color:#fff;}
  header.header-on-photo:not(.scrolled) .lang-btn.active{background:#fff;color:var(--charcoal);}
  header.header-on-photo:not(.scrolled) .burger span{background:#fff;}
  header.header-on-photo.scrolled{background:var(--cream);border-bottom-color:var(--line);}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
  .brand{display:flex;align-items:center;gap:10px;}
  .brand span{font-family:'Fraunces',serif;font-weight:700;font-size:19px;}
  .navlinks{display:flex;gap:10px;align-items:center;font-size:12.5px;}
  .navlinks a{position:relative;padding-bottom:3px;white-space:nowrap;}
  .navlinks a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--teal);
    transition:width .25s ease;
  }
  .navlinks a:hover::after{width:100%;}
  .navcall{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--teal);}
  /* Desktop nav's call/email — icon-only (no visible number/address) so the
     nav bar doesn't compete with the text links either side of it; the
     animated badge alone signals "call" / "email" and the aria-label
     carries the actual number for screen readers. */
  .nav-icon-link{padding-bottom:0;}
  .nav-icon-link::after{content:none;}
  .navlinks .btn{padding:8px 14px;white-space:nowrap;}
  @media (max-width:1300px){ .navlinks{display:none;} }

  .burger{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;
  }
  .burger span{display:block;width:100%;height:2px;background:var(--charcoal);transition:transform .2s ease, opacity .2s ease;}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media (max-width:1300px){ .burger{display:flex;} }

  .mobile-menu{
    display:none;flex-direction:column;gap:2px;
    background:var(--cream);border-top:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  /* On the homepage the header floats over the photo (position:fixed), so
     an open mobile menu overlays the hero below it rather than pushing it
     down — a shadow reads it as a distinct floating panel instead of
     looking like it just runs into the hero content underneath. */
  header.header-on-photo .mobile-menu.open{box-shadow:0 16px 32px rgba(0,0,0,.25);}
  .mobile-menu.open{max-height:400px;overflow-y:auto;}
  @media (max-width:1300px){ .mobile-menu{display:flex;} }
  .mobile-menu a{
    padding:14px 32px;border-bottom:1px solid var(--line);
    font-size:15.5px;font-weight:600;letter-spacing:.1px;color:var(--charcoal);
    transition:background-color .25s ease, color .2s ease, transform .25s cubic-bezier(.77,0,.175,1);
  }
  .mobile-menu a:last-child{border-bottom:none;}
  .mobile-menu a:hover, .mobile-menu a:focus-visible{background-color:var(--teal-tint);color:var(--teal);transform:translateX(8px);}
  .mobile-menu a:active{background-color:var(--teal);color:#fff;}

  /* Icon-only call/email buttons in the mobile menu — same spinning
     gold/teal ring + glow-on-hover language as the hero's .cta-arrow-box,
     so "contact us" reads as a CTA rather than another plain menu row. */
  .mm-contact-row{display:flex;gap:14px;padding:20px 32px 24px;border-bottom:1px solid var(--line);}
  .mm-contact-row .mm-contact-btn{
    width:50px;height:50px;padding:0;border-bottom:none;border-radius:100%;position:relative;overflow:hidden;flex:none;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.16);
    transition:transform .35s cubic-bezier(.77,0,.175,1), box-shadow .3s ease;
  }
  .mm-contact-btn::before{
    content:"";position:absolute;inset:-40%;border-radius:inherit;
    background:conic-gradient(from 0deg,var(--gold),var(--teal),var(--gold),var(--teal),var(--gold));
    animation:ctaSpin 3.5s linear infinite;
  }
  .mm-contact-icon{position:relative;z-index:1;width:21px;height:21px;color:#fff;}
  .mm-contact-btn:hover, .mm-contact-btn:focus-visible{transform:scale(1.12);box-shadow:0 0 20px 4px rgba(201,162,39,.5),0 0 20px 4px rgba(11,93,82,.35);}
  .mm-contact-btn:active{transform:scale(.92);}
  @media (prefers-reduced-motion:reduce){ .mm-contact-btn::before{animation:none;} }

  .btn{
    display:inline-block;
    background:var(--gold);
    color:var(--charcoal);
    font-weight:700;
    font-size:15px;
    padding:13px 26px;
    border-radius:100px;
    border:none;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(201,162,39,.35);
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .btn:hover{background:#B7911F;transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,162,39,.45);}
  .btn-outline{
    background:transparent;border:1.5px solid var(--charcoal);color:var(--charcoal);
  }
  .btn-outline:hover{background:var(--ink);color:#fff;}
  .btn-outline-light{background:transparent;border:1.5px solid #fff;color:#fff;}
  .btn-outline-light:hover{background:#fff;color:var(--charcoal);}

  /* ---------- SPLASH GATE (the family photo, shown once before the front page) ---------- */
  .splash-gate{
    position:fixed;inset:0;z-index:1000;cursor:pointer;
    overflow:hidden;background:#0A211D;
    transition:opacity .5s ease;
  }
  .splash-gate.splash-hide{opacity:0;pointer-events:none;}
  /* The animated teal/gold shader fills the letterboxed space left by
     .splash-photo's object-fit:contain below (so the mismatch between the
     photo's aspect ratio and the screen's never shows an empty bar), and
     the photo's own edges fade into it via a mask, instead of sitting on
     top as a hard-edged rectangle. */
  .splash-shader-bg{position:absolute;inset:0;overflow:hidden;}
  .splash-shader-bg canvas{display:block;width:100%;height:100%;}
  .splash-photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
    -webkit-mask-image:radial-gradient(ellipse 85% 85% at center,#000 65%,transparent 100%);
    mask-image:radial-gradient(ellipse 85% 85% at center,#000 65%,transparent 100%);
  }
  .splash-scrim{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.5) 100%);
  }
  .splash-content{
    position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    text-align:center;padding:0 24px 72px;color:#fff;
  }
  .splash-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
  .splash-brand svg{animation:splashLogoPop .8s cubic-bezier(.34,1.56,.64,1) both;}
  .splash-brand span{font-family:'Fraunces',serif;font-weight:700;font-size:24px;color:#fff;}
  @keyframes splashLogoPop{from{transform:scale(.3) rotate(-20deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
  .splash-tagline{font-size:17px;color:#F0EEE7;margin:0 0 26px;max-width:36ch;}
  .splash-enter{font-family:inherit;}

  /* Promo banner pinned to the top of the splash — a shimmering gold bar
     with a small sparkle SVG animating on each side, calling out the
     introductory price before anything else on the site. */
  .splash-promo{
    position:absolute;top:0;left:0;right:0;z-index:2;
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:13px 20px;text-align:center;
    background:linear-gradient(90deg,#B7911F,#E8C468,#C9A227,#E8C468,#B7911F);
    background-size:250% 100%;
    color:var(--charcoal);font-weight:800;font-size:14.5px;
    box-shadow:0 4px 18px rgba(0,0,0,.25);
    animation:splashPromoShine 5s linear infinite;
  }
  .splash-promo strong{font-size:16.5px;}
  .splash-promo-spark{width:19px;height:19px;flex:none;animation:splashPromoSpark 1.7s ease-in-out infinite;}
  .splash-promo-spark:last-child{animation-delay:.4s;}
  @keyframes splashPromoShine{0%{background-position:0% 50%;}100%{background-position:250% 50%;}}
  @keyframes splashPromoSpark{0%,100%{transform:scale(.85) rotate(0deg);opacity:.75;}50%{transform:scale(1.25) rotate(20deg);opacity:1;}}

  /* EN/FR toggle, sitting just below the promo banner. Clicks are stopped
     from bubbling to #splashGate (see js/i18n.js) so switching language
     never dismisses the splash. */
  .splash-lang{
    position:absolute;top:62px;right:16px;z-index:3;
    background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.35);
  }
  .splash-lang .lang-btn{color:#fff;}
  .splash-lang .lang-btn.active{background:#fff;color:var(--charcoal);}

  @media (max-width:640px){
    .splash-content{padding:0 20px 56px;}
    .splash-brand span{font-size:20px;}
    .splash-tagline{font-size:15px;}
    .splash-promo{padding:11px 14px;font-size:12.5px;gap:7px;}
    .splash-promo strong{font-size:14.5px;}
    .splash-promo-spark{width:16px;height:16px;}
    .splash-lang{top:52px;right:12px;}
  }
  @media (prefers-reduced-motion:reduce){
    .splash-gate{transition:none;}
    .splash-brand svg{animation:none;}
    .splash-promo{animation:none;}
    .splash-promo-spark{animation:none;}
  }

  /* ---------- HERO ---------- */
  .hero{padding:88px 0 96px;position:relative;overflow:hidden;background:var(--cream);}
  .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
  @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;} .hero{padding:56px 0 64px;} }

  /* #0A211D is the fallback if the photo can't load — a dark teal, not a
     jarring flash of plain white/cream behind the (still-loading) image.
     Scoped to .hero-photo (the homepage hero only) so every other page's
     plain hero keeps the site's normal light background instead. */
  .hero-photo{background:#0A211D;}

  /* The family photo, softly blurred behind the hero's text — scaled up so
     the blur's soft edges never show the section's border. A flat, fairly
     light overlay (not a directional gradient, which only looked right at
     wide desktop widths and went nearly opaque on a narrow phone screen)
     keeps the photo clearly recognizable at every viewport width; the text
     gets a shadow instead of relying on heavy darkening for contrast. */
  .hero-photo-bg{
    position:absolute;inset:0;z-index:0;
    background-image:url('../assets/images/family-with-dog.jpg');
    background-size:cover;background-position:center;
    filter:blur(4px) brightness(1.08);transform:scale(1.05);
  }
  @media (max-width:640px){
    /* Less extra zoom on a narrow screen, so more of the actual photo
       (not just the blur's safety margin) is visible rather than cropped. */
    .hero-photo-bg{transform:scale(1.02);}
  }
  .hero-photo-scrim{
    position:absolute;inset:0;z-index:0;
    background:rgba(10,33,29,.3);
  }

  .tag{
    display:inline-block;
    background:var(--teal-tint);
    color:var(--teal);
    font-weight:600;
    font-size:13.5px;
    padding:7px 16px;
    border-radius:100px;
    margin-bottom:22px;
  }
  .hero h1{font-size:56px;letter-spacing:-0.5px;}
  @media (max-width:640px){ .hero h1{font-size:38px;} }
  .hero h1 .accent-word{color:var(--gold);}
  .hero h1 .flag{
    display:inline-block;font-size:0.62em;vertical-align:0.08em;
    margin-left:2px;line-height:1;
  }
  .hero p.lede{font-size:18px;color:var(--gray);margin:22px 0 30px;max-width:46ch;}
  .ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
  .hero .contactline{margin-top:22px;font-size:14.5px;color:var(--gray);}

  /* Only the homepage hero (.hero-photo, the one with a photo background —
     see .hero-photo-bg below) needs this: its text/pill/outline button get
     a light variant instead of the site's usual charcoal-on-cream, plus a
     shadow to stay readable over the photo's own light/dark areas. Scoped
     to .hero-photo (not just .hero, which every other page's plain-cream
     hero also uses) and placed after the generic .hero rules above so it
     wins on the properties they share (color, on p.lede and .contactline)
     instead of being silently overridden by them. */
  .hero-photo .tag{background:rgba(255,255,255,.2);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.32);}
  .hero-photo h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.48);}
  .hero-photo p.lede{color:#F0EEE7;text-shadow:0 1px 8px rgba(0,0,0,.42);}
  .hero-photo .contactline{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.38);}
  .hero-photo .hero-cover-img{border-color:rgba(255,255,255,.25);}

  .contact-link{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:600;}
  .contact-link:hover{text-decoration:underline;}
  .contact-icon{width:13px;height:13px;flex:none;}
  .contact-sep{margin:0 6px;opacity:.6;}

  /* Shared animated call/email badge — the same spinning gold/teal ring as
     the mobile menu's icon buttons and the hero's cta-arrow, shrunk to sit
     inline in front of any phone number or email address sitewide, so
     "this is tappable, this reaches a real phone/inbox" reads the same
     everywhere instead of varying icon-by-icon. */
  .contact-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:100%;position:relative;overflow:hidden;flex:none;
    transition:transform .3s cubic-bezier(.77,0,.175,1);
  }
  .contact-badge::before{
    content:"";position:absolute;inset:-40%;border-radius:inherit;
    background:conic-gradient(from 0deg,var(--gold),var(--teal),var(--gold),var(--teal),var(--gold));
    animation:ctaSpin 3.5s linear infinite;
  }
  .contact-badge svg{position:relative;z-index:1;color:#fff;width:13px;height:13px;flex:none;}
  a:hover > .contact-badge{transform:scale(1.12);}
  /* Not every place this badge appears is a flex container with a gap
     (e.g. plain .btn labels) — give it its own right margin there instead
     of relying on the parent's spacing. */
  .btn .contact-badge{vertical-align:middle;margin-right:8px;}
  @media (prefers-reduced-motion:reduce){ .contact-badge::before{animation:none;} }

  .hero-cover-wrap{position:relative;}
  .hero-cover-img{width:100%;height:420px;object-fit:cover;border-radius:20px;border:1px solid var(--line);display:block;background:var(--charcoal);}
  .hero-cover-tag{
    position:absolute;left:20px;bottom:20px;right:20px;
    background:#fff;color:var(--charcoal);font-weight:700;font-size:14px;
    padding:11px 18px;border-radius:12px;box-shadow:0 8px 24px rgba(31,41,55,.16);
    max-width:calc(100% - 40px);
  }
  .hero-cover-badge{
    position:absolute;left:20px;top:20px;z-index:1;
    display:flex;align-items:center;gap:8px;
    background:rgba(11,93,82,.92);color:#fff;font-weight:700;font-size:13px;
    padding:8px 14px 8px 12px;border-radius:100px;box-shadow:0 8px 24px rgba(31,41,55,.2);
  }
  .hero-cover-dot{
    width:8px;height:8px;border-radius:100%;background:#ff5c5c;flex:none;
    animation:heroCoverPulse 1.6s ease-in-out infinite;
  }
  @keyframes heroCoverPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}}
  @media (prefers-reduced-motion:reduce){ .hero-cover-dot{animation:none;} }
  @media (max-width:860px){ .hero-cover-img{height:320px;} }
  @media (max-width:640px){
    .hero-cover-img{height:240px;}
    .hero-cover-tag{font-size:12.5px;padding:9px 14px;left:14px;right:14px;bottom:14px;}
    .hero-cover-badge{font-size:12px;padding:7px 12px 7px 10px;left:14px;top:14px;}
  }

  /* ---------- BEFORE / AFTER ---------- */
  .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  @media (max-width:860px){ .ba-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;} }
  .ba-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;}
  .ba-pair{display:grid;grid-template-columns:1fr 1fr;}
  .ba-pair figure{margin:0;position:relative;}
  .ba-pair img{width:100%;height:180px;object-fit:cover;display:block;}
  .ba-pair figcaption{
    position:absolute;top:8px;left:8px;
    font-family:'Inter',Arial,sans-serif;font-size:11px;font-weight:700;
    letter-spacing:1.5px;padding:4px 9px;border-radius:100px;color:#fff;
    pointer-events:none;
  }
  .ba-pair .before figcaption{background:rgba(31,41,55,.75);}
  .ba-pair .after figcaption{background:var(--teal);}
  .ba-label{padding:14px 16px;font-weight:600;font-size:15px;color:var(--charcoal);}
  .ba-cta{text-align:center;margin-top:44px;}

  /* photo is clickable: zoom-in cursor + a subtle expand icon on hover/focus */
  .ba-pair button.photo-btn{
    all:unset;display:block;position:relative;cursor:zoom-in;width:100%;
  }
  .ba-pair button.photo-btn:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
  .ba-pair button.photo-btn::after{
    content:"";position:absolute;inset:0;
    background:rgba(31,41,55,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/22px no-repeat;
    opacity:0;transition:opacity .15s ease, background-color .15s ease;
  }
  .ba-pair button.photo-btn:hover::after,
  .ba-pair button.photo-btn:focus-visible::after{
    opacity:1;background-color:rgba(31,41,55,.35);
  }

  /* ---------- PHOTO LIGHTBOX ---------- */
  .lightbox{
    position:fixed;inset:0;background:rgba(20,24,20,.92);
    display:flex;align-items:center;justify-content:center;
    z-index:300;padding:56px 20px;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .lightbox.show{opacity:1;pointer-events:auto;}
  .lightbox-fig{margin:0;max-width:min(90vw,900px);text-align:center;}
  .lightbox-fig img{
    display:block;max-width:100%;max-height:76vh;width:auto;height:auto;
    border-radius:6px;margin:0 auto;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
  }
  .lightbox-fig figcaption{margin-top:14px;color:#E8E6DF;font-size:14.5px;}
  .lightbox-close, .lightbox-prev, .lightbox-next{
    position:absolute;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.3);
    color:#fff;border-radius:100px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease;
  }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:rgba(255,255,255,.2);}
  .lightbox-close{top:20px;right:20px;width:42px;height:42px;font-size:22px;line-height:1;}
  .lightbox-prev, .lightbox-next{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:22px;}
  .lightbox-prev{left:12px;}
  .lightbox-next{right:12px;}
  @media (max-width:640px){
    .lightbox{padding:72px 12px 32px;}
    .lightbox-prev, .lightbox-next{width:38px;height:38px;}
    .lightbox-prev{left:6px;}
    .lightbox-next{right:6px;}
  }

  /* fade-up load sequence */
  .fade{opacity:0;transform:translateY(14px);animation:fadeUp .7s ease forwards;}
  .fade.d1{animation-delay:.05s;}
  .fade.d2{animation-delay:.18s;}
  .fade.d3{animation-delay:.3s;}
  .fade.d4{animation-delay:.42s;}
  @keyframes fadeUp{to{opacity:1;transform:translateY(0);}}

  /* ---------- SECTION SHARED ---------- */
  section{padding:80px 0;scroll-margin-top:84px;}
  section.tint{background:var(--teal-tint);}
  .sec-head{max-width:60ch;margin-bottom:48px;}
  .sec-head h2{font-size:34px;}
  .sec-head p{color:var(--gray);margin-top:12px;font-size:16px;}

  /* "What I offer" is the one heading on the page meant to pull the eye in
     before anything else — everywhere else stays quiet so this stays the
     single authored moment, not a repeated section-heading habit. Reuses
     the site's own accent-word language (already used in the hero h1)
     instead of a novel effect, plus a highlighter-style mark and a
     scroll-triggered reveal since the section sits below the fold. */
  .sec-head h2 .accent-word{position:relative;color:var(--gold);}
  .sec-head h2 .accent-word::after{
    content:"";position:absolute;left:-3px;right:-3px;bottom:3px;height:.34em;
    background:rgba(201,162,39,.2);border-radius:2px;z-index:-1;
    transform:scaleX(0);transform-origin:left;
    transition:transform .6s cubic-bezier(.16,1,.3,1) .3s;
  }
  .reveal-heading{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);}
  .reveal-heading.in-view{opacity:1;transform:translateY(0);}
  .reveal-heading.in-view .accent-word::after{transform:scaleX(1);}
  @media (prefers-reduced-motion:reduce){
    .reveal-heading{opacity:1;transform:none;transition:none;}
    .sec-head h2 .accent-word::after{transition:none;transform:scaleX(1);}
  }

  /* ---------- SERVICES ---------- */
  .service-item{border-top:1px solid var(--line);padding:28px 0;}
  .service-item:last-child{border-bottom:1px solid var(--line);}
  .service-row{
    display:grid;grid-template-columns:1fr 1.6fr auto;gap:28px;align-items:baseline;
    font-family:'Inter',Arial,sans-serif;
  }
  .service-row h3{font-size:24px;font-family:'Fraunces',Georgia,serif;font-weight:700;margin:0;}
  .service-row p{color:var(--gray);margin:0;font-size:15.5px;}
  .service-price{font-family:'Fraunces',serif;font-weight:700;font-size:19px;white-space:nowrap;}
  .service-detail{margin-top:22px;}
  .service-detail p{color:var(--gray);font-size:15px;margin:0;max-width:75ch;}
  .service-detail-inner{display:flex;gap:24px;align-items:flex-start;}
  .service-detail-inner p{margin:0;}
  .service-detail-img{
    width:180px;height:130px;object-fit:cover;border-radius:6px;flex:none;
    border:1px solid var(--line);
  }
  @media (max-width:600px){
    .service-detail-inner{flex-direction:column;}
    .service-detail-img{width:100%;height:160px;}
  }
  .service-detail-learnmore{margin:10px 0 0;font-size:13.5px;}
  .service-detail-learnmore a{color:var(--teal);font-weight:600;}
  .service-detail-learnmore a:hover{text-decoration:underline;}
  .cat-label{
    font-family:'Inter',Arial,sans-serif;font-size:14px;font-weight:600;
    color:var(--gold);margin:0 0 4px;padding-top:18px;
  }
  .cat-label-2{margin-top:8px;}
  @media (max-width:700px){
    .service-row{grid-template-columns:1fr;gap:6px;}
  }

  /* ---------- BREADCRUMBS (services/locations hub + child pages) ---------- */
  .breadcrumbs{
    font-size:13px;color:var(--gray);padding:16px 0 0;
    display:flex;flex-wrap:wrap;align-items:center;gap:0;
  }
  .breadcrumbs a{color:var(--teal);}
  .breadcrumbs a:hover{text-decoration:underline;}
  .breadcrumbs .sep{margin:0 7px;color:var(--line);}
  .breadcrumbs [aria-current="page"]{color:var(--charcoal);font-weight:600;}

  /* ---------- HUB CARDS (services.html / locations.html) ---------- */
  .hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media (max-width:860px){ .hub-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .hub-grid{grid-template-columns:1fr;} }
  .hub-card{
    display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;
    background:#fff;transition:border-color .15s ease, box-shadow .15s ease;
  }
  .hub-card:hover{border-color:var(--teal);box-shadow:0 8px 24px rgba(0,0,0,.08);}
  .hub-card img{width:100%;height:150px;object-fit:cover;display:block;}
  .hub-card-body{padding:18px 20px 22px;}
  .hub-card-body h3{font-size:19px;margin:0 0 8px;}
  .hub-card-body p{color:var(--gray);font-size:14.5px;margin:0 0 12px;}
  .hub-card-link{color:var(--teal);font-weight:600;font-size:14px;}

  /* ---------- SERVICE / LOCATION LANDING PAGES ---------- */
  .page-hero-img{
    width:100%;max-height:340px;object-fit:cover;border-radius:20px;margin:28px 0 0;
    border:1px solid var(--line);
  }
  .page-body p{color:var(--gray);font-size:16px;max-width:75ch;}
  .page-body ul{color:var(--gray);font-size:16px;max-width:70ch;padding-left:22px;}
  .page-body li{margin-bottom:8px;}

  /* ---------- OFFER BAND ---------- */
  .offer{
    background:var(--ink);color:#fff;
    padding:56px 0;
  }
  .offer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
  .offer h2{color:#fff;font-size:26px;max-width:32ch;}
  .offer p{color:#C9CDD3;margin-top:8px;font-size:15px;max-width:44ch;}

  /* ---------- HOW IT WORKS ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
  @media (max-width:760px){ .steps{grid-template-columns:1fr;gap:36px;} }
  .step .num{font-family:'Fraunces',serif;font-size:15px;color:var(--gold);font-weight:700;margin-bottom:10px;}
  .step h3{font-size:20px;margin-bottom:8px;}
  .step p{color:var(--gray);font-size:15px;margin:0;}

  /* ---------- WHY ---------- */
  .why-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;max-width:760px;}
  @media (max-width:600px){ .why-list{grid-template-columns:1fr;} }
  .why-item{display:flex;gap:12px;align-items:flex-start;padding:6px 0;}
  .why-item .dot{width:7px;height:7px;background:var(--gold);margin-top:9px;flex:none;}
  .why-item p{margin:0;font-size:15.5px;}

  /* ---------- HIGHLIGHTS TABS ---------- */
  .tabs-nav{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:36px;}
  .tab-btn{
    background:none;border:none;cursor:pointer;
    padding:12px 20px;font-family:inherit;font-size:15px;font-weight:600;color:var(--gray);
    border-bottom:2.5px solid transparent;margin-bottom:-1px;
    transition:color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{color:var(--charcoal);}
  .tab-btn.active{color:var(--teal);border-color:var(--teal);}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;animation:tabFadeIn .25s ease;}
  @keyframes tabFadeIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}

  /* ---------- TESTIMONIALS ---------- */
  .testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
  @media (max-width:760px){ .testimonial-grid{grid-template-columns:1fr;} }
  .testimonial-card{
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:28px 24px;text-align:left;box-shadow:0 4px 16px rgba(11,93,82,.06);
  }
  .testimonial-quote-mark{display:block;font-family:'Fraunces',Georgia,serif;font-size:40px;color:var(--line);line-height:1;margin-bottom:10px;}
  .testimonial-stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:14px;}
  .testimonial-quote{color:#3A3A3A;font-size:15px;line-height:1.6;margin:0 0 18px;}
  .testimonial-author{font-weight:700;color:var(--teal);font-size:15px;margin:0 0 4px;}
  .testimonial-meta{color:var(--gray);font-size:13px;line-height:1.5;margin:0;}
  .testimonial-meta .google-icon{display:inline-block;vertical-align:-2px;margin-right:6px;}
  .testimonial-cta-line{margin-top:28px;text-align:center;font-size:15px;color:var(--gray);}
  .testimonial-cta-line a{color:var(--teal);font-weight:600;text-decoration:none;margin-left:6px;}
  .testimonial-cta-line a:hover{text-decoration:underline;}

  /* ---------- SERVICE AREA ---------- */
  .area-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  @media (max-width:760px){ .area-wrap{grid-template-columns:1fr;} }
  .area-copy p{color:var(--gray);margin-top:14px;}
  .map-embed{border:1.5px solid var(--line);border-radius:6px;overflow:hidden;line-height:0;}
  .map-embed iframe{display:block;width:100%;height:320px;}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    background:none;border:none;cursor:pointer;text-align:left;
    padding:18px 4px;font-family:'Inter',Arial,sans-serif;font-size:16px;
    font-weight:600;color:var(--charcoal);
  }
  .faq-icon{font-size:20px;color:var(--gold);flex:none;margin-left:16px;transition:transform .2s ease;}
  .faq-item.open .faq-icon{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .faq-item.open .faq-a{max-height:500px;}
  .faq-a p{margin:0 4px 18px;color:var(--gray);font-size:15px;max-width:65ch;}

  /* ---------- DOWNLOADS ---------- */
  .downloads{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media (max-width:600px){ .downloads{grid-template-columns:1fr;} }
  .dl-card{
    background:#fff;border:1.5px solid var(--line);border-radius:16px;
    padding:26px;display:flex;flex-direction:column;gap:6px;
  }
  .dl-card h3{font-size:19px;}
  .dl-card p{color:var(--gray);margin:0 0 14px;font-size:14.5px;}
  .dl-card a.btn{align-self:flex-start;}

  /* ---------- COMPARISON TABLE ---------- */
  .compare-table{width:100%;border-collapse:collapse;font-size:15px;}
  .compare-table th, .compare-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);}
  .compare-table th:first-child, .compare-table td:first-child{text-align:left;}
  .compare-table thead th{
    background:var(--teal);color:#fff;font-family:'Inter',Arial,sans-serif;
    font-weight:600;font-size:14.5px;
  }
  .compare-table thead th:first-child{background:transparent;}
  .compare-table tbody tr:nth-child(even){background:var(--teal-tint);}
  .compare-table td.muted{color:var(--gray);font-size:14px;}
  .compare-table .check-icon{width:20px;height:20px;color:var(--teal);}
  .compare-scroll{overflow-x:auto;}
  @media (max-width:600px){ .compare-table{font-size:13.5px;} .compare-table th, .compare-table td{padding:10px 10px;} }

  /* ---------- CONTACT ---------- */
  .contact-band{
    position:relative;overflow:hidden;
    background:var(--teal);color:#fff;text-align:center;padding:80px 0;
  }
  /* Animated teal/gold warp shader behind the CTA content — same technique
     as the splash gate's, see js/contact-band-shader.js. A flat teal
     fallback (above) shows if WebGL is unavailable. */
  .contact-band-shader-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
  .contact-band-shader-bg canvas{display:block;width:100%;height:100%;}
  .contact-band > .wrap{position:relative;z-index:1;}
  .contact-band-lede{
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
    font-size:16px;color:#CFE7E3;opacity:.9;margin:0 0 10px;
    text-shadow:0 1px 8px rgba(0,0,0,.25);
  }
  .contact-band h1,.contact-band h2{color:#fff;font-size:36px;max-width:20ch;margin:0 auto 16px;text-shadow:0 2px 14px rgba(0,0,0,.3);}
  .contact-band p{color:#CFE7E3;font-size:16px;margin-bottom:30px;text-shadow:0 1px 8px rgba(0,0,0,.25);}
  .contact-band .btn{background:var(--gold);color:var(--charcoal);}
  .contact-band .contactline{margin-top:22px;font-size:15px;color:#CFE7E3;text-shadow:0 1px 6px rgba(0,0,0,.25);}

  .quote-close{
    position:absolute;top:20px;right:24px;width:40px;height:40px;z-index:1;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:100px;
    color:#fff;font-size:26px;line-height:1;text-decoration:none;
    transition:background .15s ease;
  }
  .quote-close:hover{background:rgba(255,255,255,.24);}
  @media (max-width:600px){ .quote-close{top:14px;right:14px;width:36px;height:36px;font-size:22px;} }

  /* ---------- QUOTE FORM ---------- */
  .quote-auth-wrap{max-width:560px;margin:0 auto 20px;text-align:left;}
  .quote-auth-card{max-width:none;box-shadow:0 16px 40px rgba(0,0,0,.25);}
  /* .contact-band p{color:#CFE7E3} (above) would otherwise wash out every
     plain paragraph reused from the portal-card styles (lead text, "Or
     with", the login/signup notes) inside this white card. */
  .quote-auth-card p{color:#151717;}
  .quote-auth-card .quote-auth-lead{font-size:13.5px;color:#4a4d51;margin:0 0 16px;}
  .quote-auth-card .portal-or{color:#8b8f94;}
  .quote-guest-link{
    display:block;width:100%;text-align:center;background:none;border:none;
    margin-top:16px;padding:8px;font-family:inherit;font-size:13.5px;font-weight:600;
    color:var(--teal);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  }
  .quote-guest-link:hover{color:var(--teal-light);}
  .quote-signedin{
    background:var(--paper);color:var(--charcoal);border-radius:6px;padding:14px 18px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;
  }
  .quote-signedin[hidden]{display:none;}
  .quote-signedin strong{margin-right:auto;}
  .quote-signedin button.portal-link{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;}
  .quote-form{
    background:#fff;color:var(--charcoal);text-align:left;
    max-width:560px;margin:0 auto;padding:32px;border-radius:20px;
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:500px){ .form-row{grid-template-columns:1fr;} }
  .field{margin-bottom:18px;display:flex;flex-direction:column;}
  .field label{font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--charcoal);}
  .field input,.field select,.field textarea{
    font-family:'Inter',Arial,sans-serif;font-size:15px;
    padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;
    background:var(--cream);color:var(--charcoal);
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--teal);
  }
  .field.invalid input,.field.invalid select{border-color:#C0392B;}
  .field .err{display:none;color:#C0392B;font-size:13px;margin-top:5px;}

  /* Honeypot field for js/form-guard.js — off-screen rather than
     display:none, since some spam bots specifically skip display:none/
     visibility:hidden fields; a real visitor never sees or reaches it. */
  .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

  /* ---------- CUSTOM DATE PICKER (preferred day / booking date) ---------- */
  .date-picker-field{position:relative;}
  .date-picker-display{width:100%;cursor:pointer;padding-right:38px!important;}
  .date-picker-icon{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    color:var(--gray);pointer-events:none;display:flex;
  }
  .dp-panel{
    position:absolute;z-index:500;background:#fff;border-radius:10px;
    box-shadow:0 16px 40px rgba(0,0,0,.2);padding:14px;width:280px;
    font-family:'Inter',Arial,sans-serif;
  }
  .dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .dp-month{font-weight:700;font-size:14px;color:var(--charcoal);text-transform:capitalize;}
  .dp-nav{
    width:28px;height:28px;border-radius:100%;border:1px solid var(--line);background:var(--paper);
    cursor:pointer;font-size:16px;line-height:1;color:var(--charcoal);font-family:inherit;
    display:flex;align-items:center;justify-content:center;padding:0;
  }
  .dp-nav:hover:not(:disabled){border-color:var(--teal);color:var(--teal);}
  .dp-nav:disabled{opacity:.3;cursor:default;}
  .dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11.5px;font-weight:700;color:var(--gray);margin-bottom:4px;}
  .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
  .dp-cell{
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    border:none;background:none;border-radius:8px;font-size:13.5px;font-family:inherit;
    color:var(--charcoal);cursor:pointer;
  }
  .dp-cell:hover:not(:disabled):not(.dp-cell-muted){background:var(--teal-tint);}
  .dp-cell:disabled{color:#C9C5B8;cursor:default;}
  .dp-cell-muted{color:#DDD8CC;}
  .dp-today{font-weight:700;box-shadow:inset 0 0 0 1.5px var(--teal);}
  .dp-selected{background:var(--teal)!important;color:#fff!important;}
  .field.invalid .err{display:block;}
  .quote-form .btn{width:100%;text-align:center;}
  .optional-tag{font-weight:400;color:var(--gray);text-transform:none;letter-spacing:0;}
  .pill-group{display:flex;flex-wrap:wrap;gap:8px;}
  .pill-btn{
    display:inline-flex;align-items:center;gap:7px;
    font-family:'Inter',Arial,sans-serif;font-size:14.5px;font-weight:600;
    padding:9px 18px;border-radius:100px;border:1.5px solid var(--line);
    background:var(--cream);color:var(--charcoal);cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease,
      transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  }
  .pill-btn:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 10px rgba(31,41,55,.08);}
  .pill-btn:active{transform:translateY(0) scale(.96);}
  .pill-btn.active{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 4px 14px rgba(11,93,82,.3);}
  .pill-btn.active:hover{transform:translateY(-2px);}
  .pill-icon{width:15px;height:15px;flex:none;}
  /* A short pop when a pill is *chosen* (not just hovered) — the one small
     moment of feedback that makes picking an option feel registered. */
  .pill-btn.just-selected{animation:pillPop .38s cubic-bezier(.34,1.56,.64,1);}
  @keyframes pillPop{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}
  @media (prefers-reduced-motion:reduce){
    .pill-btn{transition:border-color .15s ease, background .15s ease, color .15s ease;}
    .pill-btn:hover{transform:none;}
    .pill-btn.just-selected{animation:none;}
  }

  /* Pill groups reveal with a light stagger as the field scrolls into view,
     instead of appearing fully formed — see js/quote.js's IntersectionObserver. */
  .pill-group.pill-reveal .pill-btn{
    opacity:0;transform:translateY(10px);
    transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1),
      border-color .15s ease, background .15s ease, color .15s ease, box-shadow .2s ease;
  }
  .pill-group.pill-reveal.in-view .pill-btn{opacity:1;transform:translateY(0);}
  .pill-group.pill-reveal .pill-btn:nth-child(1){transition-delay:.02s;}
  .pill-group.pill-reveal .pill-btn:nth-child(2){transition-delay:.07s;}
  .pill-group.pill-reveal .pill-btn:nth-child(3){transition-delay:.12s;}
  .pill-group.pill-reveal .pill-btn:nth-child(4){transition-delay:.17s;}
  .pill-group.pill-reveal .pill-btn:nth-child(5){transition-delay:.22s;}
  .pill-group.pill-reveal .pill-btn:nth-child(6){transition-delay:.27s;}
  @media (prefers-reduced-motion:reduce){
    .pill-group.pill-reveal .pill-btn{opacity:1;transform:none;transition:none;}
  }

  /* ---------- FILE UPLOAD (quote form photos/video) ---------- */
  .file-drop{
    display:inline-flex;flex-direction:column;gap:2px;align-items:flex-start;
    padding:12px 18px;border:1.5px dashed var(--line);border-radius:6px;
    background:var(--cream);cursor:pointer;transition:border-color .15s ease, background .15s ease;
  }
  .file-drop:hover{border-color:var(--teal);background:var(--teal-tint);}
  .file-drop span:first-child{font-weight:600;font-size:14.5px;color:var(--charcoal);}
  .file-drop-hint{font-size:12.5px;color:var(--gray);}
  .file-drop-row{display:flex;gap:10px;flex-wrap:wrap;}
  .file-drop-row .file-drop{flex:1;min-width:150px;}
  .file-drop-camera-label{display:flex;align-items:center;gap:6px;}
  .file-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
  .file-list li{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:#fff;border:1px solid var(--line);border-radius:4px;
    padding:7px 10px;font-size:13.5px;color:var(--charcoal);
  }
  .file-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .file-remove{
    background:none;border:none;color:var(--gray);cursor:pointer;font-size:16px;
    line-height:1;padding:0 2px;flex:none;
  }
  .file-remove:hover{color:#C0392B;}
  .file-note{font-size:13px;color:var(--gray);margin:8px 0 0;}
  .file-note.error{color:#C0392B;}
  .form-note{font-size:13px;color:var(--gray);margin-top:14px;text-align:center;}
  .form-note.sent{color:var(--teal);font-weight:600;}
  .form-note.error{color:#C0392B;font-weight:600;}
  .quote-form .form-reassurance{font-size:13.5px;color:var(--teal);font-weight:600;margin:-6px 0 14px;text-align:center;}

  /* Quote form submit — same spinning gold/teal cta-arrow language as the
     hero's "Get a free quote", stretched full-width so it reads as the
     form's one big commitment instead of a plain narrow button. */
  .quote-submit-cta{width:100%;justify-content:space-between;padding:10px 10px 10px 30px;font-size:17.5px;}
  .quote-submit-cta[disabled]{opacity:.75;cursor:default;}
  .quote-submit-cta[disabled]:hover{box-shadow:0 10px 28px rgba(0,0,0,.16);transform:none;}
  .quote-submit-cta.is-loading .cta-arrow-icon{animation:quoteSpinIcon .9s linear infinite;}
  @keyframes quoteSpinIcon{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion:reduce){ .quote-submit-cta.is-loading .cta-arrow-icon{animation:none;} }

  /* Post-submit confirmation / tracking panel — replaces the form so the
     customer gets a concrete "your request is in hand" moment (reference
     code + what happens next) instead of a one-line status message. */
  .quote-success{
    max-width:560px;margin:0 auto;color:var(--charcoal);
    text-align:center;padding:40px 28px;background:#fff;border:1px solid var(--line);
    border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);
    animation:quoteSuccessIn .5s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes quoteSuccessIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @media (prefers-reduced-motion:reduce){ .quote-success{animation:none;} }
  .quote-success-badge{
    width:56px;height:56px;margin:0 auto 18px;border-radius:100%;
    display:flex;align-items:center;justify-content:center;
    background:var(--teal);color:#fff;font-size:26px;font-weight:800;
    box-shadow:0 0 0 8px var(--teal-tint);
  }
  .quote-success h3{font-size:23px;margin:0 0 10px;}
  .quote-success-ref{
    display:inline-block;font-weight:700;color:var(--teal);background:var(--teal-tint);
    padding:6px 16px;border-radius:100px;font-size:14px;letter-spacing:.02em;margin-bottom:14px;
  }
  .quote-success p{color:var(--gray);font-size:15px;max-width:42ch;margin:0 auto 22px;}
  .quote-success .btn-outline{margin:0 auto;}
  .quote-success p.quote-success-warning{color:#C0392B;font-weight:600;font-size:14px;margin-top:-12px;}

  /* ---------- LEGAL PAGE (terms.html): search, TOC, accordion, back-to-top, sticky CTA ---------- */
  .legal-toolbar{padding:0 0 32px;}
  .legal-toolbar .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .legal-search-wrap{flex:1;min-width:240px;position:relative;}
  .legal-search{
    width:100%;font-family:'Inter',Arial,sans-serif;font-size:15px;
    padding:12px 16px 12px 40px;border:1.5px solid var(--line);border-radius:100px;
    background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px center/16px no-repeat;
    color:var(--charcoal);
  }
  .legal-search:focus{outline:none;border-color:var(--teal);}
  .legal-toc-toggle{
    display:none;align-items:center;gap:8px;
    background:var(--paper);border:1.5px solid var(--line);border-radius:100px;
    padding:11px 18px;font-family:'Inter',Arial,sans-serif;font-weight:600;font-size:14px;
    color:var(--charcoal);cursor:pointer;white-space:nowrap;
  }
  .legal-toc-toggle-icon{transition:transform .2s ease;font-size:12px;}
  .legal-toc-toggle[aria-expanded="true"] .legal-toc-toggle-icon{transform:rotate(180deg);}

  .legal-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start;}
  .legal-toc{position:sticky;top:100px;}
  .legal-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
  .legal-toc a{
    display:block;padding:8px 12px;border-radius:6px;font-size:13.5px;color:var(--gray);
    line-height:1.4;transition:background .15s ease, color .15s ease;
  }
  .legal-toc a:hover{background:var(--teal-tint);color:var(--charcoal);}
  .legal-toc a.active{background:var(--teal-tint);color:var(--teal);font-weight:600;}

  .legal-sections{display:flex;flex-direction:column;}
  .legal-item{border-top:1px solid var(--line);scroll-margin-top:96px;}
  .legal-item:last-child{border-bottom:1px solid var(--line);}
  .legal-q{
    all:unset;box-sizing:border-box;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    width:100%;cursor:pointer;padding:22px 0;
    font-family:'Inter',Arial,sans-serif;font-size:17px;font-weight:700;color:var(--charcoal);
  }
  .legal-icon{font-size:20px;color:var(--gold);flex:none;transition:transform .2s ease;}
  .legal-item.closed .legal-icon{transform:rotate(45deg);}
  .legal-a{max-height:2000px;overflow:hidden;transition:max-height .3s ease;}
  .legal-item.closed .legal-a{max-height:0;}
  .legal-a p{color:var(--gray);font-size:15.5px;max-width:70ch;margin:0 0 16px;}
  .legal-a p:last-child{margin-bottom:26px;}
  .legal-a strong{color:var(--charcoal);}
  .legal-a a{color:var(--teal);text-decoration:underline;}
  .legal-no-results{color:var(--gray);font-size:15px;padding:24px 0;font-style:italic;}

  @media (max-width:900px){
    .legal-toc-toggle{display:flex;}
    .legal-layout{grid-template-columns:1fr;gap:0;}
    .legal-toc{
      position:static;order:-1;margin-bottom:24px;
      max-height:0;overflow:hidden;transition:max-height .25s ease;
    }
    .legal-toc.open{max-height:600px;overflow-y:auto;}
    .legal-toc ul{border:1.5px solid var(--line);border-radius:8px;padding:8px;background:var(--paper);}
  }

  .back-to-top{
    position:fixed;right:24px;bottom:24px;z-index:150;
    width:46px;height:46px;border-radius:100px;
    background:var(--ink);color:#fff;border:none;font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(31,41,55,.25);
    opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
  .back-to-top:hover{background:var(--teal);}

  .legal-sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:140;
    background:#fff;border-top:1.5px solid var(--line);
    padding:12px 20px;display:flex;justify-content:center;gap:12px;
    box-shadow:0 -8px 24px rgba(31,41,55,.08);
    transform:translateY(100%);transition:transform .25s ease;
  }
  .legal-sticky-cta.show{transform:translateY(0);}
  .legal-sticky-cta .btn{padding:11px 20px;font-size:14px;}
  @media (max-width:480px){ .legal-sticky-cta .btn{flex:1;text-align:center;} }

  /* ---------- FOOTER ---------- */
  footer{padding:48px 0;background:var(--ink);color:#9AA1AC;}
  .foot-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:flex-start;}
  .foot-brand{display:flex;gap:10px;align-items:center;}
  .foot-brand span{font-family:'Fraunces',serif;color:#fff;font-weight:700;font-size:17px;}
  footer .fine{font-size:13px;margin-top:6px;color:#7B828C;}
  .foot-contact{font-size:14px;line-height:1.9;text-align:right;}
  .foot-contact-link{display:inline-flex;align-items:center;gap:8px;color:#9AA1AC;text-decoration:none;}
  .foot-contact-link:hover{color:#fff;}
  .foot-icon{width:13px;height:13px;flex:none;}
  .foot-links{display:flex;gap:40px;}
  .foot-links-title{color:#fff;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
  .foot-links a{display:block;color:#9AA1AC;font-size:14px;text-decoration:none;line-height:2;}
  .foot-links a:hover{color:#fff;}
  @media (max-width:600px){
    .foot-contact{text-align:left;}
    .foot-contact-link{justify-content:flex-start;}
    .foot-wrap{flex-direction:column;}
    .foot-links{gap:32px;}
  }

  /* ---------- ZONE CARD ----------
     A dismissible centered card, not a blocking modal: there is no
     full-page dim layer, so the page underneath stays scrollable and
     clickable — visitors can keep reading while it's up. */
  .zone-backdrop{
    position:fixed;top:50%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%) scale(.97);
    max-width:460px;width:calc(100% - 40px);
    z-index:200;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
  }
  .zone-backdrop.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
  @media (max-width:480px){ .zone-backdrop{width:calc(100% - 24px);} }
  .zone-modal{
    position:relative;
    background:var(--cream);
    padding:44px 36px 36px;border-radius:12px;text-align:center;
    box-shadow:0 24px 64px rgba(31,41,55,.30);border:1px solid var(--line);
  }
  .zone-modal-close{
    position:absolute;top:14px;right:14px;width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;border-radius:100px;cursor:pointer;
    color:var(--gray);font-size:20px;line-height:1;
    transition:background .15s ease;
  }
  .zone-modal-close:hover{background:var(--teal-tint);color:var(--charcoal);}
  .zone-modal svg{width:56px;height:56px;margin-bottom:16px;}
  .zone-modal h3{font-size:28px;margin-bottom:10px;}
  .zone-modal p{color:var(--gray);font-size:16px;margin:0 0 24px;}
  .zone-buttons{display:flex;flex-direction:column;gap:12px;}
  .zone-btn{
    display:block;width:100%;padding:16px 20px;
    background:var(--paper);border:1.5px solid var(--line);border-radius:8px;
    font-family:'Inter',Arial,sans-serif;font-weight:600;font-size:16.5px;
    color:var(--charcoal);cursor:pointer;text-align:left;
    transition:border-color .15s ease, background .15s ease;
  }
  .zone-btn:hover{border-color:var(--teal);background:var(--teal-tint);}
  .zone-btn-claim{
    background:var(--gold);border-color:var(--gold);color:var(--charcoal);
    text-align:center;font-weight:700;
  }
  .zone-btn-claim:hover{background:#B7911F;border-color:#B7911F;}
  .zone-lead-form{text-align:left;margin-top:8px;}
  .zone-lead-form .field{margin-bottom:14px;}
  .zone-skip{
    display:inline-block;margin-top:14px;font-size:13px;color:var(--gray);
    text-decoration:underline;cursor:pointer;background:none;border:none;
  }
  .zone-tag{display:none;}
  .zone-tag.show{display:inline-block;}

  /* ---------- BACKEND UI: shared (booking / account / admin pages) ---------- */
  #bookingApp, #accountApp, #adminApp{padding:40px 0 80px;}
  .notice-box{
    background:var(--teal-tint);border:1.5px solid var(--line);border-radius:6px;
    padding:20px 22px;max-width:640px;
  }
  .notice-box p{margin:0;color:var(--charcoal);font-size:15px;}
  .notice-box a{color:var(--teal);font-weight:600;text-decoration:underline;}
  .notice-success{background:#E7F1EF;border-color:var(--teal);color:var(--teal);font-weight:600;padding:16px 20px;margin-bottom:28px;max-width:640px;}

  /* ---------- AUTH (login / signup / admin login) ---------- */
  .auth-panel{max-width:440px;}
  .auth-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1.5px solid var(--line);}
  .auth-tab{
    background:none;border:none;cursor:pointer;padding:12px 4px;margin-right:20px;
    font-family:'Inter',Arial,sans-serif;font-weight:600;font-size:15px;color:var(--gray);
    border-bottom:2px solid transparent;transform:translateY(1.5px);
  }
  .auth-tab.active{color:var(--charcoal);border-bottom-color:var(--teal);}
  .auth-form .field{margin-bottom:16px;}
  .auth-form label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;}
  .auth-form input{
    width:100%;font-family:'Inter',Arial,sans-serif;font-size:15px;
    padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;background:#fff;color:var(--charcoal);
  }
  .auth-form input:focus{outline:none;border-color:var(--teal);}
  .auth-form .btn{width:100%;text-align:center;margin-top:4px;}

  /* ---------- DASHBOARD (account + admin) ---------- */
  .dash-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:8px;}
  .bookings-list{display:flex;flex-direction:column;gap:12px;max-width:640px;}
  .booking-card{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 20px;
  }
  .booking-card-service{font-weight:600;font-size:15.5px;}
  .status-pill{
    font-size:12.5px;font-weight:700;letter-spacing:.3px;padding:5px 12px;border-radius:100px;white-space:nowrap;
  }
  .status-pending_payment{background:#FBF0DA;color:#9A6B10;}
  .status-confirmed{background:var(--teal-tint);color:var(--teal);}
  .status-completed{background:#E4E7EC;color:var(--charcoal);}
  .status-cancelled{background:#FBE9E7;color:#B3352A;}
  .status-new{background:var(--teal-tint);color:var(--teal);}
  .status-contacted{background:#FBF0DA;color:#9A6B10;}
  .status-booked{background:#E9F0D9;color:#4C7A21;}
  .status-declined{background:#FBE9E7;color:#B3352A;}

  .book-nudge{margin-top:16px;}
  .book-nudge-title{font-size:13.5px;font-weight:600;color:var(--gray);margin:0 0 10px;}
  .book-service-cards{display:flex;flex-wrap:wrap;gap:10px;}
  .book-service-card{
    display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;
    background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 18px;
    transition:border-color .15s ease,transform .15s ease;
  }
  .book-service-card:hover{border-color:var(--teal);transform:translateY(-1px);}
  .book-service-card-name{font-weight:600;font-size:14.5px;}
  .book-service-card-price{font-size:12.5px;color:var(--gray);}

  /* ---------- BOOKING FORM ---------- */
  .booking-form{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:32px;max-width:640px;}
  .booking-form .field{margin-bottom:18px;display:flex;flex-direction:column;}
  .booking-form label{font-size:13.5px;font-weight:600;margin-bottom:6px;}
  .booking-form input,.booking-form select,.booking-form textarea{
    font-family:'Inter',Arial,sans-serif;font-size:15px;
    padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;background:var(--cream);color:var(--charcoal);
  }
  .booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{outline:none;border-color:var(--teal);}
  .booking-form .btn{width:100%;text-align:center;}

  .service-options{display:flex;flex-direction:column;gap:10px;}
  .service-option{
    display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
    border:1.5px solid var(--line);border-radius:6px;cursor:pointer;transition:border-color .15s ease;
  }
  .service-option:has(input:checked){border-color:var(--teal);background:var(--teal-tint);}
  .service-option input{width:auto;margin-top:3px;}
  .service-option-body{display:flex;flex-direction:column;gap:2px;}
  .service-option-name{font-weight:600;font-size:15.5px;}
  .service-option-desc{font-size:13.5px;color:var(--gray);}
  .service-option-price{font-size:13.5px;font-weight:600;color:var(--teal);}
  .service-option-price s{color:var(--gray);font-weight:400;margin-left:4px;}
  .deposit-summary{
    font-size:14px;font-weight:600;color:var(--charcoal);background:var(--teal-tint);
    border-radius:4px;padding:12px 14px;margin-bottom:18px;
  }
  .deposit-summary-discount{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--teal);}

  /* ---------- EMBEDDED STRIPE PAYMENT STEP ---------- */
  .payment-band{padding:60px 0;}
  .payment-wrap{display:flex;justify-content:center;}
  .payment-card{max-width:440px;margin:0;text-align:left;}
  .payment-summary{
    background:var(--teal-tint);border-radius:10px;padding:16px 18px;margin-bottom:22px;
  }
  .payment-summary-service{font-weight:700;font-size:16px;margin:0 0 4px;font-family:'Fraunces',serif;}
  .payment-summary-discount{color:var(--teal);font-weight:600;font-size:13px;margin:0 0 8px;}
  .payment-summary-total{font-weight:700;font-size:15px;margin:8px 0 2px;}
  .payment-summary-line{font-size:13px;color:var(--gray);margin:2px 0;}
  #paymentElement{margin-bottom:18px;}
  .payment-card .btn-outline{width:100%;text-align:center;margin-top:8px;background:transparent;}

  /* ---------- ADMIN TABLES ---------- */
  .admin-panel{margin-top:24px;}
  .table-scroll{overflow-x:auto;}
  .admin-table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap;}
  .admin-table th, .admin-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);}
  .admin-table thead th{background:var(--teal);color:#fff;font-weight:600;font-size:13.5px;}
  .admin-table tbody tr:nth-child(even){background:var(--teal-tint);}
  .files-btn{
    font-family:'Inter',Arial,sans-serif;font-size:13px;font-weight:600;
    padding:6px 10px;border:1.5px solid var(--line);border-radius:4px;
    background:#fff;color:var(--teal);cursor:pointer;white-space:nowrap;
  }
  .files-btn:hover{border-color:var(--teal);background:var(--teal-tint);}
  .files-links{margin-top:6px;display:flex;flex-direction:column;gap:3px;}
  .files-links a{color:var(--teal);text-decoration:underline;font-size:13px;}
  .status-select{
    font-family:'Inter',Arial,sans-serif;font-size:13.5px;font-weight:600;
    padding:6px 8px;border:1.5px solid var(--line);border-radius:4px;background:var(--paper);color:var(--charcoal);
    text-transform:capitalize;
  }

  /* ---------- LANGUAGE TOGGLE ---------- */
  .navlinks .lang-toggle{margin-left:2px;}
  .lang-toggle{
    display:flex;align-items:center;border:1.5px solid var(--line);border-radius:100px;
    padding:3px;gap:2px;flex:none;
  }
  .lang-btn{
    font-family:'Inter',Arial,sans-serif;font-size:12.5px;font-weight:700;
    padding:5px 11px;border-radius:100px;border:none;background:none;color:var(--gray);cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .lang-btn.active{background:var(--ink);color:#fff;}
  .mobile-menu .lang-toggle{margin:14px 32px;align-self:flex-start;}

  /* ---------- ACCOUNT PORTAL (account.html only) ---------- */
  .portal-body{background:#000;}

  .portal-shader-bg{position:fixed;inset:0;background:#000;overflow:hidden;z-index:0;}
  .portal-shader-bg canvas{display:block;width:100%;height:100%;}

  .portal-lang{position:fixed;top:20px;right:20px;z-index:2;background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.3);}
  .portal-lang .lang-btn{color:#cfcfcf;}
  .portal-lang .lang-btn.active{background:#fff;color:#000;}

  .portal-wrap{
    position:relative;z-index:1;min-height:100vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:110px 20px 150px;
  }
  .portal-brand{
    display:flex;align-items:center;gap:9px;margin-bottom:26px;text-decoration:none;
    color:#fff;font-family:'Fraunces',serif;font-weight:700;font-size:19px;
  }
  .portal-notice{
    background:#fff;border-radius:16px;padding:24px;max-width:420px;width:100%;
    text-align:center;color:var(--charcoal);
  }
  .portal-card{
    background:#fff;color:#151717;border-radius:20px;padding:32px;
    width:100%;max-width:420px;box-shadow:0 24px 64px rgba(0,0,0,.55);
    font-family:'Inter',Arial,sans-serif;
  }
  .portal-tabs{display:flex;gap:20px;margin-bottom:22px;border-bottom:1px solid #ecedec;}
  .portal-tab{
    background:none;border:none;cursor:pointer;padding:10px 2px;
    font-weight:600;font-size:14.5px;color:#8b8f94;
    border-bottom:2px solid transparent;font-family:inherit;
  }
  .portal-tab.active{color:#151717;border-color:#151717;}
  .portal-form{display:flex;flex-direction:column;gap:12px;}
  .portal-form[hidden]{display:none;}
  .portal-field label{display:block;font-size:13px;font-weight:600;color:#151717;margin-bottom:6px;}
  .portal-inputWrap{
    border:1.5px solid #ecedec;border-radius:10px;height:48px;
    display:flex;align-items:center;padding:0 12px;gap:10px;
    transition:border-color .15s ease;
  }
  .portal-inputWrap:focus-within{border-color:var(--teal);}
  .portal-inputWrap svg{flex:none;color:#8b8f94;}
  .portal-input{border:none;outline:none;width:100%;height:100%;font-size:14px;font-family:inherit;background:none;}
  .portal-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:2px 0;flex-wrap:wrap;gap:8px;}
  .portal-remember{display:flex;align-items:center;gap:6px;color:#4a4d51;cursor:pointer;}
  .portal-link{color:var(--teal);font-weight:600;cursor:pointer;}
  .portal-link:hover{text-decoration:underline;}
  .portal-submit{
    margin-top:6px;background:#151717;color:#fff;border:none;border-radius:10px;
    height:48px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
    transition:background .15s ease;
  }
  .portal-submit:hover{background:#2a2c2d;}
  .portal-or{text-align:center;color:#8b8f94;font-size:12.5px;margin:20px 0 12px;}
  .portal-oauth-row{display:flex;gap:10px;}
  .portal-oauth{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    height:46px;border-radius:10px;border:1px solid #ecedec;background:#fff;
    font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;color:#151717;
    transition:border-color .15s ease;
  }
  .portal-oauth:hover{border-color:var(--teal);}
  .portal-dash-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .portal-dash-email{font-weight:700;font-size:15px;}
  .portal-dash-title{font-size:20px;margin:0 0 14px;font-family:'Fraunces',serif;}

  /* ---------- ACCOUNT DASHBOARD SIDEBAR ---------- */
  .dash-shell-card{max-width:680px!important;padding:0!important;overflow:hidden;}
  .dash-shell{display:flex;min-height:420px;}
  .dash-sidebar{
    flex:none;width:190px;background:var(--ink);padding:16px 10px;
    display:flex;flex-direction:column;gap:2px;
  }
  .dash-nav-btn{
    display:flex;align-items:center;gap:10px;position:relative;
    background:none;border:none;border-radius:6px;padding:10px 12px;
    color:#C9CDD3;font-family:'Inter',Arial,sans-serif;font-size:13.5px;font-weight:600;
    cursor:pointer;text-align:left;transition:background .15s ease,color .15s ease;
  }
  .dash-nav-btn svg{width:16px;height:16px;flex:none;}
  .dash-nav-btn:hover{background:rgba(255,255,255,.06);color:#fff;}
  .dash-nav-btn.active{background:rgba(255,255,255,.1);color:#fff;}
  .dash-nav-btn::before{
    content:"";position:absolute;top:6px;bottom:6px;left:-10px;width:4px;
    background:var(--teal-light);border-radius:4px;opacity:0;transition:opacity .15s ease;
  }
  .dash-nav-btn.active::before{opacity:1;}
  .dash-content{flex:1;padding:28px 32px;min-width:0;}
  .dash-tab[hidden]{display:none;}
  @media (max-width:640px){
    .dash-shell{flex-direction:column;}
    .dash-sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:10px;}
    .dash-nav-btn{flex:none;white-space:nowrap;}
    .dash-nav-btn::before{top:auto;left:6px;right:6px;bottom:-6px;height:3px;width:auto;}
    .dash-content{padding:22px 20px;}
  }

  .portal-dock{
    position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;
    display:flex;gap:6px;align-items:center;
    padding:8px;background:#000;border:1px solid rgba(255,255,255,.3);border-radius:100px;
  }
  .portal-dock-btn{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:100%;color:#fff;transition:background .2s ease;
  }
  .portal-dock-btn:hover{background:#1f2937;}
  .portal-dock-tooltip{
    position:absolute;bottom:100%;left:50%;transform:translateX(-50%) scale(.6);
    margin-bottom:10px;padding:5px 9px;background:#000;color:#fff;font-size:12px;
    border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .portal-dock-btn:hover .portal-dock-tooltip{opacity:1;transform:translateX(-50%) scale(1);}

  @media (max-width:480px){
    .portal-wrap{padding:90px 14px 130px;}
    .portal-card{padding:24px;}
    .portal-dock{gap:2px;padding:6px;}
    .portal-dock-btn{width:34px;height:34px;}
  }

  /* ---------- DIGITAL GIFT CARD (gift-cards.html) ---------- */
  .pass-area{display:flex;flex-direction:column;align-items:center;padding:12px 0 8px;}
  .pass-card{perspective:1400px;width:320px;max-width:100%;cursor:pointer;}
  .pass-flip{
    position:relative;width:100%;height:190px;
    transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.2,.2,1);
  }
  .pass-card:hover .pass-flip,
  .pass-card:focus-visible .pass-flip,
  .pass-card.flipped .pass-flip{transform:rotateY(180deg);}
  .pass-face{
    position:absolute;inset:0;backface-visibility:hidden;
    border-radius:14px;overflow:hidden;
    background:linear-gradient(135deg,var(--teal) 0%,var(--teal-light) 45%,var(--teal) 100%);
    color:#fff;padding:18px 20px;box-shadow:0 20px 50px rgba(0,0,0,.25);
    display:flex;flex-direction:column;
  }
  .pass-back{transform:rotateY(180deg);}
  .pass-holo{
    position:absolute;inset:0;opacity:.35;pointer-events:none;
    background:
      radial-gradient(at 25% 10%,#90f1f1,transparent 30%),
      radial-gradient(at 75% 15%,#d3ccf0,transparent 30%),
      radial-gradient(at 50% 85%,#c4f2e5,transparent 35%);
  }
  .pass-notch{
    position:absolute;top:50%;width:20px;height:20px;background:var(--cream);
    border-radius:50%;transform:translateY(-50%);
  }
  .pass-notch-l{left:-10px;}
  .pass-notch-r{right:-10px;}
  .pass-header{
    position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
    border-bottom:1px dashed rgba(255,255,255,.35);padding-bottom:12px;
  }
  .pass-brand{display:flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:700;font-size:14px;}
  .pass-label{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--gold);}
  .pass-contents{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;padding-top:14px;}
  .pass-amount{font-family:'Fraunces',serif;font-size:34px;font-weight:700;}
  .pass-qr{width:64px;height:64px;background:#fff;border-radius:6px;padding:5px;flex:none;}
  .pass-qr svg{width:100%;height:100%;display:block;}
  .pass-contents-back{flex-direction:column;align-items:flex-start;gap:12px;padding-top:16px;}
  .pass-contents-back .pass-qr{width:56px;height:56px;}
  .pass-note{font-size:12.5px;color:#CFE7E3;margin:0;max-width:38ch;}
  .pass-hint{margin-top:16px;font-size:13px;color:var(--gray);}
  @media (max-width:480px){
    .pass-card{width:100%;}
    .pass-flip{height:210px;}
  }

  /* ---------- CTA ARROW BUTTON (every "Get a quote" CTA) ---------- */
  .cta-arrow{
    display:inline-flex;align-items:center;gap:16px;
    padding:8px 8px 8px 26px;background:#fff;color:var(--charcoal);
    border-radius:100px;font-weight:800;font-size:17px;
    box-shadow:0 10px 28px rgba(0,0,0,.16);border:1px solid var(--line);
    text-decoration:none;cursor:pointer;
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .cta-arrow:hover{box-shadow:0 18px 42px rgba(201,162,39,.4);transform:translateY(-2px);}
  .cta-arrow-text{display:inline-block;}
  .cta-arrow:hover .cta-arrow-text{animation:ctaTextBounce .5s ease;}
  @keyframes ctaTextBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
  .cta-arrow-box{
    width:42px;height:42px;border-radius:100%;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;flex:none;
    transition:transform .5s cubic-bezier(.77,0,.175,1), box-shadow .3s ease;
  }
  .cta-arrow-box::before{
    content:"";position:absolute;inset:-40%;border-radius:inherit;
    background:conic-gradient(from 0deg,var(--gold),var(--teal),var(--gold),var(--teal),var(--gold));
    animation:ctaSpin 3.5s linear infinite;
  }
  @keyframes ctaSpin{to{transform:rotate(360deg);}}
  .cta-arrow-icon{position:relative;color:#fff;font-size:19px;font-weight:700;z-index:1;transition:transform .35s cubic-bezier(.77,0,.175,1);}
  .cta-arrow:hover .cta-arrow-box{transform:translateX(4px) scale(1.12);box-shadow:0 0 22px 5px rgba(201,162,39,.55),0 0 22px 5px rgba(11,93,82,.4);}
  .cta-arrow:hover .cta-arrow-icon{transform:translateX(3px);}
  .offer .cta-arrow, .contact-band .cta-arrow{box-shadow:0 8px 24px rgba(0,0,0,.3);}

  /* The hero's "Get a free quote" is the single most prominent CTA on the
     homepage — sized up well beyond every other button on screen. */
  .hero .cta-arrow{
    padding:14px 14px 14px 36px;gap:20px;font-size:21px;border-radius:100px;
  }
  .hero .cta-arrow-box{width:58px;height:58px;}
  .hero .cta-arrow-icon{font-size:26px;}
  @media (max-width:640px){
    .hero .cta-arrow{padding:12px 12px 12px 28px;gap:16px;font-size:18px;}
    .hero .cta-arrow-box{width:50px;height:50px;}
    .hero .cta-arrow-icon{font-size:22px;}
  }

  /* ================================================================
     SITE ENHANCEMENTS — skip link, scroll progress, floating contact,
     dark mode, cookie banner, copy-to-clipboard, confirmation modal,
     password toggle, newsletter, print. Elements are injected at
     runtime by js/site-enhancements.js unless noted otherwise, so a
     page needs nothing but that one script tag to pick all of this up.
     ================================================================ */

  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* ---------- SKIP TO CONTENT ---------- */
  .skip-link{
    position:absolute;top:-48px;left:12px;z-index:1000;
    background:var(--ink);color:#fff;font-weight:700;font-size:14px;
    padding:12px 20px;border-radius:8px;text-decoration:none;
    transition:top .15s ease;
  }
  .skip-link:focus{top:12px;}

  /* ---------- SCROLL PROGRESS BAR ---------- */
  #scrollProgress{
    position:fixed;top:0;left:0;height:3px;width:0%;z-index:400;
    background:linear-gradient(90deg,var(--teal),var(--gold));
    transition:width .1s linear;
  }
  @media (prefers-reduced-motion:reduce){ #scrollProgress{transition:none;} }

  /* ---------- FLOATING CONTACT BUTTON ---------- */
  .floating-contact{
    position:fixed;right:20px;bottom:24px;z-index:250;
    display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px;
  }
  .floating-contact-toggle{
    width:56px;height:56px;border-radius:100%;position:relative;overflow:hidden;
    border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 28px rgba(31,41,55,.3);
    transition:transform .3s cubic-bezier(.77,0,.175,1);
  }
  .floating-contact-toggle::before{
    content:"";position:absolute;inset:-40%;border-radius:inherit;
    background:conic-gradient(from 0deg,var(--gold),var(--teal),var(--gold),var(--teal),var(--gold));
    animation:ctaSpin 3.5s linear infinite;
  }
  .floating-contact-toggle svg{position:relative;z-index:1;width:24px;height:24px;color:#fff;transition:transform .2s ease;}
  .floating-contact-toggle:hover{transform:scale(1.08);}
  .floating-contact.open .floating-contact-toggle svg.icon-chat{transform:scale(0) rotate(30deg);position:absolute;}
  .floating-contact:not(.open) .floating-contact-toggle svg.icon-close{transform:scale(0) rotate(-30deg);position:absolute;}
  .floating-contact-menu{
    display:flex;flex-direction:column;gap:8px;
    opacity:0;transform:translateY(8px) scale(.95);pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    transform-origin:bottom right;
  }
  .floating-contact.open .floating-contact-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  .floating-contact-link{
    display:flex;align-items:center;gap:10px;background:#fff;color:var(--charcoal);
    padding:10px 18px 10px 12px;border-radius:100px;font-weight:700;font-size:14px;
    text-decoration:none;box-shadow:0 8px 20px rgba(31,41,55,.18);border:1px solid var(--line);
    white-space:nowrap;
  }
  .floating-contact-link:hover{border-color:var(--teal);}
  button.floating-contact-link{font-family:inherit;cursor:pointer;}
  @media (max-width:640px){
    .floating-contact{right:14px;bottom:14px;}
    .floating-contact-toggle{width:50px;height:50px;}
  }
  @media (prefers-reduced-motion:reduce){ .floating-contact-toggle::before{animation:none;} }

  /* ---------- AI CHAT WIDGET ---------- */
  .ai-chat-panel{
    position:fixed;right:20px;bottom:96px;z-index:260;
    width:360px;max-width:calc(100vw - 32px);height:min(520px,calc(100vh - 140px));
    background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(31,41,55,.28);
    display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  }
  .ai-chat-panel[hidden]{display:none;}
  .ai-chat-header{
    background:var(--teal);color:#fff;padding:16px 18px;display:flex;
    align-items:flex-start;justify-content:space-between;gap:12px;flex-shrink:0;
  }
  .ai-chat-title{font-weight:700;font-size:16px;}
  .ai-chat-subtitle{font-size:12.5px;opacity:.85;margin-top:2px;}
  .ai-chat-close{
    background:rgba(255,255,255,.15);border:none;border-radius:100%;width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;flex-shrink:0;
  }
  .ai-chat-close svg{width:16px;height:16px;}
  .ai-chat-close:hover{background:rgba(255,255,255,.28);}
  .ai-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream);}
  .ai-chat-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;}
  .ai-chat-msg-bot{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--charcoal);border-bottom-left-radius:4px;}
  .ai-chat-msg-user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px;}
  .ai-chat-typing{display:flex;gap:4px;align-items:center;padding:14px;}
  .ai-chat-typing span{width:6px;height:6px;border-radius:100%;background:var(--gray);animation:aiChatTyping 1.2s infinite ease-in-out;}
  .ai-chat-typing span:nth-child(2){animation-delay:.15s;}
  .ai-chat-typing span:nth-child(3){animation-delay:.3s;}
  @keyframes aiChatTyping{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
  .ai-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);flex-shrink:0;background:#fff;}
  .ai-chat-form input{
    flex:1;border:1px solid var(--line);border-radius:100px;padding:10px 16px;font-size:14px;
    font-family:inherit;outline:none;
  }
  .ai-chat-form input:focus{border-color:var(--teal);}
  .ai-chat-form button{
    width:40px;height:40px;border-radius:100%;border:none;background:var(--teal);color:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  }
  .ai-chat-form button svg{width:18px;height:18px;}
  .ai-chat-form button:disabled{opacity:.5;cursor:default;}
  .ai-chat-form button:not(:disabled):hover{background:var(--teal-light);}
  .ai-chat-disclaimer{font-size:11px;color:var(--gray);text-align:center;padding:0 12px 12px;margin:0;flex-shrink:0;background:#fff;}
  @media (max-width:640px){
    .ai-chat-panel{right:14px;left:14px;width:auto;bottom:82px;}
  }

  /* ---------- DARK MODE ---------- */
  /* Every color in the site is already a custom property, so redefining
     them here re-themes almost the whole page automatically. Photo-backed
     and already-dark sections (splash gate, hero photo, contact band,
     footer) are deliberately left as-is — they read fine in both modes. */
  :root[data-theme="dark"]{
    --charcoal:#EDEFF2;
    --cream:#14181D;
    --teal-tint:#12262A;
    --gray:#9AA1AC;
    --line:#2A2F36;
    --paper:#1B2027;
  }
  :root[data-theme="dark"] body{background:var(--cream);}
  :root[data-theme="dark"] .ba-card,
  :root[data-theme="dark"] .hub-card,
  :root[data-theme="dark"] .dl-card,
  :root[data-theme="dark"] .quote-form,
  :root[data-theme="dark"] .booking-form,
  :root[data-theme="dark"] .quote-success,
  :root[data-theme="dark"] .portal-notice,
  :root[data-theme="dark"] .zone-modal,
  :root[data-theme="dark"] .dp-panel,
  :root[data-theme="dark"] .admin-table,
  :root[data-theme="dark"] .booking-card,
  :root[data-theme="dark"] .floating-contact-link,
  :root[data-theme="dark"] .file-list li{background:var(--paper);color:var(--charcoal);}
  :root[data-theme="dark"] .field input,
  :root[data-theme="dark"] .field select,
  :root[data-theme="dark"] .field textarea,
  :root[data-theme="dark"] .booking-form input,
  :root[data-theme="dark"] .booking-form select,
  :root[data-theme="dark"] .booking-form textarea,
  :root[data-theme="dark"] .auth-form input{background:var(--paper);color:var(--charcoal);}
  :root[data-theme="dark"] header:not(.header-on-photo){background:var(--cream);border-color:var(--line);}
  :root[data-theme="dark"] .mobile-menu{background:var(--cream);}
  :root[data-theme="dark"] .cta-arrow{background:var(--paper);color:var(--charcoal);}
  .theme-toggle{
    width:34px;height:34px;border-radius:100%;border:1.5px solid var(--line);
    background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
    color:var(--charcoal);flex:none;transition:border-color .15s ease;
  }
  .theme-toggle:hover{border-color:var(--teal);}
  .theme-toggle svg{width:16px;height:16px;}
  .theme-toggle .icon-moon{display:none;}
  :root[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
  :root[data-theme="dark"] .theme-toggle .icon-moon{display:block;}
  header.header-on-photo:not(.scrolled) .theme-toggle{border-color:rgba(255,255,255,.4);color:#fff;}

  /* ---------- COOKIE BANNER ---------- */
  #cookieBanner{
    position:fixed;left:16px;bottom:16px;z-index:500;
    width:300px;max-width:calc(100% - 32px);
    background:var(--paper);color:var(--charcoal);border-radius:12px;
    border:1px solid var(--line);
    padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.18);
    transform:translateY(120%);transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  #cookieBanner.show{transform:translateY(0);}
  .cookie-heading{margin:0 0 8px;font-weight:800;font-size:15px;padding-right:20px;}
  .cookie-para{margin:0 0 14px;font-size:12.5px;color:var(--gray);line-height:1.5;}
  .cookie-para a{color:var(--teal);text-decoration:underline;}
  .cookie-button-wrapper{display:flex;gap:10px;}
  .cookie-btn{
    flex:1;padding:9px 0;border:none;border-radius:7px;font-size:13px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:background .15s ease;
  }
  .cookie-btn-accept{background:var(--ink);color:#fff;}
  .cookie-btn-accept:hover{background:#000;}
  .cookie-btn-reject{background:transparent;border:1.5px solid var(--line);color:var(--charcoal);}
  .cookie-btn-reject:hover{background:var(--teal-tint);}
  .cookie-btn-full{width:100%;}
  .cookie-exit{
    position:absolute;top:14px;right:14px;width:22px;height:22px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;border-radius:6px;color:var(--gray);cursor:pointer;
  }
  .cookie-exit:hover{background:var(--teal-tint);color:var(--charcoal);}
  .cookie-customize-link{
    display:block;background:none;border:none;color:var(--gray);font-size:12px;
    text-decoration:underline;cursor:pointer;padding:10px 0 0;font-family:inherit;
  }
  .cookie-customize-link:hover{color:var(--charcoal);}
  .cookie-prefs{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);}
  .cookie-toggle-row{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:8px 0;
  }
  .cookie-toggle-body{display:flex;flex-direction:column;gap:2px;}
  .cookie-toggle-title{font-weight:600;font-size:12.5px;}
  .cookie-toggle-desc{font-size:11px;color:var(--gray);max-width:32ch;}
  .cookie-toggle-fixed{font-size:11px;font-weight:600;color:var(--gray);flex:none;white-space:nowrap;}
  .cookie-toggle-switch{width:34px;height:20px;flex:none;appearance:none;-webkit-appearance:none;
    background:var(--line);border-radius:100px;position:relative;cursor:pointer;
    transition:background .15s ease;
  }
  .cookie-toggle-switch::before{
    content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:100%;
    background:#fff;transition:transform .15s ease;
  }
  .cookie-toggle-switch:checked{background:var(--teal-light);}
  .cookie-toggle-switch:checked::before{transform:translateX(14px);}
  @media (prefers-reduced-motion:reduce){ #cookieBanner{transition:none;} }

  /* ---------- COPY TO CLIPBOARD ---------- */
  .copy-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:100%;border:1px solid var(--line);
    background:#fff;color:var(--gray);cursor:pointer;flex:none;margin-left:6px;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .copy-btn:hover{border-color:var(--teal);color:var(--teal);}
  .copy-btn svg{width:13px;height:13px;}
  .copy-btn.copied{border-color:var(--teal);background:var(--teal);color:#fff;}
  .quote-success-ref-row{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:14px;}

  /* ---------- CONFIRMATION MODAL ---------- */
  .confirm-backdrop{
    position:fixed;inset:0;z-index:800;background:rgba(20,24,20,.5);
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .confirm-backdrop.show{opacity:1;pointer-events:auto;}
  .confirm-modal{
    background:var(--paper);color:var(--charcoal);border-radius:16px;padding:28px;
    max-width:400px;width:100%;text-align:center;
    box-shadow:0 24px 64px rgba(0,0,0,.3);
    transform:scale(.96);transition:transform .2s ease;
  }
  .confirm-backdrop.show .confirm-modal{transform:scale(1);}
  .confirm-modal h3{font-size:20px;margin-bottom:10px;}
  .confirm-modal p{color:var(--gray);font-size:14.5px;margin:0 0 22px;}
  .confirm-modal-actions{display:flex;gap:10px;justify-content:center;}
  .confirm-modal-actions .btn-outline{padding:11px 20px;font-size:14px;}
  .confirm-modal-actions .btn{padding:11px 20px;font-size:14px;}

  /* ---------- PASSWORD VISIBILITY TOGGLE ---------- */
  .pw-inline-wrap{display:block;}
  .pw-field-wrap{position:relative;}
  .pw-field-wrap input{padding-right:42px!important;}
  .pw-toggle{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;color:var(--gray);
    display:flex;align-items:center;justify-content:center;padding:4px;
  }
  .pw-toggle:hover{color:var(--teal);}
  .pw-toggle svg{width:18px;height:18px;}
  .pw-toggle .icon-eye-off{display:none;}
  .pw-toggle.showing .icon-eye{display:none;}
  .pw-toggle.showing .icon-eye-off{display:block;}
  .portal-inputWrap.pw-field-wrap{padding-right:0;}
  .portal-inputWrap.pw-field-wrap input{padding-right:36px!important;}
  .portal-inputWrap.pw-field-wrap .pw-toggle{right:8px;}

  /* ---------- NEWSLETTER SIGNUP (footer) ---------- */
  .foot-newsletter{margin-bottom:28px;}
  .foot-newsletter p{color:#9AA1AC;font-size:13px;margin:0 0 16px;max-width:32ch;}
  .subscribe-card{
    position:relative;width:240px;padding:20px 20px 26px;
    background:var(--paper);border-radius:8px;color:var(--charcoal);
    box-shadow:0 14px 40px rgba(0,0,0,.35);
  }
  .subscribe-card::after{
    content:"";position:absolute;right:-9px;bottom:20px;width:0;height:0;
    border-left:0 solid transparent;border-right:9px solid transparent;
    border-bottom:9px solid var(--teal);
  }
  .subscribe-heading{
    margin:0 0 16px;text-align:center;font-size:15px;font-weight:800;
    letter-spacing:3px;font-family:'Inter',Arial,sans-serif;
  }
  .foot-newsletter-form{position:relative;display:block;}
  .subscribe-input{
    display:block;width:100%;border:none;border-bottom:1.5px solid var(--line);
    padding:0 0 10px;background:transparent;font-family:'Inter',Arial,sans-serif;
    font-size:13.5px;color:var(--charcoal);transition:border-color .2s ease;
  }
  .subscribe-input::placeholder{color:var(--gray);}
  .subscribe-input:focus{outline:none;border-bottom-color:var(--teal);}
  .subscribe-submit{
    margin-top:22px;border-radius:30px;border-bottom-right-radius:0;border-top-right-radius:0;
    background:var(--teal);color:#fff;padding:11px 22px;display:inline-block;
    font-family:'Inter',Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;
    border:none;cursor:pointer;float:right;margin-right:-20px;margin-bottom:-26px;
    box-shadow:-5px 6px 20px rgba(11,93,82,.35);transition:background .2s ease;
  }
  .subscribe-submit:hover{background:var(--teal-light);}
  .foot-newsletter-note{font-size:12px;margin-top:34px;color:#9AA1AC;clear:both;}
  .foot-newsletter-note.sent{color:#7FCDBD;}

  /* ---------- PRINT ---------- */
  @media print{
    header, .mobile-menu, footer, .floating-contact, #cookieBanner,
    #scrollProgress, .back-to-top, .skip-link, .splash-gate, .zone-backdrop,
    .quote-close, .lightbox, .theme-toggle, .legal-sticky-cta, .legal-toc-toggle,
    #splashShaderBg, .contact-band-shader-bg{
      display:none!important;
    }
    body{background:#fff!important;color:#000!important;font-size:12pt;}
    a{color:#000!important;text-decoration:underline;}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;color:#555;}
    .wrap{max-width:100%!important;padding:0!important;}
    .hero, .contact-band, .offer, section{padding:16pt 0!important;background:#fff!important;color:#000!important;}
    .hero-photo-bg, .hero-photo-scrim{display:none!important;}
    * { box-shadow:none!important; text-shadow:none!important; }
  }
  @media (prefers-reduced-motion:reduce){ .cta-arrow-box::before{animation:none;} }