@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* =====================================================================
   PMX-STYLE DARK THEME — The Tooth Studio
   Dark premium / longevity aesthetic, orange accent + elephant logo.
   Loads after style.css and overrides it. (Inspired by pmxhealth.com)
   ===================================================================== */
:root{
  --ff-sans:"Inter", system-ui, sans-serif;
  --ff-serif:"Raleway", system-ui, sans-serif;     /* elegant headings */
  --ff-display:"Bebas Neue", sans-serif;            /* condensed display */
  --ff-grotesk:"Inter", system-ui, sans-serif;

  /* dark palette */
  --bg:#0A0908;
  --bg-2:#0E0C0A;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.07);
  --hair:rgba(255,255,255,.12);
  --hair-2:rgba(255,255,255,.18);
  --text:#F5EFE8;
  --text-soft:rgba(245,239,232,.64);
  --text-dim:rgba(245,239,232,.42);

  --orange:#F15F24;
  --orange-bright:#FF6A2C;
  --orange-soft:#FF8A55;
  --gold:#E9A94D;

  /* re-map tokens used across the existing stylesheets to dark */
  --cream:#0A0908;
  --cream-2:#0E0C0A;
  --peach:rgba(241,95,36,.14);
  --peach-2:rgba(241,95,36,.3);
  --line:rgba(255,255,255,.12);
  --ink-soft:var(--text-soft);
  --ink-2:var(--text-soft);
  --grad-warm:linear-gradient(180deg,#0A0908 0%,#0E0C0A 100%);
  --shadow:0 30px 80px rgba(0,0,0,.5);
  --shadow-sm:0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 50px 110px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
body{background:var(--bg);color:var(--text);font-family:var(--ff-sans);letter-spacing:0;-webkit-font-smoothing:antialiased}
body::after{content:none}
h1,h2,h3,h4{font-family:var(--ff-serif);color:var(--text);font-weight:500;letter-spacing:-.01em}
p{color:var(--text-soft)}
strong{color:var(--text)}
.lead{font-family:var(--ff-sans);color:var(--text-soft);font-weight:300}
.muted,.form-note{color:var(--text-dim)}
.accent{color:var(--orange)}
::selection{background:var(--orange);color:#0A0908}

/* warm radial ambience behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60% 50% at 80% -5%,rgba(241,95,36,.16),transparent 60%),
  radial-gradient(50% 40% at 0% 100%,rgba(241,95,36,.10),transparent 60%),
  var(--bg);}

/* ---------- Display / headings ---------- */
.display,.bebas{font-family:var(--ff-display);font-weight:400;letter-spacing:.04em;text-transform:uppercase;line-height:.9}
.section-title{font-family:var(--ff-serif);font-weight:500;letter-spacing:-.01em}
.serif-italic{font-style:normal}
.grad-text{background:linear-gradient(180deg,#FFFFFF 0%,#F5EFE8 38%,#C98E6A 70%,#F15F24 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* labels */
.eyebrow{font-family:var(--ff-sans);font-weight:500;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--orange-soft);gap:12px}
.eyebrow::before,.eyebrow.center::after{background:var(--orange);height:1px;width:34px}
.eyebrow.light{color:var(--orange-soft)}

/* big condensed section label (MEASURE / MENTOR / MONITOR style) */
.big-label{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:.18em;line-height:1;color:var(--text)}

/* ---------- Topbar hidden (PMX has none) ---------- */
.topbar{display:none}
body.has-topbar .header{top:0}

/* ---------- Floating pill nav ---------- */
.header{background:transparent!important;box-shadow:none!important;border:none!important;padding:18px 0!important}
.header .nav{background:rgba(18,15,13,.66);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--hair);border-radius:100px;padding:12px 14px 12px 26px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.header.scrolled .nav{background:rgba(14,11,9,.85)}
.brand .brand-color{display:none!important}
.brand .brand-white{display:block!important}
.brand img{height:34px!important}
.header.scrolled .brand img{height:34px!important}
.nav-links a{font-family:var(--ff-sans);color:var(--text)!important;font-weight:400;font-size:.95rem}
.nav-links a::after{background:var(--orange)!important}
.nav-links a:hover{color:var(--orange-soft)!important;opacity:1}
.nav-links a.active{color:#fff!important;font-weight:500}
.nav-phone{color:var(--text)!important;font-family:var(--ff-sans);font-size:.9rem}
.nav-phone .dot{background:var(--orange)}
.burger{background:rgba(255,255,255,.08)}
.burger span{background:#fff!important}
.header:not(.scrolled) .nav-cta .btn-primary{background:#fff;color:#0A0908;box-shadow:none}

/* ---------- Buttons ---------- */
.btn{font-family:var(--ff-sans);font-weight:500;border-radius:100px;letter-spacing:.01em}
.btn-primary{background:#fff;color:#0A0908;box-shadow:none}
.btn-primary:hover{background:#fff;transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,255,255,.16)}
.btn-primary::after{background:linear-gradient(120deg,transparent,rgba(0,0,0,.06),transparent)}
.btn-accent{background:var(--orange);color:#fff}
.btn-accent:hover{background:var(--orange-bright);transform:translateY(-3px);box-shadow:0 18px 44px rgba(241,95,36,.4)}
.btn-ghost,.btn-outline-white{background:transparent;color:var(--text);border:1px solid var(--hair-2)}
.btn-ghost:hover,.btn-outline-white:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);transform:translateY(-3px)}
.btn-white{background:#fff;color:#0A0908}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(255,255,255,.18)}

/* ---------- Hero ---------- */
.hero{background:#070605;color:var(--text);min-height:100vh;padding:220px 0 120px;text-align:center}
.hero::before{background:
  radial-gradient(50% 50% at 50% 18%,rgba(241,95,36,.22),transparent 60%),
  radial-gradient(70% 60% at 50% 120%,rgba(241,95,36,.12),transparent 60%);}
.hero-grid{display:block;text-align:center;max-width:980px;margin:0 auto;position:relative;z-index:3}
.hero .eyebrow{justify-content:center;margin-bottom:30px}
.hero h1{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(3.6rem,12vw,10rem);line-height:.86;color:var(--text)}
.hero .hero-sub{font-family:var(--ff-serif);font-weight:300;font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:1.05;margin-top:6px;color:var(--text)}
.hero .lead{max-width:620px;margin:28px auto 0;color:var(--text-soft)}
.hero .btn-group{justify-content:center;margin-top:36px}
.hero-rule{justify-content:center;border-top:1px solid var(--hair);max-width:680px;margin:54px auto 0}
.hero-rule .hr-k{font-family:var(--ff-display);letter-spacing:.04em;color:#fff;font-size:2.4rem}
.hero-rule .hr-l{color:var(--text-dim)}
.hero-mark{opacity:.06}
.hero-photo,.hero-visual,.seal,.hero-badge,.rot-label,.hero-tags{display:none}
.hero-scroll{color:var(--text-dim)}
.hero-scroll .mouse{border-color:var(--hair-2)}

/* ---------- Marquee ---------- */
.marquee{background:transparent;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:24px 0}
.marquee.orange,.marquee.ink{background:transparent;border-color:var(--hair);color:var(--text)}
.marquee-track span{font-family:var(--ff-display);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.marquee-track .star{color:var(--orange)}

/* ---------- Sections ---------- */
.sec,.sec-sm{position:relative}
.bg-paper,.bg-cream2{background:var(--bg-2)}
.sec-head h2.section-title{font-size:clamp(2.2rem,5vw,4rem)}
.hairline{background:var(--hair)}

/* center hero of approach */
.approach-title{font-family:var(--ff-serif);font-weight:400;text-align:center;font-size:clamp(2.2rem,5vw,3.8rem);color:var(--text)}

/* 3M / approach row */
.mrow{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;padding:46px 0;border-top:1px solid var(--hair)}
.mrow .ml{min-width:260px}
.mrow .big-label{margin-bottom:0}
.mrow .mdesc{color:var(--text-soft);font-size:1.05rem;max-width:560px}
.mrow .mcard{grid-column:1 / -1;margin-top:8px}
@media(max-width:820px){.mrow{grid-template-columns:1fr;gap:18px;padding:34px 0}.mrow .ml{min-width:0}}

/* ---------- Glass cards (override existing components) ---------- */
.svc-card,.tm-card,.why-tile,.faq-item,.form-card,.svc-wide,.glass,.info-card,.media-frame,.map-wrap,.mcard{
  background:var(--panel)!important;border:1px solid var(--hair)!important;border-radius:20px!important;
  box-shadow:none!important;backdrop-filter:blur(8px);
}
.glass{padding:26px}
.svc-card:hover,.svc-wide:hover,.why-tile:hover,.tm-card:hover{transform:translateY(-8px);border-color:var(--hair-2)!important;background:var(--panel-2)!important;box-shadow:var(--shadow)!important}
.svc-card::before{display:none}
.svc-card h3,.why-tile h3,.tm-card p,.svc-card p,.svc-wide p,.svc-wide h3,.tm-who b{color:var(--text)}
.svc-card p,.svc-wide p,.tm-card p{color:var(--text-soft)}
.svc-ico,.why-tile .wt-ico,.swico,.svc-card .svc-ico{background:rgba(241,95,36,.16)!important;color:var(--orange-soft)!important}
.svc-card:hover .svc-ico{background:var(--orange)!important;color:#fff!important}
.svc-num{color:var(--text-dim)}
.svc-link,.svc-card:hover .svc-link{color:var(--orange-soft)}
.media-tag{background:#15110E!important;border:1px solid var(--hair)}
.media-tag b{color:var(--text)}.media-tag small{color:var(--text-dim)}
.chip{background:var(--panel)!important;border:1px solid var(--hair)!important;color:var(--text)!important}
.chip svg{color:var(--orange)}
.feat .tick{background:rgba(241,95,36,.16);color:var(--orange-soft)}
.feat b{color:var(--text)}.feat span{color:var(--text-soft)}
.g-badge{background:var(--panel)!important;border:1px solid var(--hair)!important;color:var(--text)!important}

/* status pills (PMX-style) */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;font-family:var(--ff-sans);font-size:.72rem;font-weight:600;letter-spacing:.04em}
.pill.ok{background:rgba(38,180,120,.18);color:#5fdca5}
.pill.warn{background:rgba(233,169,77,.18);color:#f0c074}
.pill.high{background:rgba(241,95,36,.2);color:var(--orange-soft)}

/* ---------- Editorial index (services/home) ---------- */
.idx-list{border-top:1px solid var(--hair)}
.idx-row{border-bottom:1px solid var(--hair)}
.idx-no{color:var(--text-dim)}
.idx-row h3{font-family:var(--ff-serif);color:var(--text);font-weight:500}
.idx-desc{color:var(--text-dim)}
.idx-go{border:1px solid var(--hair-2);color:var(--text)}
.idx-row::before{background:var(--orange)}
.idx-row:hover .idx-no,.idx-row:hover h3,.idx-row:hover .idx-desc,.idx-row:hover .idx-go{color:#fff}

/* ---------- Big figures / stats ---------- */
.sec-sm[style*="grad-orange"]{background:transparent!important}
.figs .fig{border-left:none;border-top:1px solid var(--hair);padding:22px 26px 0 0;margin-right:0}
.figs .fig:first-child{padding-left:0}
.figs .fig .n{font-family:var(--ff-display);color:#fff;letter-spacing:.02em;font-weight:400}
.figs .fig .n .suf{color:var(--orange)}
.figs .fig .l{color:var(--text-dim)}
@media(max-width:760px){.figs .fig{border-left:none}}

/* edcols */
.edcols{border-top:1px solid var(--hair)}
.edcol{border-left:1px solid var(--hair)}
.edcol h3{color:var(--text)}.edcol p{color:var(--text-soft)}
.edcol .ec-no{color:var(--orange-soft)}
@media(max-width:760px){.edcol{border-left:none;border-top:1px solid var(--hair)}}

/* pull quote */
.pull{font-family:var(--ff-serif);font-weight:300;color:var(--text)}
.pull .accent{color:var(--orange)}
.pull-mark{color:var(--orange)}

/* feature big cards */
.fcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fcard{position:relative;border-radius:24px;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;border:1px solid var(--hair);background:#100D0B}
.fcard::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 0%,rgba(241,95,36,.22),transparent 60%);opacity:.8}
.fcard>*{position:relative;z-index:2}
.fcard h3{font-family:var(--ff-serif);font-size:1.8rem;color:#fff;margin-bottom:10px}
.fcard p{color:var(--text-soft);margin-bottom:22px}
.fcard:hover{border-color:var(--hair-2);transform:translateY(-6px);transition:.5s var(--ease)}
@media(max-width:760px){.fcards{grid-template-columns:1fr}}

/* featured testimonial */
.feat-quote .fq-text{font-family:var(--ff-serif);font-weight:300;color:var(--text)}
.feat-quote .fq-text em{color:var(--orange);font-style:normal}
.feat-quote .fq-who b{color:var(--text)}.feat-quote .fq-who small{color:var(--text-dim)}
.feat-quote .fq-who .av{background:var(--orange)}
.tm-row{border-top:1px solid var(--hair)}
.tm-mini p{color:var(--text-soft)}.tm-mini b{color:var(--text)}.tm-mini small{color:var(--text-dim)}
.tm-card .quote{color:var(--hair-2)}
.tm-who .av{background:var(--orange)}
.tm-who small{color:var(--text-dim)}

/* horizontal carousel */
.hscroll{display:flex;gap:20px;overflow-x:auto;padding:6px 2px 26px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{height:6px}
.hscroll::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:6px}
.hcard{flex:0 0 300px;scroll-snap-align:start;border-radius:20px;overflow:hidden;border:1px solid var(--hair);background:#100D0B;min-height:300px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.hcard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(241,95,36,.16),transparent 50%,rgba(0,0,0,.4))}
.hcard>*{position:relative;z-index:2}
.hcard .hc-k{font-family:var(--ff-display);font-size:2.6rem;color:#fff;letter-spacing:.03em;line-height:1}
.hcard .hc-l{color:var(--text-soft);font-size:.92rem;margin-top:6px}
.hcard .hc-tag{position:absolute;top:18px;left:18px;z-index:2}

/* ---------- Page hero (interior) ---------- */
.page-hero{background:#070605;color:var(--text);padding:220px 0 110px}
.page-hero::before{background:radial-gradient(50% 70% at 50% 0%,rgba(241,95,36,.2),transparent 60%)}
.page-hero h1{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(3rem,8vw,7rem);color:var(--text)}
.page-hero .crumb{color:var(--text-dim)}
.page-hero p{color:var(--text-soft)}
.page-hero .float-tooth{opacity:.06}

/* ---------- Flagship (services) ---------- */
.flagship{background:#100D0B!important;border:1px solid var(--hair)}
.flagship-media{background:#1a1410}
.imp-type{background:rgba(255,255,255,.05);border-color:var(--hair)}

/* ---------- Steps / timeline ---------- */
.step .sn{background:var(--panel);border:1px solid var(--hair-2);color:var(--orange-soft)}
.step:hover .sn{background:var(--orange);color:#fff}
.step h3,.tl-item h3{color:var(--text)}.step p,.tl-item p{color:var(--text-soft)}
.steps .dash{background:repeating-linear-gradient(90deg,var(--hair-2) 0 10px,transparent 10px 20px)}
.tl-item::before{background:var(--orange);border-color:var(--bg);box-shadow:0 0 0 3px var(--hair-2)}
.tl-item .yr{color:var(--orange-soft)}
.timeline::before{background:var(--hair)}

/* ---------- FAQ ---------- */
.faq-q{color:var(--text)!important;font-family:var(--ff-serif)}
.faq-q .pm{background:rgba(241,95,36,.16);color:var(--orange-soft)}
.faq-item.open .pm{background:var(--orange);color:#fff}
.faq-a p{color:var(--text-soft)}

/* ---------- CTA band ---------- */
.cta-band{background:#100D0B!important;border:1px solid var(--hair);border-radius:28px}
.cta-band::before{background:radial-gradient(60% 100% at 50% 0%,rgba(241,95,36,.26),transparent 60%)}
.cta-band h2{color:#fff}
.cta-band .lead{color:var(--text-soft)}
.cta-band .eyebrow.light{color:var(--orange-soft)}

/* ---------- Contact ---------- */
.info-card{background:#100D0B!important}
.info-card::before{background:radial-gradient(60% 60% at 100% 0%,rgba(241,95,36,.2),transparent 60%)}
.info-card h2,.info-card b{color:#fff}
.info-row .ic{background:rgba(241,95,36,.18)}
.info-row a,.info-row span{color:var(--text-soft)}
.field label{color:var(--text)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.04);border:1px solid var(--hair);color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(241,95,36,.18)}
.form-card h3{color:var(--text)}
.map-wrap{border:1px solid var(--hair)!important}
.map-wrap iframe{filter:invert(.9) hue-rotate(180deg) saturate(.8)}

/* gallery */
.gal-item{border:1px solid var(--hair);background:#100D0B}
.ba{border:1px solid var(--hair)}

/* ---------- Footer ---------- */
.footer{background:#070605;border-top:1px solid var(--hair)}
.footer::before{background:radial-gradient(circle,rgba(241,95,36,.18),transparent 70%)}
.footer h4{color:#fff}
.footer .f-brand p,.footer ul a,.f-contact li{color:var(--text-soft)}
.footer ul a:hover{color:var(--orange-soft)}
.f-social a{background:rgba(255,255,255,.06)}
.f-social a:hover{background:var(--orange)}
.f-bottom{border-top:1px solid var(--hair);color:var(--text-dim)}

/* custom cursor removed */
.cursor-dot,.cursor-ring{display:none!important}

/* =====================================================================
   LIVELINESS / AMBIENT MOTION — make it breathe
   ===================================================================== */
/* drifting warm ambient glow behind everything */
@keyframes amb-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2.5%,2%,0) scale(1.06)}100%{transform:translate3d(0,0,0) scale(1)}}
body::before{will-change:transform;animation:amb-drift 22s ease-in-out infinite}

/* hero breathing aurora — animated, drifting warm light */
.hero::before{
  background:
    radial-gradient(45% 45% at 28% 22%,rgba(255,138,85,.30),transparent 60%),
    radial-gradient(50% 50% at 78% 30%,rgba(241,95,36,.26),transparent 62%),
    radial-gradient(60% 60% at 50% 108%,rgba(214,72,15,.34),transparent 60%);
  will-change:transform,opacity;
  animation:hero-aura 14s ease-in-out infinite;
}
@keyframes hero-aura{
  0%{opacity:.75;transform:translate3d(0,0,0) scale(1)}
  35%{opacity:1;transform:translate3d(3%,-2.5%,0) scale(1.12)}
  65%{opacity:.85;transform:translate3d(-2.5%,2%,0) scale(1.08)}
  100%{opacity:.75;transform:translate3d(0,0,0) scale(1)}
}
/* a second slow-rotating glow layer for depth */
.hero .hero-grid::before{content:"";position:absolute;inset:-30% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 40% at 50% 50%,rgba(241,95,36,.16),transparent 70%);
  animation:hero-orbit 26s linear infinite;}
@keyframes hero-orbit{to{transform:rotate(360deg)}}

/* hero background slow ken-burns breathe */
@keyframes kb-breathe{0%{transform:scale(1.02)}100%{transform:scale(1.14)}}
.hero-bgimg{will-change:transform;animation:kb-breathe 24s ease-in-out infinite alternate}

/* ORANGE animated hero headline with travelling glint */
.grad-text{
  background:linear-gradient(100deg,#FF7A3D 0%,#FFA968 20%,#FFE9D6 44%,#FFFFFF 50%,#FFE0C2 56%,#F15F24 70%,#FF7A3D 100%);
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 4.2s linear infinite;
}
@keyframes sheen{0%{background-position:150% center}100%{background-position:-180% center}}
/* breathing orange glow around the headline */
.hero h1.grad-text{animation:sheen 6s ease-in-out infinite, title-glow 6s ease-in-out infinite}
@keyframes title-glow{
  0%,100%{filter:drop-shadow(0 6px 22px rgba(241,95,36,.18))}
  50%{filter:drop-shadow(0 12px 48px rgba(241,95,36,.6))}
}
/* per-letter wave + glint ripple (added when JS splits the headline) */
.grad-text .ltr{
  display:inline-block;
  transform:translateZ(0);backface-visibility:hidden;
  background:linear-gradient(100deg,#FF7A3D 0%,#FFA968 20%,#FFE9D6 44%,#FFFFFF 50%,#FFE0C2 56%,#F15F24 70%,#FF7A3D 100%);
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 5.4s ease-in-out infinite, ltr-wave 5.2s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:calc(var(--i) * -0.11s), calc(var(--i) * 0.065s);
  will-change:transform;
}
@keyframes ltr-wave{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}

/* hero watermark soft float (no JS parallax needed) */
@keyframes mark-float{0%,100%{transform:translateY(-50%) translateX(0) rotate(0deg)}50%{transform:translateY(-53%) translateX(-1.4%) rotate(-1.2deg)}}
.hero-mark{will-change:transform;animation:mark-float 14s ease-in-out infinite}

/* richer reveal: rise + settle */
[data-reveal]{transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
[data-reveal]:not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="scale"]){transform:translateY(26px)}

/* status dots / pulse on review widget score */
@keyframes soft-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.greviews .gr-logo{animation:soft-pulse 4s ease-in-out infinite}

/* gentle float for floating tooth motifs on interior heroes */
@keyframes tooth-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.page-hero .float-tooth{animation:tooth-bob 9s ease-in-out infinite}
.page-hero .float-tooth:nth-of-type(2){animation-duration:11s;animation-delay:-3s}

/* big section labels subtle shimmer on dark */
.big-label{background:linear-gradient(100deg,#F5EFE8 0%,#F5EFE8 40%,#FF8A55 50%,#F5EFE8 60%,#F5EFE8 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite}

/* approach dashboard progress bar fills when revealed */
.glass [style*="width:82%"]{transition:width 1.4s var(--ease)}
[data-reveal].in .glass [style*="width:82%"]{}

/* scroll progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-soft));z-index:2000;transition:width .1s linear;box-shadow:0 0 12px rgba(241,95,36,.5)}

/* carousel cards lift + active feel */
.hcard{transition:transform .5s var(--ease),border-color .5s var(--ease)}
.hcard:hover{transform:translateY(-8px)}

/* feature + service cards float image on idle hover handled; add card breathe shadow on hover */
.fcard,.svc-card,.tm-card,.why-tile,.gal-item{transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}

/* WhatsApp fab gentle bob already; nav book button subtle */
@keyframes fab-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.fab-wa{animation:fab-bob 3.6s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  body::before,.hero::before,.hero .hero-grid::before,.hero-bgimg,.grad-text,.hero h1.grad-text,.grad-text .ltr,.hero-mark,.big-label,.greviews .gr-logo,.page-hero .float-tooth,.fab-wa{animation:none!important}
}

/* =====================================================================
   MOBILE OVERLAP / CUT-OFF FIXES
   ===================================================================== */
@media(max-width:760px){
  /* hero photo subject shifts LEFT, elephant watermark sits lower-RIGHT — opposite sides, faint */
  .hero-bgimg{object-position:20% 24%}
  .hero-mark{display:block;left:auto;right:-14%;top:auto;bottom:3%;transform:none;width:62vw;max-width:280px;opacity:.06;animation:mark-pulse 10s ease-in-out infinite}
  /* these were overlapping headings/text on small screens */
  .hero-scroll{display:none}
  .page-hero .float-tooth{display:none}
  .cta-band .float-tooth{display:none}
  .hero .hero-grid::before{display:none}
}
@keyframes mark-pulse{0%,100%{opacity:.045}50%{opacity:.09}}

/* footer never cut on mobile */
@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
}
.footer .f-contact li,.footer .f-contact a,.footer ul a,.footer .f-brand p{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:560px){
  .f-bottom{flex-direction:column;gap:8px;align-items:flex-start;text-align:left}
}
@media(max-width:640px){
  /* keep floating photo tags fully on-screen */
  .media-tag{position:absolute;left:12px!important;right:auto!important;bottom:12px!important;top:auto!important;padding:11px 15px}
  .media-tag b{font-size:.95rem}
  .media-tag small{font-size:.74rem}
  .media-frame{border-radius:24px!important}
  /* breathing room so stats never collide with anything below */
  .hero{padding-bottom:56px}
  .hero-rule{margin-top:30px}
  /* prevent any horizontal overflow */
  html,body{overflow-x:hidden}
  .section-title,.approach-title,.big-label,.hero h1,.hero-sub{overflow-wrap:break-word}
}

/* ---------- Mobile menu button fix (was white-on-white) ---------- */
.mobile-menu .mm-foot{display:flex;gap:12px}
.mobile-menu .mm-foot .btn{font-size:1rem;padding:14px 26px}
.mobile-menu .mm-foot .btn-white{background:#fff;color:#0A0908}
.mobile-menu .mm-foot .btn-outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}

/* ---------- Load safety: never trap the page blank ---------- */
/* preloader auto-dismisses even if JS fails to run */
.preloader{animation:pl-autohide 0s linear 2s forwards}
@keyframes pl-autohide{to{opacity:0;visibility:hidden}}
/* if the animation engine never initialises, reveal content via CSS */
html:not(.js-ok) [data-reveal]{animation:reveal-fallback .4s ease 1.6s forwards}
html:not(.js-ok) [data-hero]{opacity:1;transform:none}
@keyframes reveal-fallback{to{opacity:1;transform:none}}

/* ---------- Google reviews widget ---------- */
.greviews{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--hair);border-radius:22px;padding:26px 32px;backdrop-filter:blur(8px)}
.greviews .gr-left{display:flex;align-items:center;gap:20px}
.greviews .gr-logo{width:44px;height:44px;flex:none}
.greviews .gr-score{font-family:var(--ff-display);font-size:2.8rem;color:#fff;line-height:.9}
.greviews .gr-stars{color:var(--gold);letter-spacing:3px;font-size:1.05rem;margin:2px 0 3px}
.greviews .gr-meta b{color:#fff;font-family:var(--ff-sans);font-weight:600;display:block;font-size:1.02rem}
.greviews .gr-meta small{color:var(--text-dim);font-family:var(--ff-sans);font-size:.82rem}
.greviews .gr-actions{display:flex;gap:12px;flex-wrap:wrap}
.gr-badge-link{display:inline-flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--hair);border-radius:100px;padding:10px 18px;font-family:var(--ff-sans);font-weight:500;color:var(--text);transition:.3s var(--ease)}
.gr-badge-link:hover{border-color:var(--hair-2);background:var(--panel-2)}
.gr-badge-link .gr-stars{color:var(--gold);letter-spacing:1px}
@media(max-width:640px){.greviews{flex-direction:column;align-items:flex-start}.greviews .gr-actions .btn{flex:1}}

/* preloader */
.preloader{background:#070605}
.preloader .pl-bar{background:rgba(255,255,255,.16)}
.preloader .pl-bar i{background:var(--orange)}

/* fab + to-top */
.to-top{background:#fff;color:#0A0908}
.to-top:hover{background:var(--orange);color:#fff}

/* misc text colors that were dark */
.media-frame{overflow:hidden}
.section-title,.sec-head h2{color:var(--text)}

/* =====================================================================
   IMAGE COMPONENTS (real photography)
   ===================================================================== */
img{max-width:100%}

/* hero background image */
.hero{overflow:hidden}
.hero-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:82% 50%;z-index:0;opacity:.24}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 60% at 50% 38%,rgba(7,6,5,.55),rgba(7,6,5,.86) 75%,#070605);pointer-events:none}
.hero .hero-grid{z-index:3}
.hero .hero-scroll{z-index:3}

/* carousel cards with photo */
.hcard .hc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hcard::before{z-index:1}
.hcard>*{position:relative;z-index:2}
.hcard:hover .hc-bg{transform:scale(1.06)}
.hcard .hc-bg{transition:transform .8s var(--ease)}

/* feature cards with photo */
.fcard .fc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5}
.fcard::before{z-index:1}
.fcard:hover .fc-bg{transform:scale(1.05)}
.fcard .fc-bg{transition:transform .8s var(--ease)}

/* service card thumbnail */
.svc-card{overflow:hidden}
.svc-thumb{margin:-38px -32px 24px;height:178px;overflow:hidden}
.svc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.svc-card:hover .svc-thumb img{transform:scale(1.06)}
.svc-card .svc-num{z-index:3;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}

/* approach thumbnail */
.m-thumb{margin-top:20px;width:100%;max-width:240px;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid var(--hair);display:block}
@media(max-width:820px){.m-thumb{max-width:180px}}

/* gallery tiles already use object-fit cover */
.gal-item img{width:100%;height:100%;object-fit:cover}

/* "inside the studio" image strip */
.studio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.studio-grid figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--hair);aspect-ratio:3/4;position:relative}
.studio-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.studio-grid figure:hover img{transform:scale(1.06)}
@media(max-width:820px){.studio-grid{grid-template-columns:1fr 1fr}}

/* before/after grid (mini sliders) */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.ba-grid .ba{aspect-ratio:16/11}
.ba-cap{margin-top:10px;font-family:var(--ff-sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ba-grid{grid-template-columns:1fr}}

/* contact imagery */
.contact-imgs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.contact-imgs figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--hair);aspect-ratio:3/2}
.contact-imgs img{width:100%;height:100%;object-fit:cover}
@media(max-width:620px){.contact-imgs{grid-template-columns:1fr}}

/* flagship media image fills */
.flagship-media img{width:100%;height:100%;object-fit:cover}

/* pull-quote row */
.pull-row{display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center;padding:60px 0}

/* =====================================================================
   MOBILE POLISH
   ===================================================================== */
@media(max-width:920px){
  .header{padding:12px 0!important}
  .header .nav{padding:10px 12px 10px 18px}
  .hero{padding:130px 0 80px;min-height:auto}
  .hero-rule{justify-content:center;gap:0 6px}
  .hero-rule .hr-item{padding:18px 18px 0;text-align:center}
  .mrow .mdesc{font-size:1rem}
}
@media(max-width:640px){
  .container{padding:0 18px}
  .nav-cta{display:none}
  .hero h1{font-size:clamp(3rem,15vw,4.4rem)}
  .hero-sub{font-size:clamp(1.5rem,7vw,2rem)}
  .hero-rule{flex-wrap:wrap;border-top:none;margin-top:34px;gap:18px 0}
  .hero-rule .hr-item{flex:1 0 33%;border-right:1px solid var(--hair);padding:8px 8px}
  .hero-rule .hr-item:nth-child(3n){border-right:none}
  .hero-rule .hr-k{font-size:2rem}
  .pull-row{grid-template-columns:1fr;gap:24px;padding:44px 0}
  .pull-row .btn{width:100%;justify-content:center}
  .fcard{min-height:300px;padding:28px}
  .hscroll .hcard{flex:0 0 80vw}
  .greviews .gr-actions{width:100%}
  .greviews .gr-actions .btn{flex:1;justify-content:center}
  .big-label{font-size:clamp(2rem,11vw,2.6rem)}
  .approach-title{font-size:clamp(1.9rem,7vw,2.4rem)}
  .section-title{font-size:clamp(2rem,8vw,2.6rem)!important}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:34px}
  .info-actions .btn,.cta-band .btn{width:100%;justify-content:center}
  .studio-grid{gap:12px}
  .svc-thumb{height:150px}
  .mobile-menu a{font-size:clamp(1.8rem,9vw,2.6rem)}
}
@media(max-width:380px){
  .hero h1{font-size:3rem}
  .hr-l{font-size:.62rem}
}

/* =====================================================================
   STRUCTURAL LAYOUT (restored — these classes lived in the old layer)
   ===================================================================== */
.hero-mark{position:absolute;z-index:1;pointer-events:none;opacity:.07;left:-3%;right:auto;top:50%;transform:translateY(-50%);width:44vw;max-width:540px}
.hero-grid{max-width:1120px}
.hero h1{font-size:clamp(3.4rem,9vw,8.4rem)}

.hero-rule{display:flex;flex-wrap:wrap;gap:0}
.hero-rule .hr-item{padding:22px 34px 0;border-right:1px solid var(--hair)}
.hero-rule .hr-item:first-child{padding-left:0}
.hero-rule .hr-item:last-child{border-right:none;padding-right:0}
.hero-rule .hr-k{font-family:var(--ff-display);letter-spacing:.04em;color:#fff;font-size:2.4rem;line-height:1}
.hero-rule .hr-l{font-family:var(--ff-sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-top:9px}

.figs{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.figs{grid-template-columns:1fr 1fr;gap:30px 0}}

.edcols{display:grid;grid-template-columns:repeat(3,1fr)}
.edcol{padding:40px 30px 10px}
.edcol:first-child{padding-left:0}
.edcol .ec-no{font-family:var(--ff-sans);font-size:.78rem;letter-spacing:.2em;font-weight:600}
.edcol h3{font-family:var(--ff-serif);font-size:1.5rem;font-weight:500;margin:18px 0 10px}
.edcol p{font-size:.95rem}
@media(max-width:760px){.edcol{padding:30px 0 6px}}

.pull{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.18;letter-spacing:-.02em}
.pull-mark{font-family:var(--ff-serif);font-size:4rem;line-height:0;display:inline-block;height:24px}

.feat-quote{display:grid;grid-template-columns:1fr;gap:30px;max-width:1000px}
.feat-quote .fq-text{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.24}
.feat-quote .fq-who{display:flex;align-items:center;gap:14px}
.feat-quote .fq-who .av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-serif);font-size:1.2rem;color:#fff}
.feat-quote .fq-who b{font-family:var(--ff-sans);font-weight:600;display:block}
.tm-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;padding-top:46px}
.tm-mini .tm-stars{color:var(--gold);letter-spacing:2px;font-size:.85rem;margin-bottom:10px}
.tm-mini b{font-family:var(--ff-sans);font-weight:600;display:block;margin-top:14px;font-size:.92rem}
.tm-mini small{font-size:.8rem}
@media(max-width:760px){.tm-row{grid-template-columns:1fr;gap:30px}}

.idx-list .idx-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:28px;padding:30px 12px;position:relative;overflow:hidden;transition:padding .5s var(--ease)}
.idx-row::before{content:"";position:absolute;inset:0;transform:translateY(101%);transition:transform .6s var(--ease);z-index:0}
.idx-row>*{position:relative;z-index:1;transition:color .45s var(--ease)}
.idx-row:hover{padding-left:26px;padding-right:26px}
.idx-row:hover::before{transform:translateY(0)}
.idx-no{font-family:var(--ff-sans);font-size:.86rem;letter-spacing:.1em;font-weight:500;min-width:38px}
.idx-row h3{font-size:clamp(1.5rem,3.2vw,2.4rem);margin:0;line-height:1}
.idx-desc{font-family:var(--ff-sans);font-size:.95rem;max-width:360px;text-align:right}
.idx-go{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.idx-go svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.idx-row:hover .idx-go svg{transform:translateX(4px)}
@media(max-width:760px){.idx-list .idx-row{grid-template-columns:auto 1fr auto;gap:16px;padding:22px 6px}.idx-desc{display:none}}

.arch{border-radius:50% 50% 26px 26px / 42% 42% 26px 26px;overflow:hidden}
.approach-title{text-align:center}
.bg-cream2,.bg-paper{background:var(--bg-2)}

/* =====================================================================
   LIGHT BEIGE / ORANGE THEME  +  COMPACT SIZING   (overrides above)
   ===================================================================== */
:root{
  --bg:#FBF4EA; --bg-2:#F4E7D6; --panel:#FFFFFF; --panel-2:#FFF8EF;
  --hair:rgba(42,24,16,.12); --hair-2:rgba(42,24,16,.22);
  --text:#2A1810; --text-soft:rgba(42,24,16,.66); --text-dim:rgba(42,24,16,.46);
  --cream:#FBF4EA; --cream-2:#F4E7D6; --paper:#FFFFFF;
  --ink:#2A1810; --ink-2:rgba(42,24,16,.66); --ink-soft:rgba(42,24,16,.55);
  --line:rgba(42,24,16,.12);
  --grad-warm:linear-gradient(180deg,#FBF4EA,#F4E7D6);
  --shadow:0 22px 56px rgba(214,72,15,.15); --shadow-sm:0 10px 26px rgba(214,72,15,.10); --shadow-lg:0 36px 80px rgba(214,72,15,.20);
}
body{background:var(--bg);color:var(--text)}
body::before{background:
  radial-gradient(46% 38% at 84% -2%,rgba(241,95,36,.20),transparent 60%),
  radial-gradient(42% 34% at 2% 102%,rgba(241,95,36,.14),transparent 60%),
  var(--bg);}

/* HERO — beige + orange halo */
.hero{background:var(--bg)!important;color:var(--text)}
.hero::before{background:
  radial-gradient(42% 44% at 50% 30%,rgba(241,95,36,.20),transparent 64%),
  radial-gradient(40% 42% at 84% 76%,rgba(233,169,77,.14),transparent 64%),
  radial-gradient(38% 42% at 14% 84%,rgba(241,95,36,.10),transparent 64%);}
.hero::after{display:none}
.hero-bgimg{display:none}
.hero-mark{display:none}
.hero .lead{color:var(--text-soft)} .hero-sub{color:var(--text)}
.hero-rule{border-top-color:var(--hair)}
.hero-rule .hr-k{color:var(--orange-deep)} .hero-rule .hr-l{color:var(--text-dim)}
.hero-scroll{color:var(--text-dim)} .hero-scroll .mouse{border-color:var(--hair-2)}

/* NAV pill light + orange/colour logo */
.header .nav{background:rgba(255,255,255,.72)!important;border-color:var(--hair)!important;box-shadow:0 12px 32px rgba(214,72,15,.10)!important}
.header.scrolled .nav{background:rgba(255,251,245,.92)!important}
.brand .brand-color{display:block!important} .brand .brand-white{display:none!important}
.nav-links a{color:var(--text)!important}
.nav-links a:hover,.nav-links a.active{color:var(--orange-deep)!important}
.nav-links a::after{background:var(--orange)!important}
.nav-phone{color:var(--text)!important}
.burger{background:rgba(241,95,36,.10)} .burger span{background:var(--ink)!important}
.header:not(.scrolled) .nav-cta .btn-primary{background:var(--orange)!important;color:#fff!important;box-shadow:var(--shadow-sm)}

/* BUTTONS */
.btn-primary{background:var(--orange)!important;color:#fff!important;box-shadow:0 14px 32px rgba(241,95,36,.28)}
.btn-primary:hover{background:var(--orange-bright)!important;box-shadow:0 18px 40px rgba(241,95,36,.36)}
.btn-white{background:#fff!important;color:var(--orange-deep)!important;border:1px solid var(--hair);box-shadow:var(--shadow-sm)}
.btn-white:hover{box-shadow:var(--shadow)}
.btn-ghost,.btn-outline-white{background:transparent!important;color:var(--text)!important;border:1.5px solid var(--hair-2)!important}
.btn-ghost:hover,.btn-outline-white:hover{border-color:var(--orange)!important;color:var(--orange-deep)!important;background:rgba(241,95,36,.06)!important}

/* CARDS — white on beige with soft warm shadow */
.svc-card,.tm-card,.why-tile,.faq-item,.form-card,.svc-wide,.media-frame,.map-wrap{background:#fff!important;border:1px solid var(--hair)!important;box-shadow:var(--shadow-sm)!important}
.svc-card:hover,.svc-wide:hover,.why-tile:hover,.tm-card:hover{background:#fff!important;box-shadow:var(--shadow)!important;border-color:var(--hair-2)!important}
.chip,.g-badge,.greviews{background:#fff!important;border:1px solid var(--hair)!important}
.greviews .gr-score,.greviews .gr-meta b{color:var(--text)} .greviews .gr-meta small{color:var(--text-dim)}
.tm-card .quote{color:var(--peach-2)}
.svc-link{color:var(--orange-deep)}
.media-tag{background:#fff!important;border:1px solid var(--hair)} .media-tag b{color:var(--text)} .media-tag small{color:var(--text-soft)}

/* dark accent mock cards (approach dashboards) stay dark for their white UI text */
.glass,.mcard{background:#241008!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:var(--shadow)!important}

/* big figures on light */
.figs .fig{border-top-color:var(--hair)!important}
.figs .fig .n{color:var(--orange)!important} .figs .fig .n .suf{color:var(--gold-deep)}
.figs .fig .l{color:var(--text-dim)}

/* big labels orange on beige */
.big-label{background:linear-gradient(100deg,#F15F24,#FF8A55,#D6480F)!important;background-size:auto!important;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:none!important}

/* editorial index */
.idx-list{border-top-color:var(--hair)} .idx-row{border-bottom-color:var(--hair)}
.idx-no,.idx-desc{color:var(--text-dim)} .idx-row h3{color:var(--text)}
.idx-go{border-color:var(--hair-2);color:var(--text)}

/* feature cards on light (photo + light scrim so text reads) */
.fcard{background:#fff!important;border:1px solid var(--hair)!important}
.fcard::before{background:linear-gradient(180deg,rgba(251,244,234,.05),rgba(251,244,234,.82) 70%,#fff)!important;opacity:1}
.fcard h3{color:var(--text)!important} .fcard p{color:var(--text-soft)!important}
.fcard .eyebrow.light{color:var(--orange-deep)} .fcard .fc-bg{opacity:.95}

/* flagship stays a rich dark accent block */
.flagship{background:linear-gradient(135deg,#3a1c0c,#241008)!important;border:1px solid rgba(255,255,255,.08)}

/* CTA band = bold orange */
.cta-band{background:var(--grad-orange)!important;border:none!important}
.cta-band::before{background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.20),transparent 60%)!important}
.cta-band h2{color:#fff!important} .cta-band .lead{color:rgba(255,255,255,.92)!important}
.cta-band .eyebrow.light{color:#fff!important}
.cta-band .btn-white{background:#fff!important;color:var(--orange-deep)!important;border:none}
.cta-band .btn-outline-white{border-color:rgba(255,255,255,.65)!important;color:#fff!important}

/* contact info card = orange */
.info-card{background:var(--grad-orange)!important}
.info-card::before{background:radial-gradient(60% 60% at 100% 0%,rgba(255,255,255,.18),transparent 60%)!important}
.info-card .btn-white{background:#fff!important;color:var(--orange-deep)!important;border:none}

/* form fields light */
.field input,.field select,.field textarea{background:#FFF8EF!important;border:1px solid var(--hair)!important;color:var(--text)!important}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)!important}
.field label,.form-card h3{color:var(--text)}
.map-wrap iframe{filter:none!important}

/* page hero (interior) light + halo */
.page-hero{background:var(--bg)!important;color:var(--text)}
.page-hero::before{background:radial-gradient(52% 72% at 50% 4%,rgba(241,95,36,.26),transparent 62%)!important}
.page-hero h1{color:var(--text)} .page-hero .crumb{color:var(--text-dim)} .page-hero p{color:var(--text-soft)}
.page-hero .float-tooth{display:none}

/* gallery placeholder + before/after on light */
.gal-item{background:#F4E7D6} .ba{border:1px solid var(--hair)}

/* preloader = orange, to-top = orange */
.preloader{background:var(--grad-orange)!important}
.preloader .pl-bar{background:rgba(255,255,255,.32)} .preloader .pl-bar i{background:#fff}
.to-top{background:var(--orange)!important;color:#fff!important} .to-top:hover{background:var(--orange-deep)!important}

/* marquee on light */
.marquee{border-color:var(--hair)} .marquee-track span{color:var(--text)} .marquee-track .star{color:var(--orange)}

/* ---------- COMPACT SIZING (less oversized, less empty space) ---------- */
.sec{padding:clamp(52px,6vw,96px) 0}
.sec-sm{padding:clamp(40px,5vw,66px) 0}
.sec-head{margin-bottom:clamp(28px,3.4vw,46px)}
.hero{min-height:auto;padding:clamp(118px,15vw,165px) 0 clamp(64px,7vw,96px)}
.hero h1{font-size:clamp(2.8rem,7vw,5.8rem)}
.hero-sub{font-size:clamp(1.35rem,3.3vw,2.3rem)}
.hero .lead{font-size:clamp(.98rem,1.3vw,1.1rem);max-width:560px}
.hero-rule .hr-k{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.section-title{font-size:clamp(1.85rem,3.6vw,3rem)!important}
.approach-title{font-size:clamp(1.75rem,3.4vw,2.8rem)}
.big-label{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.idx-row h3{font-size:clamp(1.3rem,2.6vw,2rem)}
.mrow{padding:34px 0}
.nav-links a{font-size:.9rem;padding:9px 13px}
.btn{padding:13px 24px;font-size:.92rem}
.btn-lg{padding:15px 28px;font-size:.96rem}
.btn-sm{padding:10px 18px;font-size:.85rem}
.fcard{min-height:300px;padding:30px}
.brand img{height:32px!important}

/* ---------- MOBILE COMPACT ---------- */
@media(max-width:640px){
  .hero{padding:104px 0 52px}
  .hero h1{font-size:clamp(2.4rem,12vw,3.2rem)}
  .hero-sub{font-size:clamp(1.2rem,6vw,1.7rem)}
  .hero .lead{font-size:.95rem}
  .sec{padding:44px 0}
  .sec-head{margin-bottom:24px}
  .section-title{font-size:clamp(1.7rem,7vw,2.2rem)!important}
  .approach-title{font-size:clamp(1.6rem,6.5vw,2.1rem)}
  .big-label{font-size:clamp(1.7rem,9vw,2.2rem)}
  .btn,.btn-lg{padding:13px 22px;font-size:.92rem}
  .mobile-menu a{font-size:clamp(1.5rem,7.4vw,2rem)}
  .mobile-menu .mm-foot .btn{font-size:.9rem;padding:11px 20px}
  .hero-rule .hr-k{font-size:1.55rem}
  .glass{padding:20px}
  .fcard{min-height:260px;padding:24px}
}

/* =====================================================================
   PREMIUM REFINEMENT — elegant serif, refined ivory palette, soft depth
   ===================================================================== */
:root{
  --ff-serif:"Fraunces",Georgia,serif;
  --ff-display:"Fraunces",Georgia,serif;
  --bg:#FCF8F1; --bg-2:#F6EEE2; --panel:#FFFFFF; --panel-2:#FBF5EC;
  --hair:rgba(36,19,9,.10); --hair-2:rgba(36,19,9,.17);
  --text:#241309; --text-soft:rgba(36,19,9,.62); --text-dim:rgba(36,19,9,.42);
  --orange:#F15F24; --orange-bright:#FF6E2E; --orange-soft:#F38B52; --orange-deep:#BC4910; --gold:#C99A4E; --gold-deep:#A87C2E;
  --shadow-sm:0 10px 30px rgba(36,19,9,.06);
  --shadow:0 26px 64px rgba(36,19,9,.10);
  --shadow-lg:0 44px 100px rgba(36,19,9,.14);
}
/* elegant serif for all display + headings + key text */
h1,h2,h3,h4,.display,.section-title,.approach-title,.hero h1,.hero .hero-sub,.page-hero h1,
.idx-row h3,.svc-card h3,.svc-wide h3,.why-tile h3,.faq-q,.fcard h3,.feat-quote .fq-text,.pull,
.tm-who b,.greviews .gr-meta b,.media-tag b,.step h3,.tl-item h3,.imp-type b{font-family:var(--ff-serif)!important}
.hero h1,.grad-text{text-transform:none!important;letter-spacing:-.025em!important;font-weight:500!important}
.section-title,.approach-title,.page-hero h1{text-transform:none!important;letter-spacing:-.02em!important;font-weight:500!important}
.hero .hero-sub{font-style:italic;font-weight:400;color:var(--text-soft)!important}
/* big labels become refined small-caps serif, not loud condensed */
.big-label{font-family:var(--ff-serif)!important;text-transform:uppercase!important;letter-spacing:.16em!important;font-weight:500!important;font-size:clamp(1.3rem,2.3vw,1.85rem)!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--orange-deep)!important;animation:none!important}
/* refined labels */
.eyebrow{font-family:"Inter",sans-serif!important;letter-spacing:.28em!important;font-weight:600!important;font-size:.7rem!important;color:var(--orange-deep)!important}
.eyebrow::before,.eyebrow.center::after{width:26px!important;background:var(--orange)!important}
.lead,p,.idx-desc,.mdesc,.tm-card p,.tm-mini p,.svc-card p,.svc-wide p,.fcard p,.why-tile p,.edcol p{font-family:"Inter",sans-serif!important}

/* refined cards — more air, softer corners & shadow */
.svc-card,.tm-card,.why-tile,.form-card,.greviews{border-radius:22px!important;padding:clamp(26px,3vw,36px)!important}
.svc-card{padding:0 0 clamp(26px,3vw,32px)!important;overflow:hidden}
.svc-card>:not(.svc-thumb){margin-left:clamp(26px,3vw,32px);margin-right:clamp(26px,3vw,32px)}
.svc-thumb{margin:0 0 22px!important;height:188px}
.svc-card .svc-num{right:24px}
.glass,.mcard{border-radius:18px!important}
.cta-band,.info-card,.flagship,.fcard,.hcard,.gal-item,.media-frame,.map-wrap,.ba{border-radius:24px!important}
.chip{border-radius:100px!important;padding:10px 18px!important}

/* generous, confident section rhythm (premium air without emptiness) */
.sec{padding:clamp(62px,7vw,116px) 0}
.sec-head{margin-bottom:clamp(34px,4vw,56px)}

/* refined buttons */
.btn{letter-spacing:.02em;font-weight:500}
.btn-primary{box-shadow:0 16px 36px rgba(241,95,36,.22)}

/* deeper, less-neon orange moments */
.cta-band{background:linear-gradient(135deg,#F15F24 0%,#C24A12 55%,#7E2F0D 100%)!important}
.info-card{background:linear-gradient(150deg,#F15F24 0%,#C24A12 70%)!important}

/* calmer, more refined hero motion */
.grad-text .ltr{animation:sheen 6.5s ease-in-out infinite, ltr-wave 7.5s cubic-bezier(.45,0,.55,1) infinite!important;animation-delay:calc(var(--i) * -0.07s), calc(var(--i) * 0.045s)!important}
@keyframes ltr-wave{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-3px,0)}}
.hero h1.grad-text{animation:sheen 6.5s ease-in-out infinite, title-glow 7s ease-in-out infinite}

/* hairlines a touch finer */
.idx-row,.figs .fig,.hero-rule,.edcol,.tm-row,.mrow,.idx-list{border-color:var(--hair)!important}

@media(max-width:640px){
  .svc-card>:not(.svc-thumb){margin-left:22px;margin-right:22px}
  .svc-card{padding-bottom:24px!important}
}

/* =====================================================================
   PREMIUM + ALIVE + INTUITIVE  (final polish)
   ===================================================================== */
/* cohesive warm editorial grade across all photography */
.svc-thumb img,.gal-item img,.studio-grid img,.media-frame img,.m-thumb,
.hcard .hc-bg,.fcard .fc-bg,.ba img,.flagship-media img,.contact-imgs img{
  filter:saturate(.92) contrast(1.03) brightness(1.02) sepia(.05);
}
/* subtle paper grain for tactile warmth */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* gold-into-orange eyebrow accent line */
.eyebrow::before,.eyebrow.center::after{background:linear-gradient(90deg,var(--gold),var(--orange))!important;height:2px!important}

/* refined, intuitive hover motion */
.svc-thumb img{transition:transform .9s var(--ease)}
.svc-card:hover .svc-thumb img{transform:scale(1.06)}
.svc-card:hover,.why-tile:hover,.tm-card:hover{transform:translateY(-6px)}
.media-frame img{transition:transform 1s var(--ease)}
.split-media:hover .media-frame img{transform:scale(1.04)}
.idx-row:hover{padding-left:30px;padding-right:22px}
.svc-link svg,.idx-go svg{transition:transform .45s var(--ease)}
.svc-card:hover .svc-link svg{transform:translateX(5px)}
.btn-primary:hover{transform:translateY(-2px)}
a,button{-webkit-tap-highlight-color:transparent}

/* image reveal settles with a gentle scale */
.gal-item[data-reveal],.studio-grid figure,.svc-card[data-reveal]{transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}

/* rotating 5-star trust seal in hero (alive + trust cue) */
.hero-seal{position:absolute;right:6%;bottom:14%;width:128px;height:128px;z-index:4;display:grid;place-items:center;pointer-events:none}
.hero-seal svg{position:absolute;inset:0;width:100%;height:100%;animation:seal-spin 24s linear infinite}
.hero-seal text{font-family:"Inter",sans-serif;font-size:8.6px;letter-spacing:2.6px;fill:var(--orange-deep);text-transform:uppercase;font-weight:600}
.hero-seal .seal-core{font-family:var(--ff-serif);font-size:1.25rem;font-weight:500;color:var(--orange-deep);line-height:1}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.hero-seal{right:3%;bottom:10%;width:104px;height:104px}}
@media(max-width:760px){.hero-seal{display:none}}

@media(prefers-reduced-motion:reduce){
  .hero-seal svg{animation:none!important}
  body::after{display:none}
}

/* dark headline with subtle gold shimmer (animation in dark tones) */
.grad-text,.grad-text .ltr{
  background:linear-gradient(100deg,#241309 0%,#241309 33%,#8A6A38 44%,#C99A4E 50%,#8A6A38 56%,#241309 67%,#241309 100%)!important;
  background-size:300% auto!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.hero h1.grad-text{animation:sheen 6.5s ease-in-out infinite, title-glow-dark 7s ease-in-out infinite!important}
/* interior page titles get the same animated dark-gold shimmer */
.page-hero h1{
  background:linear-gradient(100deg,#C24A12 0%,#C24A12 30%,#F08A4F 42%,#FFD9A8 50%,#F08A4F 58%,#C24A12 70%,#C24A12 100%)!important;
  background-size:300% auto!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  animation:sheen 6.5s ease-in-out infinite!important;
}
@media(prefers-reduced-motion:reduce){.page-hero h1{animation:none!important}}
@keyframes title-glow-dark{
  0%,100%{filter:drop-shadow(0 6px 16px rgba(36,19,9,.10))}
  50%{filter:drop-shadow(0 10px 26px rgba(36,19,9,.20))}
}

/* carousel photo cards: text must stay light over the dark image */
.hcard{background:#241309!important}
.hcard::before{background:linear-gradient(180deg,rgba(36,19,9,.12),rgba(36,19,9,.05) 38%,rgba(36,19,9,.66))!important}
.hcard .hc-k{color:#fff!important}
.hcard .hc-l{color:rgba(255,255,255,.85)!important}
.hcard .hc-tag{color:#fff}

/* FOOTER — dark burnt-orange anchor with light, readable text */
.footer{background:linear-gradient(180deg,#5A1F08,#371206)!important}
.footer::before{background:radial-gradient(circle,rgba(241,95,36,.35),transparent 70%)!important}
.footer h4{color:#fff!important}
.footer .f-brand p,.footer ul a,.footer .f-contact li,.footer .f-contact a,.footer .f-bottom,.footer .f-bottom span{color:rgba(252,248,241,.72)!important}
.footer ul a:hover{color:var(--orange-soft)!important}
.footer .f-contact svg{color:var(--orange-soft)}
.footer .f-bottom{border-top-color:rgba(255,255,255,.12)!important}

/* HOVER → orange (never white on the light cards) */
.idx-row::before{display:none!important}
.idx-row:hover{background:rgba(241,95,36,.05);padding-left:24px;padding-right:18px}
.idx-row:hover .idx-no,.idx-row:hover h3,.idx-row:hover .idx-desc{color:var(--orange-deep)!important}
.idx-row:hover .idx-go{color:var(--orange-deep)!important;border-color:var(--orange)!important}
.svc-card:hover h3,.svc-card:hover .svc-link{color:var(--orange-deep)!important}
.svc-card:hover p{color:var(--text-soft)!important}
.svc-card:hover .svc-num{color:var(--text-dim)!important}
.svc-card:hover .svc-ico,.svc-wide:hover .swico{background:var(--orange)!important;color:#fff!important}
.svc-wide:hover h3{color:var(--orange-deep)!important}
.svc-wide:hover p{color:var(--text-soft)!important}

/* =====================================================================
   HERO HEADLINE — clearly animated (dark espresso + bright gold glint + wave)
   ===================================================================== */
.grad-text,.grad-text .ltr{
  background:linear-gradient(100deg,#C24A12 0%,#C24A12 26%,#F08A4F 40%,#FFD9A8 50%,#F08A4F 60%,#C24A12 74%,#C24A12 100%)!important;
  background-size:260% auto!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
}
@keyframes sheen{0%{background-position:130% center}100%{background-position:-160% center}}
@keyframes ltr-wave{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
@keyframes title-glow-dark{0%,100%{filter:drop-shadow(0 6px 16px rgba(36,19,9,.10))}50%{filter:drop-shadow(0 10px 26px rgba(201,154,78,.34))}}
.hero h1.grad-text{animation:sheen 4.2s linear infinite, title-glow-dark 5s ease-in-out infinite!important}
.grad-text .ltr{
  display:inline-block;will-change:transform,background-position;
  animation:sheen 4.2s linear infinite, ltr-wave 4.6s ease-in-out infinite!important;
  animation-delay:calc(var(--i) * -0.11s), calc(var(--i) * 0.075s)!important;
}
@media(prefers-reduced-motion:reduce){.grad-text,.grad-text .ltr,.hero h1.grad-text{animation:none!important}}

/* =====================================================================
   MOBILE MENU (close button + smaller type) & ORANGE FOOTER & SCALING
   ===================================================================== */
/* visible close (X) button */
.mm-close{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;z-index:6;color:#fff;cursor:pointer}
.mm-close svg{width:22px;height:22px}
.mm-close:hover{background:rgba(255,255,255,.28)}
/* tighter, calmer menu type */
.mobile-menu{gap:2px}
.mobile-menu a{font-size:clamp(1.4rem,5.6vw,1.7rem)!important;padding:6px 0}
.mobile-menu .mm-foot{margin-top:28px}
.mobile-menu .mm-foot .btn{font-size:.92rem;padding:12px 24px}

/* FOOTER — warm orange to match the boxes */
.footer{background:linear-gradient(160deg,#E2641F 0%,#C24A12 72%)!important}
.footer::before{background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)!important}
.footer h4{color:#fff!important}
.footer .f-brand p,.footer ul a,.footer .f-contact li,.footer .f-contact a,.footer .f-bottom,.footer .f-bottom span{color:rgba(255,255,255,.86)!important}
.footer ul a:hover{color:#fff!important}
.footer .f-contact svg{color:#fff}
.footer .f-bottom{border-top-color:rgba(255,255,255,.24)!important}
.footer .f-social a{background:rgba(255,255,255,.16)}
.footer .f-social a:hover{background:#fff}
.footer .f-social a:hover svg{color:var(--orange-deep)}

/* mobile premium font scaling */
@media(max-width:640px){
  .hero h1{font-size:clamp(2.3rem,11vw,3rem)!important}
  .hero-sub{font-size:clamp(1.15rem,5.4vw,1.55rem)!important}
  .lead{font-size:.95rem!important}
  .section-title{font-size:clamp(1.6rem,6.4vw,2.05rem)!important}
  .approach-title{font-size:clamp(1.55rem,6vw,2rem)!important}
  .page-hero{padding:104px 0 54px}
  .page-hero h1{font-size:clamp(2.1rem,9.5vw,2.9rem)!important}
  .big-label{font-size:clamp(1.3rem,7vw,1.7rem)!important}
  .idx-row h3{font-size:clamp(1.15rem,5vw,1.5rem)!important}
  .feat-quote .fq-text,.pull{font-size:clamp(1.3rem,6vw,1.7rem)!important}
  .greviews .gr-score{font-size:2.2rem}
  .eyebrow{font-size:.66rem!important;letter-spacing:.22em!important}
  /* more breathing room on the sides */
  .container{padding:0 22px!important}
  .header{padding:10px 0!important}
  .header .nav{margin:0 4px}
  .cta-band{padding:40px 24px!important}
  .info-card,.form-card{padding:28px 22px!important}
  .glass{padding:20px!important}
  .footer{padding:64px 0 28px}
}
@media(max-width:380px){
  .container{padding:0 18px!important}
}

/* =====================================================================
   ORANGE CONSISTENCY — convert remaining dark boxes to warm orange
   ===================================================================== */
/* process dashboard cards (home) */
.glass,.mcard{background:linear-gradient(160deg,#E2641F 0%,#C24A12 100%)!important;border:1px solid rgba(255,255,255,.20)!important;box-shadow:var(--shadow)!important}
.glass *{color:#fff!important}
.glass [style*="background:var(--orange)"]{background:#fff!important}
.glass div[style*="rgba(255,255,255,.08)"]{background:rgba(255,255,255,.22)!important}
.glass .pill{background:rgba(255,255,255,.2)!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)}
.glass div[style*="border-bottom"]{border-color:rgba(255,255,255,.22)!important}

/* flagship implants block (services) */
.flagship{background:linear-gradient(150deg,#E2641F 0%,#B8480F 100%)!important;border:1px solid rgba(255,255,255,.16)!important}
.flagship .imp-type{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.22)!important}
.flagship .feat .tick{background:rgba(255,255,255,.2)!important;color:#fff!important}

/* about brand-story block */
.brand-story-sec{background:linear-gradient(160deg,#E2641F 0%,#C24A12 100%)!important;color:#fff!important}
.brand-story-tile{background:#FFF8EF!important}
.brand-story-sec .eyebrow{color:rgba(255,255,255,.92)!important}
.brand-story-sec .eyebrow::before{background:rgba(255,255,255,.8)!important}
.brand-story-sec .feat .tick{background:rgba(255,255,255,.2)!important;color:#fff!important}
.brand-story-sec .feat b{color:#fff!important}
.brand-story-sec .feat span{color:rgba(255,255,255,.85)!important}

/* =====================================================================
   FIX CLIPPED DESCENDERS (p, g, y, j, q) ON HEADLINES
   ===================================================================== */
.hero h1,.hero h1.grad-text,.grad-text,.hero-sub,.page-hero h1,.big-label,
.section-title,.approach-title,.display,.pull,.feat-quote .fq-text,
.idx-row h3,.svc-card h3,.svc-wide h3,.why-tile h3,.fcard h3,.faq-q,
.tl-item h3,.step h3,.greviews .gr-meta b,.tm-who b{
  line-height:1.16!important;
  padding-bottom:.1em!important;
  overflow:visible!important;
}
.grad-text .ltr{line-height:1.16!important;padding-bottom:.12em!important;overflow:visible!important}
/* the editorial index row no longer needs clipping (wipe removed) */
.idx-list .idx-row{overflow:visible!important}
/* keep the hero balanced with the looser line-height */
.hero h1{margin-bottom:.04em}

/* =====================================================================
   BLOG / ARTICLE
   ===================================================================== */
.post-meta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center;font-family:"Inter",sans-serif;font-size:.86rem;color:var(--text-dim);margin-top:18px}
.post-meta .au{display:inline-flex;align-items:center;gap:8px;color:var(--text-soft)}
.post-meta img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.post{max-width:760px;margin:0 auto}
.post h2{font-family:var(--ff-serif);font-weight:500;font-size:clamp(1.5rem,3vw,2.05rem);color:var(--text);margin:2.4rem 0 .7rem;line-height:1.2}
.post h3{font-family:var(--ff-serif);font-weight:500;font-size:1.2rem;color:var(--text);margin:1.6rem 0 .5rem}
.post p,.post li{font-family:"Inter",sans-serif;font-size:1.05rem;line-height:1.8;color:var(--text-soft)}
.post p{margin-bottom:1.1rem}
.post strong{color:var(--text);font-weight:600}
.post ul,.post ol{margin:0 0 1.2rem 1.2rem}
.post li{margin-bottom:.5rem;list-style:disc}
.post ol li{list-style:decimal}
.post a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:2px}
.post a:hover{color:var(--orange)}
.answer-box{background:#fff;border:1px solid var(--hair);border-left:4px solid var(--orange);border-radius:14px;padding:18px 22px;margin:1.6rem 0;box-shadow:var(--shadow-sm)}
.answer-box .lbl{font-family:"Inter",sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-deep);font-weight:600;display:block;margin-bottom:6px}
.answer-box p{margin:0;color:var(--text)!important;font-size:1.02rem}
.post-cta{background:var(--grad-orange);border-radius:20px;padding:30px;margin:2.4rem 0;text-align:center;color:#fff}
.post-cta h3{color:#fff!important;font-family:var(--ff-serif);font-size:1.4rem;margin:0 0 8px}
.post-cta p{color:rgba(255,255,255,.9)!important;margin:0 0 16px}
.post-faq{max-width:760px;margin:0 auto}
.post-share{display:flex;gap:10px;align-items:center;margin-top:24px;font-family:"Inter",sans-serif;font-size:.86rem;color:var(--text-dim)}

/* blog index grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post-card .pc-img{aspect-ratio:16/10;overflow:hidden}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post-card:hover .pc-img img{transform:scale(1.06)}
.post-card .pc-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.post-card .pc-tag{font-family:"Inter",sans-serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);font-weight:600}
.post-card h3{font-family:var(--ff-serif);font-weight:500;font-size:1.22rem;color:var(--text);margin:10px 0 8px;line-height:1.25}
.post-card p{font-family:"Inter",sans-serif;font-size:.94rem;color:var(--text-soft);margin:0 0 16px;flex:1}
.post-card .pc-link{font-family:"Inter",sans-serif;font-weight:600;font-size:.9rem;color:var(--orange-deep)}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}

/* ===== Blog filter + search options ===== */
.blog-tools{display:flex;flex-direction:column;gap:18px;margin-bottom:34px}
.blog-search{position:relative;max-width:520px;width:100%}
.blog-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#B06A3E;pointer-events:none}
.blog-search input{width:100%;padding:14px 18px 14px 46px;border-radius:999px;border:1px solid rgba(193,74,18,.22);background:#fff;color:#241309;font-size:.95rem;font-family:inherit;box-shadow:0 6px 22px rgba(193,74,18,.06);transition:border-color .2s,box-shadow .2s}
.blog-search input::placeholder{color:#B58A6F}
.blog-search input:focus{outline:none;border-color:#F15F24;box-shadow:0 6px 26px rgba(241,95,36,.16)}
.blog-chips{display:flex;flex-wrap:wrap;gap:10px}
.blog-chip{padding:9px 18px;border-radius:999px;border:1px solid rgba(193,74,18,.22);background:#fff;color:#5a3a26;font-size:.85rem;font-weight:500;letter-spacing:.01em;cursor:pointer;font-family:inherit;transition:all .2s ease;white-space:nowrap}
.blog-chip:hover{border-color:#F15F24;color:#C24A12}
.blog-chip.active{background:linear-gradient(160deg,#F15F24,#C24A12);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(241,95,36,.28)}
.blog-noresult{text-align:center;padding:48px 16px;color:#7a5840;font-size:1.02rem}
.blog-reset{background:none;border:none;color:#F15F24;font-weight:600;cursor:pointer;font-family:inherit;font-size:1rem;text-decoration:underline;padding:0 4px}
.post-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .3s}
@media(max-width:640px){
  .blog-tools{gap:14px;margin-bottom:26px}
  .blog-search input{padding:12px 16px 12px 42px;font-size:.9rem}
  .blog-chip{padding:8px 14px;font-size:.78rem}
}

/* =====================================================================
   FINAL MOBILE SCALE — authoritative, overrides all earlier blocks
   (fixes sections/text/headings still rendering too large on phones)
   ===================================================================== */
@media(max-width:640px){
  /* base text + rhythm */
  body{font-size:15.5px}
  .container{padding:0 18px!important}
  .sec{padding:40px 0!important}
  .sec-sm{padding:30px 0!important}
  .sec-head{margin-bottom:22px!important}

  /* hero */
  .hero{padding:94px 0 42px!important}
  .hero h1,.hero h1.grad-text{font-size:clamp(2.05rem,10vw,2.65rem)!important}
  .hero-sub{font-size:clamp(1.05rem,5vw,1.4rem)!important}
  .hero .lead,.lead{font-size:.93rem!important}
  .hero-rule .hr-k{font-size:1.45rem!important}
  .hero-rule .hr-l{font-size:.6rem!important}

  /* page (interior) hero */
  .page-hero{padding:86px 0 40px!important}
  .page-hero h1{font-size:clamp(1.85rem,8.4vw,2.45rem)!important}
  .page-hero p{font-size:.95rem!important}

  /* headings */
  .section-title{font-size:clamp(1.5rem,6vw,1.9rem)!important}
  .approach-title{font-size:clamp(1.45rem,5.6vw,1.85rem)!important}
  .big-label{font-size:clamp(1.2rem,6.4vw,1.55rem)!important}
  h3{font-size:1.18rem}
  .idx-row h3{font-size:clamp(1.1rem,4.8vw,1.4rem)!important}
  .feat-quote .fq-text,.pull{font-size:clamp(1.2rem,5.6vw,1.55rem)!important}
  .eyebrow{font-size:.64rem!important;letter-spacing:.2em!important}

  /* buttons */
  .btn,.btn-lg,.btn-sm{padding:12px 20px!important;font-size:.88rem!important}

  /* article body — the new long-form content */
  .post h2{font-size:1.3rem!important;margin:1.8rem 0 .55rem!important}
  .post h3{font-size:1.1rem!important;margin:1.3rem 0 .45rem!important}
  .post p,.post li{font-size:.97rem!important;line-height:1.72!important}
  .post p{margin-bottom:1rem!important}
  .answer-box{padding:15px 17px!important;margin:1.3rem 0!important;border-radius:12px!important}
  .answer-box p{font-size:.97rem!important}
  .answer-box .lbl{font-size:.66rem!important}
  .post-meta{font-size:.8rem!important;gap:6px 12px!important;margin-top:14px!important}
  .post-cta{padding:26px 20px!important;margin:2rem 0!important}
  .post-cta h3{font-size:1.22rem!important}

  /* cards */
  .svc-thumb{height:148px!important}
  .post-card .pc-body{padding:18px 18px 20px!important}
  .post-card h3{font-size:1.12rem!important}
  .post-card p{font-size:.9rem!important}
  .fcard{min-height:230px!important;padding:22px!important}
  .greviews{padding:20px!important}
  .cta-band,.info-card,.form-card{padding:30px 20px!important}
  .glass,.mcard{padding:18px!important}

  /* faq */
  .faq-q{font-size:1rem!important}
}
@media(max-width:400px){
  body{font-size:15px}
  .container{padding:0 15px!important}
  .sec{padding:34px 0!important}
  .hero{padding:86px 0 36px!important}
  .hero h1,.hero h1.grad-text{font-size:1.95rem!important}
  .page-hero h1{font-size:1.78rem!important}
  .section-title{font-size:1.42rem!important}
  .post h2{font-size:1.22rem!important}
  .post p,.post li{font-size:.94rem!important}
}

/* footer credit link (Designed by Health Business Accelerator) */
.footer .f-bottom a{color:#fff!important;text-decoration:underline;text-underline-offset:2px;font-weight:600;transition:opacity .2s}
.footer .f-bottom a:hover{opacity:.8}

/* blog featured cover image on article pages */
.post-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-sm)}
@media(max-width:640px){.post-cover{border-radius:14px}}

/* =====================================================================
   CLIENT FEEDBACK FIXES (fonts unchanged) — logo, overlays, workflow
   ===================================================================== */
/* 1) Bigger, more visible header logo (desktop + mobile) */
.header .brand img{height:48px!important;width:auto!important}
.header{padding:14px 0!important}
@media(max-width:640px){.header .brand img{height:40px!important}}

/* 2) Stronger scrims so white text stays legible over bright photos */
.hcard::before{background:linear-gradient(180deg,rgba(20,10,5,.22) 0%,rgba(20,10,5,0) 36%,rgba(20,10,5,.60) 76%,rgba(20,10,5,.86) 100%)!important;z-index:1!important}
.hcard .hc-k{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hcard .hc-l{color:rgba(255,255,255,.92)!important}
.hcard .hc-tag{z-index:3}
.fcard{background:#1a0f08!important}
.fcard .fc-bg{opacity:.6!important}
.fcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,10,5,0) 28%,rgba(20,10,5,.55) 68%,rgba(20,10,5,.88) 100%)}
.fcard>*{position:relative;z-index:2}
.fcard h3{color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.fcard p{color:rgba(255,255,255,.88)!important}

/* 3) "The Tooth Studio Approach" as a clear numbered workflow */
.approach-sub{text-align:center;max-width:660px;margin:14px auto 0;color:var(--text-soft);font-size:1.04rem;line-height:1.6}
.step-head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.step-no{flex:none;width:54px;height:54px;border-radius:50%;background:linear-gradient(160deg,#F15F24,#C24A12);color:#fff;font-family:var(--ff-display);font-weight:700;font-size:1.55rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(241,95,36,.32);line-height:1}
.mrow .ml .big-label{margin:0}
@media(max-width:640px){.step-no{width:46px;height:46px;font-size:1.35rem}.step-head{gap:12px}}

/* refine mobile-menu footer buttons (WhatsApp / Call Now) — smaller, premium */
.mobile-menu .mm-foot{gap:14px;margin-top:30px}
.mobile-menu .mm-foot .btn{font-family:var(--ff-sans)!important;font-size:.8rem!important;font-weight:500!important;letter-spacing:.04em!important;padding:13px 20px!important;border-radius:100px!important;flex:1;justify-content:center}

/* approach: big faded orange-gradient stage numbers (1-2-3) as watermark */
.step-no,.step-head{display:none!important}      /* replaced by large watermark numerals */
.approach-flow .mrow{position:relative;overflow:hidden}
.approach-flow .mrow>.ml,.approach-flow .mrow>.mdesc,.approach-flow .mrow>.mcard{position:relative;z-index:1}
.step-num{position:absolute;top:6px;right:-6px;z-index:0;pointer-events:none;
  font-family:var(--ff-display);font-weight:700;font-size:clamp(8rem,24vw,17rem);line-height:.74;letter-spacing:-.04em;
  background:linear-gradient(155deg,#F8915A 0%,#F15F24 45%,#C24A12 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;opacity:.12}
@media(max-width:640px){.step-num{font-size:33vw;top:2px;right:-2px;opacity:.13}}

/* =====================================================================
   FEATURE CARDS — clean single gradient, crisp photo, readable light text
   (removes the washed white-overlay look)
   ===================================================================== */
.fcard{background:#241309!important;overflow:hidden}
.fcard .fc-bg{opacity:1!important;filter:saturate(.96) contrast(1.03) brightness(.98)}
.fcard::before{background:linear-gradient(180deg,rgba(18,9,4,.10) 0%,rgba(18,9,4,.04) 32%,rgba(18,9,4,.58) 66%,rgba(18,9,4,.88) 100%)!important;opacity:1!important;z-index:1!important}
.fcard::after{display:none!important}
.fcard>*{position:relative;z-index:2}
.fcard .eyebrow.light{color:#FCC4A3!important}
.fcard .eyebrow.light::before{background:var(--orange-soft)!important}
.fcard h3{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.fcard p{color:rgba(255,255,255,.92)!important;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.fcard .btn-white{background:#fff!important;color:#241309!important}
.fcard .btn-outline-white{background:rgba(255,255,255,.10)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.75)!important}

/* approach numbers: don't clip, sit fully inside, a touch darker */
.approach-flow .mrow{overflow:visible!important}
.step-num{right:10px!important;top:2px!important;opacity:.20!important;
  background:linear-gradient(155deg,#F0763B 0%,#E0561D 45%,#A53C0E 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important}
@media(max-width:640px){.step-num{font-size:58vw!important;right:2px!important;top:0!important;opacity:.35!important}}

/* UX: keep anchored sections clear of the fixed header on jump */
html{scroll-padding-top:90px}
@media(max-width:640px){html{scroll-padding-top:74px}}