/* ═══ BAYTOWN — brand v2 ═══
   Charcoal #16181C · Baytown Red #911A1C · Soft Cream #F5EFE6 · Warm Amber #E8A34C
   Type: Fraunces (display) + Inter (body)
   MOTION LAW: environments breathe, humans never move. */

:root{
  --charcoal:#16181C;
  --charcoal-2:#1E2127;
  --charcoal-3:#282C34;
  --red:#911A1C;
  --red-lift:#A32626;
  --cream:#F5EFE6;
  --cream-dim:#D9D2C7;
  --amber:#E8A34C;
  --ink:#1A1C20;
  --muted:#6B7280;
  --line:rgba(245,239,230,.14);
  --wrap:1200px;
  --r:14px;
  --shadow:0 20px 60px rgba(0,0,0,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-bottom:84px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:400 17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Fraunces,Georgia,"Times New Roman",serif;font-weight:600;line-height:1.08;margin:0;letter-spacing:-.015em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ─── buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:15px 28px;border-radius:999px;font-weight:600;font-size:16px;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 24px rgba(145,26,28,.28)}
.btn-primary:hover{background:var(--red-lift);transform:translateY(-2px);box-shadow:0 14px 34px rgba(145,26,28,.36)}
.btn-cream{background:var(--cream);color:var(--red)}
.btn-cream:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.btn-ghost{border-color:currentColor;color:var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:var(--cream);transform:translateY(-2px)}
.btn-block{width:100%}

/* ─── header ─── */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(22,24,28,.86);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);transition:background .3s;
}
.hdr-in{display:flex;align-items:center;gap:28px;height:76px}
.brand img{height:38px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:var(--cream-dim);font-size:15px;font-weight:500;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--amber);transition:right .3s var(--ease)}
.nav a:hover{color:var(--cream)}
.nav a:hover::after{right:0}
.hdr-call{display:flex;flex-direction:column;line-height:1.2;padding:9px 18px;border:1px solid var(--line);border-radius:999px;transition:border-color .25s,background .25s}
.hdr-call:hover{border-color:var(--amber);background:rgba(232,163,76,.1)}
.hdr-call-l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.hdr-call-n{font-size:15px;font-weight:700;color:var(--cream)}

/* ─── hero ─── */
.hero{position:relative;background:var(--charcoal);color:var(--cream);overflow:hidden;padding:28px 0 72px}
/* b-roll background layer — Tampa establishing footage, tinted so the form floats on it */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-vid{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity 1.1s var(--ease)}
.hero-vid.ready{opacity:.9}
.hero-scrim{
  position:absolute;inset:0;
  background:
    /* readable column behind the copy, then let the footage breathe */
    linear-gradient(90deg,rgba(22,24,28,.94) 0%,rgba(22,24,28,.88) 26%,rgba(22,24,28,.42) 52%,rgba(22,24,28,.28) 100%),
    linear-gradient(180deg,rgba(22,24,28,.55) 0%,rgba(22,24,28,.12) 34%,rgba(22,24,28,.42) 82%,var(--charcoal) 100%);
}
/* ambient environment — the ONLY thing that moves */
.hero-amb{position:absolute;inset:0;pointer-events:none}
.hero-amb i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32;display:block;mix-blend-mode:screen}
.hero-amb i:nth-child(1){width:620px;height:620px;background:radial-gradient(circle,rgba(232,163,76,.5),transparent 68%);top:-14%;right:-6%;animation:drift1 22s ease-in-out infinite}
.hero-amb i:nth-child(2){width:520px;height:520px;background:radial-gradient(circle,rgba(145,26,28,.62),transparent 68%);bottom:-18%;left:-8%;animation:drift2 27s ease-in-out infinite}
.hero-amb i:nth-child(3){width:400px;height:400px;background:radial-gradient(circle,rgba(232,163,76,.28),transparent 70%);top:44%;left:42%;animation:drift3 19s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,38px) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(52px,-32px) scale(1.07)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,42px) scale(1.13)}}

