/* ======================================================================
   SLCUS GEO -- shared stylesheet for Location.aspx and Locations.aspx.

   SHARED ON PURPOSE. This started inline in Location.aspx; duplicating
   it into the hub would have guaranteed the two pages drift, which is
   exactly what happened on the RCC build where only the area page got
   the brand fix and the hub kept a dark gradient hero for another two
   rounds.

   Deploys to /lacms/Pages/SLCUSA/GEO/geo.css
   ====================================================================== */
/* ==================================================================
   SLCUS GEO -- state and town pages.

   BRAND MEASURED ON THE LIVE SITE, not inherited from SLCUK. The two
   sites look nothing alike: SLCUK's hero is a navy gradient with no
   photograph, SLCUS is a full-bleed photo with a white card. Copying
   the UK design here would be the third "right hexes, wrong site"
   mistake this month.

     navy   #29235C   live h1 colour
     blue   #1F7BC3   h1 accent line, hero bullets
     red    #CF0021   the CTA, as a 35px pill, weight 800, WHITE CAPS
     tints  #E4EEF3 / #EDF3F7   alternating section grounds
     font   Montserrat

   CONTRAST, and it is not optional: #1F7BC3 measures 4.49:1 on white
   and FAILS AA for normal text. Body copy uses --blue-text #1C72B5.
   That one is 5.09:1 on white but only 4.43 on the #E4EEF3 tint, so
   on tinted grounds text goes navy, never blue.
   ================================================================== */
.us{
  --navy:#29235C; --blue:#1F7BC3; --blue-text:#1C72B5; --red:#CF0021;
  --red-dark:#A8001B; --tint:#E4EEF3; --tint2:#EDF3F7;
  --ink:#1a1a1a; --muted:#3A4149; --note:#6B7580; --line:#D7E3EC;
  color:var(--ink);
  font-family:Montserrat,Arial,Helvetica,sans-serif;}
.us *{box-sizing:border-box;}
.us-in{max-width:1180px;margin:0 auto;padding:0 20px;}
.us-sec{padding:52px 0;}
.us-sec.tint{background:var(--tint2);}

/* ---- breadcrumb -------------------------------------------------------
   LIVES INSIDE THE HERO, not above it.

   It was rendering as a sibling BEFORE .us-hero, which put it on the
   page's white background in the gap between the site header and the
   mint band -- an orphaned strip belonging to neither. Moving it inside
   the hero container makes it read as the top line of the hero, which
   is what a breadcrumb is.

   Sizing is deliberately restrained: this is orientation, not
   navigation people came for. It should be findable and ignorable.
   ---------------------------------------------------------------------- */
.us-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;
  font-size:13px;line-height:1.6;margin:0 0 22px;color:var(--muted);}
.us-crumb a{color:var(--blue-text);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .12s ease;}
.us-crumb a:hover{border-bottom-color:currentColor;text-decoration:none;}
/* Chevron rather than a slash: a slash at this size reads as part of the
   word next to it. Marked aria-hidden in the markup so a screen reader
   hears the trail, not the punctuation. */
.us-crumb .sep{color:#9FB3C4;font-size:15px;line-height:1;padding:0 1px;}
.us-crumb .here{color:var(--navy);font-weight:600;}
@media (max-width:560px){
  .us-crumb{font-size:12.5px;margin-bottom:16px;}
}

/* ---- hero ---- */
/* Top padding reduced from 44px: the breadcrumb now sits inside the
   hero and carries its own 22px bottom margin, so the old value
   stacked into ~87px of dead space above the eyebrow. */
.us-hero{background:var(--tint);padding:26px 0 46px;}
.us-eyebrow{font-size:13px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-text);margin:0 0 12px;}
.us-h1{font-size:40px;line-height:1.14;font-weight:800;margin:0 0 14px;
  color:var(--navy);letter-spacing:-.5px;text-wrap:balance;}
.us-h1 em{display:block;font-style:normal;color:var(--blue-text);}
.us-sub{font-size:17.5px;line-height:1.6;max-width:720px;color:var(--muted);
  margin:0 0 24px;text-wrap:pretty;}

