/* ============================================================
   GaGa's House In-Home Daycare — Stone Ridge, VA
   Palette + type built up from Anita's own flyer:
   cream paper, deep navy, terracotta rose, olive, honey bear.
   ============================================================ */

/* === defensive base — injected by harden_css.py; do not hand-edit === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-padding-top: calc(var(--nav-h, 72px) + 1rem); }
img, svg, video, iframe, canvas, table { display: block; max-width: 100%; }
p, li, h1, h2, h3, h4, blockquote, td, dd, dt { overflow-wrap: anywhere; }
form[style*="min-height"] { align-content: center; }
/* === end defensive base === */

:root{
  --cream:      #FEF9F2;
  --paper:      #FBF4E8;
  --cream-deep: #F4E8D6;
  --navy:       #0C2E54;
  --navy-2:     #16406E;
  --ink:        #2A3B52;
  --muted:      #61708A;
  --rose:       #DC7970;
  --rose-deep:  #BF5C53;
  --olive:      #4F6A25;
  --sage:       #9BA264;
  --honey:      #E5BC75;
  --gold:       #F2BB3F;

  --nav-h: 4.25rem;
  --wrap: 74rem;
  --r: 1.25rem;
  --r-sm: .7rem;

  --shadow-s: 0 1px 2px rgba(12,46,84,.05), 0 4px 14px -6px rgba(12,46,84,.10);
  --shadow-m: 0 2px 4px rgba(12,46,84,.05), 0 18px 40px -18px rgba(12,46,84,.20);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Karla", "Avenir Next", "Segoe UI", sans-serif;

  --soft: "SOFT" 40, "WONK" 1;
}

/* ---------- base ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* warm paper grain — sells the "homemade" texture without photos */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:1; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:var(--soft);
  color:var(--navy);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
a{ color:var(--rose-deep); }
img{ display:block; }

.wrap{ width:min(100% - 2.25rem, var(--wrap)); margin-inline:auto; }
@media (min-width:640px){ .wrap{ width:min(100% - 3rem, var(--wrap)); } }
@media (min-width:900px){ .wrap{ width:min(100% - 4rem, var(--wrap)); } }

/* parked ABOVE the viewport, not off to the left — a negative `left` counts as
   real horizontal overflow and fails the build's overflow assertion. */
.skip{
  position:absolute; left:0; top:0; z-index:99;
  background:var(--navy); color:#fff; padding:.75rem 1.1rem; border-radius:0 0 var(--r-sm) 0;
  transform:translateY(-130%); transition:transform .15s ease;
}
.skip:focus{ transform:translateY(0); }
:focus-visible{ outline:3px solid var(--rose); outline-offset:3px; border-radius:4px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--body); font-weight:700; font-size:.98rem;
  letter-spacing:.005em; text-decoration:none;
  padding:.92rem 1.5rem; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-sm{ padding:.62rem 1.1rem; font-size:.9rem; }
.btn-lg{ padding:1.05rem 1.9rem; font-size:1.05rem; }

.btn-primary{ background:var(--rose); color:#fff; box-shadow:0 10px 22px -12px rgba(191,92,83,.85); }
.btn-primary:hover{ background:var(--rose-deep); transform:translateY(-2px); box-shadow:0 16px 28px -14px rgba(191,92,83,.9); }

.btn-ghost{ background:transparent; color:var(--navy); border-color:rgba(12,46,84,.22); }
.btn-ghost:hover{ background:rgba(12,46,84,.05); border-color:rgba(12,46,84,.4); transform:translateY(-2px); }

.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

.btn-outline{ background:transparent; color:var(--olive); border-color:rgba(79,106,37,.35); }
.btn-outline:hover{ background:rgba(79,106,37,.08); border-color:var(--olive); }

.btn-honey{ background:var(--honey); color:#4A3410; }
.btn-honey:hover{ background:#efc985; transform:translateY(-2px); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  /* near-opaque on purpose: at .88 the navy "Meet GaGa" band and the portrait
     read through as a muddy grey smear instead of cream paper. */
  background:rgba(254,249,242,.96);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(12,46,84,.09);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:var(--nav-h); }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-mark{ width:auto; height:2.35rem; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--display); font-variation-settings:var(--soft);
  font-weight:700; font-size:1.22rem; color:var(--navy); letter-spacing:-.02em;
}
.brand-sub{
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--olive); font-weight:600; margin-top:.22rem;
}

