/* =========================================================
   Solstice Climate — design tokens & fine-grained styling
   Tailwind handles layout utilities; this file owns motion,
   the signature "climate ring" motif, and premium detailing.
   ========================================================= */

:root{
  --ink: #0E1A2B;
  --ink-soft: rgba(14,26,43,.62);
  --ink-faint: rgba(14,26,43,.42);
  --paper: #FCFBF8;
  --mist: #F2F1EC;
  --accent: #24467D;
  --accent-light: #3A5DA0;
  --brass: #B08D57;
  --line: rgba(14,26,43,.10);
  --line-soft: rgba(14,26,43,.06);
  --ease-lux: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{ scrollbar-color: var(--ink-faint) transparent; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  font-feature-settings: "ss01" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
}

em{ font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--accent); }

::selection{ background: var(--accent); color: var(--paper); }

.container-lux{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position: fixed; top:0; left:0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--brass));
  z-index: 200; transition: width .1s linear;
}

/* ---------- Scroll completion dial ---------- */
.progress-dial{
  position: fixed; right: clamp(16px,3vw,32px); bottom: clamp(16px,3vw,32px); z-index: 150;
  width:56px; height:56px; border:none; background: rgba(252,251,248,.85); backdrop-filter: blur(12px);
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 32px -14px rgba(14,26,43,.3); border:1px solid var(--line);
  opacity:0; transform: translateY(12px) scale(.92); pointer-events:none;
  transition: opacity .45s var(--ease-lux), transform .45s var(--ease-lux), box-shadow .3s;
}
.progress-dial.is-visible{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.progress-dial:hover{ box-shadow: 0 16px 40px -14px rgba(14,26,43,.4); }
.progress-dial svg{ position:absolute; inset:0; width:100%; height:100%; transform: rotate(-90deg); }
.progress-dial-track{ fill:none; stroke: var(--line); stroke-width:2.5; }
.progress-dial-fill{
  fill:none; stroke: var(--accent); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray: 150.8; stroke-dashoffset: 150.8; transition: stroke-dashoffset .12s linear;
}
.progress-dial-num{ position:relative; font-size:.72rem; font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 720px){ .progress-dial{ width:46px; height:46px; } .progress-dial-num{ font-size:.62rem; } }

/* ---------- Header ---------- */
.site-header{ position: fixed; top:0; left:0; right:0; z-index: 100; padding-top: 20px; }
.nav-shell{ padding: 0 clamp(16px,4vw,48px); }
.nav-glass{
  max-width: 1280px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px; padding: 12px 14px 12px 22px;
  background: rgba(252,251,248,.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(14,26,43,.06);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(14,26,43,.04), 0 12px 32px -16px rgba(14,26,43,.14);
  transition: padding .5s var(--ease-lux), box-shadow .5s var(--ease-lux), background .5s var(--ease-lux);
}
.site-header.is-scrolled .nav-glass{
  padding: 8px 10px 8px 18px;
  box-shadow: 0 1px 2px rgba(14,26,43,.05), 0 16px 40px -18px rgba(14,26,43,.22);
  background: rgba(252,251,248,.86);
}
.site-header.is-scrolled{ padding-top: 12px; }

.brand{ display:flex; align-items:center; gap:9px; color: var(--ink); text-decoration:none; flex-shrink:0; }
.brand-mark{ color: var(--accent); display:flex; }
.brand-word{ font-family:'Fraunces',serif; font-weight:500; font-size: 1.05rem; letter-spacing:-.01em; white-space:nowrap; }
.brand-word em{ color: var(--ink); font-style: normal; font-weight: 300; }

.nav-links{ display:flex; align-items:center; gap: 30px; list-style:none; }
.nav-links a{
  color: var(--ink-soft); text-decoration:none; font-size:.88rem; font-weight:500;
  position:relative; padding: 4px 0; transition: color .3s var(--ease-soft);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-lux);
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; }

.nav-actions{ display:flex; align-items:center; gap:16px; }
.nav-phone{ display:flex; align-items:center; gap:7px; color:var(--ink); text-decoration:none; font-size:.86rem; font-weight:500; white-space:nowrap; }
.nav-phone svg{ color: var(--accent); }

.nav-burger{ display:none; width:38px; height:38px; border-radius:50%; border:none; background:transparent; cursor:pointer; position:relative; }
.nav-burger span{ position:absolute; left:10px; right:10px; height:1.4px; background:var(--ink); transition: transform .35s var(--ease-lux), opacity .35s; }
.nav-burger span:first-child{ top:16px; }
.nav-burger span:last-child{ top:22px; }
.nav-burger[aria-expanded="true"] span:first-child{ transform: translateY(3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform: translateY(-3px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 90px 16px auto 16px; z-index: 90;
  background: rgba(252,251,248,.98); backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: 24px;
  padding: 12px; box-shadow: 0 24px 60px -20px rgba(14,26,43,.25);
  transform: translateY(-12px) scale(.98); opacity:0; pointer-events:none;
  transition: all .45s var(--ease-lux);
}
.mobile-menu.is-open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.mobile-menu ul{ list-style:none; }
.mobile-menu a{ display:block; padding: 14px 18px; color: var(--ink); text-decoration:none; font-size:1.05rem; font-family:'Fraunces',serif; border-bottom: 1px solid var(--line-soft); }
.mobile-menu li:last-child a{ border-bottom:none; }
.mobile-cta{ margin: 8px 10px 4px; }
.mobile-phone{ display:block; text-align:center; margin-top:6px; padding:14px; color: var(--accent); text-decoration:none; font-weight:600; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: 999px; font-size:.9rem; font-weight:600;
  text-decoration:none; white-space:nowrap; cursor:pointer; border:none;
  transition: transform .45s var(--ease-lux), box-shadow .45s var(--ease-lux), background .35s var(--ease-soft), color .35s;
  position:relative; overflow:hidden;
}
.btn span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; }
.btn-lg{ padding: 16px 32px; font-size:.95rem; }
.btn-primary{
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 30px -12px rgba(36,70,125,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 20px 36px -12px rgba(36,70,125,.65); }
.btn-primary:active{ transform: translateY(0) scale(.98); }
.btn-ghost{
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.btn-ghost:hover{ background: rgba(14,26,43,.04); transform: translateY(-2px); }
.btn-block{ width:100%; }
.btn-magnetic{ will-change: transform; }

.btn-loader{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; }
.is-loading .btn-label{ opacity:0; }
.is-loading .btn-loader{ display:block; animation: spin .7s linear infinite; position:absolute; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Hero ---------- */
.hero{
  position: relative; min-height: 100svh; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; overflow:hidden;
  padding: 140px clamp(24px,6vw,96px) 60px;
  isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position: 74% 8%; transform: scale(1.08); }
.hero-bg-veil{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(252,251,248,.95) 0%, rgba(252,251,248,.88) 32%, rgba(252,251,248,.5) 52%, rgba(252,251,248,.1) 70%, transparent 84%),
              linear-gradient(180deg, rgba(252,251,248,.3) 0%, transparent 24%, transparent 76%, var(--paper) 100%);
}

.climate-ring{ position:absolute; z-index:-1; color: var(--ink); opacity:.07; pointer-events:none; }
.climate-ring--hero{
  width: min(90vw, 900px); height: min(90vw,900px); top:50%; left:50%;
  transform: translate(-50%,-50%); animation: ring-spin 90s linear infinite;
}
@keyframes ring-spin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

.hero-inner{ position:relative; max-width: 780px; text-align:center; z-index:1; }

.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); margin-bottom:18px; display:block;
}

.hero-title{
  font-family:'Fraunces',serif; font-weight:400; letter-spacing:-.02em;
  font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height:1.06; color: var(--ink);
  margin-bottom: 26px;
}
.hero-title .line{ display:block; overflow:hidden; }

.hero-sub{ font-size: clamp(1rem,1.6vw,1.15rem); color: var(--ink-soft); line-height:1.65; max-width:560px; margin: 0 auto 40px; }

.hero-ctas{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom: 44px; }

.hero-trust{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-size:.85rem; color: var(--ink-soft); }
.stars{ display:flex; gap:2px; color:#D9A441; }
.stars--sm{ font-size:.8rem; letter-spacing:1px; }
.divider-dot{ width:3px; height:3px; border-radius:50%; background: var(--ink-faint); }
.badge-emergency{ display:inline-flex; align-items:center; gap:7px; color: var(--ink); font-weight:600; }
.pulse-dot{ width:7px; height:7px; border-radius:50%; background:#2E8B57; position:relative; }
.pulse-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #2E8B57; animation: pulse 2s var(--ease-soft) infinite; }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:1;} 100%{ transform:scale(1.8); opacity:0; } }

.floating-card{
  position:absolute; background: rgba(255,255,255,.82); backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.6); border-radius:20px; padding:18px 20px;
  box-shadow: 0 24px 48px -20px rgba(14,26,43,.22); z-index:2; max-width:260px;
  animation: float 7s var(--ease-soft) infinite;
}
.floating-card--service{ bottom: 16%; right: clamp(16px,4vw,72px); display:flex; align-items:center; gap:14px; max-width:220px; animation-delay: 1.4s; }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }

.fc-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fc-avatar{ width:32px; height:32px; border-radius:50%; background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; flex-shrink:0; }
.fc-name{ font-size:.82rem; font-weight:600; color:var(--ink); }
.fc-google{ margin-left:auto; }
.fc-quote{ font-size:.83rem; line-height:1.5; color: var(--ink-soft); font-style:italic; font-family:'Fraunces',serif; }
.fc-service-icon{ width:42px; height:42px; border-radius:50%; background: var(--mist); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fc-service-title{ font-size:.72rem; color: var(--ink-faint); }
.fc-service-value{ font-family:'Fraunces',serif; font-size:1.1rem; color:var(--ink); }

.scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--ink-faint); }
.scroll-cue span{ width:1px; height:34px; background: linear-gradient(var(--ink-faint), transparent); position:relative; overflow:hidden; }
.scroll-cue span::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--accent); animation: scrollcue 2.2s var(--ease-soft) infinite; }
@keyframes scrollcue{ 0%{ top:-100%;} 60%,100%{ top:100%;} }
.scroll-cue p{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- Trust strip ---------- */
.trust-strip{ padding: 48px 0; border-bottom: 1px solid var(--line-soft); }
.trust-label{ text-align:center; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:22px; }
.trust-marks{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(24px,5vw,64px); }
.trust-marks span{ font-family:'Fraunces',serif; font-size:1.15rem; color: var(--ink-faint); letter-spacing:-.01em; transition: color .35s; }
.trust-marks span:hover{ color: var(--ink); }

/* ---------- Sections ---------- */
.section{ padding: clamp(80px,10vw,140px) 0; }
.section--mist{ background: var(--mist); }
.section-head{ max-width: 640px; margin: 0 auto 64px; text-align:center; }
.section-title{ font-family:'Fraunces',serif; font-weight:400; letter-spacing:-.02em; font-size: clamp(2rem,4vw,2.9rem); line-height:1.15; color:var(--ink); margin-bottom:18px; }
.section-sub{ color: var(--ink-soft); font-size:1.05rem; line-height:1.65; }

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .5s;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(14,26,43,.22); border-color: rgba(14,26,43,.02); }
.service-media{ aspect-ratio: 4/3; overflow:hidden; }
.service-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease-lux); }
.service-card:hover .service-media img{ transform: scale(1.08); }
.service-body{ padding: 26px 26px 28px; }
.service-icon{ width:42px; height:42px; border-radius:50%; background: var(--mist); color: var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:16px; transition: background .35s, color .35s, transform .5s var(--ease-lux); }
.service-card:hover .service-icon{ background: var(--accent); color:#fff; transform: rotate(-8deg) scale(1.05); }
.service-body h3{ font-family:'Fraunces',serif; font-size:1.25rem; font-weight:500; color: var(--ink); margin-bottom:8px; }
.service-body p{ color: var(--ink-soft); font-size:.92rem; line-height:1.6; margin-bottom:16px; }
.service-link{ display:inline-flex; align-items:center; gap:6px; color:var(--accent); text-decoration:none; font-size:.86rem; font-weight:600; }
.service-link svg{ transition: transform .35s var(--ease-lux); }
.service-card:hover .service-link svg{ transform: translateX(4px); }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items:stretch; }
.pricing-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:22px;
  padding: 32px 28px; display:flex; flex-direction:column;
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
.pricing-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(14,26,43,.18); }
.pricing-card--featured{ border-color: var(--accent); box-shadow: 0 20px 50px -22px rgba(36,70,125,.3); }
.pricing-card--featured:hover{ box-shadow: 0 30px 60px -20px rgba(36,70,125,.38); }
.pricing-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--accent); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:6px 16px; border-radius:999px;
  box-shadow: 0 8px 18px -8px rgba(36,70,125,.6);
}
.pricing-head{ margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line-soft); }
.pricing-head h3{ font-family:'Fraunces',serif; font-size:1.15rem; font-weight:500; color:var(--ink); margin-bottom:14px; }
.pricing-price{ font-family:'Fraunces',serif; color:var(--ink); font-size:1rem; }
.pricing-price span{ font-size:2.4rem; font-weight:500; letter-spacing:-.02em; }
.pricing-billed{ font-size:.8rem; color: var(--ink-faint); margin-top:4px; }
.pricing-features{ list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:28px; flex:1; }
.pricing-features li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color: var(--ink-soft); line-height:1.4; }
.pricing-features svg{ color: var(--accent); flex-shrink:0; margin-top:2px; }
.pricing-onetime{
  max-width:720px; margin: 56px auto 0; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding: 8px 32px;
}
.pricing-onetime-label{
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--accent); padding: 20px 0 4px;
}
.pricing-onetime-list{ list-style:none; }
.pricing-onetime-list li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 16px 0; border-bottom:1px solid var(--line-soft); font-size:.98rem; color: var(--ink);
}
.pricing-onetime-list li:last-child{ border-bottom:none; }
.pricing-onetime-list strong{ font-family:'Fraunces',serif; font-weight:500; color: var(--accent); white-space:nowrap; }

