/* ==========================================================================
   Denhez Details — styles.css
   White / teal / pink editorial theme, Apple system font.
   The hero + marquee keep a dark photo-backed treatment (their own
   dedicated --hero-* variables); every other section uses the light
   theme variables below so text always stays high-contrast.
   ========================================================================== */

:root{
  /* neutrals — light theme (body / content) */
  --navy: #0e1b2a;
  --text: #22303f;
  --muted: #5b6b7a;
  --faint: #94a3b8;
  --bg: #ffffff;
  --bg-soft: #f3f7fb;
  --line: #e1e9ee;
  --line-strong: #c9d3db;

  /* brand accent */
  --teal: #2563eb;
  --teal-light: #3b82f6;
  --pink: #ec4899;
  --pink-dark: #db2777;

  /* hero — dark photo-overlay context only */
  --hero-overlay-1: rgba(9,18,32,.38);
  --hero-overlay-2: rgba(9,18,32,.92);
  --hero-text: #ffffff;
  --hero-text-dim: rgba(255,255,255,.72);
  --hero-line: rgba(255,255,255,.3);

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --radius-card: 20px;
  --radius-btn: 11px;
  --radius-pill: 24px;
  --radius-icon: 12px;

  --max: 1200px;
}

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

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

h1,h2,h3,h4{ margin:0; font-family:var(--font-display) }
p{ margin:0 }
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }
button{ font:inherit; background:none; border:none; padding:0 }
img{ max-width:100%; display:block }

::selection{ background-color:#bae6fd; color:var(--navy) }

/* ==========================================================================
   Custom cursor (desktop / mouse only — hidden on touch devices)
   ========================================================================== */
#cursor-dot{
  width:8px; height:8px;
  background:var(--teal);
  border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .2s cubic-bezier(.25,.46,.45,.94), background .2s ease;
  mix-blend-mode:multiply;
}
#cursor-dot.hovering{ transform:translate(-50%,-50%) scale(5); background:var(--pink) }
@media (hover: none){
  body{ cursor:auto }
  #cursor-dot{ display:none }
}
@media (hover: hover){
  .cursor-none, .cursor-none *{ cursor:none }
}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
#scroll-progress{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:3px; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--pink),var(--teal-light));
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container{ max-width:var(--max); margin:0 auto; padding:0 24px }
.px-8{ padding-left:32px; padding-right:32px }
@media (min-width:768px){ .px-8{ padding-left:32px; padding-right:32px } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 20px rgba(14,27,42,.05);
}
.header-inner{
  max-width:1440px; margin:0 auto;
  padding:0 72px; height:66px;
  display:flex; align-items:center; justify-content:space-between;
}
@media (max-width:900px){ .header-inner{ padding:0 24px } }

.brand{ display:flex; align-items:center; gap:10px }
.diamond-logo{
  width:34px; height:34px; flex-shrink:0;
  background-image:url('images/logo.png');
  background-size:cover; background-position:center;
  border-radius:8px;
  box-shadow:0 4px 14px rgba(37,99,235,.25);
}
.brand-name{ font:800 16px/1 var(--font-display); color:var(--navy); letter-spacing:-0.4px }

nav.primary-nav{ display:flex; align-items:center; gap:2px }
@media (max-width:900px){ nav.primary-nav{ display:none } }
nav.primary-nav a{
  font-size:13px; font-weight:600; color:var(--muted);
  padding:8px 14px; border-radius:8px;
  transition:background-color .15s ease, color .15s ease;
}
nav.primary-nav a:hover{ background:var(--bg-soft); color:var(--navy) }
nav.primary-nav a.active{ color:var(--teal); background:var(--bg-soft) }

.btn-shimmer{ position:relative; overflow:hidden }
.btn-shimmer::after{
  content:''; position:absolute; top:0; bottom:0; width:60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimmer 2.6s ease infinite;
}
@keyframes shimmer{ 0%{ left:-120% } 100%{ left:140% } }

.nav-book-btn{
  margin-left:12px; display:inline-flex; align-items:center; gap:8px;
  color:#fff; font-size:13px; font-weight:700;
  padding:10px 18px; border-radius:10px;
  background:var(--pink);
  transition:background-color .2s ease, transform .2s ease;
}
.nav-book-btn:hover{ background:var(--pink-dark) }

.menu-toggle{
  display:none; width:36px; height:36px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  align-items:center; justify-content:center;
}
@media (max-width:900px){ .menu-toggle{ display:flex } }

