/* ==========================================================================
   Pelican Bin Service — Sebastian, FL
   Vintage-coastal design system, derived from the badge logo.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Brand palette, sampled from the logo */
  --navy:        #1e3a5f;
  --navy-deep:   #16293f;
  --navy-ink:    #0f1d2e;
  --cream:       #f5eddc;
  --cream-warm:  #efe3cc;
  --orange:      #d65a31;
  --orange-deep: #c24a22;  /* 4.9:1 on white — safe for button labels */
  --gold:        #edb94a;
  --seafoam:     #9fc9c6;
  --seafoam-dim: #7fb2ae;

  /* Semantic */
  --bg:            var(--cream);
  --bg-alt:        #fbf6ec;
  --surface:       #ffffff;
  --text:          var(--navy);
  --text-muted:    #4a6480;
  --text-on-dark:  var(--cream);
  --text-on-dark-muted: #b9cbdd;
  --border:        #ddcfb4;
  --border-dark:   #2f4f75;
  --accent:        var(--orange-deep);
  --focus:         var(--gold);

  /* Spacing scale (8pt rhythm) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 29, 46, .08);
  --shadow:    0 4px 16px rgba(15, 29, 46, .10);
  --shadow-lg: 0 16px 40px rgba(15, 29, 46, .16);

  --container: 1140px;
  --header-h: 72px;

  /* z-index scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 100;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 220ms;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: Archivo, Inter, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
p  { margin: 0 0 var(--space-4); max-width: 68ch; }
a  { color: var(--accent); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Layout helpers ------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }

.section { padding-block: clamp(56px, 9vw, 96px); }
.section--tint { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: var(--text-on-dark); }
.section--navy h2, .section--navy h3 { color: var(--cream); }
.section--navy p { color: var(--text-on-dark-muted); }

.section__head { max-width: 60ch; margin-bottom: var(--space-7); }
.section__head p { font-size: 1.08rem; color: var(--text-muted); }
.section--navy .section__head p { color: var(--text-on-dark-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--gold); border-radius: 2px; }
/* On navy, the orange fails contrast (2.35:1) — gold clears AA comfortably.
   The hero is navy too, so it gets the same treatment. */
.section--navy .eyebrow,
.hero .eyebrow { color: var(--gold); }
.section--navy .eyebrow::before,
.hero .eyebrow::before { background: var(--seafoam); }

.skip-link {
  position: absolute; left: var(--space-4); top: -80px; z-index: var(--z-overlay);
  background: var(--navy); color: var(--cream);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1rem;
  letter-spacing: .01em;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--orange-deep); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: #a93d1a; box-shadow: var(--shadow-lg); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--border-dark); }
.btn--outline:hover { background: var(--navy); color: var(--cream); }

.section--navy .btn--outline,
.site-header--scrolled .btn--outline { }
.btn--onnavy { background: transparent; color: var(--cream); border-color: rgba(245,237,220,.5); }
.btn--onnavy:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn .spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--header-h);
  background: rgba(245, 237, 220, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header--scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header .container { height: 100%; display: flex; align-items: center; gap: var(--space-5); }

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--navy); margin-right: auto; flex: none; }
.brand img { width: 42px; height: 42px; border-radius: 50%; flex: none; }
/* nowrap: the header is a fixed 72px bar, so a two-line brand or button
   overflows it rather than making the bar taller. */
.brand__name { font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: var(--space-5); flex: none; }
  .nav a { color: var(--navy); text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; padding-block: 4px; }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
  }
  .nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
}
/* No gap expansion at wide viewports: .container caps at 1140px, so past that
   the header gains no room to spend and a wider gap just forces wrapping. */

.header-cta { display: none; }
@media (min-width: 620px) { .header-cta { display: inline-flex; white-space: nowrap; flex: none; } }

/* Phone in the header.
   Appears at 1140px+ — the width where .container reaches its max and the
   brand, five nav links, the number and the CTA all fit on one line with room
   to spare. Below that the sticky bottom bar carries the Call button instead,
   so there is always exactly one call affordance — never two, never none.
   This breakpoint and the .cta-bar one must stay in sync. */