.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .92fr;grid-template-areas:"copy shot" "form shot";gap:0 60px;align-items:start}
.hero-copy{grid-area:copy}
.eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 14px;font-weight:600}
.hero h1{font-size:clamp(40px,4.6vw,56px);letter-spacing:-.03em}
.lede{font-size:16.5px;color:var(--cream-dim);max-width:32em;margin:14px 0 0}
.lede strong{color:var(--cream);font-weight:600}

/* the photograph — static, untouched, the gravitational centre */
/* HERO IS SACRED: headline, copy, form, Antonio. Emily has her own section below. */
.hero-shot{grid-area:shot;margin:0;position:relative;align-self:stretch}
.hero-shot img{display:block;width:100%;height:100%;border-radius:var(--r);box-shadow:var(--shadow);position:relative;z-index:1;object-fit:cover;object-position:center 18%}
.hero-shot::before{content:"";position:absolute;inset:-16px;border-radius:22px;background:linear-gradient(150deg,rgba(232,163,76,.28),transparent 60%);z-index:0}
.hero-shot figcaption{
  position:absolute;right:12px;bottom:12px;z-index:3;font-size:13.5px;color:var(--cream-dim);
  max-width:calc(100% - 24px);text-align:right;line-height:1.3;
  background:rgba(22,24,28,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:6px 13px;border-radius:14px;border:1px solid var(--line);
}
.hero-shot figcaption strong{color:var(--cream)}
.hero-shot figcaption span{opacity:.82}

/* ─── "You'll talk to Emily" ─── */
.emily{background:#EFE8DD;padding:84px 0}
.emily-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.emily-shot{margin:0}
.emily-shot img{width:100%;border-radius:var(--r);box-shadow:0 18px 44px rgba(22,24,28,.16);display:block}
.emily-copy h2{font-size:clamp(31px,4vw,48px);margin:8px 0 20px;letter-spacing:-.025em}
.emily-copy .eyebrow{color:var(--red);margin-bottom:0}
.emily-copy p{font-size:17.5px;color:#3A3F47;margin:0 0 16px;max-width:36em}
.emily-quiet{border-left:3px solid var(--amber);padding-left:18px;color:var(--charcoal)!important;font-weight:500}
.emily-copy .btn{margin-top:12px}
@media (max-width:900px){
  .emily-in{grid-template-columns:1fr;gap:30px}
  .emily{padding:60px 0}
}

.formcard{grid-area:form;background:var(--cream);color:var(--ink);border-radius:18px;padding:26px 28px;box-shadow:var(--shadow);margin-top:26px;max-width:520px}
.formcard h2{font-size:24px;color:var(--red)}
.formcard-sub{font-size:13.5px;color:var(--muted);margin:7px 0 13px;line-height:1.45}
.formcard label{display:block;font-size:12.5px;font-weight:600;color:var(--charcoal);margin-bottom:10px}
.formcard input{
  width:100%;margin-top:6px;padding:12px 14px;font:inherit;font-size:16px;
  border:1.5px solid #DCD4C8;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s;
}
.formcard input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(145,26,28,.12)}
.formcard input[aria-invalid="true"]{border-color:#B3261E;box-shadow:0 0 0 4px rgba(179,38,30,.1)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin:14px 0 0;font-size:14.5px;min-height:1.2em;font-weight:500}
.formnote.ok{color:#1B5E20}.formnote.err{color:#B3261E}
.formfine{margin:13px 0 0;font-size:13px;color:var(--muted);text-align:center}
.formfine a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(145,26,28,.3)}

/* ─── pricing band ─── */
.band{background:var(--red);color:#fff;padding:40px 0}
.band-in{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.band-k{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.band-price{margin:2px 0 0;font-family:Fraunces,Georgia,serif;font-size:clamp(42px,5.4vw,62px);font-weight:700;line-height:1;letter-spacing:-.03em}
.band-cur{font-size:.52em;vertical-align:super;margin-right:2px}
.band-per{font-size:.3em;font-family:Inter,sans-serif;font-weight:500;opacity:.85;margin-left:6px;letter-spacing:0}
.band-note{margin:0;flex:1 1 300px;font-size:15.5px;line-height:1.6;opacity:.95;border-left:2px solid rgba(255,255,255,.3);padding-left:24px}
.band-note strong{opacity:1}

/* ─── proof ─── */
.proof{background:var(--charcoal-2);color:var(--cream);padding:56px 0}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stat b{display:block;font-family:Fraunces,Georgia,serif;font-size:clamp(40px,5vw,60px);font-weight:700;color:var(--amber);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:14px;color:var(--cream-dim);letter-spacing:.01em}

/* ─── balustrade divider (the logo's flourish, as a motif) ─── */
.balus{
  height:38px;background:var(--cream);
  background-image:
    radial-gradient(circle at 50% 100%, var(--red) 0 3.2px, transparent 3.4px),
    linear-gradient(var(--red),var(--red));
  background-size:22px 38px, 100% 1.5px;
  background-position:center 6px, center 30px;
  background-repeat:repeat-x,no-repeat;
  opacity:.28;
}

/* ─── section furniture ─── */
.sec-h{font-size:clamp(31px,4vw,46px);text-align:center;letter-spacing:-.025em}
.sec-h em{font-style:italic;color:var(--red)}
.sec-sub{text-align:center;color:var(--muted);font-size:17.5px;margin:16px auto 0;max-width:44em}

/* ─── humans ─── */
.humans{padding:96px 0}
.humans-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:56px}
.human{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 26px rgba(22,24,28,.08);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.human:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(22,24,28,.14)}
.human-shot{aspect-ratio:3/2;overflow:hidden;background:var(--charcoal-3)}
.human-shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.human-shot--alt img{object-position:center 12%}
.human-body{padding:30px 32px 34px}
.human-role{margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:700}
.human-body h3{font-size:31px;margin:9px 0 3px;color:var(--red)}
.human-title{margin:0 0 16px;font-size:14.5px;color:var(--muted);font-weight:500}
.human-body p{margin:0 0 16px;font-size:16.5px;color:#2E3238}
.link-arrow{color:var(--red);font-weight:600;font-size:15.5px;display:inline-block;transition:transform .25s var(--ease)}
.link-arrow:hover{transform:translateX(4px)}

/* ─── services ─── */
.services{padding:96px 0;background:#EFE8DD}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.svc{background:var(--cream);border-radius:var(--r);padding:30px 28px;border-top:3px solid var(--red);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(22,24,28,.1)}
.svc h3{font-size:21px;color:var(--charcoal);margin-bottom:11px}
.svc p{margin:0;font-size:15.5px;color:#4A4F57;line-height:1.6}

/* ─── reviews ─── */
.reviews{padding:96px 0}
.rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:52px}
.rev{margin:0;background:var(--charcoal);color:var(--cream);border-radius:18px;padding:38px 36px;position:relative;overflow:hidden}
.rev::before{content:"\201C";position:absolute;top:-22px;right:20px;font-family:Fraunces,Georgia,serif;font-size:150px;color:var(--amber);opacity:.16;line-height:1}
.rev blockquote{margin:0;font-size:17.5px;line-height:1.68;color:var(--cream-dim);position:relative}
.rev blockquote strong{color:var(--amber)}
.rev figcaption{margin-top:22px;font-weight:700;font-size:15.5px;color:var(--cream)}
.rev figcaption span{font-weight:400;color:var(--cream-dim);opacity:.8}

/* ─── rent vs sell ─── */
.rvs{padding:96px 0;background:var(--charcoal);color:var(--cream)}
.rvs-in{display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:center}
.rvs-copy h2{font-size:clamp(30px,3.7vw,43px);margin-bottom:22px}
.rvs-copy p{color:var(--cream-dim);font-size:17.5px;margin:0 0 18px}
.rvs-punch{border-left:3px solid var(--amber);padding-left:20px;color:var(--cream)!important;font-weight:500}
.rvs-copy .btn{margin-top:12px}
.rvs-card{background:var(--charcoal-2);border:1px solid var(--line);border-radius:18px;padding:34px}
.rvs-card h3{font-size:22px;color:var(--amber);margin-bottom:20px}
.rvs-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rvs-card li{padding-left:28px;position:relative;font-size:16px;color:var(--cream-dim)}
.rvs-card li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.rvs-fine{margin:24px 0 0;font-size:13.5px;color:var(--cream-dim);opacity:.7}

/* ─── areas ─── */
.areas{padding:96px 0;background:#EFE8DD}
/* two primary counties, stated as the claim */
.area-primary{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px}
.county{background:var(--cream);border-radius:var(--r);padding:34px 34px 30px;border-top:3px solid var(--red);box-shadow:0 4px 22px rgba(22,24,28,.06)}
.county h3{font-size:27px;color:var(--charcoal)}
.county-k{margin:7px 0 20px;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-weight:700}
.county ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.county li{font-family:Fraunces,Georgia,serif;font-size:18.5px;color:var(--charcoal);padding-left:22px;position:relative}
.county li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--amber)}
.county li span{display:block;font-family:Inter,sans-serif;font-size:14px;color:var(--muted);margin-top:3px}
/* secondary — listed, never promised */
.area-secondary{margin-top:26px;background:var(--charcoal);color:var(--cream);border-radius:var(--r);padding:30px 34px;border-left:3px solid var(--amber)}
.area-secondary h3{font-size:21px;color:var(--amber);margin-bottom:10px}
.area-secondary p{margin:0 0 14px;color:var(--cream-dim);font-size:16px;max-width:62em}
.area-secondary strong{color:var(--cream)}
.area-secondary .link-arrow{color:var(--amber)}

/* ─── faq ─── */
.faq{padding:96px 0}
.faq-list{max-width:840px;margin:52px auto 0}
.faq details{border-bottom:1px solid rgba(22,24,28,.13)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:Fraunces,Georgia,serif;font-size:20.5px;font-weight:600;color:var(--charcoal);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:33px;width:11px;height:11px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:38px}
.faq summary:hover{color:var(--red)}
.faq details div{padding:0 44px 26px 0;animation:fadein .35s var(--ease)}
.faq details p{margin:0;color:#4A4F57;font-size:16.5px}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ─── closer ─── */
.closer{background:var(--red);color:#fff;padding:88px 0;text-align:center}
.closer h2{font-size:clamp(30px,4vw,46px);max-width:16em;margin:0 auto}
.closer p{font-size:18px;opacity:.92;margin:20px auto 34px;max-width:34em}
.closer-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.closer .btn-primary{background:var(--cream);color:var(--red);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.closer .btn-primary:hover{background:#fff}
.closer .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.closer .btn-ghost:hover{background:#fff;color:var(--red);border-color:#fff}

/* ─── footer ─── */
.ftr{background:var(--charcoal);color:var(--cream-dim);padding:66px 0 0}
.ftr-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.35fr;gap:40px}
.ftr-brand img{height:42px;width:auto;margin-bottom:18px}
.ftr-brand p{margin:0;font-size:15px;max-width:26em;line-height:1.6}
.ftr-col h4{font-family:Inter,sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:16px;font-weight:700}
.ftr-col a{display:block;margin-bottom:11px;font-size:15px;transition:color .2s}
.ftr-col a:hover{color:var(--amber)}
.ftr-col address{font-style:normal;font-size:15px;margin-top:14px;line-height:1.6;opacity:.85}
.ftr-btm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:52px;padding-top:24px;padding-bottom:96px}
.ftr-btm p{margin:0;font-size:13px;opacity:.62}

/* ─── sticky call bar ─── */
.callbar{
  position:fixed;left:50%;transform:translateX(-50%) translateY(140%);bottom:18px;z-index:120;
  display:flex;align-items:center;gap:11px;white-space:nowrap;max-width:calc(100vw - 32px);
  background:var(--red);color:#fff;padding:15px 28px;border-radius:999px;
  box-shadow:0 14px 40px rgba(145,26,28,.44);font-size:15.5px;
  transition:transform .45s var(--ease),background .25s;
}
.callbar.show{transform:translateX(-50%) translateY(0)}
/* reserve a gutter so the floating bar never covers a tappable control */
/* measured at its real position even while hidden, so the yield test is honest */
.callbar.measuring{transform:translateX(-50%) translateY(0)!important;visibility:hidden}
.callbar:hover{background:var(--red-lift)}
.callbar-dot{width:9px;height:9px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.75);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* ─── scroll reveal ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ─── responsive ─── */
@media (max-width:1040px){
  /* MOBILE: the form is the conversion engine — it goes directly under the headline,
     and the long positioning paragraph moves BELOW it. display:contents lets the
     copy block's children become grid/flex items so they can be reordered. */
  .hero-in{display:flex;flex-direction:column;gap:0}
  .hero-copy{display:contents}
  .eyebrow{order:1}
  .hero h1{order:2}
  .formcard{order:3;margin-top:20px;max-width:none}
  .lede{order:4;margin-top:26px;max-width:none}
  .hero-shot{order:5;margin-top:28px;align-self:auto}
  .formcard{position:static;max-width:520px}
  .hero-shot{max-width:520px;margin-top:0}
  .humans-grid,.rev-grid,.rvs-in{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .area-primary{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr 1fr}
  .proof-in{grid-template-columns:repeat(2,1fr);gap:36px}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{display:none}
  .hdr-in{height:66px;gap:14px}
  .hero{padding:24px 0 60px}
  .hero h1{font-size:clamp(36px,10vw,44px)}
  .band-in{gap:20px}
  .band-note{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.3);padding-top:16px}
  .svc-grid,.proof-in{grid-template-columns:1fr}
  .county{padding:26px 24px}
  .humans,.services,.reviews,.rvs,.areas,.faq{padding:64px 0}
  .ftr-in{grid-template-columns:1fr;gap:32px}
  .ftr-btm{padding-bottom:104px}
  /* the bar must stay ONE line on a phone — wrapped, it becomes a blob over the content */
  .callbar{padding:12px 18px;font-size:14px;gap:8px;bottom:12px}
  .callbar b{font-weight:700}
  .formcard{padding:26px 22px}
}

/* ─── accessibility: honour reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .callbar{transform:translateX(-50%) translateY(0)}
}

/* ─── print ─── */
@media print{.hdr,.callbar,.hero-amb{display:none}body{background:#fff}}


/* ─── polish pass ─── */
.teaser{display:block;color:var(--red);font-size:15px;margin-bottom:5px}

/* balustrade divider: the balusters rise as the divider scrolls into view */
.balus{--balus-p:0}
.balus i{display:none}
.balus.animated{
  background-image:
    radial-gradient(circle at 50% 100%, var(--red) 0 3.2px, transparent 3.4px),
    linear-gradient(var(--red),var(--red));
  background-size:22px calc(14px + (24px * var(--balus-p))), calc(var(--balus-p) * 100%) 1.5px;
  background-position:center 6px, center 30px;
  background-repeat:repeat-x,no-repeat;
  transition:background-size .9s var(--ease);
}

/* confetti — brand colours only, and it cleans itself up */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.confetti b{position:absolute;width:9px;height:14px;border-radius:2px;opacity:0;animation:fall linear forwards}
@keyframes fall{
  0%{opacity:1;transform:translate3d(0,-14px,0) rotate(0deg)}
  100%{opacity:0;transform:translate3d(var(--dx),102vh,0) rotate(var(--dr))}
}
.formcard.sent{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.018)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .confetti{display:none}
  .balus.animated{transition:none;background-size:22px 38px,100% 1.5px}
  .formcard.sent{animation:none}
}

/* ─── area pages ─── */
.area-hero{background:var(--charcoal);color:var(--cream);padding:54px 0 62px;position:relative}
.crumbs{font-size:13.5px;color:var(--cream-dim);margin-bottom:22px}
.crumbs a{border-bottom:1px solid rgba(245,239,230,.25)}
.crumbs a:hover{color:var(--amber);border-color:var(--amber)}
.crumbs span[aria-hidden]{opacity:.45;margin:0 6px}
.area-hero h1{font-size:clamp(38px,4.8vw,60px);letter-spacing:-.03em;margin-bottom:20px}
.area-hero .lede{max-width:44em}
.area-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.area-hero .btn-ghost{color:var(--cream);border-color:var(--line)}
.area-hero .btn-ghost:hover{background:var(--cream);color:var(--charcoal);border-color:var(--cream)}

.area-body{padding:72px 0}
.area-grid2{display:grid;grid-template-columns:1.55fr .8fr;gap:56px;align-items:start}
.area-body h2{font-size:clamp(26px,3vw,34px);margin:0 0 16px}
.area-body h2:not(:first-child){margin-top:44px}
.area-body h3{font-size:20.5px;color:var(--red);margin:30px 0 10px}
.area-body p{font-size:17px;color:#3A3F47;margin:0 0 16px}

.area-side{display:grid;gap:18px;position:sticky;top:100px}
.area-card{background:#EFE8DD;border-radius:var(--r);padding:26px 26px;border-top:3px solid var(--red)}
.area-card h3{font-size:19px;margin:0 0 16px;color:var(--charcoal)}
.area-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:15px}
.area-card dt{color:var(--muted)}
.area-card dd{margin:0;font-weight:600;color:var(--charcoal);text-align:right}
.area-note{margin:18px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6}
.area-card--dark{background:var(--charcoal);color:var(--cream-dim);border-top-color:var(--amber)}
.area-card--dark h3{color:var(--amber)}
.area-card--dark p{margin:0 0 12px;font-size:15px}
.area-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.area-links a{font-size:15.5px;color:var(--cream);border-bottom:1px solid rgba(245,239,230,.22)}
.area-links a:hover{color:var(--amber);border-color:var(--amber)}

.area-form{background:#EFE8DD;padding:72px 0}
.area-formwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.area-formwrap h2{font-size:clamp(27px,3.2vw,38px);margin-bottom:16px}
.area-formwrap p{font-size:17px;color:#3A3F47;margin:0 0 14px}
.area-formwrap .formcard{position:static;margin:0;max-width:none}
.area-fine{font-size:15px}
.area-fine a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(145,26,28,.3)}

@media (max-width:1040px){
  .area-grid2,.area-formwrap{grid-template-columns:1fr;gap:36px}
  .area-side{position:static}
}
.area-pagelink{color:var(--red);border-bottom:1.5px solid rgba(145,26,28,.35)}
.area-pagelink:hover{border-bottom-color:var(--red)}



/* ═══ APPROVED MOBILE VARIETY ═══ */
@media (max-width:720px){
  /* ① horizontal scroll-snap rails — 9 stacked boxes become one swipe */
  .svc-grid,.rev-grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -24px;padding:4px 24px 8px;
  }
  .svc-grid::-webkit-scrollbar,.rev-grid::-webkit-scrollbar{display:none}
  .svc-grid > *,.rev-grid > *{flex:0 0 78vw;scroll-snap-align:start;margin:0}
  .rev-grid > *{flex:0 0 84vw}
  .svc-grid::after,.rev-grid::after{content:"";flex:0 0 8px}

  /* ② section rhythm — alternating, so the page has a pulse instead of a drone */
  .humans,.reviews,.faq{padding:44px 0}
  .services,.rvs,.areas{padding:72px 0}
  .emily{padding:52px 0}
  /* ③ type contrast — headlines must outrank body on a phone */
  .sec-h{font-size:clamp(28px,7.5vw,38px)}
  body{font-size:16.5px;line-height:1.55}
}