/* =====================================================================
   SMILE SPOT DENTISTRY — global.css
   One stylesheet for the whole site. Upload with the pages that use it.
   Load it BEFORE each page's own <style> block (the stamp does this).

   PART 1  Existing site styles (colours, shell layout, dropdowns) — unchanged
   PART 2  Type & spacing system, taken from the homepage
   PART 3  Phone rules for the header, menu and footer
   ===================================================================== */

/* ==================== PART 1 — EXISTING SITE STYLES ==================== */

/* =====================================================================
   SMILE SPOT DENTISTRY — GLOBAL STYLESHEET
   Shared tokens, base styles, header/nav, footer, mobile nav, buttons.
   Loaded by every page. Page-specific section CSS stays in each page.
   Fonts: Playfair Display + Jost (load via <link> in each page <head>).
   ===================================================================== */


/* ── TEXT CONTRAST SYSTEM — site-wide standard ───────────────────────
   Light grounds (#ffffff / #faf9f6) only. Measured on #faf9f6:
     --text-body       .78  5.64:1  AA pass — meaningful reading content
     --text-secondary  .72  4.79:1  AA pass — supporting info, meta, captions
     --text-tertiary   .62  4.07:1  decorative microcopy ONLY, never content
   Headings unchanged. No parent opacity on text containers — use alpha
   colour so links and emphasis inside a block are not faded with it.
   Dark cactus/tahini sections are controlled separately and never
   inherit these tiers.
   Small interactive text that fails AA in cactus (4.45:1 on cream) takes
   Tahini for the label; cactus stays on the arrow, disc or rule. Never
   enlarge type merely to reach the large-text threshold. */
:root{
  --text-primary:#4f351d;
  --text-body:rgba(79,53,29,.78);
  --text-secondary:rgba(79,53,29,.72);
  --text-tertiary:rgba(79,53,29,.62);
}

:root{
  /* ===== BRAND PALETTE ===== */
  --cactus: #557d5e;   /* primary green — text, buttons, dark sections */
  --meadow: #f5e2b0;   /* meadow gold — accents on dark backgrounds */
  --tahini: #4f351d;   /* deep brown — eyebrows, secondary text, accents */
  --smoke:  #ffffff;   /* white — primary section backgrounds */
  --light:  #faf9f6;   /* warm off-white — alt section backgrounds */
  --fern:   #9bc39c;   /* light fern — footer link hover, soft accents */
  --gold:   #c39e63;   /* muted gold — stars, ratings, small accents */
  --bear:   #557d5e;   /* alias of cactus (legacy) */

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Jost', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
  .art-card{scroll-margin-top:90px}
body{font-family:'Jost',sans-serif;background:var(--smoke);color:var(--cactus);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
address{font-style:normal}

.ph{background:linear-gradient(135deg,var(--cactus) 0%,var(--cactus) 50%,var(--cactus) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center;position:relative;overflow:hidden;border:none}
.ph::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(85,125,94,0.07) 0%,transparent 60%)}
.ph-tag{display:none}

.display{font-family:'Playfair Display',serif;font-weight:400;line-height:1.08;color:var(--cactus)}
.display-italic{font-style:italic;color:var(--cactus)}
.eyebrow{font-size:0.74rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--tahini);font-weight:600;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:22px;height:1.5px;background:var(--tahini)}

.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--cactus);color:var(--smoke);padding:13px 36px;font-size:0.78rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;border:2px solid var(--cactus);border-radius:100px;transition:background .3s,transform .2s,box-shadow .3s;cursor:pointer}
.btn-primary:hover{background:var(--cactus);border-color:var(--cactus);transform:translateY(-2px);box-shadow:0 8px 24px rgba(85,125,94,0.28)}
.btn-outline{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--cactus);color:var(--cactus);padding:12px 34px;font-size:0.78rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;border-radius:100px;transition:background .3s,color .3s,transform .2s}
.btn-outline:hover{background:var(--cactus);color:var(--smoke);transform:translateY(-2px)}
.btn-outline-white{display:inline-flex;align-items:center;gap:10px;border:2px solid rgba(155,195,156,0.55);color:var(--smoke);padding:12px 34px;font-size:0.78rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;border-radius:100px;transition:border-color .3s,background .3s}
.btn-outline-white:hover{border-color:var(--meadow);background:rgba(155,195,156,0.12)}

.sr{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.sr.in{opacity:1;transform:none}
.sr-d1{transition-delay:.1s}.sr-d2{transition-delay:.2s}.sr-d3{transition-delay:.3s}.sr-d4{transition-delay:.4s}

header{position:fixed;top:0;left:0;right:0;z-index:999;padding:0 56px;height:78px;display:flex;align-items:center;justify-content:space-between;background:transparent;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);transition:background .5s,border-color .5s,box-shadow .5s}
header.opaque{background:var(--smoke);border-color:rgba(79,53,29,0.3);box-shadow:0 2px 24px rgba(213,196,122,0.10)}
.logo{display:flex;align-items:center;transition:opacity .3s;text-decoration:none}
.logo:hover{opacity:.85}
.logo-text{font-family:'Playfair Display',serif;font-size:1.32rem;font-weight:500;color:var(--smoke);letter-spacing:.06em;transition:color .5s;line-height:1.1}
.logo-sub{display:block;font-family:'Jost',sans-serif;font-size:.86rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:color .5s}
header.opaque .logo-text{color:var(--cactus)}
header.opaque .logo-sub{color:var(--tahini)}
nav{display:flex;align-items:center;gap:38px}
nav a{font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);transition:color .3s;position:relative}
nav a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1.5px;background:var(--meadow);transition:width .3s}
nav a:hover{color:var(--smoke)}
nav a:hover::after{width:100%}
header.opaque nav a{color:var(--cactus)}
header.opaque nav a:hover{color:var(--cactus)}
.nav-trigger{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);transition:color .3s;padding:0;display:flex;align-items:center;gap:5px}
.nav-trigger:hover{color:var(--smoke)}
header.opaque .nav-trigger{color:var(--cactus)}
.header-right{display:flex;align-items:center;gap:18px}
.header-phone{font-size:1rem;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:.04em;transition:color .5s}
header.opaque .header-phone{color:var(--cactus)}
.reserve-btn-text{display:inline}
.reserve-btn-short{display:none}
.reserve-btn{background:var(--smoke);color:var(--cactus);padding:8px 18px;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--smoke);border-radius:100px;transition:background .3s,color .3s,border-color .3s,transform .2s,box-shadow .3s;white-space:nowrap}
.reserve-btn:hover{background:var(--cactus);border-color:var(--cactus);color:var(--smoke);transform:translateY(-1px);box-shadow:0 6px 20px rgba(85,125,94,0.28)}
header.opaque .reserve-btn{background:var(--cactus);color:var(--smoke);border-color:var(--cactus)}
header.opaque .reserve-btn:hover{background:var(--meadow);border-color:var(--meadow);color:var(--cactus)}