.header-phone { display: none; }
@media (min-width: 1140px) {
  .header-phone {
    display: inline-flex; align-items: center;
    color: var(--navy); text-decoration: none;
    font-weight: 700; font-size: 1.05rem; white-space: nowrap;
  }
  .header-phone:hover { color: var(--orange-deep); }
}

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -12px;
  background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 26px; height: 26px; }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: var(--z-sticky);
  background: var(--navy); padding: var(--space-4) 0 var(--space-6);
  border-bottom: 4px solid var(--gold);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.mobile-nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-nav a {
  display: block; padding: var(--space-4) var(--space-5);
  color: var(--cream); text-decoration: none; font-weight: 600; font-size: 1.05rem;
  border-bottom: 1px solid rgba(245,237,220,.12);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  /* `clip`, not `hidden`: hidden makes this a scroll container, and the
     oversized sunburst then gives it 900px of scrollable content inside a
     650px box — so a stray gesture or scroll restoration silently scrolls the
     hero's interior and pushes the headline out of view. `clip` clips without
     ever becoming scrollable. (hidden first as a fallback for Safari < 16.) */
  overflow: hidden;
  overflow: clip;
  background: var(--navy);
  color: var(--cream);
  padding-block: clamp(48px, 8vw, 88px) 0;
}
.hero__inner {
  position: relative; z-index: var(--z-raised);
  display: grid; gap: var(--space-7); align-items: center;
  padding-bottom: clamp(72px, 10vw, 120px);
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; gap: var(--space-8); }
}
.hero h1 { color: var(--cream); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--text-on-dark-muted); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); padding: 0; list-style: none; }
.hero__badges li { display: flex; align-items: center; gap: var(--space-2); font-size: .92rem; color: var(--text-on-dark-muted); font-weight: 500; }
.hero__badges svg { width: 18px; height: 18px; color: var(--seafoam); flex: none; }

.hero__seal { justify-self: center; position: relative; width: min(400px, 82vw); }
/* Centred on the seal by construction, so it stays aligned at every width.
   Sized in % of the seal, so the burst scales with the logo too. */
.hero__rays {
  position: absolute; top: 50%; left: 50%;
  width: 300%; aspect-ratio: 1;
  max-width: none;   /* beat the global `svg { max-width: 100% }` reset */
  transform: translate(-50%, -50%);
  opacity: .12; pointer-events: none; z-index: 0;
}
.hero__seal img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
/* Wave divider */
.wave { display: block; width: 100%; height: auto; }
.wave--hero { position: absolute; bottom: -1px; left: 0; z-index: 2; color: var(--cream); }

/* --- Steps ---------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--space-4);
  background: var(--navy); color: var(--gold);
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.1rem;
  border-radius: 50%;
}
.step h3 { margin-bottom: var(--space-2); }
.step p { margin: 0; color: var(--text-muted); font-size: .97rem; }

/* --- Service cards -------------------------------------------------------- */
.cards { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: var(--space-4);
  background: var(--seafoam); color: var(--navy-deep);
  border-radius: var(--radius);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--text-muted); margin-bottom: var(--space-4); font-size: .97rem; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.card li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--text-muted); }
.card li svg { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; color: var(--orange-deep); }

