/* ============================================================
   Snow & Sons Roofing — Homepage Enhancements
   Additive layer on top of styles.css. Brand tokens only.
   New components + premium motion. Reduced-motion safe.
   ============================================================ */

/* ---------- Hero ambient effects (snow + light) ---------- */
.hero { isolation: isolate; }
.hero > .container { position: relative; z-index: 2; }

.hero__snow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; opacity: 0.9;
}
/* Soft sunlight rays sweeping across the hero */
.hero__rays {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(195, 223, 232, 0.55) 0%, transparent 55%),
    radial-gradient(90% 70% at 10% 110%, rgba(176, 214, 230, 0.30) 0%, transparent 60%);
}
.hero__rays::after {
  content: ''; position: absolute; top: -40%; left: 50%; width: 60%; height: 180%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  transform: rotate(18deg); filter: blur(28px); opacity: 0.5;
  animation: ray-drift 16s ease-in-out infinite alternate;
}
@keyframes ray-drift {
  from { transform: translateX(-12%) rotate(18deg); opacity: 0.35; }
  to   { transform: translateX(14%)  rotate(18deg); opacity: 0.6; }
}

/* Sunlight glint sweeping across the completed-roof hero image */
.hero__visual::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.38) 47%, rgba(255,255,255,0.05) 54%, transparent 70%);
  transform: translateX(-120%); mix-blend-mode: screen;
  animation: roof-glint 7.5s ease-in-out 1.2s infinite;
}
@keyframes roof-glint {
  0%   { transform: translateX(-120%); }
  18%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ---------- Hero service-clarity chips ---------- */
.hero__services {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  margin: 0 0 var(--s-7);
}
.hero__services li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; font-size: 0.86rem; font-weight: 500; color: var(--ink-soft);
  background: rgba(255,255,255,0.7); border: 1px solid var(--rule);
  border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hero__services li svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.hero__services li:hover { transform: translateY(-2px); border-color: var(--accent-mist); box-shadow: var(--shadow-sm); }
@media (max-width: 480px) { .hero__services li { font-size: 0.8rem; padding: 8px 13px; } }

/* ---------- Insurance claim guidance row ---------- */
.insurance-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6);
  margin-top: var(--s-6); padding: var(--s-6) var(--s-7);
  background: linear-gradient(135deg, var(--bg-paper) 0%, rgba(195, 223, 232, 0.35) 100%);
  border: 1px solid var(--rule); border-radius: var(--r-md); position: relative; overflow: hidden;
}
.insurance-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--dignity-blue));
}
.insurance-row__icon {
  width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%;
  background: var(--soar); color: var(--dignity-blue);
  display: flex; align-items: center; justify-content: center;
}
.insurance-row__icon svg { width: 30px; height: 30px; }
.insurance-row__body h3 { font-family: var(--ff-display); font-size: 1.35rem; font-weight: 400; margin-bottom: 6px; letter-spacing: -0.01em; }
.insurance-row__body p { color: var(--text-muted); font-size: 0.96rem; margin: 0; line-height: 1.6; }
.insurance-row__cta { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 820px) {
  .insurance-row { grid-template-columns: 1fr; text-align: left; gap: var(--s-4); padding: var(--s-6); }
  .insurance-row__cta { justify-self: start; }
}

/* ---------- Why Choose reasons ---------- */
.why__reasons { margin-bottom: var(--s-7); }
.why__reason {
  padding: var(--s-6); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md);
  background: rgba(255,255,255,0.03); transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.why__reason:hover { transform: translateY(-4px); border-color: rgba(176,214,230,0.4); background: rgba(255,255,255,0.05); }
.why__reason-icon {
  width: 52px; height: 52px; border-radius: var(--r-sm); margin-bottom: var(--s-4);
  background: rgba(176, 214, 230, 0.12); color: var(--regale-blue);
  display: flex; align-items: center; justify-content: center;
}
.why__reason-icon svg { width: 26px; height: 26px; }
.why__reason h3 { color: var(--white-snow); font-family: var(--ff-display); font-size: 1.3rem; font-weight: 400; margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.why__reason p { color: var(--something-blue); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* ---------- Before / After slider ---------- */
.ba-slider {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 560px;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg);
  margin-bottom: var(--s-7); user-select: none; cursor: ew-resize;
  background: linear-gradient(135deg, var(--soar), var(--regale-blue));
}
.ba-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* "before" overlay sits at full frame size and is revealed via clip-path,
   so the image never distorts as the divider moves. JS sets --pos (0–100). */
.ba-slider { --pos: 50%; }
.ba-slider__before {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-slider__before .ba-slider__img { width: 100%; }
.ba-slider__label {
  position: absolute; top: var(--s-5); z-index: 4; padding: 6px 14px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; backdrop-filter: blur(8px); color: var(--white-snow);
}
.ba-slider__label--before { left: var(--s-5); background: rgba(4,7,7,0.55); }
.ba-slider__label--after  { right: var(--s-5); background: rgba(35,119,162,0.78); }
.ba-slider__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 5; width: 44px;
  transform: translateX(-50%); display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ba-slider__handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-50%); background: rgba(255,255,255,0.92);
}
.ba-slider__handle svg {
  position: relative; width: 22px; height: 22px; color: var(--dignity-blue);
  background: var(--white-snow); border-radius: 50%; padding: 9px; box-sizing: content-box;
  box-shadow: var(--shadow-md);
}
.ba-slider__range {
  position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.ba-slider__range:focus-visible + .ba-slider__handle svg,
.ba-slider:focus-within .ba-slider__handle svg { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .ba-slider { aspect-ratio: 4 / 3; } }

/* ---------- Service areas ---------- */
.areas-grid {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
  max-width: 900px; margin: 0 auto;
}
.area-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft);
  background: var(--bg-canvas); border: 1px solid var(--rule); border-radius: 999px;
  transition: all .28s var(--ease);
}
.area-chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-mist);
  transition: background .28s var(--ease), transform .28s var(--ease);
}
.area-chip:hover {
  color: var(--white-snow); background: var(--accent); border-color: var(--accent);
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(35,119,162,0.28);
}
.area-chip:hover::before { background: var(--white-snow); transform: scale(1.3); }
.areas-note {
  text-align: center; color: var(--text-muted); font-size: 1rem; margin: var(--s-7) auto 0; max-width: 720px;
}
.areas-note strong { color: var(--ink); font-weight: 600; }