.mobile-nav{
  display:none; background:#fff; border-top:1px solid var(--line);
  padding:32px; flex-direction:column; gap:16px;
}
.mobile-nav.open{ display:flex }
.mobile-nav a{ font-size:20px; font-weight:700; color:var(--navy) }
.mobile-nav .nav-book-btn{ margin-left:0; margin-top:8px; align-self:flex-start; padding:13px 22px; border-radius:11px; font-size:14px }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--line);
  padding:44px 72px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:24px;
  background:var(--bg-soft);
}
@media (max-width:900px){ .site-footer{ padding:32px 24px; flex-direction:column; text-align:center } }
.footer-brand{ display:flex; align-items:center; gap:10px }
.footer-brand-name{ font-weight:800; font-size:15px; color:var(--navy); letter-spacing:-0.2px }
.footer-year{ font-size:13px; color:var(--faint); margin-left:6px }
.footer-nav{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center }
.footer-nav a{ font-size:13px; font-weight:600; color:var(--muted); transition:color .15s ease }
.footer-nav a:hover{ color:var(--teal) }
.footer-location{ font-size:13px; font-weight:600; color:var(--faint) }

/* ==========================================================================
   Mobile CTA bar + Floating buttons
   ========================================================================== */
.mobile-cta-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:#fff; border-top:1px solid var(--line);
  padding:12px 16px; gap:12px;
}
@media (max-width:900px){ .mobile-cta-bar{ display:flex } }
.mobile-cta-bar .call-btn{
  flex:1; text-align:center; padding:12px; border-radius:11px;
  color:#fff; font-size:14px; font-weight:700;
  background:var(--pink);
}
.mobile-cta-bar .book-btn{
  flex:1; text-align:center; padding:12px; border-radius:11px;
  border:2px solid var(--line); color:var(--navy); font-size:14px; font-weight:700;
}

.floating-book-btn{
  display:none; position:fixed; bottom:32px; right:32px; z-index:40;
  align-items:center; gap:8px; color:#fff; font-size:14px; font-weight:700;
  border-radius:11px; padding:14px 22px;
  background:var(--pink);
  box-shadow:0 10px 30px rgba(236,72,153,.35);
  opacity:0; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.floating-book-btn:hover{ background:var(--pink-dark) }
@media (min-width:901px){ .floating-book-btn.visible{ display:inline-flex; opacity:1; transform:translateY(0) } }

/* Text Now — persistent circular SMS button, bottom-right */
.floating-text-btn{
  position:fixed; right:32px; bottom:32px; z-index:41;
  display:flex; align-items:center;
  background:var(--teal); color:#fff;
  border-radius:999px; padding:15px; line-height:1;
  box-shadow:0 10px 26px rgba(37,99,235,.4);
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.floating-text-btn:hover{ background:#1d4ed8; transform:translateY(-2px) }
.floating-text-btn .ftb-label{
  display:grid; grid-template-columns:0fr;
  transition:grid-template-columns .25s ease;
}
.floating-text-btn .ftb-label span{
  overflow:hidden; white-space:nowrap; font-size:14px; font-weight:700; opacity:0;
  padding-left:10px; transition:opacity .15s ease;
}
.floating-text-btn:hover .ftb-label{ grid-template-columns:1fr }
.floating-text-btn:hover .ftb-label span{ opacity:1 }
@media (min-width:901px){ .floating-book-btn.visible ~ .floating-text-btn, .floating-book-btn.visible + .floating-text-btn{ bottom:90px } }
@media (max-width:900px){ .floating-text-btn{ bottom:88px; right:16px; padding:13px } }

/* ==========================================================================
   Buttons (content-section CTA variants)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  line-height:1; white-space:nowrap; user-select:none;
  transition:opacity .2s ease, transform .3s cubic-bezier(.25,.46,.45,.94), background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover:hover){ .btn, .field-input, .faq-q{ cursor:none } }
.btn-md{ padding:14px 24px }
.btn-sm{ padding:11px 18px }
.btn-dark{ background:var(--pink); color:#fff; border-radius:36px; border:1px solid transparent }
.btn-dark:hover{ background:var(--pink-dark) }
.btn-ghost{ background:transparent; color:var(--navy); border:1.5px solid var(--line-strong); border-radius:22.5px }
.btn-ghost:hover{ border-color:var(--navy); background:var(--bg-soft) }
.btn-ghost-light{ background:transparent; color:var(--navy); border:1.5px solid var(--line-strong); border-radius:22.5px }
.btn-ghost-light:hover{ border-color:var(--navy); background:#fff }
.btn-accent{ background:transparent; color:var(--pink); border:1.5px solid var(--pink); border-radius:22.5px }
.btn-accent:hover{ background:var(--pink); color:#fff }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-spin{ animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* magnetic wrapper — JS sets transform on mousemove */
.magnetic{ display:inline-flex; transition:transform .3s cubic-bezier(.25,.46,.45,.94) }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1) }
[data-reveal].revealed{ opacity:1 !important; transform:translateY(0) !important }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none }
}