.nav-links{ display:none; align-items:center; gap:1.6rem; }
.nav-links.open{
  display:flex; flex-direction:column; align-items:stretch; gap:.25rem;
  position:absolute; left:0; right:0; top:var(--nav-h);
  background:var(--cream); padding:1rem 1.25rem 1.4rem;
  border-bottom:1px solid rgba(12,46,84,.1);
  box-shadow:var(--shadow-m);
}
/* :not(.nav-cta) is load-bearing — this rule outranks .btn-sm and would flatten
   the CTA pill's horizontal padding, clipping its label. */
.nav-links a:not(.nav-cta){
  color:var(--navy); text-decoration:none; font-weight:600; font-size:.96rem;
  padding:.6rem 0; border-bottom:1px solid rgba(12,46,84,.07);
}
.nav-links a:not(.nav-cta):last-of-type{ border-bottom:none; }
.nav-links .nav-cta{ margin-top:.6rem; color:#fff; }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:2.75rem; height:2.5rem; padding:0 .55rem;
  background:transparent; border:1.5px solid rgba(12,46,84,.18); border-radius:.6rem; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:var(--navy); border-radius:2px; transition:transform .22s ease, opacity .22s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (min-width:960px){
  .nav-links{ display:flex; flex-direction:row; position:static; padding:0; background:none; box-shadow:none; border:none; }
  .nav-links a:not(.nav-cta){ border-bottom:none; padding:.25rem 0; position:relative; }
  .nav-links a:not(.nav-cta)::after{
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background:var(--rose); transition:right .25s ease;
  }
  .nav-links a:not(.nav-cta):hover::after{ right:0; }
  .nav-links .nav-cta{ margin-top:0; margin-left:.4rem; }
  .nav-toggle{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  container-type:inline-size;
  min-height:calc(100svh - var(--nav-h));
  display:flex; align-items:center;
  padding-block:clamp(1.5rem, 4cqi, 3.5rem);
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(229,188,117,.24), transparent 62%),
    radial-gradient(48rem 36rem at 96% 8%, rgba(220,121,112,.16), transparent 60%),
    radial-gradient(44rem 34rem at 78% 104%, rgba(155,162,100,.20), transparent 62%);
}
.hero-inner{ display:grid; grid-template-columns:1fr; gap:clamp(1.25rem,3.5cqi,3rem); align-items:center; width:min(100% - 2.25rem, var(--wrap)); }
@media (min-width:960px){
  .hero-inner{ grid-template-columns:1.12fr .88fr; gap:3.5rem; width:min(100% - 4rem, var(--wrap)); }
}
.hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(.7rem,1.9cqi,1.15rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:clamp(.72rem,1.9cqi,.8rem); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--olive); background:rgba(79,106,37,.09);
  border:1px solid rgba(79,106,37,.2); border-radius:100px; padding:.42rem .9rem;
}
.dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--olive); box-shadow:0 0 0 4px rgba(79,106,37,.18); }
@media (prefers-reduced-motion:no-preference){
  .dot{ animation:pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(79,106,37,.22);} 50%{ box-shadow:0 0 0 7px rgba(79,106,37,.06);} }
}

.hero-h1{
  font-size:clamp(2.05rem, 7.6cqi, 4.35rem);
  font-weight:600;
  font-variation-settings:"SOFT" 45, "WONK" 1;
  letter-spacing:-.028em;
  line-height:1.04;
}
.hero-h1 em{ font-style:normal; color:var(--rose); font-variation-settings:"SOFT" 60, "WONK" 1; }

.lede{
  font-size:clamp(1rem, 2.35cqi, 1.19rem);
  color:var(--muted); max-width:34ch; line-height:1.6;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; align-self:stretch; }
/* two stacked pills of different widths read as an accident, not a hierarchy */
@media (max-width:559px){ .hero-cta .btn{ width:100%; } }

.hero-proof{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.35rem 0;
  font-size:clamp(.8rem,1.9cqi,.92rem); color:var(--muted);
}
.hero-proof li{ display:flex; align-items:center; gap:.4rem; }
/* dot centred in its own gutter — a negative margin instead just glues it to
   the end of the previous item. */
.hero-proof li + li{ padding-left:1.6rem; position:relative; }
.hero-proof li + li::before{
  content:""; position:absolute; left:.68rem; top:50%; translate:0 -50%;
  width:4px; height:4px; border-radius:50%; background:var(--honey);
}
.hero-proof strong{ color:var(--navy); font-weight:700; }
/* the list wraps on a phone and the separator would orphan at the start of the
   second line — CSS can't detect a line start, so drop it and space instead. */