.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:flex;align-items:center;gap:5px}
.nav-item>a .nav-arrow{font-size:.77rem;transition:transform .3s;opacity:.7;margin-top:1px}
.nav-item:hover>a .nav-arrow,.nav-item:hover>.nav-trigger .nav-arrow{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 16px);left:-20px;min-width:220px;background:rgba(85,125,94,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(155,195,156,.14);border-top:1.5px solid rgba(155,195,156,.45);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .28s,transform .28s,visibility .28s;z-index:1000;box-shadow:0 16px 40px rgba(0,0,0,.22)}
.nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
header.opaque .dropdown{background:rgba(255,255,255,.97);border-color:rgba(155,195,156,.18)}
.dropdown a{display:flex;align-items:center;gap:10px;padding:12px 22px;font-size:.80rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;transition:background .2s,color .2s,padding-left .2s}
.dropdown a::after{display:none}
.dropdown a:hover{color:var(--smoke);background:rgba(155,195,156,.09);padding-left:28px}
header.opaque .dropdown a{color:var(--cactus)}
header.opaque .dropdown a:hover{color:var(--cactus);background:rgba(155,195,156,.12);padding-left:26px}
.dropdown-divider{height:1px;background:rgba(255,255,255,.07);margin:3px 0}

.mobile-btn{display:none;cursor:pointer;font-size:1.4rem;color:var(--smoke);background:none;border:none;padding:4px;line-height:1}
header.opaque .mobile-btn{color:var(--cactus)}

.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}
*:focus{outline:3px solid var(--cactus);outline-offset:3px}
*:focus:not(:focus-visible){outline:none}
*:focus-visible{outline:3px solid var(--cactus);outline-offset:3px}
.skip-nav{position:absolute;top:-100px;left:16px;background:var(--cactus);color:var(--smoke);padding:10px 20px;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;z-index:9999;transition:top .2s}
.skip-nav:focus{top:16px}

.mobile-nav{position:fixed;inset:0;width:100%;height:100%;background:rgba(255,255,255,0.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:9999;transform:translateY(-100%);transition:transform .45s cubic-bezier(.16,1,.3,1);overflow-y:auto;overflow-x:hidden;padding:0;display:flex;flex-direction:column}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav-header{display:flex;align-items:center;justify-content:center;padding:30px 56px 22px;border-bottom:1px solid rgba(79,53,29,.2);flex-shrink:0;position:relative}
.mobile-nav-brand{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:500;color:var(--cactus);letter-spacing:.04em;text-align:center}
.mobile-nav-brand span{display:block;font-family:'Jost',sans-serif;font-size:.80rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tahini);margin-top:2px}
.mobile-nav-close{position:absolute;top:18px;right:18px;background:none;border:none;color:var(--tahini);font-size:1.25rem;cursor:pointer;padding:8px;line-height:1;transition:color .2s;z-index:2}
.mobile-nav-close:hover{color:var(--cactus)}
.mobile-nav-body{flex:1;padding:8px 0 32px;overflow-y:auto}
.mobile-nav-section{border-bottom:1px solid rgba(79,53,29,.15)}
.mobile-nav-heading--link{display:block;text-decoration:none;color:inherit;cursor:pointer;justify-content:flex-start}
.mobile-nav-heading--link:hover{color:var(--cactus)}
.mobile-nav-heading{display:flex;align-items:center;justify-content:space-between;font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:400;color:var(--cactus);padding:18px 28px;cursor:pointer;transition:color .2s,background .2s;user-select:none;line-height:1.2}
.mnh-label{display:inline-flex;align-items:baseline}
.mobile-nav-heading em{font-style:italic;color:var(--cactus);margin-left:.32em}
.mobile-nav-heading:hover{color:var(--cactus);background:rgba(79,53,29,.06)}
.mobile-nav-heading.active{color:var(--cactus);background:rgba(85,125,94,.06)}
.mobile-nav-arrow{width:16px;height:16px;transition:transform .3s;color:var(--tahini);flex-shrink:0;margin-left:12px}
.mobile-nav-heading.active .mobile-nav-arrow{transform:rotate(180deg);color:var(--cactus)}
.mobile-nav-sub{display:none;background:rgba(79,53,29,.08);padding:4px 0 12px}
.mobile-nav-sub.open{display:block}
.mobile-nav-sub a{display:block;font-size:.80rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tahini);padding:11px 28px 11px 40px;border-bottom:1px solid rgba(79,53,29,.08);transition:color .2s,padding-left .2s;text-decoration:none}
.mobile-nav-sub a:hover{color:var(--cactus);padding-left:48px}
.mobile-nav-plain a{display:block;font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:400;color:var(--cactus);padding:18px 28px;border-bottom:1px solid rgba(79,53,29,.15);transition:color .2s,background .2s;text-decoration:none;text-transform:none;letter-spacing:normal}
.mobile-nav-plain a:hover{color:var(--cactus);background:rgba(79,53,29,.06)}
.mobile-nav-cta{padding:28px;margin-top:auto;border-top:1px solid rgba(79,53,29,.2);background:none;flex-shrink:0}
.mobile-nav-cta > a{display:block;text-align:center;background:var(--cactus);color:var(--smoke);padding:15px 24px;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border-radius:100px;margin-bottom:14px;transition:background .3s;text-decoration:none}
.mobile-nav-cta > a:hover{background:var(--cactus)}
.mobile-nav-phone{text-align:center;font-size:.82rem;color:var(--tahini);letter-spacing:.04em}
.mobile-nav-phone a{color:var(--cactus);text-decoration:none;background:none;padding:0;font-size:inherit;letter-spacing:inherit;text-transform:none;border-radius:0;display:inline}