/* ---------- Family strip (kept from prior build, lightly refined) ---------- */
.family-strip { margin-top: var(--s-8); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-7); align-items: center; }
@media (max-width: 900px) { .family-strip { grid-template-columns: 1fr; gap: var(--s-5); } }
.family-strip__caption p { color: var(--text-muted); font-size: 1rem; line-height: 1.65; margin: 0; }
.family-strip__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.family-photo { margin: 0; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--bg-mist); box-shadow: var(--shadow-sm); }
.family-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.family-photo:hover img { transform: scale(1.05); }

/* ---------- Service-card animated roof-outline trace on hover ---------- */
.service-card__media { position: relative; }
.service-card__media::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 38px; z-index: 3;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none' stroke='%23F8FBFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 26 L60 6 L114 26' pathLength='100' stroke-dasharray='100' stroke-dashoffset='100'/></svg>");
  opacity: 0; transition: opacity .4s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .service-card:hover .service-card__media::after { opacity: 0.92; animation: roof-trace 0.9s var(--ease) forwards; }
}
@keyframes roof-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Reduced motion: silence ambient animation ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__rays::after, .hero__visual::after { animation: none; }
  .hero__visual::after { display: none; }
  .service-card:hover .service-card__media::after { animation: none; opacity: 0; }
}

/* ---------- Mobile tuning for new sections ---------- */
@media (max-width: 768px) {
  .insurance-row { margin-top: var(--s-5); }
  .why__reason { padding: 22px; }
  .why__reason h3 { font-size: 1.2rem !important; }
  .ba-slider { margin-bottom: 28px; }
  .area-chip { padding: 9px 16px; font-size: 0.86rem; }
  .hero__services { margin-bottom: 26px; }
}

/* ============================================================
   REVISION 2 — TIGHTEN EVERYTHING + LIVELY REVIEW CARDS
   (loaded after styles.css, so these win the cascade)
   ============================================================ */

/* ---- Global density: cut the vertical air dramatically ---- */
section { padding: 72px 0 !important; }
section.tight { padding: 52px 0 !important; }
section.loose { padding: 84px 0 !important; }
.section-head { margin-bottom: 38px !important; }
.section-head p.lead { margin-top: 14px !important; }
@media (max-width: 768px) {
  section { padding: 46px 0 !important; }
  section.tight { padding: 38px 0 !important; }
  section.loose { padding: 52px 0 !important; }
  .section-head { margin-bottom: 26px !important; }
}

/* Hero: shorter, denser */
.hero { padding: 48px 0 56px !important; }
.hero__sub { margin-bottom: 26px; }
@media (max-width: 768px) { .hero { padding: 32px 0 40px !important; } }

/* Trust strip + insurance row: trimmer */
.trust-strip { padding: 22px 0 !important; }
.insurance-row { margin-top: 28px; padding: 24px 28px; }

/* Why section reasons: tighter cards */
.why__reasons { margin-bottom: 44px; }
.why__reason { padding: 26px; }
.stats { padding: 24px 0 0 !important; }

/* Projects + before/after: less gap */
.ba-slider { margin-bottom: 40px; max-height: 460px; }
.project { margin-bottom: 18px !important; }

/* ---- FAQ: noticeably smaller ---- */
.faq__q { font-size: 1.04rem !important; padding: 17px 0 !important; font-weight: 500; }
.faq__q-icon { width: 26px; height: 26px; }
.faq__q-icon svg { width: 12px; height: 12px; }
.faq__a-inner { font-size: 0.94rem; padding-bottom: 17px; }
#faq .section-head { margin-bottom: 28px !important; }

/* ---- Meet Crystal: compact ---- */
.founder__body { padding: 40px 40px !important; }
.founder h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem) !important; margin-bottom: 16px !important; }
.founder p { font-size: 0.94rem !important; line-height: 1.55 !important; margin-bottom: 12px !important; }
.founder__image { aspect-ratio: auto; }
@media (min-width: 901px) { .founder__image img { object-position: center 22%; } }
.founder__sig { margin-top: 18px; padding-top: 16px; }
.family-strip { margin-top: 36px; }
.family-photo { aspect-ratio: 4 / 4; }
@media (max-width: 768px) {
  .founder__body { padding: 26px !important; }
  .founder__image { aspect-ratio: 4 / 3; }
}