/* ==========================================================================
   Hero (home) — real photo + dark gradient overlay
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; background:#0c1a2e;
  display:flex; flex-direction:column; overflow:hidden;
}
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background-image:url('images/hero-taycan.jpg');
  background-size:cover; background-position:center 30%;
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--hero-overlay-1) 0%, var(--hero-overlay-1) 35%, var(--hero-overlay-2) 100%);
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:1;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px);
  background-size:80px 80px;
}
.hero-edge-label{
  display:none; position:absolute; right:32px; top:50%; transform:translateY(-50%);
  z-index:2; align-items:center; gap:8px;
}
@media (min-width:1024px){ .hero-edge-label{ display:flex } }
.hero-edge-label span{ font-size:10px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--hero-text-dim); writing-mode:vertical-rl }
.hero-edge-label .rule{ height:96px; width:1px; background:var(--hero-line) }

.hero-eyebrow{
  position:relative; z-index:2; padding:0 32px; padding-top:120px;
  font-size:10px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--hero-text-dim);
}
.hero-main{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:0 32px }
.hero-hairline{ width:48px; height:1px; background:var(--pink); margin-bottom:38px }
.hero-h1{
  font-weight:800; line-height:.9; letter-spacing:-.03em; color:var(--hero-text);
  font-size:clamp(56px,9vw,120px); overflow:hidden;
}
.hero-h1 .accent-word{ color:var(--pink); font-style:italic }

.hero-body{ position:relative; z-index:2; padding:0 32px; padding-bottom:68px; margin-top:38px }
.hero-body-grid{ display:grid; gap:68px }
@media (min-width:768px){ .hero-body-grid{ grid-template-columns:1fr auto; align-items:end } }
.hero-lede{ font-size:18px; line-height:1.61; color:var(--hero-text-dim); max-width:28rem; margin-bottom:38px }
@media (min-width:768px){ .hero-lede{ grid-column:2; max-width:24rem; margin-bottom:0 } }
.hero-ctas{ display:flex; gap:13px; flex-wrap:wrap }
.hero-ctas .btn-ghost{ color:var(--hero-text); border-color:var(--hero-line) }
.hero-ctas .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08) }

.hero-stats-bar{ position:relative; z-index:2; border-top:1px dashed var(--hero-line); padding:0 32px }
.hero-stats-inner{ display:flex; align-items:center; justify-content:space-between; padding:23px 0; flex-wrap:wrap; gap:16px }
.hero-stats{ display:flex; gap:38px; flex-wrap:wrap }
.hero-stat{ display:flex; flex-direction:column; gap:4px }
.hero-stat b{ font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--hero-text) }
.hero-stat span{ font-size:10px; color:var(--hero-text-dim); letter-spacing:.2em; text-transform:uppercase }
.scroll-prompt{ display:none; flex-direction:column; align-items:center; gap:8px }
@media (min-width:768px){ .scroll-prompt{ display:flex } }
.scroll-prompt span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--hero-text-dim) }
.scroll-prompt svg{ animation:bounceY 1.4s ease-in-out infinite }
@keyframes bounceY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

/* ==========================================================================
   Marquee strip (light, sits under hero)
   ========================================================================== */
.marquee{ background:var(--bg-soft); padding:13px 0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.marquee-track{ display:flex; gap:38px; white-space:nowrap; width:max-content; animation:marquee 28s linear infinite }
.marquee-track:hover{ animation-play-state:paused }
.marquee-track span.item{ display:flex; align-items:center; gap:38px; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--navy) }
.marquee-track span.item .dash{ color:var(--teal) }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ==========================================================================
   Generic section + Section heading
   ========================================================================== */
