/* Those Flipping Kids — single stylesheet. Mobile-first (375px), then 768px, then 1200px. */

/* ---------- Palette (every pair computed, see DECISIONS.md section 4) ----------
   Old money: deep navy + cream, a brass hairline, and hints of dusty and powder blue.

   "Pleasant to the eye" drove a real decision here. Maximum contrast is not the same as
   comfortable contrast — full black on cream measures about 18:1, and at the top of that
   range dark text glares on a light field. Navy on cream is 14.89: more than three times
   the 4.5 floor, and inside the band that stays easy to read for a long stretch. Softer
   AND correct, not softer instead of it.

   The two blues are HINTS. Powder appears on three surfaces, dusty on two, and neither is
   ever the main event. Navy, cream and one brass line still carry the page. */
:root {
  --dark:        #141F32;   /* deep navy. Text, header, footer, primary button. 14.89 on cream */
  --cream:       #F7F3E8;   /* the page itself */
  --white:       #FFFFFF;   /* cards and raised surfaces */
  --powder:      #E2EAF2;   /* the palest hint of blue. Alternating bands, table headers,
                               the progress track. Only 1.10 away from cream, which is the
                               point — you should feel it, not notice it. Navy on it: 13.59 */
  --dusty:       #8CA3BC;   /* the other hint. Secondary text on navy (6.35) and a hover
                               edge. NEVER on cream — see rule 6. */
  --muted:       #5A6474;   /* secondary text on light. Navy-tinted, so it belongs to the
                               palette rather than being a generic grey. 5.40 on cream */
  --line:        #8E7F66;   /* borders on CONTROLS — 3.90 white, 3.52 cream */
  --divider:     #E5DED0;   /* decorative hairlines only — rule 2 */
  --brass:       #A6864C;   /* the old-money flourish. DECORATIVE, ON NAVY ONLY — rule 5.
                               4.82 on the deeper navy, up from 4.22 on the old one. */
  --error:       #7B2D3B;   /* burgundy. Errors only, light surfaces only — rule 1. Says
                               "something is wrong" without the alarm-bell of a bright red,
                               which matters to someone reading this in foreclosure. */
  --dark-lift:   #2C3E58;   /* button hover. Cream on it: 9.78 */

  /* SIX HARD RULES, all measured:

     1. Burgundy is 1.79 against navy. Errors live on light surfaces only; the footer
        disclosure rule is cream for this reason.

     2. --divider is 1.21 against cream. Decorative hairline, nothing else. Anything a
        person aims at — input, select, card edge — uses --line, which clears the 3:1
        WCAG 1.4.11 requires for non-text controls.

     3. The primary button INVERTS on dark. Navy-on-cream normally; cream-on-navy when it
        sits on a navy section, such as the sticky mobile bar.

     4. --muted is 2.76 on navy and unusable there. Use --dusty.

     5. BRASS IS NEVER TEXT ON CREAM — 3.09, fails. No brass tone passes 4.5 on cream and
        still reads on navy; that was checked, not assumed. Darkening it to #7E6337 passes
        on cream (5.08) and only reaches 2.93 on navy. Brass is a rule or a marker on navy.

     6. DUSTY BLUE IS NEVER TEXT ON CREAM OR POWDER — 2.34 and 2.14. It is light enough to
        read on navy and nowhere else. As a hint it belongs on the dark. */

  --wrap: 1120px;
  --radius: 4px;             /* softened, not rounded — rounder reads as toy-like */
  --tap: 44px;               /* minimum tap target, never go below */

  /* ---------- Type ----------
     Garamond, requested 2026-08-22. Still zero network requests: this walks a list of
     fonts already installed on the visitor's machine and uses the first one it finds.
     Windows with Office has real Garamond. Macs do not ship a Garamond, so they land on
     Baskerville or Hoefler Text — both old-style serifs cut from the same tradition, so
     the page reads the same even though the letterforms differ slightly.
     Nothing is downloaded, so text paints on the first frame with no flash of the
     wrong font. */
  --font: Garamond, "EB Garamond", "Adobe Garamond Pro", "Apple Garamond",
          "ITC Garamond", Baskerville, "Baskerville Old Face", "Hoefler Text",
          "Palatino Linotype", Palatino, "Times New Roman", Times, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The type scale hangs off THIS, not off body. Every size in this file is in rem, and
   rem measures against the root element — so setting the base on body (as this file used
   to) left every .85rem label computing against the browser's untouched 16px default and
   landing at 13.6px, well under our own legibility floor.
   A percentage rather than a px value, so a visitor who has raised their default text
   size in the browser still gets the larger text. 118.75% of 16px is 19px. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: 118.75%;
}
body {
  margin: 0;
  font-family: var(--font);
  /* 19px, not 17px. Garamond has a notably small x-height — the lowercase letters are
     short relative to the capitals — so it reads roughly two sizes smaller than a sans
     at the same number. 17px Garamond would look like 15px Helvetica and break our own
     legibility floor for the people most likely to be reading this on a phone. */
  font-size: 1rem;           /* inherits the root scale set above */
  line-height: 1.65;         /* serifs need more air between lines than a sans */
  color: var(--dark);
  background: var(--cream);
  /* Old-style serifs often default to text figures, where 3, 4, 7 and 9 drop below the
     baseline. Fine in a novel, wrong for a phone number or a street address. */
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* Garamond wants to be set large and light. Heavy weights thicken the serifs into mush,
   so headings stay at normal weight and earn their emphasis from size and space instead.
   No negative letter-spacing either — that is a fix for tightly-drawn sans faces and it
   closes up Garamond's open, generous fit, which is the whole reason to use it. */
/* Headings run at REGULAR weight. An old-style serif at 400 and a large size is the
   whole editorial look — the size and the space around it carry the hierarchy, so the
   letterforms never have to shout. Note that most serif families installed on a normal
   machine ship only Regular and Bold, so a 500 or 600 here usually snaps to one or the
   other anyway; asking for 400 gets a predictable result instead of a guess. */
h1, h2, h3 { line-height: 1.15; color: var(--dark); margin: 0 0 .5em; font-weight: 400; }
h1 { font-size: 2.5rem; letter-spacing: -.005em; }
h2 { font-size: 1.75rem; margin-top: 2.6rem; }
h3 { font-size: 1.15rem; font-weight: 600; }
strong, b { font-weight: 600; }   /* 700 was heavy enough to look like a different font */
p  { margin: 0 0 1.1rem; max-width: 68ch; }   /* long serif lines are tiring to read */
a  { color: var(--dark); text-decoration: underline; text-underline-offset: 2px; }

/* Visible focus on everything interactive — keyboard users must always see where they are.
   Two rings, not one: a red ring alone is 2.28:1 against navy, so it would be nearly
   invisible in the header, the nav, the footer and the sticky bar. The inner white ring
   separates the red from whatever is behind it, so the indicator stays visible on navy,
   on white, and on the red CTA itself. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
details:focus-visible, [tabindex]:focus-visible {
  /* Two rings on purpose. The ink ring carries it on beige and on white; on the ink
     header, footer and sticky bar that ring disappears, so the beige ring hugging the
     element is what stays visible. One of the two always contrasts. */
  outline: 3px solid var(--dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--cream);
  border-radius: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--dark); padding: 12px 18px;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  background: var(--dark);
  /* One brass hairline. This is the old-money detail — the thin gold rule on good
     letterhead. 1px, not 3: at 3px it becomes a stripe and starts shouting. Brass on
     navy is 4.22, so the line is clearly visible without being loud. */
  border-bottom: 1px solid var(--brass);
}
.header-bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; flex-wrap: wrap;
}
.logo { margin-right: auto; }   /* pushes everything after it to the right */

