/* =====================================================================
   V108 — Apple-style polish layer for the marketing site.
   Loaded LAST (after style.css / motion.css / marketing-visuals.css) so
   these tokens standardize the whole public site: the Apple system font
   stack, neutral #1d1d1f / #6e6e73 ink scale on a #fbfbfd canvas, soft
   elevation, pill controls, and calm motion. Brand teal + orange remain
   the accent colors.
   ===================================================================== */

:root{
  /* v1.217 brand alignment: the Apple-neutral scale (#fbfbfd canvas,
     #1d1d1f ink, #6e6e73 sub, #f5f5f7 / #e8e8ed greys) drifted the whole
     public site off-brand. The token names stay (other rules use them);
     the values now come from the brand palette in style.css :root. */
  --apple-canvas:var(--paper);          /* #F7F8F9 */
  --apple-gray:#EEF3F4;                 /* teal-tinted light grey */
  --apple-ink:var(--ink);               /* #0F2226 */
  --apple-sub:var(--ink-soft);          /* #4C6066 */
  --apple-hair:rgba(0,56,65,.12);
  --apple-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.07);
}

/* ---- Typography: Apple system stack, one scale ---- */
body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size:16.5px;
  color:var(--apple-ink);
  background:var(--apple-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing:-.02em;
  font-weight:700;
}
/* Branding maintained: display headings carry the brand teal (as the hero
   always did), supporting headings stay ink, body text the quiet gray.
   Dark sections keep white headings; selection highlights brand orange. */
h1, h2{ color:var(--teal); }
h3, h4{ color:var(--apple-ink); }
.section--dark :is(h1,h2,h3,h4){ color:#fff; }
::selection{ background:var(--orange); color:#fff; }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); line-height:1.08; }
/* M-10: the one h2 ramp — same clamp as style.css's base h2 rule; this file
   loads later on marketing pages, so this is the operative definition. */
h2{ font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); line-height:1.15; }
h3{ font-size:1.18rem; line-height:1.25; }
p{ color:var(--apple-sub); }

/* ---- Buttons: pill, Apple-style press ---- */
.btn, .btn--primary, .btn--ghost, a[class*="btn"]{
  border-radius:980px !important;
  font-family:inherit;
  font-weight:600;
  font-size:.95rem;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, opacity .2s ease;
}
.btn--primary, a.btn--primary{
  background:linear-gradient(180deg, #0a4a55, var(--teal)) !important;
  color:#fff !important; /* v1.217: the teal repaint left the base style's teal text on it — invisible CTAs sitewide */
  box-shadow:0 4px 14px rgba(0,56,65,.25);
}
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,56,65,.32); }
.btn:active, .btn--primary:active{ transform:scale(.98); }

/* ---- Cards & sections: soft elevation on the Apple canvas ---- */
.detail-section, .card, [class*="card-"], .offer-card, .svc-card{
  background:#fff;
  border:none !important;
  border-radius:18px !important;
  box-shadow:var(--apple-shadow) !important;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
[class*="card-"]:hover, .offer-card:hover, .svc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 34px rgba(0,0,0,.11) !important;
}
section{ background:transparent; }
.section--dark{ background:var(--teal-deep); }