.section{ padding:100px 0; border-top:1px solid var(--line) }
.section.bg-ink{ background:var(--bg) }
.section.bg-ink-alt{ background:var(--bg-soft) }
@media (max-width:720px){ .section{ padding:64px 0 } }

.section-heading{ max-width:48rem }
.sh-label{ font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:18px }
.sh-title{ font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--navy); font-size:clamp(29px,4vw,41px); margin-bottom:20px }
.sh-subtitle{ font-size:18px; line-height:1.61; color:var(--muted) }
.mb-68{ margin-bottom:56px }

.two-col-heading{ display:grid; gap:56px; align-items:start }
@media (min-width:768px){ .two-col-heading{ grid-template-columns:1fr 1.6fr } }

/* ==========================================================================
   Services grid (packages)
   ========================================================================== */
.package-row{ padding:32px 0; border-top:1px solid var(--line) }
.package-row:first-child{ border-top:none }
.package-row.popular{ border-left:2px solid var(--teal); padding-left:22px }
.package-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:23px; margin-bottom:13px }
.package-name-row{ display:flex; align-items:center; gap:13px; margin-bottom:4px; flex-wrap:wrap }
.package-name{ font-size:24px; font-weight:800; color:var(--navy); line-height:1 }
.popular-badge{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:var(--teal); color:#fff; border-radius:22.5px; padding:5px 12px }
.package-meta{ font-size:14px; color:var(--muted) }
.package-price{ font-size:38px; font-weight:800; letter-spacing:-.02em; color:var(--teal); flex-shrink:0; line-height:1 }
.package-items{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px }
.package-items li{ display:flex; align-items:center; gap:12px; font-size:16px; color:var(--muted) }
.package-items svg{ flex-shrink:0; color:var(--teal) }

/* ==========================================================================
   Why choose us / feature grid
   ========================================================================== */
.feature-grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:768px){ .feature-grid{ grid-template-columns:1fr 1fr } }
.feature-item{ padding:32px 0; border-top:1px solid var(--line) }
@media (min-width:768px){ .feature-item.odd{ padding-left:38px; border-left:1px solid var(--line) } }
.feature-item svg{ color:var(--teal); margin-bottom:13px }
.feature-item h3{ font-size:22px; font-weight:800; color:var(--navy); margin-bottom:8px }
.feature-item p{ font-size:16px; color:var(--muted); line-height:1.61 }

/* ==========================================================================
   Before / after slider — real photo, desaturated "before" / full-color "after"
   ========================================================================== */