@media (max-width:559px){
  .hero-proof{ gap:.3rem 1.15rem; }
  .hero-proof li + li{ padding-left:0; }
  .hero-proof li + li::before{ content:none; }
}

.hero-card{
  display:none;
  position:relative;
  background:linear-gradient(168deg, #fffdf9, var(--paper));
  border:1px solid rgba(12,46,84,.1);
  border-radius:var(--r); padding:1.9rem 1.75rem 1.6rem;
  box-shadow:var(--shadow-m);
}
.hero-card::before{
  content:""; position:absolute; inset:.55rem;
  border:1.5px dashed rgba(155,162,100,.5); border-radius:calc(var(--r) - .45rem); pointer-events:none;
}
@media (min-width:960px){ .hero-card{ display:block; } }
.hero-bear{ width:auto; height:6.5rem; margin:-4.6rem 0 .5rem auto; filter:drop-shadow(0 10px 16px rgba(12,46,84,.14)); }
.card-kicker{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rose);
}
.card-count{
  font-family:var(--display); font-variation-settings:var(--soft);
  font-size:1.5rem; font-weight:600; color:var(--navy); line-height:1.05; margin:.2rem 0 1.1rem;
  display:flex; align-items:baseline; gap:.55rem;
}
.card-count span{ font-size:3.6rem; color:var(--olive); letter-spacing:-.03em; }
.card-facts{ margin:0; display:grid; gap:.75rem; }
.card-facts > div{ display:grid; gap:.1rem; padding-top:.75rem; border-top:1px solid rgba(12,46,84,.1); }
.card-facts dt{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--sage); font-weight:700; }
.card-facts dd{ margin:0; font-weight:600; color:var(--navy); font-size:.98rem; }
.ampm{ font-size:.78em; }

/* ---------- section shells ---------- */
.band{ padding-block:clamp(3.5rem,8vw,6.5rem); }
.band-cream{ background:var(--cream); }
.band-paper{ background:var(--paper); border-block:1px solid rgba(12,46,84,.07); }
.band-navy{
  background:
    radial-gradient(50rem 34rem at 88% 0%, rgba(220,121,112,.22), transparent 60%),
    linear-gradient(165deg, var(--navy-2), var(--navy) 62%);
  color:#E6EDF6;
}
.band-navy h2, .band-navy h3{ color:#fff; }

.sec-head{ max-width:44rem; margin-bottom:2.75rem; }
.kicker{
  font-size:.73rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--rose); margin-bottom:.85rem;
}
.kicker-light{ color:var(--honey); }
.sec-head h2{ font-size:clamp(1.75rem,3.6vw,2.7rem); }
.sec-lede{ margin-top:1rem; color:var(--muted); font-size:clamp(1rem,1.6vw,1.13rem); max-width:38rem; }
.band-navy .sec-lede{ color:rgba(230,237,246,.78); }

/* dashed + heart divider — lifted from her flyer */
.divider{ display:flex; align-items:center; gap:1rem; margin:3rem auto; max-width:34rem; }
.divider::before, .divider::after{
  content:""; flex:1; height:0; border-top:2px dashed rgba(155,162,100,.55);
}
.heart{ width:.85rem; height:.85rem; background:var(--rose); rotate:-45deg; position:relative; flex:none; }
.heart::before, .heart::after{
  content:""; position:absolute; width:100%; height:100%; background:var(--rose); border-radius:50%;
}
.heart::before{ top:-50%; left:0; }
.heart::after{ top:0; left:50%; }