footer{background:var(--cactus);padding:80px 80px 40px;border-top:3px solid var(--cactus)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1);align-items:start}
.footer-logo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:18px;text-decoration:none}
/* Brand must not break mid-name. Scoped to >=1024px: below that the footer
   runs narrow tracks (~227px at 900) and nowrap pushes the page sideways.
   The brand also sits in a nested span on some pages, hence both selectors. */
@media(min-width:1024px){
  .footer-logo-wrap,.footer-logo-wrap span{white-space:nowrap}
}
.footer-logo-text{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:500;color:var(--meadow)}
.footer-about{font-size:.82rem;line-height:1.85;color:var(--smoke);max-width:280px;margin-top:16px}
.footer-socials{display:flex;gap:16px;margin-top:16px}
.footer-social{width:38px;height:38px;border-radius:50%;border:1px solid rgba(155,195,156,.4);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--smoke);transition:border-color .3s,color .3s,background .3s}
.footer-social:hover{border-color:var(--meadow);color:var(--meadow);background:rgba(155,195,156,.10)}
.footer-col h5{font-size:.80rem;letter-spacing:.24em;text-transform:uppercase;color:var(--meadow);font-weight:600;margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.footer-col ul a{font-size:.8rem;color:var(--smoke);transition:color .3s}
.footer-col ul a:hover{color:var(--fern)}
.footer-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--smoke)}
.footer-bottom a{color:var(--smoke);transition:color .3s}
.footer-bottom a:hover{color:var(--fern)}
.fb-links{display:flex;gap:22px}

.seo-services{background:rgba(155,195,156,.08);padding:22px 80px;border-top:1px solid rgba(155,195,156,.15)}
.seo-services-title{font-size:.80rem;letter-spacing:.28em;text-transform:uppercase;color:var(--meadow);font-weight:600;margin-bottom:10px}
.seo-services-links{display:flex;flex-wrap:wrap;gap:4px 0}
.seo-services-links a{font-size:.78rem;color:var(--smoke);text-decoration:none;letter-spacing:.06em;transition:color .2s}
.seo-services-links a:hover{color:var(--fern)}
.seo-services-links a::after{content:'·';margin:0 8px;color:var(--smoke);opacity:.4}
.seo-services-links a:last-child::after{display:none}

/* =====================================================================
   STICKY MOBILE ACTION BAR  (mobile only — hidden on desktop)
   Two 50/50 actions: tap-to-call (left) + Reserve booking (right).
   Markup: a <div class="m-action-bar"> placed before </body> on each page.
   ===================================================================== */
.m-action-bar{display:none}
@media(max-width:1100px){
  .m-action-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:998;
    background:var(--smoke);border-top:1px solid rgba(79,53,29,.15);
    box-shadow:0 -4px 24px rgba(79,53,29,.10);
    padding:10px 12px;gap:10px;
  }
  .m-action-bar a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 10px;font-family:var(--font-body);font-size:.74rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;border-radius:100px;
    text-decoration:none;transition:background .3s,color .3s,border-color .3s;
  }
  .m-action-bar svg{width:16px;height:16px;flex-shrink:0}
  /* Left — Call */
  .m-action-call{background:var(--smoke);color:var(--cactus);border:1.5px solid var(--cactus)}
  .m-action-call:active{background:rgba(85,125,94,.08)}
  /* Right — Reserve */
  .m-action-reserve{background:var(--cactus);color:var(--smoke);border:1.5px solid var(--cactus)}
  .m-action-reserve:active{background:var(--tahini);border-color:var(--tahini)}
  /* Hide the bar while the full-screen mobile menu is open */
  .mobile-nav.open ~ .m-action-bar{display:none}
  /* Keep page content clear of the fixed bar */
  body{padding-bottom:72px}
}
.logo img {
  height: 120px;
  width: auto;
}
.logo-img { height: 120px; width: auto; } .logo-dark { display: none; } header.opaque .logo-light { display: none; } header.opaque .logo-dark { display: block; }
.hero-media { position: relative; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,40,20,.75) 0%, rgba(15,40,20,.35) 45%, rgba(15,40,20,0) 75%);
  pointer-events: none;
}
.hero-video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
}
img.art-front-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
}
.doc-visual img.doc-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
}
.case-side img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* =====================================================================
   SMILE SPOT — GLOBAL TYPE & SPACING SYSTEM
   Every value below is taken from the homepage. No colours changed.
   Appended to global.css. Pages inherit these; page CSS only overrides
   where a layout genuinely needs it (see Step 10).
   ===================================================================== */

:root{
  /* --- Font families --- */
  --font-display:'Playfair Display',serif;
  --font-body:'Jost',sans-serif;

  /* --- Type scale (homepage values) --- */
  --fs-hero:clamp(3.8rem,7vw,7.2rem);      /* .hero-h1            */
  --fs-hero-mobile:clamp(2.7rem,8vw,3.8rem);
  --fs-display-lg:clamp(2.8rem,4.5vw,4.4rem);  /* main section headings */
  --fs-display-md:clamp(2.4rem,4vw,4rem);      /* secondary sections   */
  --fs-display-sm:clamp(2rem,3.2vw,3.2rem);    /* minor sections       */
  --fs-card-title:clamp(1.55rem,2vw,2rem);
  --fs-quote:clamp(1.8rem,3.5vw,3rem);
  --fs-lead:1.12rem;                        /* .hero-sub            */
  --fs-body:1.06rem;                         /* .fcta-sub            */
  --fs-eyebrow:.74rem;
  --fs-attr:.75rem;
  --fs-small:.76rem;

  /* --- Line heights --- */
  --lh-hero:1.02;
  --lh-hero-mobile:.92;
  --lh-display:1.06;
  --lh-card-title:1.15;
  --lh-quote:1.4;
  --lh-lead:1.78;
  --lh-body:1.78;

  /* --- Letter spacing --- */
  --ls-eyebrow:.28em;
  --ls-eyebrow-wide:.3em;
  --ls-small:.24em;
  --ls-quote:.01em;

  /* --- Weights --- */
  --fw-display:400;
  --fw-lead:300;
  --fw-body:400;
  --fw-eyebrow:600;

  /* --- Spacing --- */
  --pad-side:80px;                 /* desktop section side padding  */
  --pad-side-mobile:22px;          /* homepage phone side padding   */
  --pad-section:72px;              /* .section-break desktop        */
  --pad-section-mobile:56px;
  --gap-sm:12px;
  --gap-md:18px;
  --gap-lg:28px;

  /* --- Breakpoints are 1100px and 768px site-wide --- */
}