/* ---- CTA: mirrors the live site's button exactly ---- */
.us-cta{display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;font-weight:800;font-size:17px;
  letter-spacing:.02em;text-transform:uppercase;padding:17px 34px;
  border-radius:35px;text-decoration:none;border:0;cursor:pointer;
  transition:background .12s ease,transform .12s ease;}
.us-cta:hover{background:var(--red-dark);color:#fff;text-decoration:none;
  transform:translateY(-2px);}
.us-cta-note{font-size:12.5px;color:var(--note);margin:12px 0 0;}

/* ---- stat chips ---- */
.us-chips{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px;}
.us-chip{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;min-width:150px;box-shadow:0 2px 10px rgba(41,35,92,.05);}
.us-chip b{display:block;font-size:25px;font-weight:800;line-height:1.15;
  color:var(--navy);}
.us-chip span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;
  line-height:1.4;}

.us-h2{font-size:30px;line-height:1.2;font-weight:800;margin:0 0 12px;
  color:var(--navy);text-wrap:balance;}
.us-h3{font-size:21px;line-height:1.25;font-weight:800;margin:32px 0 8px;
  color:var(--navy);}
.us-lead{font-size:17px;line-height:1.65;color:var(--muted);max-width:800px;
  margin:0 0 24px;text-wrap:pretty;}
.us-note{font-size:12.5px;line-height:1.6;color:var(--note);margin:14px 0 0;}

/* ---- guide price ---- */
.us-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin:0 0 22px;}
.us-price div{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;}
.us-price b{display:block;font-size:34px;font-weight:800;color:var(--navy);
  line-height:1.1;}
.us-price i{display:block;font-style:normal;font-size:14.5px;font-weight:700;
  color:var(--blue-text);margin:6px 0 8px;}
.us-price p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);}

/* ---- survey ---- */
.us-svy{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:0 0 18px;}
.us-svy div{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px;text-align:center;}
.us-svy b{display:block;font-size:32px;font-weight:800;color:var(--blue-text);
  line-height:1.1;}
.us-svy span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px;
  line-height:1.45;}

/* ---- area links ---- */
.us-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:11px;}
.us-areas a{display:block;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:14px 16px;text-decoration:none;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;}
.us-areas a:hover{border-color:var(--blue);text-decoration:none;
  box-shadow:0 6px 18px rgba(31,123,195,.12);transform:translateY(-2px);}
.us-areas a b{display:block;font-size:15.5px;font-weight:700;color:var(--navy);}
.us-areas a span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;}

/* ---- faq ---- */
.us-faq{border-top:1px solid var(--line);margin-top:8px;}
.us-faq details{border-bottom:1px solid var(--line);padding:16px 0;}
.us-faq summary{cursor:pointer;font-weight:700;font-size:16.5px;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;gap:16px;}
.us-faq summary::-webkit-details-marker{display:none;}
.us-faq summary:after{content:"+";color:var(--blue-text);font-weight:800;}
.us-faq details[open] summary:after{content:"\2212";}
.us-faq p{margin:12px 0 0;font-size:15.5px;line-height:1.7;color:var(--muted);
  max-width:820px;}

/* ---- closing band: navy, so it reads as the end of the page ---- */
.us-end{background:var(--navy);color:#fff;padding:48px 0;}
.us-end h2{color:#fff !important;font-size:29px;font-weight:800;margin:0 0 12px;
  text-wrap:balance;}
.us-end p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.9);
  max-width:660px;margin:0 0 22px;}

@media (max-width:820px){
  .us-sec{padding:38px 0;}
  .us-h1{font-size:30px;}
  .us-h2{font-size:25px;}
}
@media (max-width:560px){
  .us-hero{padding:32px 0 34px;}
  .us-h1{font-size:26px;letter-spacing:-.3px;}
  .us-h2{font-size:22px;}
  .us-sub,.us-lead{font-size:15.5px;}
  .us-cta{width:100%;font-size:15.5px;padding:16px 18px;}
  .us-areas{grid-template-columns:1fr 1fr;gap:9px;}
  .us-chip{min-width:0;flex:1 1 46%;}
  .us-price b{font-size:29px;}
}