/* ============================================================
   LIVELY REVIEW CARDS — dark glass + light-blue border beam + falling snow
   ============================================================ */
@property --beam {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}

#reviews { background: var(--bg-mist); }
#reviews .grid { gap: 22px; }

#reviews .testimonial {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 28px 28px 24px !important;
  border: 1px solid rgba(176, 214, 230, 0.22) !important;
  border-radius: var(--r-lg) !important;
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(125,181,211,0.22), transparent 60%),
    linear-gradient(158deg, var(--in-the-navy) 0%, var(--shiver) 100%) !important;
  box-shadow: 0 14px 36px rgba(4, 7, 7, 0.20);
}
/* the travelling light-blue border line */
#reviews .testimonial::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--beam),
    transparent 0%, transparent 8%,
    var(--regale-blue) 15%, var(--soar) 20%, var(--white-snow) 23%,
    var(--soar) 26%, var(--regale-blue) 31%,
    transparent 40%, transparent 58%,
    var(--regale-blue) 65%, var(--soar) 70%, var(--regale-blue) 75%,
    transparent 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 6s linear infinite;
}
@keyframes beam-spin { to { --beam: 360deg; } }
/* soft outer glow that pulses gently with the beam */
#reviews .testimonial::after {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 26px rgba(125, 181, 211, 0.28);
  opacity: 0.7; animation: beam-glow 6s ease-in-out infinite;
}
@keyframes beam-glow { 0%,100% { opacity: 0.45; } 50% { opacity: 0.85; } }

/* falling snow layers injected by enhance.js */
#reviews .testimonial .review-snow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.85;
  background-repeat: repeat;
  background-image:
    radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 38% 50%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(2.2px 2.2px at 64% 30%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 60%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 50% 80%, rgba(255,255,255,0.85), transparent 60%);
  background-size: 100% 180px;
  animation: review-snow 8s linear infinite;
}
#reviews .testimonial .review-snow--slow {
  opacity: 0.5; background-size: 100% 260px; animation-duration: 14s;
  filter: blur(0.4px);
}
@keyframes review-snow { from { background-position: 0 -180px; } to { background-position: 6px 180px; } }

/* keep card content above snow + beam */
#reviews .testimonial > .testimonial__stars,
#reviews .testimonial > .testimonial__quote,
#reviews .testimonial > .testimonial__meta { position: relative; z-index: 2; }

#reviews .testimonial__stars { color: #F2C879; margin-bottom: 14px; }
#reviews .testimonial__quote {
  color: var(--white-snow) !important; font-style: normal !important; font-weight: 300 !important;
  font-size: 1.02rem !important; line-height: 1.5 !important; margin-bottom: 18px !important;
}
#reviews .testimonial__quote::before { color: var(--regale-blue); font-size: 2.4rem; }
#reviews .testimonial__meta { border-top-color: rgba(255,255,255,0.16) !important; padding-top: 16px !important; }
#reviews .testimonial__name strong { color: var(--white-snow); }
#reviews .testimonial__name span { color: var(--something-blue); }
#reviews .testimonial__avatar { background: linear-gradient(135deg, var(--regale-blue), var(--dignity-blue)); color: var(--white-snow); }

@media (prefers-reduced-motion: reduce) {
  #reviews .testimonial::before { animation: none; }
  #reviews .testimonial::after { animation: none; }
  #reviews .testimonial .review-snow { animation: none; opacity: 0.4; }
}

/* ============================================================
   REVISION 3 — ELEVATED, LAYERED SECTIONS (depth + "special")
   ============================================================ */

/* Soft, frosted transitions so sections flow rather than stack */
section, .trust-strip { position: relative; }
.section--paper, .section--mist {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 14%),
    radial-gradient(120% 60% at 50% -10%, rgba(195,223,232,0.35) 0%, transparent 60%);
}

/* Light-blue hairline separators that catch the eye between bands */
#services::before, #work::before, #reviews::before, #faq::before, #areas::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--regale-blue), var(--soar));
  opacity: 0.9;
}

/* Trust strip: floating frosted panel that overlaps the hero slightly */
.trust-strip {
  margin-top: -34px; z-index: 5;
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--rule) !important; border-radius: var(--r-lg);
  width: min(1180px, calc(100% - 48px)); margin-left: auto; margin-right: auto;
  box-shadow: 0 24px 60px rgba(4,7,7,0.10);
}
@media (max-width: 768px) { .trust-strip { margin-top: -22px; width: calc(100% - 28px); } }

/* Dark sections: signature top accent + layered ambient glow */
.section--dark { background-image: linear-gradient(170deg, var(--in-the-navy) 0%, var(--shiver) 100%) !important; }
.section--dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(125,181,211,0.16) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(9,76,115,0.30) 0%, transparent 60%);
}
.section--dark::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--regale-blue), var(--soar), var(--regale-blue), transparent);
  opacity: 0.7;
}
.section--dark > .container { position: relative; z-index: 1; }