.ba-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:20px }
.ba-title{ font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--navy); font-size:clamp(29px,4vw,51px); margin-bottom:32px }
.ba-frame{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius-card); border:1px solid var(--line); cursor:col-resize; user-select:none;
  box-shadow:0 20px 50px -20px rgba(14,27,42,.25);
}
.ba-panel{ position:absolute; inset:0; background-image:url('images/case-taycan.jpg'); background-size:cover; background-position:center }
.ba-before{ filter:grayscale(1) brightness(.72) contrast(1.05) }
.ba-after{ }
.ba-tag{ position:absolute; top:16px; padding:6px 14px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; z-index:5 }
.ba-tag.before{ left:16px; background:rgba(14,27,42,.55); color:#fff }
.ba-tag.after{ right:16px; background:var(--pink); color:#fff }
.ba-handle{ position:absolute; top:0; bottom:0; width:2px; background:#fff; z-index:10; box-shadow:0 0 0 1px rgba(0,0,0,.15) }
.ba-handle-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:999px; border:none; background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:col-resize;
  box-shadow:0 6px 20px rgba(14,27,42,.35);
}
.ba-caption{ margin-top:16px; font-size:14px; color:var(--muted) }

/* ==========================================================================
   Process steps
   ========================================================================== */
.process-grid{ display:grid; grid-template-columns:1fr }
@media (min-width:640px){ .process-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .process-grid{ grid-template-columns:repeat(4,1fr) } }
.process-step{ padding:32px 0; border-top:1px solid var(--line); padding-right:32px }
.process-num{ display:block; font-weight:800; letter-spacing:-.025em; line-height:1; color:var(--line-strong); margin-bottom:20px; font-size:clamp(48px,6vw,80px) }
.process-step h3{ font-size:18px; font-weight:800; color:var(--navy); margin-bottom:12px }
.process-step p{ font-size:16px; color:var(--muted); line-height:1.61 }

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-grid{ display:grid; grid-template-columns:1fr }
@media (min-width:768px){ .review-grid{ grid-template-columns:1fr 1fr } }
.review-item{ padding:32px 0; border-top:1px solid var(--line) }
@media (min-width:768px){ .review-item.odd{ padding-left:38px; border-left:1px solid var(--line) } }
.review-stars{ display:flex; gap:2px; margin-bottom:13px }
.review-stars svg{ color:var(--pink); fill:var(--pink) }
.review-text{ font-size:17px; color:var(--text); line-height:1.61; margin-bottom:20px }
.review-meta{ display:flex; align-items:center; gap:13px; flex-wrap:wrap }
.review-author{ font-size:14px; font-weight:800; color:var(--navy) }
.review-source{ font-size:10px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-item{ border-top:1px solid var(--line) }
.faq-item:last-child{ border-bottom:1px solid var(--line) }
.faq-q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:23px;
  padding:22px 0; text-align:left; cursor:pointer;
}
.faq-q span.text{ font-size:17px; font-weight:800; color:var(--navy); line-height:1.2 }
.faq-q .icon{ flex-shrink:0; margin-top:4px; color:var(--teal) }
.faq-a{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .25s ease-in-out, opacity .2s ease-in-out;
}
.faq-item.open .faq-a{ grid-template-rows:1fr; opacity:1 }
.faq-a > p{ overflow:hidden; min-height:0 }
.faq-a p{ font-size:16px; color:var(--muted); line-height:1.61; padding-bottom:22px }

/* ==========================================================================
   Service areas + map
   ========================================================================== */
.area-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px }
.area-tag{ font-size:14px; color:var(--text); border:1px solid var(--line); border-radius:22.5px; padding:8px 18px; transition:border-color .2s ease, color .2s ease }
.area-tag:hover{ border-color:var(--teal); color:var(--teal) }

.map-frame{
  position:relative; border-radius:var(--radius-card); overflow:hidden;
  border:1px solid var(--line); aspect-ratio:16/7; box-shadow:0 20px 50px -24px rgba(14,27,42,.25);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.9) }