/* ---------- why: cards ---------- */
.grid-3{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media (min-width:640px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grid-3{ grid-template-columns:repeat(3,1fr); gap:1.4rem; } }

.card{
  background:linear-gradient(170deg,#fffdfa,var(--paper));
  border:1px solid rgba(12,46,84,.09);
  border-radius:var(--r); padding:1.7rem 1.6rem;
  box-shadow:var(--shadow-s);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:rgba(220,121,112,.35); }
.card-ico{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%;
  background:rgba(229,188,117,.26); margin-bottom:1rem; color:var(--olive);
}
.card-ico svg{
  width:1.55rem; height:1.55rem;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.card-ico svg .f{ fill:currentColor; stroke:none; }
.card h3{ font-size:1.22rem; margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.99rem; }

/* ---------- days: chips ---------- */
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.chips li{
  background:#fffdf9; border:1px solid rgba(12,46,84,.11); border-radius:100px;
  padding:.6rem 1.15rem; font-weight:600; color:var(--navy); font-size:.97rem;
  box-shadow:var(--shadow-s);
}
.chips .chip-star{
  background:var(--navy); color:#fff; border-color:var(--navy);
  font-family:var(--display); font-variation-settings:var(--soft); font-size:1.02rem;
}

/* ---------- enrollment ---------- */
.enroll{
  background:#fffdf9; border:1px solid rgba(12,46,84,.1); border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.6rem); box-shadow:var(--shadow-m);
}
.enroll-head{ padding-bottom:1.4rem; border-bottom:2px dashed rgba(155,162,100,.5); }
.enroll-head h3{ font-size:1.65rem; }
.enroll-head p{ color:var(--muted); margin-top:.4rem; }
.enroll-list{ list-style:none; margin:0; padding:0; }
.enroll-list li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1.5rem;
  padding:1.35rem 0; border-bottom:1px solid rgba(12,46,84,.09);
}
.el-main{ flex:1 1 16rem; }
.el-main h4{ font-size:1.12rem; }
.el-main p{ color:var(--muted); font-size:.95rem; margin-top:.25rem; }
.el-open, .el-free{
  font-family:var(--body); font-weight:700; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.34rem .8rem; border-radius:100px; white-space:nowrap;
}
.el-open{ background:rgba(79,106,37,.11); color:var(--olive); border:1px solid rgba(79,106,37,.25); }
.el-free{ background:rgba(220,121,112,.11); color:var(--rose-deep); border:1px solid rgba(220,121,112,.28); }
.enroll-note{ margin-top:1.4rem; color:var(--muted); font-size:.97rem; }
.enroll-note a{ color:var(--rose-deep); font-weight:700; text-decoration:none; white-space:nowrap; }
.enroll-note a:hover{ text-decoration:underline; }

/* ---------- meet gaga ---------- */
.gaga-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start; }
@media (min-width:900px){ .gaga-grid{ grid-template-columns:420px 1fr; gap:4rem; } }

/* stacked (below 900px) the column is the full page width — uncapped, her
   portrait becomes a 900px-tall full-bleed face. */
.gaga-photo{ margin:0; position:relative; max-width:22rem; }
@media (min-width:900px){ .gaga-photo{ max-width:none; } }
.gaga-photo picture{ display:block; }
.gaga-photo img{
  width:100%; height:auto; border-radius:var(--r);
  border:6px solid rgba(255,255,255,.9);
  box-shadow:0 28px 60px -24px rgba(0,0,0,.6);
}
.gaga-photo figcaption{
  margin-top:.9rem; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--honey); font-weight:600;
}
.gaga-copy h2{ font-size:clamp(1.4rem,2.7vw,2rem); line-height:1.28; font-weight:500; font-style:normal; }
.letter{ margin-top:1.6rem; display:grid; gap:1rem; color:rgba(230,237,246,.84); font-size:1.02rem; max-width:38rem; }
.gaga-copy h2{ max-width:32rem; }
.signoff{ margin-top:1.5rem; color:rgba(230,237,246,.7); font-size:.98rem; }
.sig{
  display:inline-block; margin-top:.35rem;
  font-family:var(--display); font-variation-settings:"SOFT" 70,"WONK" 1;
  font-size:1.6rem; color:var(--honey); font-weight:500;
}
.sig em{ font-style:normal; opacity:.75; font-size:.8em; }
.gaga-copy .btn{ margin-top:1.8rem; }

/* ---------- stats ---------- */
.stats{ background:var(--navy); border-top:1px solid rgba(255,255,255,.09); padding-block:2.75rem; }
.stats-inner{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; text-align:center; }
@media (min-width:820px){ .stats-inner{ grid-template-columns:repeat(4,1fr); } }
.stat{ display:grid; gap:.3rem; }
.stat-n{
  font-family:var(--display); font-variation-settings:var(--soft);
  font-size:clamp(2rem,4.5vw,2.9rem); font-weight:600; color:var(--honey); line-height:1; letter-spacing:-.02em;
}
.stat-l{ font-size:.85rem; color:rgba(230,237,246,.66); letter-spacing:.03em; }