/* ---------- Base type ---------- */
body{font-family:var(--font-body);}

h1,h2,h3,h4,.display,
.hero-h1,.pillar-card-title,.art-front-title{
  font-family:var(--font-display);
  font-weight:var(--fw-display);
}

.display{line-height:var(--lh-display);}

.eyebrow,.h-eyebrow{
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  font-weight:var(--fw-eyebrow);
}
/* .seo-services-title keeps its own .80rem — see global.css above */

/* ---------- Role-based type (applies to every page) ---------- */
/* Hero headline — any page's hero h1, whatever its class */
.hero-h1,
.hero h1,
[class$="-hero"] h1,
[class*="-hero-"] h1{
  font-size:var(--fs-hero);
  line-height:var(--lh-hero);
  font-weight:var(--fw-display);
  font-family:var(--font-display);
}

/* Hero intro paragraph */
.hero-sub,
[class$="-hero-sub"],
[class*="-hero-sub"]{
  font-size:var(--fs-lead);
  font-weight:var(--fw-lead);
  line-height:var(--lh-lead);
}

/* Body copy */
p{line-height:var(--lh-body);}

/* Pull quotes / testimonials */
.section-break-quote{
  font-family:var(--font-display);
  font-size:var(--fs-quote);
  font-weight:300;
  line-height:var(--lh-quote);
  letter-spacing:var(--ls-quote);
}

/* ---------- Footer column titles ----------
   The homepage markup uses .footer-nav-title on an <h5>; global.css only
   styled <h5>, so titles rendered as plain 16px on 11 pages. This fixes it
   for every page at once. */
footer .footer-nav-title,
footer .footer-col h5{
  font-family:var(--font-body);
  font-size:.80rem;
  letter-spacing:var(--ls-eyebrow);
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* ---------- Header: phone number ----------
   Was wrapping onto two lines at 390px. */
.header-phone{
  font-family:var(--font-body);
  white-space:nowrap;
}

/* =====================================================================
   PHONE RULES — the missing piece.
   These lived only inside each page, which is why the mobile menu broke
   on 26 pages when global.css loaded after the page's own styles.
   ===================================================================== */
@media(max-width:1100px){

  /* Desktop menu off, hamburger on */
  header nav{display:none;}
  .mobile-btn{display:block;}

  /* Header: logo · phone number · hamburger */
  .header-right{display:flex;align-items:center;gap:14px;}
  .header-phone{display:inline-block;font-size:.9rem;}
  .reserve-btn{display:none;}          /* moves to the sticky bar */

  /* Hero */
  .hero-content{padding:0 var(--pad-side-mobile) 80px;}
  .hero-h1,.hero h1,[class$="-hero"] h1,[class*="-hero-"] h1{
    font-size:var(--fs-hero-mobile);
    line-height:var(--lh-hero-mobile);
  }

  /* Sticky bar visible once scrolled */
  .m-action-bar{display:flex;}
}

@media(max-width:768px){
  .section-break{padding:var(--pad-section-mobile) var(--pad-side-mobile);}

  /* Footer grid was wider than the screen on almost every page,
     clipping the right-hand column. */
  .footer-grid{
    grid-template-columns:1fr;
    gap:36px;
    padding-left:var(--pad-side-mobile);
    padding-right:var(--pad-side-mobile);
  }
  .footer-grid>*{min-width:0;}
  footer ul{padding-left:0;list-style:none;}
}

/* ---------- Menu open: stop the page behind it scrolling ---------- */
body.menu-open{overflow:hidden;}

/* ---------- Sticky action bar ---------- */
.m-action-bar{
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.m-action-bar.visible{
  opacity:1;
  pointer-events:auto;
}

/* ---------- Google review badge ---------- */
.g-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:14px 20px;
  margin-top:22px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  text-decoration:none;
  font-family:var(--font-body);
  line-height:1;
  transition:box-shadow .2s ease, transform .2s ease;
}
.g-badge:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  transform:translateY(-1px);
}

.g-badge-mark{
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color:#4285f4;
  flex:none;
  line-height:1;
}

.g-badge-score{
  font-size:1.45rem;
  font-weight:600;
  color:#3c4043;
  letter-spacing:-.01em;
}

.g-badge-stars{
  color:#fbbc04;
  font-size:1.05rem;
  letter-spacing:.10em;
  flex:none;
}

.g-badge-count{
  display:block;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:none;
  color:#5f6368;
  white-space:nowrap;
}

/* rating + stars sit together, the count reads underneath */
.g-badge-meta{display:flex;flex-direction:column;gap:6px;}
.g-badge-row{display:flex;align-items:center;gap:10px;}

@media(max-width:768px){
  .g-badge{gap:12px;padding:12px 16px;}
  .g-badge-score{font-size:1.3rem;}
}

/* ---------- Images and icons: built-in sizes ----------
   So nothing blows up if CSS fails to load. */
/* Built-in sizes so icons don't blow up if CSS fails to load.
   Values match what global.css already sets. */
.header-phone-icon{width:18px;height:18px;flex:none;}

/* ---------- Footer columns: tappable headings on phones ----------
   Desktop is unchanged: all columns open, no interaction. */
@media(max-width:768px){
  footer .footer-col .footer-nav-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    margin:0;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  footer .footer-col .footer-nav-title::after{
    content:"";
    width:9px;height:9px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .25s ease;
    flex:none;
  }
  footer .footer-col .footer-nav-title.open::after{
    transform:rotate(-135deg) translateY(-2px);
  }
  footer .footer-col ul{
    max-height:0;
    overflow:hidden;
    margin:0;
    transition:max-height .3s ease;
  }
  footer .footer-col ul.open{max-height:1200px;padding-top:8px;padding-bottom:12px;}

  /* The Concierge column keeps its addresses visible — no tap needed. */
  footer .footer-col .footer-locations,
  footer .footer-col .footer-contact-shared{max-height:none;overflow:visible;}
}