/* ---------- Menu button (top left) ----------
   Hidden by default so that with JavaScript off there is no button that does nothing.
   The head script adds html.js, which reveals it and hides the always-open nav. */
.nav-toggle {
  display: none;
  align-items: center; gap: 9px;
  min-height: var(--tap); min-width: var(--tap);
  padding: 8px 12px 8px 10px;
  font: inherit; font-size: 1rem; font-weight: 400;
  color: var(--cream); background: transparent;
  border: 1px solid rgba(247,243,232,.5); border-radius: var(--radius);
  cursor: pointer; order: -1;      /* always first, even if markup order changes */
}
html.js .nav-toggle { display: inline-flex; }
.nav-toggle:hover { background: rgba(247,243,232,.12); border-color: var(--cream); }

/* Three bars drawn in CSS — no image, no icon font, no request. */
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px;
  background: var(--white); border-radius: 1px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { content: ''; position: absolute; top: -6px; }
.nav-toggle-bars::after  { content: ''; position: absolute; top: 6px; }
/* Open state folds the bars into an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* ---------- Nav ----------
   No JavaScript: the nav is simply always open, stacked under the header. Nothing is
   ever unreachable. With JavaScript: collapsed until the button opens it. */
.site-nav { flex-basis: 100%; }
html.js .site-nav { display: none; }
html.js .site-nav.is-open { display: block; }
.site-nav ul {
  list-style: none; margin: 0; padding: 4px 0 10px;
  border-top: 1px solid rgba(255,255,255,.22);
}
.site-nav li + li { border-top: 1px solid rgba(255,255,255,.14); }
.site-nav a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 10px 2px; color: var(--cream); font-weight: 400; text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"]::before {
  content: ''; width: 4px; height: 20px; margin-right: 10px;
  background: var(--brass); border-radius: 2px;   /* brass on navy: 4.22 */
}
.logo {
  color: var(--cream); font-weight: 400; font-size: 1.35rem;
  text-decoration: none; letter-spacing: .005em;
}
.logo { white-space: nowrap; }
/* The subtitle carries all the geography and all the service words, because the brand
   name carries neither (DECISIONS.md section 8). Letterspaced small caps make it read as
   a considered lockup rather than a tagline stuck underneath. */