/* ======================================================================
   STAT CARDS -- the local proof block.

   Replaces a prose paragraph ("We have handled 183 stairlift price
   requests in Alabama since 2024..."). Prose buries the figures; a
   scanning reader gets nothing from it and neither does an answer
   engine trying to pull a single fact.

   BUILT FOR EXTRACTION, NOT DECORATION:
     - every number is real TEXT in the DOM, never an image or a CSS
       counter, so it can be read, quoted and cited
     - each card is a <dl> pairing one value with one label, so the
       number and the thing it counts are structurally bound together
       rather than merely sitting near each other
     - the label carries the AREA NAME, so a figure lifted out of the
       page in isolation still says what it is about
   ====================================================================== */
.us-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin:0 0 22px;}
.us-stat{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;margin:0;
  box-shadow:0 2px 10px rgba(41,35,92,.05);}
.us-stat dt{margin:0;font-size:40px;line-height:1.05;font-weight:800;
  color:var(--navy);letter-spacing:-1px;}
.us-stat dd{margin:8px 0 0;font-size:14.5px;line-height:1.5;
  color:var(--muted);text-wrap:pretty;}
.us-stat dd b{font-weight:700;color:var(--ink);}
.us-stat .us-stat-note{display:block;margin-top:7px;font-size:12.5px;
  color:var(--note);}
/* Accent bar keeps the cards from reading as a flat table of numbers. */
.us-stat{position:relative;overflow:hidden;}
.us-stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--blue);}
.us-stat.is-national:before{background:var(--red);}

/* A one-line plain-English summary above the cards. Answer engines quote
   a sentence far more readily than they assemble one from a grid. */
.us-summary{font-size:17px;line-height:1.65;color:var(--muted);
  max-width:820px;margin:0 0 22px;text-wrap:pretty;}
.us-summary strong{color:var(--ink);}

@media (max-width:560px){
  .us-stats{grid-template-columns:1fr 1fr;gap:10px;}
  .us-stat{padding:16px 15px 15px;}
  .us-stat dt{font-size:29px;letter-spacing:-.5px;}
  .us-stat dd{font-size:13px;}
}

/* ======================================================================
   BLOCKS PORTED FROM THE LIVE UK PAGE (/stairlifts/southampton).

   Matched: answer box, price-factor cards, ways-to-buy, process steps,
   questions-to-ask, supplier strip, provenance note.
   NOT matched, and deliberately: the UK hero is a navy-to-blue gradient
   with white type. This site is light and photographic. Copying the UK
   hero is the exact "right hexes, wrong site" error already made twice
   this month on ABC and RCC.
   ====================================================================== */

/* ---- ANSWER BOX: the single most liftable thing on the page ----------
   An answer engine wants one self-contained block that answers the
   query outright. This sits directly under the hero, states the figure,
   and needs no surrounding context to make sense. */
.us-answer{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);
  border-radius:12px;padding:24px 26px;margin:0 0 8px;
  box-shadow:0 2px 12px rgba(41,35,92,.06);}
.us-answer h2{font-size:20px;line-height:1.3;font-weight:800;margin:0 0 10px;
  color:var(--navy);}
.us-answer p{margin:0 0 10px;font-size:16px;line-height:1.7;color:var(--muted);
  max-width:82ch;text-wrap:pretty;}
.us-answer p:last-child{margin-bottom:0;}
.us-answer strong{color:var(--ink);}

/* ---- generic card grid used by several ported sections ---- */
.us-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin:0 0 18px;}
.us-card{background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:22px 24px;}
.us-card .us-kicker{display:block;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue-text);
  margin:0 0 8px;}
.us-card h3{font-size:18px;line-height:1.3;font-weight:800;margin:0 0 8px;
  color:var(--navy);}