/* ---------- Location line (header + mobile menu) ---------- */
.header-locations{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.header-locations{color:inherit;}
.mobile-nav-locations{color:#4f351d;}   /* the mobile menu's own text colour */
.header-locations .loc-current,.header-locations a{color:inherit;text-decoration:none;opacity:.65;}
.mobile-nav-locations a{color:#4f351d;text-decoration:none;opacity:.55;}
.header-locations a:hover,.mobile-nav-locations a:hover{opacity:1;}

.mobile-nav-locations{
  display:none;
  gap:10px;
  padding:14px 28px;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* ---------- Footer: five columns now (logo + 3 service + concierge) ---------- */
footer .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;}

footer .footer-loc{margin-bottom:14px;}
footer .footer-loc-name{
  display:block;
  color:#f5e2b0;          /* same as the footer's other column titles */
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.72rem;
  opacity:.7;
  margin-bottom:4px;
}
footer .footer-loc a{display:block;}
footer .footer-locations{list-style:none;padding-left:0;}

/* =====================================================================
   PHONE OVERRIDES — these must beat each page's own footer rules, so
   they are written more specifically than the page versions.
   ===================================================================== */
@media(max-width:1100px){
  /* No room beside the logo — the location line moves into the menu */
  header .header-locations{display:none;}
  .mobile-nav-locations{display:flex;}
}

@media(max-width:768px){
  footer .footer-grid,
  footer.footer .footer-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  footer .footer-grid>div:first-child{margin-bottom:28px;}
  footer .footer-col .footer-nav-title{white-space:normal;}
}


/* ---------- Footer: Concierge column is not collapsible ---------- */
@media(max-width:768px){
  footer .footer-col:last-child .footer-nav-title{cursor:default;}
  footer .footer-col:last-child .footer-nav-title::after{display:none;}
  footer .footer-loc-name{font-size:.7rem;margin:0 0 6px;}
  footer .footer-loc{margin-bottom:18px;}
}

footer .footer-email::before{
  content:"✉";
  margin-right:8px;
  font-size:.95em;
}

/* ---------- Header controls: must beat each page's own rules ----------
   global.css loads first (by design), so these are written more
   specifically than the page-level versions they need to override. */
@media(max-width:1100px){
  header#siteHeader nav{display:none;}
  header#siteHeader .header-right{
    display:flex;
    align-items:center;
    gap:14px;
  }
  header#siteHeader .mobile-btn{
    display:block;
    width:auto;
    height:auto;
    min-width:34px;
    min-height:34px;
    font-size:1.4rem;
    line-height:1;
    padding:4px;
    background:none;
    border:none;
    cursor:pointer;
  }
}
@media(min-width:1101px){
  header#siteHeader .mobile-btn{display:none;}
}


/* ---------- "Visit our other studio" button ---------- */
.other-studio-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding:15px 30px;
  border:1px solid currentColor;
  border-radius:40px;
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  transition:opacity .2s ease, transform .2s ease;
}
.other-studio-cta::after{content:"\2192";font-size:1rem;}
.other-studio-cta:hover{opacity:.75;transform:translateX(2px);}
@media(max-width:768px){
  .other-studio-cta{width:100%;justify-content:center;margin-top:22px;}
}

/* ---------- Form controls inherit the site's fonts ----------
   Browsers default buttons, inputs and selects to their own UI font (Arial),
   which is why FAQ questions and slider arrows were rendering in Arial on
   every page. */
button, input, select, textarea{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
}
/* the hamburger keeps its own glyph size */
header#siteHeader .mobile-btn{font-size:1.4rem;line-height:1;}

/* =====================================================================
   PHONE: stop content running off the right edge.
   Two causes across the site — labels forced onto one line, and grid/flex
   children that won't shrink below their content width.
   ===================================================================== */