/* ---------- visit ---------- */
.visit-grid{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
@media (min-width:760px){ .visit-grid{ grid-template-columns:repeat(2,1fr); } }
/* at two columns the third card would sit alone in a half-width cell */
@media (min-width:760px) and (max-width:1039px){ .visit-card:last-child{ grid-column:1 / -1; } }
@media (min-width:1040px){ .visit-grid{ grid-template-columns:repeat(3,1fr); } }
.visit-card{
  background:#fffdf9; border:1px solid rgba(12,46,84,.1); border-radius:var(--r);
  padding:1.75rem 1.6rem; box-shadow:var(--shadow-s);
  display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
}
.visit-card h3{ font-size:1.25rem; }
/* defensive base sets table{display:block}; restore real table layout */
.hours{ display:table; width:100%; border-collapse:collapse; font-size:.95rem; }
.hours th, .hours td{ padding:.5rem 0; text-align:left; border-bottom:1px solid rgba(12,46,84,.08); font-weight:400; }
.hours th{ color:var(--muted); }
.hours td{ text-align:right; color:var(--navy); font-weight:600; }
.hours .closed th, .hours .closed td{ color:var(--sage); border-bottom:none; font-weight:500; }
address{ font-style:normal; font-weight:600; color:var(--navy); font-size:1.05rem; line-height:1.5; }
.visit-note{ color:var(--muted); font-size:.94rem; }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; width:100%; }
.contact-list li{ display:grid; gap:.15rem; }
.contact-list span{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--sage); font-weight:700; }
.contact-list a{ color:var(--navy); font-weight:700; text-decoration:none; font-size:1.02rem; }
.contact-list a:hover{ color:var(--rose-deep); text-decoration:underline; }
.seal{
  display:flex; gap:.75rem; align-items:flex-start; width:100%;
  background:rgba(79,106,37,.07); border:1px solid rgba(79,106,37,.2);
  border-radius:var(--r-sm); padding:.9rem 1rem;
}
.seal-check{
  flex:none; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--olive); color:#fff;
  display:grid; place-items:center; font-size:.8rem; font-weight:700;
}
.seal strong{ display:block; color:var(--olive); font-size:.92rem; }
.seal span:not(.seal-check){ display:block; color:var(--muted); font-size:.83rem; margin-top:.15rem; }
.visit-contact{ background:linear-gradient(168deg,#fffdf9,var(--cream-deep)); }

/* ---------- final cta ---------- */
.cta-band{
  background:
    radial-gradient(40rem 26rem at 20% 0%, rgba(229,188,117,.3), transparent 60%),
    linear-gradient(150deg, var(--rose), var(--rose-deep));
  color:#fff; padding-block:clamp(3.5rem,7vw,5.5rem);
}
.cta-inner{ max-width:46rem; text-align:center; margin-inline:auto; display:grid; gap:1rem; justify-items:center; }
.cta-inner h2{ color:#fff; font-size:clamp(1.65rem,3.4vw,2.5rem); }
.cta-inner > p:not(.kicker){ color:rgba(255,255,255,.9); max-width:34rem; }
.cta-inner .kicker-light{ color:rgba(255,255,255,.85); margin-bottom:0; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:.9rem; }
.cta-band .btn-primary{ background:#fff; color:var(--rose-deep); box-shadow:0 12px 26px -14px rgba(0,0,0,.5); }
.cta-band .btn-primary:hover{ background:var(--cream); }

/* ---------- footer ---------- */
.foot{ background:var(--navy); color:rgba(230,237,246,.72); padding-block:3.25rem 2rem; }
.foot-inner{ display:grid; gap:2.25rem; }
.foot-brand{ display:flex; align-items:center; gap:.85rem; }
.foot-brand img{ width:auto; height:3.1rem; }
.foot-name{
  font-family:var(--display); font-variation-settings:var(--soft);
  font-size:1.4rem; color:#fff; font-weight:700; letter-spacing:-.02em; line-height:1.1;
}
.foot-sub{ font-size:.85rem; color:rgba(230,237,246,.6); margin-top:.15rem; }
.foot-cols{ display:grid; grid-template-columns:1fr; gap:1.6rem; }
@media (min-width:640px){ .foot-cols{ grid-template-columns:repeat(3,1fr); } }
.foot-cols h4{
  font-family:var(--body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--honey); margin-bottom:.6rem; font-weight:700;
}
.foot-cols p{ font-size:.94rem; line-height:1.7; }
.foot-cols a{ color:rgba(230,237,246,.86); text-decoration:none; }
.foot-cols a:hover{ color:#fff; text-decoration:underline; }
.foot-legal{
  border-top:1px solid rgba(255,255,255,.12); padding-top:1.4rem;
  font-size:.8rem; color:rgba(230,237,246,.5);
}

/* ============================================================
   Contact page
   ============================================================ */

/* [hidden] must beat any class that sets display (form status, menus) */
[hidden]{ display:none !important; }

.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.contact-hero{
  padding-block:clamp(2.25rem,5.5vw,3.75rem);
  background:
    radial-gradient(46rem 26rem at 15% 0%, rgba(229,188,117,.26), transparent 62%),
    radial-gradient(40rem 24rem at 92% 20%, rgba(220,121,112,.15), transparent 60%);
  border-bottom:1px solid rgba(12,46,84,.07);
}
/* cap the CHILDREN, not the .wrap itself — .wrap carries margin-inline:auto, so
   a max-width here re-centres the whole block away from the site's left margin. */
.contact-hero-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:.95rem; }
.contact-hero h1{
  font-size:clamp(1.9rem,4.6vw,3.1rem); font-variation-settings:"SOFT" 45,"WONK" 1;
  letter-spacing:-.028em; max-width:20ch;
}
.contact-hero .lede{ max-width:44ch; }

.contact-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
@media (min-width:980px){ .contact-grid{ grid-template-columns:1.25fr .75fr; gap:2.25rem; } }

.form-card{
  background:#fffdf9; border:1px solid rgba(12,46,84,.1); border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.6rem); box-shadow:var(--shadow-m);
}
.form-card h2{ font-size:clamp(1.5rem,3vw,2rem); }
.form-intro{ color:var(--muted); margin-top:.5rem; }

#estimate-form{ display:grid; gap:1.05rem; margin-top:1.7rem; }
.field{ display:grid; gap:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr; gap:1.05rem; }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }

.field label{ font-size:.85rem; font-weight:700; color:var(--navy); letter-spacing:.02em; }
.field .hint{ font-weight:500; color:var(--sage); letter-spacing:0; }
.field input, .field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1.5px solid rgba(12,46,84,.16);
  border-radius:var(--r-sm); padding:.82rem .95rem; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field textarea{ resize:vertical; min-height:7.5rem; line-height:1.6; }
.field input::placeholder, .field textarea::placeholder{ color:#9AA7B8; }
.field input:hover, .field textarea:hover{ border-color:rgba(12,46,84,.3); }
.field input:focus, .field textarea:focus{
  outline:none; background:#fff; border-color:var(--rose);
  box-shadow:0 0 0 4px rgba(220,121,112,.16);
}
.field input:user-invalid, .field textarea:user-invalid{ border-color:var(--rose-deep); }

.form-submit{ width:100%; margin-top:.35rem; }
.form-submit:disabled{ opacity:1; background:var(--olive); box-shadow:none; transform:none; }

.form-status{
  margin-top:.25rem; padding:1rem 1.15rem; border-radius:var(--r-sm);
  font-size:.98rem; line-height:1.55; scroll-margin-top:calc(var(--nav-h) + 1.25rem);
}
.form-status.ok{
  background:rgba(79,106,37,.09); border:1px solid rgba(79,106,37,.28); color:var(--olive);
}
.form-status.ok strong{ display:block; font-family:var(--display); font-variation-settings:var(--soft); font-size:1.2rem; margin-bottom:.2rem; }
.form-status.err{
  background:rgba(220,121,112,.09); border:1px solid rgba(220,121,112,.3); color:var(--rose-deep);
}
.form-status a{ color:inherit; font-weight:700; }

.form-fineprint{ font-size:.87rem; color:var(--muted); text-align:center; }
.form-fineprint a{ color:var(--rose-deep); font-weight:700; text-decoration:none; }
.form-fineprint a:hover{ text-decoration:underline; }

.contact-side{ display:grid; gap:1.2rem; }

/* ---------- scroll reveal (below the fold only) ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn:hover, .card:hover{ transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* Cloudflare Turnstile widget (injected by ensure_turnstile.py) */
.turnstile-box { margin-bottom: 1.25rem; min-height: 65px; }

/* === site credit (injected by credit_footer.py); do not hand-edit === */
.site-credit {
  margin: 2.25rem 0 0;
  padding-inline: 1.25rem;
  font-size: .73rem;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  opacity: .65;
}
.site-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(128, 128, 128, .5);
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-bottom-color .25s ease;
}
.site-credit a:hover,
.site-credit a:focus-visible { border-bottom-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .site-credit a { transition: none; }
}
/* === end site credit === */