/* Service cards: deeper, more dimensional elevation on hover */
.service-card { box-shadow: var(--shadow-sm); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

/* CTA band: richer layered depth */
.cta-band { background-image: linear-gradient(150deg, var(--in-the-navy), var(--shiver) 90%) !important; }

/* Frost the hero light rays a touch stronger so the hero feels alive */
.hero__rays { opacity: 1; }

/* Section heads get a subtle entrance lift (works with existing reveal) */
.section-head .eyebrow { position: relative; }

/* ============================================================
   REVISION 4 — FIT-TO-SCREEN SIZING
   Smaller hero, 4-up compact services, tighter Why section
   ============================================================ */

/* ---- Hero: text small enough to sit above the fold ---- */
.hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem) !important; margin-bottom: 18px !important; letter-spacing: -0.03em; }
.hero__sub { font-size: 1.05rem !important; line-height: 1.5 !important; margin-bottom: 20px !important; max-width: 500px; }
.hero__eyebrow { margin-bottom: 18px !important; }
.hero__services { margin-bottom: 22px !important; gap: 8px 10px; }
.hero__services li { padding: 7px 13px; font-size: 0.82rem; }
.hero { padding: 36px 0 44px !important; }
@media (max-width: 900px) { .hero h1 { font-size: clamp(2rem, 8vw, 2.7rem) !important; } }

/* ---- Services: 4 across, smaller blocks (2 rows of 4 on desktop) ---- */
.services-grid { gap: 16px !important; }
@media (min-width: 901px) { .services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
#services .service-card__media { aspect-ratio: 16 / 10; }
#services .service-card__body { padding: 16px 18px !important; }
#services .service-card__num { font-size: 0.62rem; letter-spacing: 0.12em; margin-bottom: 8px; }
#services .service-card h3 { font-size: 1.12rem !important; margin-bottom: 7px !important; }
#services .service-card p { font-size: 0.82rem !important; line-height: 1.45; margin-bottom: 12px !important; }
#services .service-card__link { font-size: 0.7rem; letter-spacing: 0.1em; }
#services .section-head { margin-bottom: 30px !important; }

/* ---- Why Snow & Sons: condensed to fit one screen ---- */
.why.section--dark { padding: 50px 0 !important; }
.why .section-head { margin-bottom: 26px !important; }
.why .section-head h2 { font-size: clamp(1.45rem, 2.3vw, 2rem) !important; margin-bottom: 12px !important; }
.why .section-head .lead { font-size: 0.96rem !important; margin-top: 10px !important; }
.why__reasons { margin-bottom: 26px !important; gap: 16px; }
.why__reason { padding: 18px 20px !important; }
.why__reason-icon { width: 40px; height: 40px; margin-bottom: 12px; }
.why__reason-icon svg { width: 22px; height: 22px; }
.why__reason h3 { font-size: 1.05rem !important; margin-bottom: 7px !important; }
.why__reason p { font-size: 0.85rem !important; line-height: 1.5 !important; }
.why .stats { padding: 14px 0 0 !important; gap: 20px; }
.why .stat__num { font-size: clamp(2rem, 3vw, 2.7rem) !important; margin-bottom: 4px; }
.why .stat__label { font-size: 0.72rem; }
.why .stat__desc { font-size: 0.82rem !important; margin-top: 8px; }
@media (max-width: 900px) {
  .why__reasons { margin-bottom: 20px !important; }
  .why .stat__desc { font-size: 0.8rem !important; }
}

/* ============================================================
   REVISION 5 — WARM TOP → COLD BOTTOM JOURNEY
   Florida sun in the hero; the page cools and frosts as you descend.
   (Snow also thins at the top and gathers toward the bottom via JS.)
   ============================================================ */

/* Hero: soft Florida sun glow, top-right */
.hero__rays {
  opacity: 1;
  background:
    radial-gradient(46% 42% at 86% -6%, rgba(255, 214, 140, 0.42) 0%, rgba(255, 205, 120, 0.16) 34%, transparent 60%),
    radial-gradient(120% 90% at 80% -10%, rgba(195, 223, 232, 0.40) 0%, transparent 55%),
    radial-gradient(90% 70% at 10% 110%, rgba(176, 214, 230, 0.26) 0%, transparent 60%);
}
.hero__rays::before {
  content: ''; position: absolute; top: -70px; right: 6%;
  width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 165, 0.55) 0%, rgba(255, 214, 140, 0.18) 45%, transparent 70%);
  filter: blur(6px); pointer-events: none;
  animation: sun-pulse 7s ease-in-out infinite;
}
@keyframes sun-pulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }

/* A faint warm wash high on the page, fading out by the services */
.hero, .trust-strip { --warm: rgba(255, 214, 140, 0.05); }
.hero { background-image: linear-gradient(180deg, rgba(255, 218, 150, 0.10) 0%, transparent 42%); }

/* Lower sections cool down progressively + pick up frost */
#work { background-image: linear-gradient(180deg, transparent 0%, rgba(155, 200, 222, 0.10) 100%); }
#process { background-image: linear-gradient(180deg, rgba(155,200,222,0.08), rgba(125,181,211,0.14)); }
#reviews { background-image: radial-gradient(120% 70% at 50% -10%, rgba(176,214,230,0.30), transparent 60%), linear-gradient(180deg, rgba(155,200,222,0.12), rgba(125,181,211,0.20)) !important; }
#areas { background-image: linear-gradient(180deg, rgba(155,200,222,0.16), rgba(125,181,211,0.26)); }
#quote { background-image: linear-gradient(180deg, rgba(125,181,211,0.22), rgba(90,158,192,0.30)); }