@media(max-width:768px){

  /* 1. Labels and strip text may wrap on small screens */
  .ll-text, .str-text, .str-label,
  [class$="-label"], [class$="-text"]{
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* 2. Grid and flex children shrink instead of forcing the page wider */
  main *, section *{min-width:0;}
  main > *, section > *{max-width:100%;}

  /* long words, URLs and email addresses break rather than overflow */
  p, li, h1, h2, h3, h4, td, th, dd, dt{overflow-wrap:break-word;}

  /* tables scroll inside their own box, not the page */
  table{display:block;overflow-x:auto;max-width:100%;}
}

/* Ticker / marquee strips: let them run inside their own box rather than
   widening the page. Written specifically so it beats the page's own rules. */
@media(max-width:768px){
  main .ll-text, main .str-text, main .str-label,
  section .ll-text, section .str-text, section .str-label{
    white-space:nowrap;                 /* keep the ticker on one line */
  }
  /* …and clip it at the parent so the page stays 100% wide */
  main .ll-text, main .str-text, section .ll-text, section .str-text{
    max-width:100vw;
  }
  .ll-strip, .str-strip, .logo-loop, .mat-strip, .art-strip, .sd-strip,
  [class$="-strip"], [class$="-loop"], [class*="ticker"], [class*="marquee"]{
    overflow:hidden !important;
    max-width:100%;
  }
  /* any direct child of a section that still runs wide gets clipped */
  section > div, main > section{max-width:100%;overflow-x:clip;}
}

/* Full-width label bands (the "LAYER 2 — THE RESEARCHER" strips) hold
   nowrap text wider than a phone. They keep their design and scroll inside
   their own band rather than widening the page. */
@media(max-width:768px){
  .layer-label, .side-label, .edge-label{
    overflow-x:auto;
    max-width:100%;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .layer-label::-webkit-scrollbar,
  .section-divider::-webkit-scrollbar{display:none;}
}

/* Wide comparison tables scroll inside their own box on phones.
   Written specifically so it beats each page's own table rules. */
@media(max-width:768px){
  main table, section table, .table-wrap table, table.cmp, table.compare{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  main table thead, main table tbody, main table tr,
  section table thead, section table tbody, section table tr{
    width:max-content;
    min-width:100%;
  }
  main table colgroup, section table colgroup{display:none;}

  /* Full-width buttons rather than ones that run past the edge */
  main .btn, main .btn-primary, main .btn-outline, main .btn-cream,
  section .btn, section .btn-primary, section .btn-outline, section .btn-cream{
    max-width:100%;
    white-space:normal;
    text-align:center;
    justify-content:center;
  }
}

/* Remaining label strips on the restorative pages (.protocol-label inside
   .engineer-zone and similar) hold nowrap text wider than a phone. They keep
   their design and scroll inside their own container. */
@media(max-width:768px){
  .engineer-zone, [class$="-zone"]{
    max-width:100%;
    overflow-x:clip;
  }
  main{max-width:100%;overflow-x:clip;}
}

/* Sections run edge to edge. Text inside keeps a readable measure
   (see --fs-body / the 680px measure) so lines don't stretch on wide
   monitors, but backgrounds and images are full-bleed. */

/* ---------- Default reading measure ----------
   Paragraphs that never had a max-width ran the full width of their column —
   over 1100px on a wide screen, which is far past comfortable reading. This
   gives them the same measure as the rest. A page that sets its own
   max-width still wins, since page styles load after this file. */
p, li{
  max-width:680px;
}
/* the shell and any deliberately wide block are exempt */
header p, header li, footer p, footer li,
.mobile-nav p, .mobile-nav li, .m-action-bar p,
.hero p, [class*="hero"] p, [class*="tagline"], [class*="-quote"], blockquote p{
  max-width:none;
}
/* Centred blocks keep their centring when capped */
main p[style*="margin:0 auto"], section p[style*="margin:0 auto"],
.center p, [class*="-center"] p, [class*="centered"] p{
  margin-left:auto;
  margin-right:auto;
}

/* =====================================================================
   DARK PANELS — derived from the palette, not added to it.
   The site used 9 different dark greens. They are consolidated to the
   three below — the original values, unchanged, so nothing shifts. Every
   dark panel on the site now uses one of these three.
   ===================================================================== */
:root{
  --cactus-deepest: var(--cactus);   /* near-black panels   */
  --cactus-deep:    var(--cactus);   /* standard dark panels */
  --cactus-mid:     var(--cactus);   /* lighter dark panels  */
  /* the deepest shade as plain rgb, for use inside rgba() overlays */
  --cactus-deepest-rgb: 85, 125, 94;   /* --cactus-deepest, for use inside rgba() */
}

/* =====================================================================
   TEXT ON THE BRAND GREEN
   The homepage sets the rule: white for text on #557d5e, cream reserved
   for large headings. The other pages used cream, gold and pale green at
   small sizes — readable on the old near-black panels, not on the green.
   These rules bring them into line. Large headings keep cream.
   ===================================================================== */

/* any element whose own background is the brand green */
[style*="var(--cactus)"] p,
[style*="var(--cactus)"] li,
[style*="var(--cactus)"] span,
[style*="var(--cactus)"] div,
[style*="var(--cactus)"] td,
[style*="var(--cactus)"] h4,
[style*="var(--cactus)"] h5,
[style*="var(--cactus)"] h6{
  color:var(--smoke);
}

/* headings stay cream — they are large enough to carry it */
[style*="var(--cactus)"] h1,
[style*="var(--cactus)"] h2,
[style*="var(--cactus)"] h3,
[style*="var(--cactus)"] .display{
  color:var(--meadow);
}

/* Contrast on the brand green: small text takes white, large headings keep cream.
   Scoped so gold and cream still appear on light backgrounds. */
footer .footer-nav-title{color:var(--smoke);}
footer .footer-loc-name{color:var(--smoke);}
footer .other-studio-cta{color:var(--smoke);}
footer a{color:var(--smoke);}

/* =====================================================================
   HEADER — tablet and small-desktop widths
   The full desktop nav does not fit between 768px and 1200px: items wrap
   onto two lines and collide. The hamburger now takes over at 1200px.
   ===================================================================== */
@media(max-width:1200px){
  header#siteHeader nav{display:none;}
  header#siteHeader .header-right{display:flex;align-items:center;gap:14px;}
  header#siteHeader .mobile-btn{
    display:block;width:auto;height:auto;min-width:34px;min-height:34px;
    font-size:1.4rem;line-height:1;padding:4px;background:none;border:none;cursor:pointer;
  }
  header#siteHeader .header-locations{display:none;}
}
@media(min-width:1201px){
  header#siteHeader .mobile-btn{display:none;}
}

/* ---------- Logo legibility ----------
   Over a photographic hero the light logo was washing out. A soft scrim
   behind the header keeps it readable without hiding the image. */
header#siteHeader:not(.opaque){
  background:linear-gradient(to bottom, rgba(15,33,24,.42), rgba(15,33,24,0));
}
header#siteHeader .logo-img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));}
header#siteHeader.opaque .logo-img{filter:none;}

/* ---------- FAQ rows ----------
   28px of padding above and below a single line of text made each row
   133px tall. Tightened site-wide. */
.faq-item, .bond-faq-item{padding-top:0;padding-bottom:0;}
.faq-q, .faq-trigger, .faq-toggle, .bond-faq-q, .faq-toggle-q{
  padding-top:18px;
  padding-bottom:18px;
}

/* ---------- 4. Gallery before/after images ----------
   They were cropping to a zoomed portion at tablet width instead of
   scaling to show the whole smile. */
@media(max-width:1200px){
  .gl-case img, .gal-img img, [class*="ba-"] img, .case-img img{
    width:100%;
    height:auto;
    object-fit:contain;
    max-height:none;
  }
  .gl-case, .gal-img, .case-img{height:auto;}
}

/* ---------- 9. Wide diagrams on tablets ----------
   The restoration ladder and similar were cut off at the container edge. */
@media(max-width:1200px){
  .restoration-ladder img, figure img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
  .restoration-ladder{max-width:100%;}
}

/* ---------- 12. Hero height on tablets ----------
   Heroes were filling the entire iPad screen, leaving no sign that the
   page continues. */
/* ---------- Hero height — one rule, site-wide (updated 0920) ----------
   Every page hero fills the window, like the home page. Rebuilt heroes use
   their own class names (wp-hero, rh, bh), so they are listed here too. */
section[class*="hero"],
.wp-hero,
section.rh,
section.bh{min-height:100vh !important;}

/* ---------- 20. Journal hero proportions ----------
   The headline shrank on tablets while the container kept its desktop
   padding, so the block looked squeezed. */
@media(max-width:1200px){
  .jr-hero{padding-top:96px;padding-bottom:56px;}
  .jr-hero h1{line-height:1.1;}
}

/* ---------- 21. Contact trust bar ----------
   The third column had no closing rule, so it read as longer. */
.fv-bar-in .fv-bar-item:last-child{border-right:1px solid rgba(255,255,255,.14);}
@media(max-width:768px){
  .fv-bar-in .fv-bar-item:last-child{border-right:none;border-bottom:none;}
}

/* ---------- Tablet: same containment as phones ----------
   The label strips and wide grids were only handled below 768px, so
   tablets still ran past the right edge. */
@media(max-width:1200px){
  .layer-label, .side-label, .edge-label, .section-divider{
    overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .layer-label::-webkit-scrollbar,.section-divider::-webkit-scrollbar{display:none;}
  .engineer-zone, [class$="-zone"], [class$="-strip"], [class$="-loop"],
  [class*="ticker"], [class*="marquee"]{overflow:hidden;max-width:100%;}
  main{max-width:100%;overflow-x:clip;}
  main *, section *{min-width:0;}
  main > *, section > *{max-width:100%;}
  main table, section table{display:block;width:100%;max-width:100%;overflow-x:auto;}
}

/* ---------- 1. Venice · Sarasota in the header ----------
   It was hidden below 1200px and too low-contrast on the green above it. */
header#siteHeader .header-locations{
  display:inline-flex !important;
  color:var(--smoke);
  opacity:1;
}
header#siteHeader .header-locations .loc-current{font-weight:600;color:var(--meadow);}
header#siteHeader .header-locations a{color:var(--smoke);opacity:.75;}
header#siteHeader .header-locations a:hover{opacity:1;}
header#siteHeader.opaque .header-locations{color:var(--tahini);}
header#siteHeader.opaque .header-locations .loc-current{color:var(--cactus);}
header#siteHeader.opaque .header-locations a{color:var(--tahini);}
/* Shown on tablets too — there is room beside the phone number.
   Only phones drop it, where it moves into the mobile menu. */
@media(max-width:1200px){
  header#siteHeader .header-locations{
    display:inline-flex !important;
    font-size:.68rem;
    letter-spacing:.14em;
    margin-right:4px;
  }
}
@media(max-width:820px){
  header#siteHeader .header-locations{display:none !important;}
}