.logo span {
  display: block; font-size: .62rem; font-weight: 400;
  opacity: .9; letter-spacing: .16em; margin-top: 2px;
}
.header-call {
  color: var(--cream); font-weight: 400; text-decoration: none;
  min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 4px;
  white-space: nowrap; font-size: 1rem;
}
/* Phones: the sticky bottom bar carries "Call Now", so the header does not need the
   number too — that space goes to the menu button instead. */
@media (max-width: 767px) {
  .header-call { display: none; }
  /* The header row is Menu button + logo, and at 375px it has 335px to work with. The
     widest part of the logo is not the name — it is the letterspaced subtitle beneath it.
     Left alone it measures 249px, which pushed the whole lockup onto a second line and
     stole vertical space from the form. Tightened here, not shrunk elsewhere. */
  .logo { font-size: 1rem; }
  .logo span { font-size: .56rem; letter-spacing: .1em; }
}

/* Very narrow phones (iPhone SE and similar, 320px). The word "Menu" no longer fits
   beside the logo lockup, so it becomes screen-reader-only rather than being deleted —
   the button keeps its accessible name, it just stops showing it. */
@media (max-width: 359px) {
  .nav-toggle { padding: 8px 10px; gap: 0; }
  .nav-toggle-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .logo span { font-size: .62rem; }
}

/* ---------- Hero ---------- */
.hero {
  background: var(--dark);
  color: var(--white);
  padding: 32px 0 40px;
}
.hero h1 { color: var(--white); }
.hero .lede { font-size: 1.05rem; color: var(--cream); margin-bottom: 1.5rem; max-width: 34em; }
.hero-call {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--cream); font-weight: 400; margin-top: 4px;
}