/* Frosted, icy top-edge on the coldest sections near the bottom */
#areas, #quote { position: relative; }
#areas::after, #quote::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(195,223,232,0.9), rgba(248,251,250,0.95), rgba(195,223,232,0.9), transparent);
  box-shadow: 0 0 18px rgba(176,214,230,0.6);
}
/* Subtle frost crystals settling along the bottom of the quote (coldest) section */
#quote {
  border-bottom: 1px solid rgba(195,223,232,0.5);
}
#quote .quote-form {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(176,214,230,0.4), 0 0 30px rgba(176,214,230,0.25);
}
@media (prefers-reduced-motion: reduce) {
  .hero__rays::before { animation: none; }
}

/* ============================================================
   REVISION 6 — bolder sun · revert quote section · frost INSIDE form
   ============================================================ */

/* Sun: a little more prominent */
.hero__rays {
  background:
    radial-gradient(58% 54% at 84% -8%, rgba(255, 208, 115, 0.62) 0%, rgba(255, 198, 105, 0.28) 38%, transparent 64%),
    radial-gradient(120% 90% at 80% -10%, rgba(195, 223, 232, 0.40) 0%, transparent 55%),
    radial-gradient(90% 70% at 10% 110%, rgba(176, 214, 230, 0.26) 0%, transparent 60%);
}
.hero__rays::before {
  top: -95px; right: 4%; width: 330px; height: 330px;
  background: radial-gradient(circle, rgba(255, 233, 178, 0.82) 0%, rgba(255, 216, 138, 0.36) 42%, rgba(255, 210, 130, 0.12) 62%, transparent 74%);
  filter: blur(4px);
}

/* Revert the quote SECTION (the area OUTSIDE the form) to its original neutral look */
#quote { background-image: none !important; border-bottom: 0 !important; }
#quote::after { display: none !important; }

/* Frost the INSIDE of the form with an ice effect — box outline/shadow unchanged */
#quote .quote-form {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md) !important;     /* same as original */
}
#quote .quote-form > form,
#quote .quote-form__success { position: relative; z-index: 1; }
/* frosted-over glass: icy white creeping in from the edges + corners, clear center */
#quote .quote-form::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(135% 85% at 0% 0%, rgba(255,255,255,0.95) 0%, rgba(212,232,240,0.6) 15%, transparent 40%),
    radial-gradient(135% 85% at 100% 0%, rgba(255,255,255,0.92) 0%, rgba(212,232,240,0.55) 15%, transparent 40%),
    radial-gradient(125% 95% at 0% 100%, rgba(212,232,240,0.5) 0%, transparent 38%),
    radial-gradient(125% 95% at 100% 100%, rgba(212,232,240,0.5) 0%, transparent 38%),
    linear-gradient(180deg, rgba(224,238,244,0.32) 0%, rgba(255,255,255,0.04) 55%);
  box-shadow: inset 0 0 48px rgba(176,214,230,0.55);
}
/* delicate ice crystals settling in the corners */
#quote .quote-form::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-repeat: no-repeat;
  background-position: left 16px top 16px, right 18px bottom 18px;
  background-size: 46px, 34px;
  opacity: 0.55;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' stroke='%23a9d2e4' stroke-width='1.3' stroke-linecap='round' fill='none'><g transform='translate(22 22)'><line y1='-16' y2='16'/><line x1='-13.8' y1='-8' x2='13.8' y2='8'/><line x1='-13.8' y1='8' x2='13.8' y2='-8'/><line x1='0' y1='-16' x2='4' y2='-12'/><line x1='0' y1='-16' x2='-4' y2='-12'/><line x1='0' y1='16' x2='4' y2='12'/><line x1='0' y1='16' x2='-4' y2='12'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' stroke='%23bcd9e6' stroke-width='1.2' stroke-linecap='round' fill='none'><g transform='translate(22 22)'><line y1='-15' y2='15'/><line x1='-13' y1='-7.5' x2='13' y2='7.5'/><line x1='-13' y1='7.5' x2='13' y2='-7.5'/></g></svg>");
}

/* ============================================================
   REVISION 7 — icy "frosted window" form to match the frost reference:
   light-blue base, white grungy frost texture, snowflakes around the border.
   ============================================================ */
#quote .quote-form {
  --flake: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='-32 -32 64 64' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'><g id='a'><path d='M0 0V-28M0 -11l6 -5M0 -11l-6 -5M0 -19l5 -4M0 -19l-5 -4M0 -24l3.5 -3M0 -24l-3.5 -3'/></g><use href='%23a' transform='rotate(60)'/><use href='%23a' transform='rotate(120)'/><use href='%23a' transform='rotate(180)'/><use href='%23a' transform='rotate(240)'/><use href='%23a' transform='rotate(300)'/></svg>");
}
/* base: icy-blue glass + white frost blooming from the edges + grunge speckle */
#quote .quote-form::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    radial-gradient(60% 62% at 0% 0%, rgba(255,255,255,0.92), transparent 62%),
    radial-gradient(60% 62% at 100% 0%, rgba(255,255,255,0.92), transparent 62%),
    radial-gradient(62% 64% at 0% 100%, rgba(255,255,255,0.88), transparent 62%),
    radial-gradient(62% 64% at 100% 100%, rgba(255,255,255,0.88), transparent 62%),
    radial-gradient(145% 130% at 50% 50%, transparent 36%, rgba(255,255,255,0.42) 72%, rgba(255,255,255,0.7) 100%),
    linear-gradient(180deg, rgba(155,200,222,0.34) 0%, rgba(176,214,230,0.26) 100%);
  background-size: 200px 200px, auto, auto, auto, auto, auto, auto;
  box-shadow: inset 0 0 60px rgba(176,214,230,0.6);
}
/* snowflakes clustered around the whole border (corners + edge midpoints) */
#quote .quote-form::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-repeat: no-repeat;
  opacity: 0.92;
  background-image: var(--flake), var(--flake), var(--flake), var(--flake), var(--flake), var(--flake), var(--flake), var(--flake);
  background-position:
    left 8px top 6px, right 8px top 6px, left 8px bottom 6px, right 8px bottom 6px,
    center top 4px, center bottom 4px, left 4px center, right 4px center;
  background-size: 56px 56px, 56px 56px, 56px 56px, 56px 56px, 40px 40px, 40px 40px, 40px 40px, 40px 40px;
}
@media (max-width: 600px) {
  #quote .quote-form::after { background-size: 40px 40px, 40px 40px, 40px 40px, 40px 40px, 30px 30px, 30px 30px, 30px 30px, 30px 30px; }
}