/* ---------- 14. Footer: no dead space under the columns ---------- */
footer .footer-grid{padding-bottom:48px;}
footer .footer-col ul:last-child{margin-bottom:0;}
footer .footer-bottom{padding-top:28px;}

/* ---------- 11 & 13. One FAQ component, everywhere ----------
   Rows were 110–165px tall for a single line, the toggle sat at the far
   right of the screen, and pages differed from one another. */
.faq-wrap, .faq-list, [class*="faq"] > .faq-item:first-child{max-width:900px;}
.faq-item, .bond-faq-item{max-width:900px;}
.faq-q, .faq-trigger, .faq-toggle, .bond-faq-q, .faq-toggle-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:900px;
  padding-top:16px !important;
  padding-bottom:16px !important;
  min-height:0;
  line-height:1.4;
}
.faq-a, .faq-a-inner, .bond-faq-a{max-width:900px;}

/* ---------- 12. Citations on one line ----------
   Five stacked rows became a single line of fine print. */
.sources-inline{
  font-size:.72rem;
  line-height:1.7;
  color:rgba(79,53,29,.55);
  max-width:none;
  margin:0;
}
.sources-inline .src-n{color:var(--gold);font-weight:600;margin-right:2px;}
.sources-inline a{color:rgba(79,53,29,.7);text-decoration:underline;text-underline-offset:2px;}
.sources-inline em{font-style:italic;}
.sources-section{padding-top:28px;padding-bottom:28px;}
.sources-title{margin-bottom:10px;}

/* ---------- Image placeholders ----------
   The slots that await photography were printing their build notes to the
   page — filenames, "Awaiting Asset", loading attributes. The slot keeps its
   space so the layout is right when the photo lands; the note does not show. */
.ph-box, .fv-photo-ph, .sch-ph, [class$="-ph"], [class*="photo-ph"], [class*="-ph-"]{
  color:transparent !important;
  font-size:0 !important;
  user-select:none;
}
.ph-box *, .fv-photo-ph *, .sch-ph *, [class$="-ph"] *, [class*="photo-ph"] *{
  color:transparent !important;
  font-size:0 !important;
}
.ph-box img, .fv-photo-ph img, .sch-ph img, [class$="-ph"] img{font-size:initial !important;}

/* ---------- STAGING: show slot labels ----------
   The rule above blanks placeholder build-notes so they never print on a
   live page. While the shoot is outstanding that leaves unlabelled boxes.
   The chip is applied to the LABEL only, never to the placeholder panel —
   painting the panel washed out full-bleed heroes.
   DELETE THIS WHOLE BLOCK BEFORE PRODUCTION LAUNCH. */
.ph-box, .fv-photo-ph, .sch-ph, [class$="-ph"], [class*="photo-ph"], [class*="-ph-"], .slot-label,
.ph-box *, .fv-photo-ph *, .sch-ph *, [class$="-ph"] *, [class*="photo-ph"] *, .slot-label *{
  color:#4f351d !important;
  font-size:.68rem !important;
  letter-spacing:.16em !important;
  line-height:1.85 !important;
  text-transform:uppercase !important;
  user-select:auto !important;
}
[class*="hero"] .slot-label, [class*="hero"][class$="-ph"] .slot-label,
.slot-label[class*="hero"], [class$="-ph-label"][class*="hero"],
.hero-ph-label, .hero-ph .slot-label{display:none !important;}
.slot-label, [class$="-ph-label"]{
  display:inline-block !important;
  background:rgba(250,249,246,.94) !important;
  border:1px dashed rgba(79,53,29,.38) !important;
  padding:14px 20px !important;
  text-align:center !important;
  max-width:86% !important;
  border-radius:3px !important;
  box-shadow:0 2px 14px rgba(0,0,0,.10) !important;
}
.slot-label strong, [class$="-ph-label"] strong{
  display:block !important;
  font-family:'Playfair Display', serif !important;
  font-size:.84rem !important;
  font-style:italic !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  color:#557d5e !important;
  margin-top:7px !important;
}


/* =====================================================================
   1. Venice · Sarasota over a photographic hero
   White alone disappears over a pale photo. A shadow and a light scrim
   keep it readable over any image, the same treatment as the logo.
   ===================================================================== */