.map-area-overlay{
  position:absolute; left:16px; bottom:16px; z-index:5;
  background:#fff; border-radius:14px; padding:14px 18px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 10px 30px rgba(14,27,42,.2);
}
.map-area-overlay svg{ color:var(--pink); flex-shrink:0 }
.map-area-label{ font-size:13px; font-weight:800; color:var(--navy) }
.map-caption{ margin-top:16px; font-size:14px; color:var(--muted) }
.map-caption a{ color:var(--teal); font-weight:700 }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form-grid-2{ display:grid; grid-template-columns:1fr; gap:20px 32px; margin-bottom:20px }
@media (min-width:640px){ .form-grid-2{ grid-template-columns:1fr 1fr } }
.field-label{ display:block; font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.field-label .req{ color:var(--pink) }
.field-input{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid var(--line);
  color:var(--navy); font:inherit; font-size:17px; padding:12px 0; outline:none;
  transition:border-color .2s ease;
}
.field-input::placeholder{ color:var(--faint) }
.field-input:focus{ border-color:var(--teal) }
select.field-input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center }
select.field-input option{ background:#fff; color:var(--navy) }
textarea.field-input{ resize:vertical; min-height:96px }
.field-block{ margin-bottom:20px }
.form-error{ margin-bottom:20px; padding:12px 16px; border:1px solid #fecaca; background:#fef2f2; color:#dc2626; font-size:14px; border-radius:10px }
.form-hint{ margin-top:13px; font-size:14px; color:var(--muted) }

/* ==========================================================================
   Generic page hero (interior pages)
   ========================================================================== */
.page-hero{ padding:118px 0 56px; background:var(--bg); border-bottom:1px solid var(--line) }
.page-hero .eyebrow{ font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:20px }
.page-hero h1{ font-weight:800; line-height:.98; letter-spacing:-.025em; color:var(--navy); font-size:clamp(42px,7vw,80px); margin-bottom:28px }
.page-hero h1 .dim{ color:var(--faint) }
.page-hero .lede{ font-size:19px; line-height:1.61; color:var(--muted); max-width:42rem; margin-bottom:32px }
.page-hero-ctas{ display:flex; gap:13px; flex-wrap:wrap }

.coming-soon-badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:20px;
  background:#fdf2f8; color:var(--pink-dark); border:1px solid #fbcfe8;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px; padding:7px 16px;
}
.coming-soon-badge .dot{ width:6px; height:6px; border-radius:999px; background:var(--pink); animation:pulseDot 1.6s ease-in-out infinite }
@keyframes pulseDot{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* quick nav pills (services / gallery categories) */
.pill-nav{ display:flex; flex-wrap:wrap; gap:12px }
.pill-link{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:10px 18px;
  font-size:15px; font-weight:600; color:var(--muted);
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.pill-link:hover{ color:var(--teal); border-color:var(--teal) }
.pill-link.tab.active{ background:var(--navy); color:#fff; border-color:var(--navy) }
.pill-link.tab:not(.active):hover{ color:var(--navy); border-color:var(--navy) }
.pill-link .soon-tag{ font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-dark); background:#fdf2f8; border-radius:999px; padding:2px 8px }

/* ==========================================================================
   About page
   ========================================================================== */
.about-hero-grid{ display:grid; grid-template-columns:1fr; gap:56px; align-items:start }
@media (min-width:1024px){ .about-hero-grid{ grid-template-columns:1fr 1fr } }
.about-photo{
  aspect-ratio:4/5; max-width:28rem; border-radius:var(--radius-card); overflow:hidden;
  border:1px solid var(--line); margin-bottom:32px; box-shadow:0 24px 60px -30px rgba(14,27,42,.3);
}
.about-photo img{ width:100%; height:100%; object-fit:cover }
.about-stats{ display:flex; gap:32px; border-top:1px solid var(--line); padding-top:20px }
.about-stats b{ display:block; font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--navy) }
.about-stats span{ font-size:12px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase }

.value-grid{ display:grid; grid-template-columns:1fr }
@media (min-width:768px){ .value-grid{ grid-template-columns:1fr 1fr } }
.value-item{ padding:32px 0; border-top:1px solid var(--line) }
@media (min-width:768px){ .value-item.odd{ padding-left:56px; border-left:1px solid var(--line) } .value-item.even{ padding-right:56px } }
.value-item svg{ color:var(--teal); margin-bottom:13px }
.value-item h3{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:8px }
.value-item p{ font-size:16px; color:var(--muted); line-height:1.61 }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-detail-list{ display:flex; flex-direction:column; max-width:36rem }
.contact-detail{ display:flex; align-items:flex-start; gap:20px; border-top:1px solid var(--line); padding:20px 0 }
.contact-detail:last-of-type{ border-bottom:1px solid var(--line) }
.contact-detail svg{ color:var(--teal); flex-shrink:0; margin-top:4px }
.contact-detail .label{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px }
.contact-detail .value{ font-size:17px; color:var(--navy) }
.contact-detail a.value:hover{ color:var(--pink) }

/* ==========================================================================
   Gallery page
   ========================================================================== */
.gallery-grid{ display:grid; grid-template-columns:1fr; gap:2px; background:var(--line) }
@media (min-width:640px){ .gallery-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(4,1fr) } }
.gallery-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-soft) }
.gallery-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.gallery-tile:hover img{ transform:scale(1.05) }
.gallery-tile::after{ content:''; position:absolute; inset:0; background:rgba(14,27,42,0); transition:background-color .3s ease }
.gallery-tile:hover::after{ background:rgba(14,27,42,.35) }
.gallery-tile .cat-label{
  position:absolute; bottom:0; left:0; right:0; padding:16px;
  font-size:11px; font-weight:800; color:#fff; letter-spacing:.15em; text-transform:uppercase;
  transform:translateY(8px); opacity:0; transition:all .3s ease;
}
.gallery-tile:hover .cat-label{ transform:translateY(0); opacity:1 }
.gallery-note{ margin-top:32px; border:1px solid var(--line); border-radius:14px; padding:16px 24px }
.gallery-note p{ font-size:15px; color:var(--muted) }
.gallery-note code{ color:var(--navy) }

/* ==========================================================================
   Reviews page extras
   ========================================================================== */