/* ============================================================
   REVISION 8 — use the real frosted-ice image as the form background
   (replaces the CSS-only frost; box outline/shadow unchanged)
   ============================================================ */
#quote .quote-form {
  background-image: url(images/cta-frost.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
}
#quote .quote-form::before, #quote .quote-form::after { display: none !important; }
/* keep all form text crisp and readable against the icy texture */
#quote .quote-form .field label { color: var(--in-the-navy) !important; }
#quote .quote-form .field__hint { color: var(--in-the-navy) !important; opacity: 0.95; font-weight: 500; }
#quote .quote-form .field--checkbox label { color: var(--in-the-navy) !important; font-weight: 400; }
#quote .quote-form__note { color: var(--in-the-navy) !important; font-weight: 500; }

/* ============================================================
   REVISION 10 — SUBPAGES: nav dropdown · tightening · blog
   ============================================================ */

/* --- Desktop Services dropdown (injected by enhance.js) --- */
.nav-has-dropdown { position: relative; }
.nav-has-dropdown > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { width: 12px; height: 12px; transition: transform .25s var(--ease); opacity: 0.7; }
.nav-has-dropdown:hover .nav-caret { transform: rotate(180deg); }
.nav-has-dropdown::after { content: ''; position: absolute; top: 100%; left: -10px; right: -10px; height: 14px; }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 236px; padding: 8px; list-style: none; z-index: 200;
  background: rgba(255,255,255,0.94); backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
  border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown li { margin: 0; }
.nav-dropdown a { display: block; padding: 10px 14px; border-radius: var(--r-sm); font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--soar); color: var(--dignity-blue); }

/* --- Subpage tightening (page-hero, detail, split) --- */
.page-hero { padding: 42px 0 48px !important; }
.page-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem) !important; margin-bottom: 14px !important; }
.page-hero__lead { font-size: 1.02rem !important; margin-bottom: 20px !important; max-width: 560px; }
.page-hero__meta { padding-top: 18px !important; gap: var(--s-4) var(--s-6) !important; }
.page-hero__meta-item strong { font-size: 1.2rem !important; }
.breadcrumb { margin-bottom: 16px !important; }
.detail { gap: 56px !important; }
.detail__body p { font-size: 0.98rem !important; line-height: 1.62 !important; }
.detail__body h2 { margin-top: 34px !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }
.detail__body h3 { margin-top: 26px !important; }
.split { gap: 48px !important; }
.split__body h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem) !important; }
.split__body p { font-size: 0.98rem !important; line-height: 1.6 !important; }
.aside-card { padding: var(--s-5) !important; }

/* --- Blog listing + post --- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; background: var(--bg-paper); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; transition: all .35s var(--ease); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent-mist); }
.blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--soar), var(--regale-blue)); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card__cat { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.blog-card h3 { font-size: 1.18rem; font-weight: 400; margin-bottom: 9px; letter-spacing: -0.01em; line-height: 1.28; }
.blog-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 14px; flex: 1; line-height: 1.55; }
.blog-card__meta { font-size: 0.76rem; color: var(--text-faint); display: flex; gap: 10px; align-items: center; }
.blog-card__link { margin-top: 14px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body > p:first-of-type { font-size: 1.16rem; color: var(--text); line-height: 1.7; }
.post-body p { font-size: 1.04rem; line-height: 1.75; color: var(--text); margin-bottom: 20px; }
.post-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 34px 0 14px; font-weight: 300; }
.post-body ul { margin: 18px 0; padding-left: 0; display: flex; flex-direction: column; gap: 10px; }
.post-body ul li { position: relative; padding-left: 22px; font-size: 1.02rem; line-height: 1.55; }
.post-body ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--accent); }
.post-meta { display: flex; gap: 16px; align-items: center; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 26px; }
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-mist); }

/* ============================================================
   REVISION 11 — about-hero art · services centering · estimate popup
   ============================================================ */

/* Stop the page-hero <em> underline from shooting off to the right */
.page-hero h1 em::after { display: none !important; }