/* --- Pricing -------------------------------------------------------------- */
.pricing { display: grid; gap: var(--space-5); align-items: stretch; }
@media (min-width: 820px) { .pricing { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.plan .btn { margin-top: auto; }   /* keeps both CTAs on the same baseline */
.plan--feature { border: 2px solid var(--orange-deep); box-shadow: var(--shadow); }
.plan__flag {
  position: absolute; top: -14px; left: var(--space-6);
  background: var(--orange-deep); color: #fff;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px var(--space-4); border-radius: var(--radius-pill);
}
.plan h3 { margin-bottom: var(--space-2); }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-block: var(--space-4); }
.plan__amount {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 3.4rem); line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.plan__per { color: var(--text-muted); font-weight: 600; font-size: 1rem; }
.plan__quote { font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; margin-block: var(--space-4); }
.plan__note {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(237, 185, 74, .22); color: #5e4104;  /* 5.4:1 — was 4.46 */
  font-weight: 700; font-size: .9rem;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
  align-self: flex-start;   /* don't stretch inside the flex-column card */
}
.plan__note svg { width: 16px; height: 16px; flex: none; }
.plan ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.plan li { position: relative; padding-left: 30px; color: var(--text-muted); font-size: .97rem; }
.plan li svg { position: absolute; left: 0; top: 3px; width: 20px; height: 20px; color: var(--orange-deep); }
.plan .btn { width: 100%; }
.pricing-footnote { margin-top: var(--space-6); font-size: .92rem; color: var(--text-muted); }

/* --- Service area --------------------------------------------------------- */
.area { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 860px) { .area { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.area__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.area__list li {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(159, 201, 198, .14);
  border: 1px solid rgba(159, 201, 198, .35);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  font-weight: 600; font-size: .97rem;
}
.area__list svg { width: 18px; height: 18px; color: var(--seafoam); flex: none; }

/* --- Why us --------------------------------------------------------------- */
.reasons { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reasons { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.reason__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: var(--space-4);
  background: var(--gold); color: var(--navy-deep);
  border-radius: var(--radius);
}
.reason__icon svg { width: 24px; height: 24px; }
.reason h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.reason p { font-size: .95rem; margin: 0; }

/* --- Quote form ----------------------------------------------------------- */
.quote { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) { .quote { grid-template-columns: .9fr 1.1fr; gap: var(--space-8); } }

.quote__aside ul { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.quote__aside li { display: flex; gap: var(--space-3); align-items: flex-start; }
.quote__aside svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 2px; }
.quote__aside a { color: var(--gold); }
/* Tap-to-call and tap-to-email are conversion links — give them a real
   thumb target on touch devices instead of a 20px line of text. */
@media (pointer: coarse) {
  .quote__aside a { display: inline-block; padding-block: 12px; }
}

.form {
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  container-type: inline-size;
}
@media (min-width: 560px) { .form { padding: var(--space-7); } }
.field { margin-bottom: var(--space-5); }
.field:last-of-type { margin-bottom: var(--space-6); }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: var(--space-2); }
.field .req { color: var(--orange-deep); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a6480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 58, 95, .15);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
.field .help { display: block; margin-top: var(--space-2); font-size: .85rem; color: var(--text-muted); }
.field .error {
  display: none; align-items: center; gap: 6px;
  margin-top: var(--space-2); font-size: .85rem; font-weight: 600; color: #b3261e;
}
.field .error svg { width: 15px; height: 15px; flex: none; }
.field .error[data-show="true"] { display: flex; }

/* Split into two columns based on the form's own width, so the selects never
   truncate when the form sits in a narrow column. */
.form__row { display: grid; gap: var(--space-5); }
@container (min-width: 440px) { .form__row { grid-template-columns: 1fr 1fr; } }
/* The form is a light card sitting inside a dark section. `.section--navy p`
   is more specific than a bare class, so its pale text color leaks in and
   lands on white (1.66:1 — effectively invisible). Re-assert dark text here. */
.section--navy .form p,
.section--navy .form__legal { color: var(--text-muted); }

.form__legal { font-size: .85rem; color: var(--text-muted); margin: var(--space-4) 0 0; }

.form__status {
  display: none; gap: var(--space-3); align-items: flex-start;
  margin-top: var(--space-5); padding: var(--space-4);
  border-radius: var(--radius); font-size: .95rem;
}
.form__status[data-state="success"] { display: flex; background: rgba(159, 201, 198, .25); border: 1px solid var(--seafoam-dim); }
.form__status[data-state="error"]   { display: flex; background: rgba(179, 38, 30, .08); border: 1px solid rgba(179, 38, 30, .4); }
.form__status svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
/* Full-strength text — this is the confirmation the customer reads to know
   whether their request actually went through. */
.section--navy .form__status p,
.form__status p { margin: 0; color: var(--text); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: var(--text-on-dark-muted); padding-block: var(--space-8) var(--space-6); }
.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); } }
.site-footer h4 { color: var(--cream); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; }
/* Give footer links a proper thumb-sized target on touch devices. */
@media (pointer: coarse) {
  .site-footer li a { display: inline-block; padding-block: 12px; }
  .site-footer ul { gap: 0; }
}
.footer__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer__brand img { width: 52px; height: 52px; border-radius: 50%; }
.footer__brand strong { display: block; color: var(--cream); font-family: Archivo, sans-serif; font-size: 1.1rem; letter-spacing: -.01em; text-transform: none; }
.footer__brand .footer__loc { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.footer__bottom {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(245, 237, 220, .14);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  justify-content: space-between; font-size: .87rem;
}

/* --- Sticky mobile CTA bar ------------------------------------------------ */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(22, 41, 63, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(245, 237, 220, .16);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out);
}
.cta-bar[data-visible="true"] { transform: translateY(0); }
.cta-bar .btn { flex: 1; }
/* Stays up until the header phone takes over at 1100px, so narrow laptops
   don't lose the call button entirely. */
/* Kept in sync with the .header-phone breakpoint above. */
@media (min-width: 1140px) { .cta-bar { display: none; } }
body { padding-bottom: 0; }
@media (max-width: 1139px) { body.has-cta-bar { padding-bottom: 84px; } }

/* --- Scroll reveal --------------------------------------------------------
   Gated behind .js so the page renders fully if JavaScript never runs. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal[data-visible="true"] {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}