.us-card p{margin:0;font-size:15px;line-height:1.65;color:var(--muted);
  text-wrap:pretty;}

/* ---- STAIRCASE PROFILE ------------------------------------------------
   Card on the left carrying the real split, photo on the right.
   Ported from the UK page, which is a better block than the two-photo
   pair it replaces: a bar built from this area's own enquiries is
   evidence, whereas two captioned photos are just illustration.

   The bar is TEXT, not an image and not a chart library. The two
   percentages have to survive being read by something that cannot see,
   and a canvas chart is invisible to every one of them.
   ---------------------------------------------------------------------- */
.us-stairs{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;
  align-items:start;margin:0 0 20px;}
.us-stairs-txt{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;}
.us-stairs-txt p{margin:0 0 16px;font-size:16px;line-height:1.65;
  color:var(--muted);text-wrap:pretty;}
.us-stairs-txt p b{color:var(--navy);}

/* the split bar ------------------------------------------------------
   ONLY THE PERCENTAGE GOES INSIDE THE BAR; the words go in a legend
   underneath. Putting "Curved 14%" inside a 14%-wide segment clipped
   the label, and the real data is worse than that -- Pittsburgh is 7%
   curved and Spokane is 0%. A label that only fits for balanced splits
   is a label that breaks on most pages.
   -------------------------------------------------------------------- */
.us-split{display:flex;width:100%;height:36px;border-radius:8px;overflow:hidden;
  margin:0 0 10px;font-size:13px;font-weight:800;color:#fff;}
.us-split span{display:flex;align-items:center;justify-content:center;
  white-space:nowrap;min-width:0;overflow:hidden;}
.us-split .s{background:var(--blue);}
/* Navy, not the CTA red -- a data bar must not compete with the button
   that is the point of the page. */
.us-split .c{background:var(--navy);}

.us-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 16px;
  font-size:13px;color:var(--muted);}
.us-legend span{display:inline-flex;align-items:center;gap:7px;}
.us-legend i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}
.us-legend .ks{background:var(--blue);}
.us-legend .kc{background:var(--navy);}

.us-stairs figure{margin:0;}
.us-stairs img{display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;border-radius:14px;background:var(--tint);
  border:1px solid var(--line);}
.us-stairs figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;
  color:var(--note);}

@media (max-width:820px){
  .us-stairs{grid-template-columns:1fr;}
}

/* ---- numbered process steps ---- */
.us-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin:0 0 18px;counter-reset:s;}
.us-step{background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:22px 22px 20px;}
.us-step b{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:14px;font-weight:800;margin:0 0 12px;}
.us-step h3{font-size:16.5px;font-weight:800;margin:0 0 6px;color:var(--navy);}
.us-step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);}

/* ---- checklist ---- */
.us-ask{background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:8px 26px;margin:0 0 18px;list-style:none;}
.us-ask li{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;
  line-height:1.6;color:var(--ink);position:relative;padding-left:28px;}
.us-ask li:last-child{border-bottom:0;}
.us-ask li:before{content:"?";position:absolute;left:0;top:15px;
  font-weight:800;color:var(--blue);}

/* ---- provenance: where the figures come from ---- */
.us-prov{margin:6px 0 0;}
.us-prov summary{cursor:pointer;font-size:13.5px;font-weight:700;
  color:var(--blue-text);list-style:none;display:inline-flex;align-items:center;
  gap:6px;}
.us-prov summary::-webkit-details-marker{display:none;}
.us-prov summary:after{content:"+";font-weight:800;}
.us-prov[open] summary:after{content:"\2212";}
.us-prov p{margin:10px 0 0;font-size:13.5px;line-height:1.65;color:var(--note);
  max-width:80ch;}

@media (max-width:560px){
  .us-answer{padding:18px 18px;}
  .us-answer h2{font-size:18px;}
  .us-answer p{font-size:15px;}
  .us-grid,.us-steps{grid-template-columns:1fr;}
  .us-ask{padding:4px 18px;}
}