/* About hero: animated roof illustration on the right + meta below */
.about-hero__aside { display: flex; flex-direction: column; gap: 20px; justify-content: center; align-self: stretch; }
.about-hero__art { position: relative; width: 100%; max-width: 380px; margin-left: auto; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--rule); }
.about-hero__art svg { display: block; width: 100%; height: auto; }
.about-hero__art { max-width: 528px; }
.about-hero__frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: #0b2540; }
.about-hero__aside .page-hero__meta { border-top: 1px solid var(--rule); padding-top: 16px; }
@media (max-width: 900px) { .about-hero__art { max-width: 100%; margin: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .ah-sun { animation: ahSunPulse 6s ease-in-out infinite; }
  .ah-flake { animation: ahFall linear infinite; }
  .ah-f1 { animation-duration: 7s; }
  .ah-f2 { animation-duration: 9s; animation-delay: -2s; }
  .ah-f3 { animation-duration: 8s; animation-delay: -4s; }
  .ah-f4 { animation-duration: 10s; animation-delay: -1s; }
  .ah-f5 { animation-duration: 7.5s; animation-delay: -3s; }
  .ah-f6 { animation-duration: 9.5s; animation-delay: -5s; }
}
@keyframes ahSunPulse { 0%,100% { opacity: 0.9; } 50% { opacity: 1; } }
@keyframes ahFall { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { transform: translateY(316px); opacity: 0; } }

/* Services page: center cards so an orphan last row doesn't look lopsided */
.services-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.services-list > .service-card { flex: 0 1 340px; max-width: 362px; }
@media (max-width: 900px) { .services-list > .service-card { flex: 0 1 300px; } }
@media (max-width: 600px) { .services-list > .service-card { flex: 1 1 100%; max-width: none; } }

/* Estimate popup modal */
.estimate-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.estimate-modal.open { display: block; }
.estimate-modal__overlay { position: absolute; inset: 0; background: rgba(4,7,7,0.55); backdrop-filter: blur(4px); animation: emFade .25s ease; }
.estimate-modal__dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--white-snow); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: 32px; animation: emRise .3s var(--ease); }
.estimate-modal__close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--text-muted); background: var(--bg-mist); }
.estimate-modal__close:hover { background: var(--soar); color: var(--ink); }
.estimate-modal__head h3 { font-family: var(--ff-display); font-weight: 400; font-size: 1.6rem; margin: 6px 0 8px; }
.estimate-modal__head p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; }
.estimate-modal__form { display: flex; flex-direction: column; gap: 14px; }
.estimate-modal__form > label { display: flex; flex-direction: column; gap: 6px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.emf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .emf-row { grid-template-columns: 1fr; } }
.estimate-modal__form input, .estimate-modal__form select, .estimate-modal__form textarea { padding: 13px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--bg-canvas); font-size: 0.98rem; color: var(--ink); font-family: var(--ff-sans); text-transform: none; letter-spacing: 0; font-weight: 400; }
.estimate-modal__form input:focus, .estimate-modal__form select:focus, .estimate-modal__form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,119,162,0.14); }
.estimate-modal__form button[type="submit"] { margin-top: 4px; width: 100%; padding: 16px; }
.emf-note { text-align: center; font-size: 0.78rem; color: var(--text-faint); }
.estimate-modal__success { display: none; text-align: center; padding: 18px 0; }
.estimate-modal__success.show { display: block; }
.estimate-modal__check { width: 56px; height: 56px; margin: 0 auto 16px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.estimate-modal__check svg { width: 26px; height: 26px; }
.estimate-modal__success h3 { font-family: var(--ff-display); font-weight: 400; margin-bottom: 8px; }
.estimate-modal__success p { color: var(--text-muted); }
@keyframes emFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes emRise { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }

/* ============================================================
   REVISION 12 — PREMIUM, FUN-TO-READ BLOG POSTS
   ============================================================ */

/* Reading progress bar (injected by enhance.js on .post-body pages) */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300; background: linear-gradient(90deg, var(--regale-blue), var(--accent)); box-shadow: 0 0 10px rgba(35,119,162,0.4); }

/* Article shell */
.post-body { max-width: 730px; margin: 0 auto; }
.post-body > p { font-size: 1.06rem; line-height: 1.78; color: var(--text); margin-bottom: 22px; }
.post-lede, .post-body > p.post-lede { font-size: 1.24rem !important; line-height: 1.65 !important; color: var(--ink); }
/* drop cap on the opening paragraph */
.post-lede::first-letter { float: left; font-family: var(--ff-display); font-weight: 300; font-size: 4.3rem; line-height: 0.78; padding: 8px 14px 2px 0; color: var(--accent); }

.post-body h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); font-weight: 300; letter-spacing: -0.02em; margin: 46px 0 16px; padding-top: 24px; position: relative; line-height: 1.15; }
.post-body h2::before { content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--regale-blue)); }
.post-body h3 { font-size: 1.18rem; font-weight: 600; color: var(--ink); margin: 30px 0 10px; letter-spacing: 0; }
.post-body a { color: var(--accent); border-bottom: 1px solid var(--accent-mist); transition: border-color .2s var(--ease); }
.post-body a:hover { border-color: var(--accent); }

.post-body ul { margin: 22px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.post-body ul li { position: relative; padding-left: 30px; line-height: 1.6; font-size: 1.02rem; color: var(--text); }
.post-body ul li::before { content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--accent); background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
.post-body ul li strong { color: var(--ink); font-weight: 600; }

/* Pull quote */
.post-pullquote { margin: 38px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--accent); font-family: var(--ff-display); font-weight: 300; font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.38; color: var(--ink); }
.post-pullquote span { color: var(--accent); }