/* ---- Header: frosted glass like apple.com ---- */
.site-header, .mk-header, header{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-header a, .mk-header a{ color:var(--apple-ink); }
.site-header .logo img, .mk-header .logo img{ transition:opacity .2s ease; }

/* ---- Images & media: rounded, subtle zoom (logo exempt — brand asset) ---- */
img{ border-radius:14px; }
.logo img, .mk-header .logo img{ border-radius:0 !important; }
[class*="media"] img, .offer-card img, .svc-card img{
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.offer-card:hover img, .svc-card:hover img{ transform:scale(1.03); }

/* ---- Forms: quiet fields, pill inputs ---- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  font-family:inherit;
  border-radius:12px;
  border:1px solid var(--apple-hair);
  background:#fff;
  padding:12px 14px;
  font-size:1rem;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(0,56,65,.10);
}

/* ---- Links: calm underline on hover ---- */
a{ text-decoration:none; transition:color .2s ease, opacity .2s ease; }
p a, .prose a{ color:var(--teal); }
p a:hover, .prose a:hover{ text-decoration:underline; }

/* ---- Motion: motion.css keeps ownership of entry/scroll animations —
       this layer only eases its own component transitions. ---- */
@media (prefers-reduced-motion: reduce){
  .detail-section, .card, [class*="card-"], .offer-card, .svc-card, .btn{ transition:none !important; }
}

/* ---- V108.1 lift motion: blocks rise into place as the visitor scrolls
       (marketing-lift.js marks .lift-wait → .lift-in on intersection) ---- */
.lift-wait{ opacity:0; transform:translateY(26px); }
.lift-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .lift-wait{ opacity:1; transform:none; }
}

/* ---- V108.1: services directory icons — polished stroke glyphs in a
       soft brand-tinted medallion (replace the plain numbers) ---- */
.directory-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(180deg,#eef4f4,#e3ecec);
  color:var(--teal);
  border:1px solid rgba(0,56,65,.10);
}
.directory-icon svg{ width:22px; height:22px; }
.directory-row{ align-items:center; }

/* ---- Logo: brand asset — exempt from all Apple layer effects ---- */
.logo img{ border-radius:0 !important; transform:none !important; opacity:1 !important; }

/* ---- Logo: brand asset — exempt from all Apple layer effects (every
       surface; .logo is the shared class in header + wizard) ---- */
.logo img{ border-radius:0 !important; transform:none !important; opacity:1 !important; }

/* ---- V108.3: chat widget — professional, Apple-styled ---- */
.chat-widget-panel{
  width:360px; max-width:calc(100vw - 24px);
  border-radius:16px !important; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.20) !important;
  font-family:inherit;
}
.chat-widget-header{ padding:14px 16px; background:var(--teal,#003841) !important; color:#fff; }
.chat-widget-header strong{ font-size:.95rem; font-weight:700; }
.chat-widget-subhead{ display:block; font-size:.72rem; font-weight:400; opacity:.85; margin-top:2px; }
.chat-widget-body{ padding:14px; display:flex; flex-direction:column; gap:10px; background:#fff; }
.chat-widget-intake{ display:flex; flex-direction:column; gap:8px; margin:0; }
.chat-widget-intake-hint{ font-size:.78rem; color:var(--apple-sub,#6e6e73); margin:0; }
.chat-widget-intake input,
.chat-widget-intake textarea,
.chat-widget-send textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:.9rem;
  padding:10px 12px; border-radius:10px !important;
  border:1px solid var(--apple-hair,#e8e8ed) !important; background:#fff;
}
.chat-widget-intake .btn{ width:100%; border-radius:10px !important; padding:11px; font-weight:600; }
.chat-widget-messages{ max-height:260px; overflow-y:auto; }
/* v1.109.1: these display:flex rules must never defeat the JS-toggled
   [hidden] attribute (send bar leaked under the intake form), and the
   empty conversation area must reserve no space in intake mode. */
.chat-widget-send[hidden], .chat-widget-intake[hidden]{ display:none; }
.chat-widget-messages:empty{ display:none; }
.chat-widget-msg{ margin-bottom:8px; }
.chat-widget-msg-who{ font-size:.68rem; font-weight:700; color:var(--apple-sub,#6e6e73); text-transform:uppercase; letter-spacing:.04em; }
.chat-widget-msg-body{
  display:inline-block; padding:8px 11px; border-radius:12px;
  font-size:.88rem; background:var(--apple-gray,#f5f5f7); color:var(--apple-ink,#1d1d1f);
}
.chat-widget-msg--staff .chat-widget-msg-body{ background:#e7f0ef; }
.chat-widget-send{ display:flex; gap:8px; align-items:flex-end; margin:0; }
.chat-widget-send-btn{
  flex-shrink:0; width:42px; height:42px; border:none; border-radius:10px;
  background:var(--teal,#003841); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.chat-widget-send-btn svg{ width:18px; height:18px; }
.chat-widget-note{ font-size:.7rem; color:var(--apple-sub,#6e6e73); margin:0; }
.chat-widget-error{ font-size:.78rem; color:#b91c1c; margin:0; }