/* ---------- Form ---------- */
.lead-form {
  background: var(--white);
  color: var(--dark);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(3,13,11,.08), 0 8px 28px rgba(3,13,11,.06);
}
.lead-form h2 { margin-top: 0; font-size: 1.15rem; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-weight: 500; font-size: 1rem; margin-bottom: 7px; color: var(--dark);
}
.field .hint { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 12px;
  font: inherit;
  font-size: 17px;           /* 16px+ stops iOS zoom-on-focus */
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input:hover, select:hover { border-color: var(--muted); }
.address-input { font-size: 1.12rem; }   /* the single most important field on the site */

/* The one red thing on the page. */
.btn-cta {
  display: block; width: 100%;
  min-height: 56px;
  padding: 15px 22px;
  /* Buttons are the one place a serif needs help. A short line of Garamond at button
     size looks timid, so it gets a size bump and a touch of letter-spacing to give the
     label presence without resorting to bold, which would clog the serifs. */
  font: inherit; font-size: 1.05rem; font-weight: 500; letter-spacing: .03em;
  color: var(--cream); background: var(--dark);
  /* Transparent by default. Red-on-navy is 2.28:1, under the 3:1 non-text minimum,
     so any CTA sitting directly on navy gets .on-navy to draw a visible edge. */
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center; text-decoration: none;
}
.btn-cta:hover { background: var(--dark-lift); }
.btn-cta.on-navy, .sticky-bar .sb-offer { border-color: var(--white); }
/* While sending. NOT cursor:progress — macOS renders that as the spinning beachball,
   which reads as "this thing has crashed" to anyone who has ever used a Mac. The button
   already says "Sending…", which is clearer and calmer. */
.btn-cta[disabled] { opacity: .65; cursor: default; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 11px 20px;
  font: inherit; font-weight: 500; letter-spacing: .03em;
  color: var(--dark); background: var(--white);
  /* 1px, not 2px. A hairline reads as considered; a thick outline reads as a warning. */
  border: 1px solid var(--dark); border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { background: var(--dark); color: var(--cream); }
.form-actions { display: flex; flex-direction: column; gap: 10px; }

/* Steps: hidden ONLY when JS is running. No JS = every field visible at once.
   This keys off html.js, which an inline script in <head> sets before first paint, so
   there is no flash of the full form. The `hidden` ATTRIBUTE must never be used here —
   the browser hides [hidden] regardless of JS, which would break the no-JS fallback. */
.step-meta, .honeypot { display: none; }
html.js .step-meta { display: block; }
html.js .step:not(.is-active) { display: none; }
.step { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.step legend { padding: 0; font-weight: 500; color: var(--dark); font-size: 1.1rem; }
.progress { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
/* HINT 3 of 3. Powder track, navy fill: 13.59 apart, so progress is unmistakable while
   the empty part of the bar carries a trace of blue. */
.progress-bar { display: block; height: 4px; background: var(--powder); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.progress-bar i { display: block; height: 100%; background: var(--dark); transition: width .2s; }
.form-note { font-size: .88rem; color: var(--muted); margin: 10px 0 0; }
.form-error {
  background: #F6EAE8; border-left: 3px solid var(--error);
  padding: 12px 14px; margin-bottom: 14px; color: var(--dark); font-size: .95rem;
}
.field-error { color: var(--error); font-size: .95rem; font-weight: 500; margin-top: 6px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }

/* ---------- Sections ----------
   Whitespace is doing the work that borders used to do. */
section { padding: 52px 0; }
/* HINT 1 of 3. The alternating band is powder rather than white — 1.10 from cream, so
   the page breathes between sections without ever announcing a colour change. */
section.alt { background: var(--powder); }
.steps-list { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps-list li { counter-increment: s; position: relative; padding-left: 52px; margin-bottom: 24px; }
.steps-list li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dark); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-weight: 400; font-size: 1.05rem;
}
.steps-list h3 { margin-bottom: .25em; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; }
/* HINT 2 of 3. */
th { background: var(--powder); color: var(--dark); font-weight: 600; }

.faq details {
  border-bottom: 1px solid var(--divider); padding: 6px 0;
}
.faq summary {
  cursor: pointer; font-weight: 500; color: var(--dark);
  padding: 14px 0; min-height: var(--tap); list-style-position: outside;
}
.faq summary:hover { color: var(--dark-lift); }
.faq details p { margin: 0 0 14px; }

.city-links { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.city-links a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 9px 12px; background: var(--white); border: 1px solid var(--divider);
  border-radius: var(--radius); text-decoration: none; font-weight: 400;
}
.city-links a:hover { border-color: var(--dusty); }   /* dusty, use 2 of 2 */

.updated { font-size: .85rem; color: var(--muted); }
/* Same class, two very different backgrounds. On the ink footer --muted measures 2.78
   and fails outright; this is the only place the dark-surface variant is needed. */
.site-footer .updated { color: var(--dusty); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark); color: var(--cream);
  padding: 44px 0 96px;      /* bottom padding clears the sticky mobile bar */
  font-size: 1rem;           /* was .92rem — the footer carries the NAP and a legal
                                disclosure, neither of which belongs in small type */
}
.site-footer h2 { color: var(--white); font-size: 1.05rem; }
.site-footer a { color: var(--white); }
.site-footer nav ul { list-style: none; padding: 0; margin: 0 0 20px; }
.site-footer nav li { margin-bottom: 4px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* The TREC disclosure. Body size, above the fine print, never buried. */
/* Was a full bordered box. A single left rule says the same thing with less furniture,
   which is the whole point of a clean layout. Size still matches body text — this line
   is a legal-adjacent disclosure and must never be shrunk into fine print. */
.disclosure {
  border-left: 2px solid var(--cream);   /* rule 1: rust is 2.60 on ink, unusable */
  padding: 2px 0 2px 18px; margin: 24px 0; color: var(--white);
  font-size: 1rem;
  max-width: 62ch;
}

/* The footer phone number. It was rendering as a 17px-tall line of text, well under the
   44px tap minimum — hard to hit with a thumb, which is how most people reach this site.
   Every phone link on the page is now a real tap target. */
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"] {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  font-weight: 500;
  word-break: break-word;   /* a long address must never widen the page on a 375px phone */
}
.form-error a[href^="tel:"] {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
}

/* ---------- Sticky mobile bar ---------- */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; gap: 8px; padding: 8px;
  background: var(--dark); border-top: 1px solid var(--brass);
}
.sticky-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: var(--tap); border-radius: var(--radius);
  font-weight: 500; text-decoration: none; font-size: 1rem; letter-spacing: .02em;
}
/* Rule 3: the bar is ink, so the primary button inverts to beige-on-ink here. */
.sticky-bar .sb-offer { background: var(--cream); color: var(--dark); border: 1px solid var(--cream); }
.sticky-bar .sb-call  { background: var(--white); color: var(--dark); }

/* ---------- 768px and up ---------- */
@media (min-width: 768px) {
  /* Bump the root and the whole scale moves with it — headings, labels, hints, all of
     it — instead of only the paragraphs. 125% of 16px is 20px. */
  html { font-size: 125%; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.8rem; }
  .hero { padding: 76px 0 84px; }
  .hero .lede { font-size: 1.22rem; }
  .lead-form { padding: 32px; }
  .form-actions { flex-direction: row; align-items: center; }

  .btn-cta { width: auto; min-width: 260px; }
  .city-links { grid-template-columns: repeat(3, 1fr); }
  section { padding: 76px 0; }
  .site-footer { padding-bottom: 40px; }
  .disclosure { font-size: 1rem; }                /* stay level with body */
  .sticky-bar { display: none; }   /* phones only */
}

/* ---------- 960px and up ----------
   The inline nav waits until here, not 768px. At 768 the logo (196px), the five links
   (356px) and the phone number (161px) add up to more than the row can hold: the header
   wrapped to two lines and the whole page scrolled sideways. Tablets keep the menu
   button, which fits comfortably. */
@media (min-width: 960px) {
  .header-bar { flex-wrap: nowrap; }
  html.js .nav-toggle { display: none; }
  html.js .site-nav, .site-nav { display: block; flex-basis: auto; order: 2; }
  .logo { order: 1; }
  .header-call { order: 3; }
  .site-nav ul { display: flex; gap: 4px; border-top: 0; padding: 0; }
  .site-nav li + li { border-top: 0; }
  .site-nav a { padding: 10px 12px; font-size: .95rem; }
  .site-nav a[aria-current="page"] { position: relative; color: var(--white); }
  .site-nav a[aria-current="page"]::before {
    width: auto; height: 3px; margin: 0; position: absolute; bottom: 6px; left: 12px; right: 12px;
  }
}

/* ---------- 1200px and up ---------- */
@media (min-width: 1200px) {
  .hero .wrap {
    display: grid; grid-template-columns: 1fr 460px;
    gap: 48px; align-items: start;
  }
  .hero-copy { padding-top: 12px; }
  h1 { font-size: 3rem; }
  .steps-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .steps-list li { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- "number copied" strip ---------- */
/* Only ever created by call.js, and only on mouse-driven devices. Sits above the sticky
   bar so it is never hidden behind it. */
.call-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 60; max-width: min(92vw, 460px);
  padding: 12px 18px;
  background: var(--dark); color: var(--cream);
  border: 1px solid var(--dark-lift); border-radius: var(--radius);
  font-size: 1rem; font-weight: 400; text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.call-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Someone who has asked their system to reduce motion gets the message with no slide. */
@media (prefers-reduced-motion: reduce) {
  .call-toast { transition: none; transform: translate(-50%, 0); }
}