.pricing-note{ text-align:center; margin-top:32px; color: var(--ink-soft); font-size:.95rem; }
.pricing-note a{ color: var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Why / stats ---------- */
.why-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.why-list{ list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.why-list li{ display:flex; align-items:flex-start; gap:12px; color: var(--ink); font-size:.98rem; line-height:1.5; }
.why-list svg{ color: var(--accent); flex-shrink:0; margin-top:2px; }

.why-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stat-ring-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding: 28px 20px; text-align:center; position:relative; transition: transform .5s var(--ease-lux), box-shadow .5s; }
.stat-ring-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px -20px rgba(14,26,43,.2); }
.stat-ring{ width:88px; height:88px; margin:0 auto 4px; transform: rotate(-90deg); }
.stat-ring-track{ fill:none; stroke: var(--line); stroke-width:6; }
.stat-ring-fill{ fill:none; stroke: var(--accent); stroke-width:6; stroke-linecap:round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.6s var(--ease-lux); }
.stat-ring-num{ font-family:'Fraunces',serif; font-size:1.5rem; color:var(--ink); margin-top: -56px; margin-bottom: 32px; }
.stat-ring-card p{ font-size:.82rem; color: var(--ink-soft); }

/* ---------- Timeline ---------- */
.timeline{ list-style:none; max-width: 820px; margin:0 auto; position:relative; }
.timeline::before{ content:''; position:absolute; left:27px; top:8px; bottom:8px; width:1px; background: var(--line); }
.timeline-item{ display:flex; gap:28px; padding-bottom: 48px; position:relative; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-marker{
  width:56px; height:56px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Fraunces',serif;
  color: var(--accent); font-size:1rem; font-weight:500; position:relative; z-index:1;
}
.timeline-body h3{ font-family:'Fraunces',serif; font-size:1.35rem; color:var(--ink); margin-bottom:8px; padding-top:12px; }
.timeline-body p{ color: var(--ink-soft); line-height:1.65; max-width: 560px; }

/* ---------- Before/After compare ---------- */
.compare{ position:relative; max-width: 960px; margin:0 auto; aspect-ratio: 16/9; border-radius:24px; overflow:hidden; box-shadow: 0 40px 80px -30px rgba(14,26,43,.28); cursor: ew-resize; user-select:none; }
.compare img{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
.compare-after{ position:absolute; inset:0; }
.compare-before{
  position:absolute; inset:0; clip-path: inset(0 48% 0 0);
  border-right:1px solid rgba(255,255,255,.5);
}
.compare-handle{
  position:absolute; top:50%; left:52%; transform: translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(14,26,43,.3);
}
.compare-handle::before{
  content:''; position:absolute; top:-1000px; bottom:-1000px; left:50%; width:2px;
  background: rgba(255,255,255,.85); transform: translateX(-50%); z-index:-1;
}
.compare-tag{ position:absolute; top:16px; padding:6px 14px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.compare-tag--after{ right:16px; background: rgba(14,26,43,.75); color:#fff; }
.compare-tag--before{ left:16px; background: rgba(255,255,255,.9); color: var(--ink); }

/* ---------- Reviews carousel ---------- */
.reviews-track-wrap{ overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reviews-track{ display:flex; gap:24px; width:max-content; animation: scroll-reviews 42s linear infinite; padding: 4px 24px; }
.reviews-track-wrap:hover .reviews-track{ animation-play-state: paused; }
@keyframes scroll-reviews{ to{ transform: translateX(-50%); } }
.review-card{ width: 340px; flex-shrink:0; background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow: 0 10px 30px -18px rgba(14,26,43,.15); }
.review-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.review-avatar{ width:38px; height:38px; border-radius:50%; background: var(--mist); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; }
.review-name{ font-size:.9rem; font-weight:600; color:var(--ink); }
.review-text{ font-family:'Fraunces',serif; font-style:italic; color: var(--ink-soft); font-size:.95rem; line-height:1.6; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items:start; }
.contact-details{ display:flex; flex-direction:column; gap:16px; margin: 30px 0 28px; }
.contact-detail{ display:flex; align-items:center; gap:12px; color:var(--ink); font-size:.95rem; }
.contact-detail svg{ color: var(--accent); flex-shrink:0; }
.contact-map{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); aspect-ratio: 4/3; filter: grayscale(.15) contrast(1.02); }
.contact-map iframe{ position:absolute; top:0; left:0; width:100%; height:132%; border:0; }

.contact-form{ background:#fff; border:1px solid var(--line); border-radius: 26px; padding: clamp(24px,4vw,40px); box-shadow: 0 30px 70px -30px rgba(14,26,43,.18); position:relative; }
.field{ position:relative; margin-bottom: 20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field input, .field select, .field textarea{
  width:100%; padding: 18px 16px 8px; border:1px solid var(--line); border-radius:14px;
  font-family:'Inter',sans-serif; font-size:.95rem; color:var(--ink); background:#fff;
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.field select{ padding-top:18px; appearance:none; }
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(36,70,125,.1); }
.field label{
  position:absolute; left:16px; top: 17px; color: var(--ink-faint); font-size:.95rem;
  pointer-events:none; transition: all .25s var(--ease-soft); background:#fff; padding:0 4px;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field select:focus + label, .field select:valid + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:-8px; left:12px; font-size:.72rem; color: var(--accent); font-weight:600;
}
.field select:invalid{ color: var(--ink-faint); }
.field-error{ display:none; color:#B4483C; font-size:.78rem; margin-top:6px; padding-left:4px; }
.field.is-invalid input, .field.is-invalid select{ border-color:#B4483C; }
.field.is-invalid .field-error{ display:block; }

.form-success{
  position:absolute; inset:0; background: rgba(255,255,255,.98); border-radius:26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px;
  padding: 40px; opacity:0; pointer-events:none; transform: scale(.96);
  transition: all .5s var(--ease-lux);
}
.form-success.is-visible{ opacity:1; pointer-events:auto; transform: scale(1); }
.form-success svg{ color: #2E8B57; }
.form-success p{ font-family:'Fraunces',serif; font-size:1.15rem; color:var(--ink); max-width:320px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(252,251,248,.72); padding-top: 80px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(252,251,248,.1); }
.brand--footer{ color: #FCFBF8; margin-bottom:16px; }
.brand--footer .brand-mark{ color: #d9c8a8; }
.brand--footer .brand-word em{ color: rgba(252,251,248,.6); }
.footer-brand p{ font-size:.88rem; line-height:1.6; max-width:280px; margin-bottom:20px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(252,251,248,.18); display:flex; align-items:center; justify-content:center; color: rgba(252,251,248,.72); transition: all .3s; }
.footer-social a:hover{ background: rgba(252,251,248,.1); color:#fff; transform: translateY(-2px); }
.footer-links h4{ color:#fff; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; font-weight:600; }
.footer-links a{ display:block; color: rgba(252,251,248,.65); text-decoration:none; font-size:.9rem; margin-bottom:12px; transition: color .25s; }
.footer-links a:hover{ color:#fff; }
.footer-newsletter h4{ color:#fff; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; font-weight:600; }
.footer-newsletter p{ font-size:.85rem; line-height:1.55; margin-bottom:16px; }
.newsletter-form{ display:flex; border:1px solid rgba(252,251,248,.2); border-radius:999px; padding:5px; }
.newsletter-form input{ flex:1; background:none; border:none; padding:9px 14px; color:#fff; font-size:.85rem; }
.newsletter-form input::placeholder{ color: rgba(252,251,248,.4); }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ width:36px; height:36px; border-radius:50%; background: var(--brass); color: var(--ink); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .3s var(--ease-lux); }
.newsletter-form button:hover{ transform: scale(1.08); }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding: 26px 0; font-size:.8rem; gap: 20px; flex-wrap:wrap; }
.footer-legal{ display:flex; gap:24px; }
.footer-legal a{ color: rgba(252,251,248,.55); text-decoration:none; }
.footer-legal a:hover{ color:#fff; }

/* ---------- Scroll reveal ---------- */
.reveal-up{ opacity:0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--ease-lux), transform .9s var(--ease-lux), filter .9s var(--ease-lux); }
.reveal-up.is-visible{ opacity:1; transform: translateY(0); filter: blur(0); }
.hero-title .line.is-visible{ opacity:1; transform:none; filter:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .nav-phone{ display:none; }
  .nav-actions .btn-primary{ display:none; }
  .why-grid, .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
  .services-grid, .pricing-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .services-grid, .pricing-grid{ grid-template-columns: 1fr; }
  .why-stats{ grid-template-columns: 1fr 1fr; }
  .field-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .floating-card--service{ display:none; }
  .hero{ padding-top: 120px; justify-content: flex-end; padding-bottom: 56px; }
  .hero-bg-veil{
    background: linear-gradient(180deg, rgba(252,251,248,.5) 0%, rgba(252,251,248,.68) 40%, rgba(252,251,248,.85) 70%, var(--paper) 100%);
  }
  .hero-bg img{ object-position: 82% 15%; }
  .scroll-cue{ display:none; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 480px){
  .hero-ctas{ flex-direction:column; width:100%; }
  .hero-ctas .btn{ width:100%; }
  .trust-marks{ gap: 20px 32px; }
}