header#siteHeader:not(.opaque) .header-locations{
  text-shadow:0 1px 3px rgba(15,33,24,.55), 0 0 10px rgba(15,33,24,.35);
}
header#siteHeader:not(.opaque) .header-locations *{
  text-shadow:inherit;
}
header#siteHeader.opaque .header-locations,
header#siteHeader.opaque .header-locations *{text-shadow:none;}

/* =====================================================================
   2. Content photos on tablets and phones
   Fixed-height boxes with object-fit:cover were cropping a 1906x1271
   photo down to 868x340 — about a quarter of the picture. Below the
   desktop breakpoint the box follows the image instead.
   ===================================================================== */
@media(max-width:1200px){
  .pillar-photo, .doc-visual, .gal-photo, .art-photo,
  [class$="-photo"], [class$="-visual"], [class*="photo-frame"]{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    overflow:visible !important;
  }
  .pillar-photo img, .doc-visual img, .gal-photo img, .art-photo img,
  [class$="-photo"] img, [class$="-visual"] img, [class*="photo-frame"] img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    display:block;
  }
}

/* ---------- Sarasota card ----------
   Appears under the Venice location details, where someone is deciding
   which studio to visit. Used on the homepage and The First Visit. */
.sarasota-card{
  border:1px solid rgba(85,125,94,.3);
  border-radius:3px;
  padding:26px 28px 24px;
  margin-top:36px;
  max-width:430px;
  background:#fff;
}
.sarasota-card .sc-eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin:0 0 10px;
}
.sarasota-card .sc-title{
  font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:400;
  color:var(--cactus);margin:0 0 10px;line-height:1.2;
}
.sarasota-card .sc-addr{font-size:.95rem;line-height:1.6;color:var(--tahini);margin:0 0 4px;}
.sarasota-card .sc-phone{margin:0;}
.sarasota-card .sc-phone a{font-size:.95rem;color:var(--cactus);text-decoration:none;}
.sarasota-card .sc-link{
  display:inline-block;margin-top:16px;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--cactus);text-decoration:none;
  border-bottom:1px solid rgba(85,125,94,.4);padding-bottom:3px;
}
.sarasota-card .sc-link:hover{border-color:var(--cactus);}
@media(max-width:768px){ .sarasota-card{max-width:100%;padding:22px;} }




   letterboxed inside it. The row now follows the images. */

/* ---------- Scrolling brand strip ----------
   The track has to be wider than its frame and must not wrap, or the items
   squeeze and the words clip ("Cosmetic Venee"). The containment rules
   further up set min-width:0 on everything inside main, which collapsed it. */
.marquee-wrap{overflow:hidden;max-width:100%;}
.marquee-track{
  display:flex !important;
  width:max-content !important;
  min-width:max-content !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
.marquee-track > *{
  flex:0 0 auto !important;
  min-width:max-content !important;
  white-space:nowrap !important;
}

/* ---------- Experience pillars on phones ----------
   The grid stayed at three columns at 390px, so each cell was ~130px while
   the photo inside was 331px and overflowed it. */
@media(max-width:900px){
  .pillars-grid-new{grid-template-columns:1fr !important;}
  .pillars-hd{grid-template-columns:1fr !important;padding:80px 22px 48px !important;gap:24px;}
}
@media(max-width:1200px) and (min-width:901px){
  .pillars-grid-new{grid-template-columns:repeat(2,1fr) !important;}
}

/* A photo slot keeps its place while the picture is missing, rather than
   collapsing to nothing and leaving a caption floating in an empty box. */
.pillar-photo img[src=""], .case-side img[src=""]{min-height:200px;}

/* A photo slot holds its place while the picture is missing. This has to
   carry !important because the tablet containment rules above set
   min-height:0 !important on the same containers. */

/* The swipe hint belongs to the horizontal-scroll pillars on phones.
   The grid now stacks, so the hint only makes sense at phone width —
   and not at all on tablets and above. */
.pillars-scroll-hint{display:none !important;}

/* =====================================================================
   BEFORE / AFTER AND CONTENT PHOTOS — tablet and phone only
   Desktop keeps the original layout untouched.
   The images fill their box, so a pair is always the same height with no
   gap beneath. What changes below 1200px is the SHAPE of the box: instead
   of a fixed 360px band that crops a portrait photo to a slice, the box
   takes a 4:3 frame that suits the photography.
   ===================================================================== */
/* 1366px so iPad Pro landscape is included — it is wider than the usual
   tablet breakpoint, which is why earlier fixes never reached it. */
@media(max-width:1366px){
  .case-media{
    grid-template-rows:auto !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
  }
  .case-side{
    height:auto !important;
    aspect-ratio:3 / 2 !important;
    overflow:hidden;
    min-height:0 !important;
  }
  /* The whole mouth must be visible, so the image sits inside the box
     rather than filling it. Both sides share one box, so the pair stays
     the same height and nothing hangs below. */
  .case-side{background:var(--light);}
  .case-side .ph, .case-side img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center;
    display:block;
  }
  .pillar-photo, .art-front{
    height:auto !important;
    aspect-ratio:3 / 2 !important;
    overflow:hidden;
    min-height:0 !important;
  }
  .pillar-photo .ph, .pillar-photo img,
  .art-front .ph, .art-front img{
    width:100% !important;height:100% !important;
    object-fit:cover !important;display:block;
  }
}

/* Phones: each image is only ~170px wide, so a slightly deeper frame
   shows more of the smile without the pair becoming tall. */
@media(max-width:768px){
  .case-side{aspect-ratio:4 / 3 !important;}
  .pillar-photo, .art-front{aspect-ratio:4 / 3 !important;}
}

/* ── FOOTER TIGHTEN (0921, site-wide): link spacing 16px → 8px; desktop edges on the
   1680 grid so the footer never stretches wider than the page content. ── */
footer .footer-col ul{gap:8px}
@media(min-width:901px){
  footer[aria-label="Site footer"]{padding-left:max(clamp(20px,5.2vw,100px),calc((100vw - 1680px)/2)) !important;padding-right:max(clamp(20px,5.2vw,100px),calc((100vw - 1680px)/2)) !important;padding-top:64px !important}
  footer[aria-label="Site footer"] .footer-grid{padding-bottom:48px}
}