.rating-summary{ display:flex; align-items:center; gap:32px; border-top:1px solid var(--line); padding-top:20px }
.rating-summary .big-num{ font-size:56px; font-weight:800; letter-spacing:-.025em; line-height:1; color:var(--navy) }
.rating-summary .stars{ display:flex; gap:4px; margin-bottom:4px }
.rating-summary .stars svg{ color:var(--pink); fill:var(--pink) }
.rating-summary p{ font-size:15px; color:var(--muted) }
.gbtn{
  display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff;
  font-size:17px; font-weight:700; border-radius:999px; padding:15px 22px;
  transition:background-color .2s ease;
}
.gbtn:hover{ background:#152b45 }

/* ==========================================================================
   Thank-you page
   ========================================================================== */
.thankyou-section{ min-height:100vh; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; padding:118px 24px }
.thankyou-wrap{ max-width:36rem; width:100% }
.thankyou-wrap > svg{ color:var(--teal); margin-bottom:32px }
.next-steps-list{ display:flex; flex-direction:column; margin-bottom:56px }
.next-step{ display:flex; gap:20px; border-top:1px solid var(--line); padding:20px 0 }
.next-step:last-child{ border-bottom:1px solid var(--line) }
.next-step .n{ font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--line-strong); flex-shrink:0; width:50px }
.next-step p{ font-size:16px; color:var(--muted); line-height:1.61; padding-top:2px }
.reach-now a{ display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-weight:800; font-size:20px; transition:color .2s ease }
.reach-now a:hover{ color:var(--pink) }

/* ==========================================================================
   Ceramic coatings / paint correction comparison blocks
   ========================================================================== */
.compare-2col{ display:grid; grid-template-columns:1fr }
@media (min-width:768px){ .compare-2col{ grid-template-columns:1fr 1fr } }
.compare-col{ padding:32px 0; border-top:1px solid var(--line) }
@media (min-width:768px){ .compare-col.right{ padding-left:56px; border-left:1px solid var(--line) } .compare-col.left{ padding-right:56px } }
.compare-col h3{ font-size:19px; font-weight:800; margin-bottom:20px }
.compare-col ul{ display:flex; flex-direction:column; gap:13px }
.compare-col li{ display:flex; align-items:center; gap:12px; font-size:16px }
.compare-col .dash-bullet{ width:16px; height:1px; background:var(--line-strong); flex-shrink:0 }

.important-box{ border:1px solid var(--line); border-radius:var(--radius-card); padding:32px; background:var(--bg-soft) }
.important-box .head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:20px }
.important-box svg{ color:var(--teal); flex-shrink:0; margin-top:2px }
.important-box h3{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:13px }
.important-box p{ font-size:16px; color:var(--text); line-height:1.61 }
.important-box .divider{ border-top:1px solid var(--line); padding-top:20px }

.numbered-steps{ display:flex; flex-direction:column }
.numbered-step{ display:flex; gap:32px; border-top:1px solid var(--line); padding:32px 0 }
.numbered-step:last-of-type{ border-bottom:1px solid var(--line) }
.numbered-step .n{ font-size:56px; font-weight:800; letter-spacing:-.025em; line-height:1; color:var(--line-strong); flex-shrink:0; width:80px }
.numbered-step h3{ font-size:19px; font-weight:800; margin-bottom:8px }
.numbered-step p{ font-size:16px; line-height:1.61 }

.included-checklist{ display:grid; grid-template-columns:1fr; gap:13px 56px }
@media (min-width:640px){ .included-checklist{ grid-template-columns:1fr 1fr } }
.included-checklist .row{ display:flex; align-items:flex-start; gap:12px; border-top:1px solid var(--line); padding:13px 0 }
.included-checklist svg{ color:var(--teal); flex-shrink:0; margin-top:4px }
.included-checklist span{ font-size:16px; color:var(--text) }

.faq-alt{ display:flex; flex-direction:column }
.faq-alt-item{ border-top:1px solid var(--line); padding:20px 0 }
.faq-alt-item:last-child{ border-bottom:1px solid var(--line) }
.faq-alt-item h3{ font-size:19px; font-weight:800; color:var(--navy); margin-bottom:13px }
.faq-alt-item p{ font-size:16px; color:var(--text); line-height:1.61 }

/* ==========================================================================
   CTA blocks (page-level closing sections)
   ========================================================================== */
.cta-block h2{ font-weight:800; line-height:1.05; letter-spacing:-.02em; color:var(--navy); font-size:clamp(32px,5vw,56px); margin-bottom:20px }
.cta-block p{ font-size:16px; color:var(--muted); max-width:36rem; margin-bottom:32px }
.cta-block-actions{ display:flex; gap:13px; flex-wrap:wrap }

/* utility */
.text-sienna{ color:var(--teal) }
.mt-4{ margin-top:16px }