/* Callout boxes */
.post-callout { margin: 30px 0; padding: 22px 26px; border-radius: var(--r-md); border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: linear-gradient(135deg, var(--bg-paper) 0%, rgba(195,223,232,0.45) 100%); display: flex; gap: 16px; align-items: flex-start; }
.post-callout svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.post-callout div { min-width: 0; }
.post-callout strong { display: block; color: var(--ink); margin-bottom: 4px; font-weight: 600; }
.post-callout p { margin: 0 !important; color: var(--text-muted); font-size: 0.97rem !important; line-height: 1.55 !important; }
.post-callout p a { font-weight: 600; }
.post-callout--alert { border-left-color: var(--urbane-bronze); background: linear-gradient(135deg, #fff 0%, rgba(80,59,38,0.07) 100%); }
.post-callout--alert svg { color: var(--urbane-bronze); }

/* Inline phone chip */
.post-callcta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.post-callcta svg { width: 16px; height: 16px; }

/* FAQ inside posts: a touch tighter */
.post-faq { margin-top: 10px; }
.post-faq .faq__q { font-size: 1.04rem !important; }

/* Post hero meta + share row */
.post-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.post-tag { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--dignity-blue); background: var(--soar); padding: 6px 12px; border-radius: 999px; }

/* end-of-post related card */
.post-next { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .post-next { grid-template-columns: 1fr; } }
.post-next a { display: block; padding: 20px 22px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--bg-paper); transition: all .3s var(--ease); }
.post-next a:hover { border-color: var(--accent-mist); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-next span { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.post-next strong { display: block; margin-top: 6px; font-family: var(--ff-display); font-weight: 400; font-size: 1.05rem; color: var(--ink); line-height: 1.3; }

/* ============================================================
   REVISION 13 — fixes: button text · drop cap size · about spacing
   ============================================================ */

/* The generic .post-body a rule was turning button/card text accent-blue and
   underlining it. Re-exempt buttons and component links. */
.post-body .btn, .post-body .post-next a, .post-body .aside-card a { border-bottom: 0 !important; }
.post-body .btn--primary { color: var(--white-snow) !important; }
.post-body .btn--ghost { color: var(--ink) !important; }
.post-body .btn--link { color: var(--ink) !important; border-bottom: 0 !important; }
.post-body .post-next a { color: inherit !important; }
.post-body .post-next strong { color: var(--ink) !important; }
.post-body .aside-card__phone strong { color: var(--ink) !important; }

/* Drop cap removed — a capital "I" reads as an ambiguous bar. The enlarged lede
   paragraph carries the opening instead. (Re-enable per-post if a future article
   starts with a rounder letter.) */
.post-lede::first-letter { float: none !important; font-size: inherit !important; line-height: inherit !important; padding: 0 !important; color: inherit !important; font-weight: inherit !important; }

/* ============================================================
   REVISION 14 — logo fixes (crisp header icon · bigger footer logo)
   ============================================================ */

/* Header now uses the crisp icon-only mark; the brand name shows as sharp
   HTML text beside it (from ~600px up) instead of tiny blurry SVG lettering. */
.site-header__logo img { height: 50px; }
.site-header__logo { gap: var(--s-4); }
@media (min-width: 600px) { .site-header__wordmark { display: flex; } }
@media (max-width: 768px) { .site-header__logo img { height: 44px; } }

/* Footer logo: much larger (≈3×), with the tagline pushed down to make room. */
.site-footer__brand img { height: 210px !important; margin-bottom: 22px !important; }
@media (max-width: 600px) { .site-footer__brand img { height: 150px !important; } }

/* Palm-tree silhouette: spans the right of the hero, crown rising into the sun. */
.hero__palm {
  position: absolute; top: -34px; right: -64px; height: 114%; width: auto;
  z-index: 0; opacity: 0.16; pointer-events: none; user-select: none;
  transform-origin: 75% 18%;
  animation: palm-sway 9s ease-in-out infinite;
}
@keyframes palm-sway { 0%,100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.6deg); } }
@media (max-width: 1100px) { .hero__palm { opacity: 0.1; right: -110px; } }
@media (max-width: 900px) {
  .hero__palm { height: 62%; top: auto; bottom: -6px; right: -130px; opacity: 0.08; animation: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__palm { animation: none; } }

/* About: collapse the dead space around the founder quote */
.founder-note { padding: 22px 0 34px !important; }
.founder-note .callout { margin: 0 !important; }
.founder-note .founder-sig { margin-top: 20px !important; }



/* ===== real Before/After (side-by-side) ===== */
.ba-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:700px){ .ba-pair { grid-template-columns:1fr; gap:14px; } }
.ba-pair__item { position:relative; margin:0; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/9; }
.ba-pair__item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.ba-pair__item:hover img { transform:scale(1.04); }
.ba-pair__tag { position:absolute; top:14px; left:14px; padding:6px 14px; font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; border-radius:999px; color:var(--white-snow); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ba-pair__tag--before { background:rgba(4,7,7,0.6); }
.ba-pair__tag--after { background:rgba(35,119,162,0.82); }
.ba-pair__caption { text-align:center; margin-top:16px; font-size:0.85rem; color:var(--text-muted); letter-spacing:0.02em; }