/* =============================================================================
   Ranew's Companies - 2026
   Hand-written static CSS. No framework, no build step.

   Contents
   1.  Design tokens
   2.  Reset & base
   3.  Layout helpers
   4.  Buttons
   5.  Top bar / header / nav
   6.  Hero
   7.  Sections & components
   8.  Footer
   9.  Cookie consent
   10. Responsive
   11. Locations
   12. News, articles and step lists
   13. Request a Quote
   14. Whole-card click targets
   15. Legal pages
   16. Location page openings block
   17. Careers - inverted principles band, ZIP job search
   18. Forms - errors, fine print
   ========================================================================== */

/* -- 1. Design tokens ------------------------------------------------------
   Every colour in the site resolves to one of these. To re-skin the site,
   change these values only.                                                */
:root {
  /* Dark base ramp. --slate-800 is sampled straight out of the logo wordmark
     (#252929) so the dark sections and the logo are the same family. */
  --slate-900: #16191a;
  --slate-800: #252929;
  --slate-700: #33383a;
  --slate-600: #454b4d;

  --steel-100: #f5f5f4;
  --steel-200: #e7e6e4;
  --steel-300: #d0cfcc;
  --steel-500: #86847f;
  --steel-700: #4d4a46;

  /* -------------------------------------------------------------------------
     ACCENT
     --accent is CONTEXTUAL. Inside any dark section it is re-pointed at
     --accent-tint further down, so eyebrows, rules, checkmarks and numerals
     stay legible on charcoal without touching a single line of markup.
     --btn-accent and --band-accent are FIXED and never re-pointed, so buttons
     and the solid accent bands hold their colour on every surface.
     ---------------------------------------------------------------------- */
  --accent:      #5e2627;   /* brand maroon */
  --accent-dark: #47191a;   /* hover / deeper */
  --accent-mid:  #7c3435;   /* borders on dark surfaces */
  --accent-tint: #c76465;   /* the maroon lightened for dark backgrounds */
  --accent-soft: #f6eaea;   /* tinted panel background */

  /* Buttons. Brighter than --accent so CTAs pop off white and charcoal. */
  --btn-accent:       #cc3d3f;
  --btn-accent-hover: #47191a;

  /* Solid full-width bands (the stat strip). Kept separate from --btn-accent
     so the bar and the buttons can be tuned independently. */
  --band-accent: #252929;

  /* The bright red inside the logo mark. Reserved for the logo only - don't
     use it as an interface colour or it will fight the maroon. */
  --logo-red: #eb2131;

  --white: #ffffff;
  --ink:   #1f2223;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: 22px;

  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 3px rgba(31, 34, 35, .09);
  --shadow-md: 0 6px 20px rgba(31, 34, 35, .11);
  --shadow-lg: 0 18px 44px rgba(31, 34, 35, .16);

  --header-h: 88px;
}

/* -- 2. Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  text-transform: uppercase;
  color: var(--slate-800);
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--slate-600); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

address { font-style: normal; }

.muted { color: var(--steel-500); }

/* Small utilities - used instead of inline styles so that every colour and
   shadow reference lives in this file and can never go stale. */
.text-center { text-align: center; }
.stack-md { margin-top: 24px; }
.stack-lg { margin-top: 34px; }
.framed { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.fineprint { font-size: .88rem; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--white);
  padding: 10px 18px;
  z-index: 999;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* -- 3. Layout helpers ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 86px 0; }
.section--tight { padding: 58px 0; }
.section--steel { background: var(--steel-100); }
.section--dark {
  background: var(--slate-800);
  color: var(--steel-200);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--white); }

/* --- Contextual accent on dark surfaces ---------------------------------
   Re-point --accent (and its hover) to the lightened tint inside anything
   with a charcoal background. Everything that draws with var(--accent) -
   .eyebrow, .rule, .checklist ticks, .principles__num, .hero h1 em, link
   hovers - follows automatically. Buttons use --btn-accent and are unaffected. */
.section--dark,
.hero,
.page-hero,
.cta-band,
.principles,
.stat-strip,
.topbar,
.site-footer {
  --accent: var(--accent-tint);
  --accent-dark: #d98283;
}

/* On charcoal, give the maroon button a lifted edge so it doesn't melt in.
   The explicit colour also stops the contextual link rules (e.g. the
   `.site-footer a` colour) from winning on specificity and tinting the label. */
.section--dark .btn--accent,
.hero .btn--accent,
.page-hero .btn--accent,
.cta-band .btn--accent,
.principles .btn--accent,
.site-footer .btn--accent {
  border-color: var(--accent-mid);
  color: var(--white);
}
.section--dark .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.cta-band .btn--ghost,
.principles .btn--ghost,
.site-footer .btn--ghost { color: var(--white); }

.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.principles .btn--ghost:hover,
.site-footer .btn--ghost:hover { color: var(--slate-800); }

/* The stat strip is itself a solid accent band - keep its type pure white. */
.stat-strip { --accent: var(--white); }

.section-head { max-width: 760px; margin-bottom: 46px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .8em;
}
.section--dark .eyebrow { color: var(--accent); }

.lede { font-size: 1.13rem; color: var(--steel-700); }
.section--dark .lede { color: var(--steel-300); }

.rule {
  width: 62px;
  height: 4px;
  background: var(--accent);
  border: 0;
  margin: 0 0 24px;
}
.section-head--center .rule { margin-left: auto; margin-right: auto; }

/* -- 4. Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  text-decoration: none;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

/* Primary. Uses the FIXED brand maroon so it never lightens on dark sections. */
.btn--accent  { background: var(--btn-accent); color: var(--white); border-color: var(--btn-accent); }
.btn--accent:hover { background: var(--btn-accent-hover); border-color: var(--btn-accent-hover); color: var(--white); }

.btn--dark { background: var(--slate-800); color: var(--white); border-color: var(--slate-800); }
.btn--dark:hover { background: var(--slate-600); border-color: var(--slate-600); color: var(--white); }

/* For use on dark/photographic backgrounds only. */
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { background: var(--white); color: var(--slate-800); border-color: var(--white); }

/* Secondary on light backgrounds. Deliberately paired with .btn--dark: same
   charcoal, same weight of border, so the two read as one set. Hover tints
   rather than inverting, which keeps the pair from swapping appearance. */
.btn--outline {
  background: transparent;
  color: var(--slate-800);
  border-color: var(--slate-800);
}
.btn--outline:hover {
  background: var(--steel-200);
  color: var(--slate-800);
  border-color: var(--slate-800);
}

/* Tertiary on light backgrounds: bordered, muted, and NOT underlined - so it
   still reads as a button rather than a hyperlink. */
.btn--subtle {
  background: var(--white);
  color: var(--steel-700);
  border-color: var(--steel-300);
  text-decoration: none;
}
.btn--subtle:hover {
  background: var(--steel-100);
  color: var(--slate-800);
  border-color: var(--steel-500);
  text-decoration: none;
}

.btn--sm { padding: 11px 20px; font-size: .84rem; }
.btn--lg { padding: 18px 38px; font-size: 1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }
.btn-row--spaced { margin-top: 38px; }

.textlink {
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.textlink::after { content: ' \2192'; }

/* -- 5. Top bar / header / nav -------------------------------------------- */
.topbar {
  background: var(--slate-900);
  color: var(--steel-300);
  font-size: .82rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.topbar__note { letter-spacing: .04em; }
.topbar__phone {
  color: var(--white);
  font-weight: 700;
  letter-spacing: .04em;
}
.topbar__phone:hover { color: var(--accent); text-decoration: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--steel-200);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}

.logo { display: block; flex: 0 0 auto; }
.logo img { width: 200px; height: auto; }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav li { margin: 0; }
.primary-nav a {
  display: block;
  padding: 10px 13px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-800);
  border-bottom: 3px solid transparent;
}
.primary-nav a:hover { color: var(--accent-dark); text-decoration: none; }
.primary-nav a.is-current { border-bottom-color: var(--accent); color: var(--accent-dark); }
.primary-nav__cta { margin-left: 12px; }
/* `.primary-nav a` would otherwise out-specify `.btn--accent` and leave this
   button with charcoal text on maroon. State the label colour explicitly. */
.primary-nav__cta a.btn--accent,
.primary-nav__cta a.btn--accent:hover { color: var(--white); border-bottom-width: 2px; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 40px;
  padding: 9px 8px;
  background: none;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--slate-800);
  margin: 4px 0;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -- 6. Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  padding: 96px 0;
  background: var(--slate-900) center/cover no-repeat;
  color: var(--white);
  isolation: isolate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(31, 34, 35, .93) 0%,
    rgba(31, 34, 35, .82) 45%,
    rgba(31, 34, 35, .48) 100%);
}
.hero__inner { max-width: 720px; }
.hero h1 { color: var(--white); margin-bottom: .35em; }
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero__lede {
  font-size: 1.18rem;
  color: var(--steel-200);
  max-width: 600px;
  margin-bottom: 34px;
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.18);
  list-style: none;
  padding-left: 0;
}
.hero__facts li {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-300);
}
.hero__facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}

/* Compact page banner (interior pages) */
.page-hero {
  position: relative;
  padding: 96px 0 78px;
  background: var(--slate-800) center/cover no-repeat;
  color: var(--white);
  isolation: isolate;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(22,25,26,.94) 0%, rgba(22,25,26,.72) 100%);
}
.page-hero h1 { color: var(--white); margin-bottom: .3em; }
.page-hero p { max-width: 640px; color: var(--steel-200); font-size: 1.1rem; }

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-300);
}
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--steel-500); }
.breadcrumb a { color: var(--steel-300); }
.breadcrumb a:hover { color: var(--accent); }

/* -- 7. Sections & components -------------------------------------------- */

/* Generic responsive grid */
.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Three across, but a short trailing row is centred instead of left-aligned.
   Flex rather than grid, because CSS grid cannot centre an incomplete row. */
.grid--3-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.grid--3-centered > * { flex: 0 1 calc((100% - 2 * 26px) / 3); }

/* The flex-basis above is a percentage, so without these it keeps three cards
   per row all the way down to a phone and the text ends up one word wide.
   Two across on a tablet, stacked on a phone. */
@media (max-width: 900px) {
  .grid--3-centered > * { flex: 0 1 calc((100% - 26px) / 2); }
}
@media (max-width: 640px) {
  .grid--3-centered > * { flex: 0 1 100%; }
}

/* Split content + media */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  /* Top-aligned, so two columns of text start their headlines on the same
     line. Centring made the shorter column float down the page. Sections with
     a photo use .split--fill below, which stretches instead. */
  align-items: start;
}
/* The news lead block follows the same rules as every other split. */
.split--wide-text { grid-template-columns: 1.15fr .85fr; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }

/* --- split--fill -------------------------------------------------------
   Default .split vertically centres its columns, which leaves the photo
   floating in the middle. --fill instead stretches both columns so the image
   starts level with the top of the text and runs to the bottom of it. The
   image crops rather than distorts. */
.split--fill { align-items: stretch; }
.split--fill .split__media { display: flex; }
.split--fill .split__media img {
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Stat strip */
.stat-strip {
  background: var(--band-accent);
  color: var(--white);
  padding: 40px 0;
}
.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  text-align: center;
}
.stat-strip__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
}
.stat-strip__item span {
  display: block;
  margin-top: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .92;
}

/* Service card */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--steel-300); }
.card__media { position: relative; aspect-ratio: 16 / 10; background: var(--steel-200); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .45em; }
.card__body p { color: var(--steel-700); font-size: .97rem; }
.card__foot { margin-top: auto; padding-top: 18px; }

/* Inverted card - a dark "ask us" panel that sits in a grid of white cards. */
.card--invert {
  background: var(--slate-800);
  border-color: var(--slate-800);
  --accent: var(--accent-tint);
}
.card--invert h3 { color: var(--white); }
.card--invert p  { color: var(--steel-300); }
.card--invert .btn--accent { border-color: var(--accent-mid); color: var(--white); }

/* Tile (locations style) */
.tile {
  position: relative;
  display: block;
  min-height: 250px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--slate-800) center/cover no-repeat;
  color: var(--white);
  isolation: isolate;
}
.tile::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(22,25,26,.92) 12%, rgba(22,25,26,.25) 100%);
  transition: background .2s ease;
}
.tile:hover { text-decoration: none; }
.tile:hover::after { background: linear-gradient(to top, rgba(22,25,26,.95) 20%, rgba(94,38,39,.55) 100%); }
.tile__body { position: absolute; inset: auto 0 0 0; padding: 24px; }
.tile__body h3 { color: var(--white); margin-bottom: .25em; font-size: 1.35rem; }
.tile__body p { font-size: .85rem; color: var(--steel-300); margin: 0; }

/* Feature (icon-free, numbered/ruled) */
.feature { border-top: 3px solid var(--accent); padding-top: 22px; }
.feature h3 { font-size: 1.2rem; margin-bottom: .4em; }
.feature p { color: var(--steel-700); font-size: .97rem; margin: 0; }
.section--dark .feature p { color: var(--steel-300); }

/* Principles - full-width 3 tile band */
.principles { background: var(--slate-800); color: var(--white); }
.principles h2 { color: var(--white); }
.principles .lede { color: var(--steel-300); }
.principles__head { padding-top: 74px; }
.principles__tail { height: 24px; }
.principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.principles__item {
  padding: 62px 42px;
  border-left: 1px solid rgba(255,255,255,.13);
  position: relative;
}
.principles__item:first-child { border-left: 0; }
.principles__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 16px;
}
.principles__item h3 { color: var(--white); font-size: 1.5rem; margin-bottom: .5em; }
.principles__item p { color: var(--steel-300); font-size: .98rem; margin: 0; }

/* Callout / CTA band */
.cta-band {
  background: var(--slate-900) center/cover no-repeat;
  color: var(--white);
  padding: 74px 0;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(22,25,26,.88);
}
.cta-band h2 { color: var(--white); }
.cta-band p { max-width: 620px; margin: 0 auto 30px; color: var(--steel-200); font-size: 1.1rem; }
.cta-band .btn-row { justify-content: center; }

/* Light CTA variant */
.cta-band--light,
.cta-band[style*="background-image:none"] {
  background: var(--white) !important;
  color: var(--slate-800);
}
.cta-band--light::after,
.cta-band[style*="background-image:none"]::after { display: none; }
.cta-band--light h2,
.cta-band[style*="background-image:none"] h2 { color: var(--slate-800); }
.cta-band--light p,
.cta-band[style*="background-image:none"] p { color: var(--steel-700); }

/* Cert cards */
.cert {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px;
}
.cert__thumb { flex: 0 0 96px; }
.cert__thumb img { border: 1px solid var(--steel-200); border-radius: var(--radius); }
.cert h3 { font-size: 1.15rem; margin-bottom: .35em; }
.cert p { font-size: .95rem; color: var(--steel-700); margin-bottom: .7em; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 1rem;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 14px; height: 8px;
  border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg);
}

/* Pull quote */
.pullquote {
  margin: 0;
  padding: 34px 38px;
  background: var(--accent-soft);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  text-transform: none;
  color: var(--slate-800);
  margin: 0 0 .5em;
}
.pullquote cite {
  font-style: normal;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-700);
}

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--steel-300); }
.timeline li { position: relative; padding: 0 0 32px 34px; margin: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -9px; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline h3 { font-size: 1.1rem; margin-bottom: .3em; }
.timeline p { font-size: .97rem; color: var(--steel-700); margin: 0; }
.timeline__year {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-dark);
  margin-bottom: 4px;
}

/* Logo row */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 34px 54px;
}
.logo-row img { max-height: 62px; width: auto; filter: grayscale(1); opacity: .68; transition: filter .2s, opacity .2s; }
.logo-row img:hover { filter: none; opacity: 1; }

/* -- 8. Footer ----------------------------------------------------------- */
.site-footer { background: var(--slate-900); color: var(--steel-300); font-size: .95rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-top: 70px;
  padding-bottom: 56px;
}
.site-footer h2 {
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: .1em;
  margin-bottom: 1em;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55em; }
.site-footer a { color: var(--steel-300); }
.site-footer a:hover { color: var(--accent); text-decoration: none; }
.site-footer__brand img { margin-bottom: 22px; max-width: 210px; }
.site-footer__brand p { font-size: .95rem; max-width: 34ch; }
.site-footer__iso {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.site-footer__contact address { margin-bottom: 1em; }
.site-footer__contact .btn { margin-top: 8px; }

.site-footer__bar { border-top: 1px solid rgba(255,255,255,.11); font-size: .84rem; }
.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.site-footer__bar p { margin: 0; }
.site-footer__bar ul { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer__bar li { margin: 0; }

/* -- 9. Cookie consent --------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 900;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 26px;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
  justify-content: space-between;
}
.cookie-banner__text { flex: 1 1 420px; }
.cookie-banner h2 { font-size: 1.15rem; margin-bottom: .3em; }
.cookie-banner p { font-size: .9rem; color: var(--steel-700); margin: 0; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cookie-banner__manage {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--steel-200);
}
.cookie-banner__manage[hidden] { display: none; }
.cookie-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: .9rem;
  color: var(--steel-700);
}
.cookie-opt input { margin-top: .35em; width: 18px; height: 18px; accent-color: var(--accent); }

/* -- 10. Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .primary-nav a { padding: 10px 9px; font-size: .82rem; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }

  .nav-toggle { display: block; }

  .primary-nav {
    position: fixed;
    inset: calc(var(--header-h) + 38px) 0 0 0;
    background: var(--white);
    border-top: 1px solid var(--steel-200);
    padding: 18px var(--gutter) 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    visibility: hidden;
  }
  .primary-nav.is-open { transform: translateX(0); visibility: visible; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a {
    padding: 16px 4px;
    font-size: 1rem;
    border-bottom: 1px solid var(--steel-200);
  }
  .primary-nav a.is-current { border-bottom-color: var(--accent); }
  .primary-nav__cta { margin: 20px 0 0; }
  .primary-nav__cta a { display: block; text-align: center; padding: 15px; font-size: .95rem; }

  body.nav-open { overflow: hidden; }

  .split, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split { gap: 38px; }
  .split--flip .split__media { order: -1; }

  .stat-strip__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  .principles__grid { grid-template-columns: 1fr; }
  .principles__item { padding: 40px var(--gutter); border-left: 0; border-top: 1px solid rgba(255,255,255,.13); }
  .principles__item:first-child { border-top: 0; }

  .hero { min-height: 520px; padding: 72px 0; }
  .section { padding: 62px 0; }
  .page-hero { padding: 62px 0 54px; }

  .cert { flex-direction: column; gap: 16px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar__note { display: none; }
  .topbar__inner { justify-content: flex-end; }
  .logo img { width: 162px; }
  .hero__facts { gap: 20px 26px; }
  .hero__facts strong { font-size: 1.6rem; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 18px; }
  .cookie-banner__actions .btn { flex: 1 1 auto; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 200px; }
  .pullquote { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Print */
@media print {
  .topbar, .site-header, .cookie-banner, .cta-band, .site-footer__bar ul { display: none; }
  .hero, .page-hero { background: none; color: #000; }
  .hero::after, .page-hero::after { display: none; }
}

/* =============================================================================
   11. Locations
   ========================================================================== */

/* Status flag (e.g. "Opening Q3 2026") */
.loc-flag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  background: var(--btn-accent);
  color: var(--white);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.tile__flag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  background: var(--btn-accent);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius);
}

/* Two-column location layout: detail left, contact form top right */
.loc-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 54px;
  align-items: start;
}

/* Capability list */
.loc-services {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.loc-services li { margin: 0; }
/* The whole box is the link, not just the label. */
.loc-services a {
  display: block;
  padding: 9px 18px;
  background: var(--steel-100);
  border: 1px solid var(--steel-200);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: .93rem;
  font-weight: 600;
  color: var(--slate-800);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.loc-services a:hover {
  background: var(--slate-800);
  border-color: var(--slate-800);
  border-left-color: var(--accent);
  color: var(--white);
  text-decoration: none;
}

/* Address / phone / plant contact block */
/* Contact details stack in the left column; the map fills the right. */
.loc-facts {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--steel-200);
  align-items: start;
}
/* Phone / address / plant contact side by side across one row. */
.loc-facts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.loc-fact--contact a { word-break: normal; overflow-wrap: anywhere; }
.loc-fact h4 {
  font-size: .84rem;
  letter-spacing: .12em;
  color: var(--steel-500);
  margin-bottom: .9em;
}
.loc-fact h3 {
  font-size: .84rem;
  letter-spacing: .12em;
  color: var(--steel-500);
  margin-bottom: .7em;
}
.loc-fact p, .loc-fact address { font-size: .97rem; margin-bottom: .5em; }
.loc-fact--contact strong { color: var(--slate-800); }

/* Contact form card */
.loc-form-card {
  background: var(--steel-100);
  border: 1px solid var(--steel-200);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 30px 28px 32px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.loc-form-card h2 { font-size: 1.5rem; margin-bottom: .4em; }
.loc-form-card__note { font-size: .9rem; color: var(--steel-700); margin-bottom: 22px; }

.field { margin: 0 0 16px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-700);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--accent); outline-offset: 0; }
.field textarea { resize: vertical; min-height: 110px; }
/* Honeypot - hidden from people, still submitted by bots. */
.field--hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Map */
.loc-map {
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--shadow-sm);
}
.loc-map iframe { display: block; width: 100%; }

/* Jobs feed wrapper - the included markup comes from ranewsjobs.com */
.loc-jobs { font-size: .98rem; }

/* Quick links to the other plants */
.loc-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.loc-chips li { margin: 0; }
.loc-chips a {
  display: block;
  padding: 9px 17px;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--slate-800);
}
.loc-chips a:hover {
  background: var(--slate-800);
  border-color: var(--slate-800);
  color: var(--white);
  text-decoration: none;
}

/* State-grouped directory */
.loc-state h3 {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--accent);
}
.loc-list { list-style: none; padding: 0; margin: 0; }
.loc-list li {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--steel-200);
}
.loc-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.loc-list > li > a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--slate-800);
}
.loc-list > li > a:hover { color: var(--accent-dark); text-decoration: none; }
.loc-list__addr,
.loc-list__meta { display: block; font-size: .9rem; color: var(--steel-700); }
.loc-list__meta { margin-top: 4px; color: var(--steel-500); }

@media (max-width: 900px) {
  .loc-layout { grid-template-columns: 1fr; gap: 38px; }
  .loc-form-card { position: static; }
  .loc-facts { grid-template-columns: 1fr; gap: 22px; }
}

/* =============================================================================
   12. News, articles and step lists
   ========================================================================== */

/* Date line on a card */
.card__date {
  display: block;
  margin-bottom: 8px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Article banner - no photo behind it, the photo runs in the body instead */
/* Flat banner: solid colour, no photo, no gradient overlay. */
.page-hero--flat { background: var(--slate-900); }
.page-hero--flat::after { display: none; }
/* Short banner for pages whose header carries only a title. */
.page-hero--compact { padding: 52px 0 40px; }
.page-hero--compact h1 { margin-bottom: 0; }

.page-hero--article { background: var(--slate-900); padding-bottom: 62px; }
/* Headline runs the full width of the container rather than wrapping early. */
.page-hero--article h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); max-width: none; }
/* Date sits under the headline in the article banner. */
.page-hero--article .page-hero__date {
  display: block;
  margin-top: 14px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* News landing lead story */
.news-lead__date {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: 1.2em;
}

/* Long-form article body */
/* Left-aligned rather than centred: the body starts level with the headline
   above it, which reads as a document instead of a floating column. */
.prose { max-width: 46rem; margin: 0; }
.prose__figure { margin: 0 0 34px; }
/* Logos: contained in a light box so they don't stretch. */
.prose__figure img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  object-position: left center;
  border-radius: var(--radius-lg);
  background: var(--steel-100);
  padding: 18px;
  border: 1px solid var(--steel-200);
}
/* Real press photos: fill the column, no padded box. */
.prose__figure--photo img {
  object-fit: cover;
  object-position: center;
  max-height: 460px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: var(--shadow-md);
}
.prose p { font-size: 1.06rem; line-height: 1.72; }
.prose__lede {
  font-family: var(--font-body);
  font-size: 1.24rem !important;
  font-weight: 500;
  color: var(--slate-800);
  padding-left: 22px;
  border-left: 4px solid var(--accent);
  margin-bottom: 1.6em;
}
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose__byline {
  margin-top: 2.4em;
  padding-top: 20px;
  border-top: 1px solid var(--steel-200);
  font-size: .88rem !important;
  color: var(--steel-500);
}

/* Numbered process / instruction lists */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li {
  position: relative;
  counter-increment: step;
  padding: 0 0 24px 58px;
  margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 26px;
  bottom: 8px;
  width: 1px;
  background: var(--steel-300);
}
.steps h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  margin-bottom: .35em;
  color: var(--slate-800);
}
.steps p { font-size: .98rem; color: var(--steel-700); margin: 0; }
.section--dark .steps h4 { color: var(--white); }
.section--dark .steps p { color: var(--steel-300); }

@media (max-width: 640px) {
  .prose__lede { font-size: 1.12rem !important; padding-left: 16px; }
  .steps li { padding-left: 46px; }
  .steps li::before { font-size: 1.3rem; }
  .steps li:not(:last-child)::after { left: 11px; }
}

/* =============================================================================
   13. Request a Quote - hosted RFQ iframe
   ========================================================================== */

/* Seamless: no border, no shadow, no rounding. The hosted form should read as
   part of the page rather than as an embed. */
.rfq-frame {
  background: transparent;
  line-height: 0;
  /* The hosted form renders its own fixed-width layout hard against the left
     edge of whatever box it is given, so a wide iframe leaves it looking
     off-centre. Sizing the iframe to the form's real width and centring that
     puts the form itself in the middle of the page. */
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.rfq-frame iframe {
  display: block;
  width: 100%;
  height: 1500px;
  border: 0;
  background: transparent;
}
.rfq-fallback { margin-top: 18px; }

/* =============================================================================
   14. Whole-card click targets
   -----------------------------------------------------------------------------
   Any .card containing a link in its .card__foot becomes clickable across its
   whole surface. Done with a stretched pseudo-element rather than wrapping the
   card in an <a>, so the real link stays the accessible, focusable target and
   no invalid nested anchors are created.
   ========================================================================== */
.card { position: relative; }
.card__foot a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Keep the hover lift and give the whole surface a pointer cursor. */
.card:has(.card__foot a) { cursor: pointer; }
.card:has(.card__foot a):hover .textlink { color: var(--accent-dark); }
/* Any genuinely separate link inside a card must sit above the stretched layer. */
.card__body a:not(.card__foot a) { position: relative; z-index: 2; }

/* =============================================================================
   15. Legal pages (Privacy, Terms)
   ========================================================================== */
.legal { max-width: 50rem; }
.legal h2 {
  font-size: 1.5rem;
  margin-top: 2.2em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--steel-200);
}
.legal h2:first-of-type { margin-top: 1.2em; }
.legal ul { margin: 0 0 1.4em; padding-left: 1.3em; }
.legal li { margin-bottom: .6em; font-size: 1rem; }
.legal p { font-size: 1.02rem; }
.legal strong { color: var(--slate-800); }

/* Press release extras: city dateline and pulled quote inside .prose */
.prose__dateline {
  font-size: .8rem !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2em;
}
.prose__quote {
  margin: 1.8em 0;
  padding: 26px 30px;
  background: var(--accent-soft);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
}
.prose__quote p { margin: 0; font-size: 1.06rem; }

/* =============================================================================
   16. Location page - openings block, nearby plants, divider
   ========================================================================== */

/* Full-width rule separating the contact block from the openings block. */
.loc-divider {
  width: 100%;
  height: 1px;
  background: var(--steel-300);
  border: 0;
  margin: 0 0 54px;
}

/* This plant's openings on the left, nearby plants (or a photo) on the right. */
.loc-jobs-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 54px;
  align-items: start;
}

/* Nearby plants, one per row, whole pill clickable. */
.loc-nearby {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.loc-nearby li { margin: 0 0 10px; }
.loc-nearby a {
  display: block;
  padding: 12px 20px;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--slate-800);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.loc-nearby a:hover {
  background: var(--slate-800);
  border-color: var(--slate-800);
  color: var(--white);
  text-decoration: none;
}

/* Shown instead of the openings panel when no plant sits inside the radius. */
.loc-aside-photo { margin: 0; }
.loc-aside-photo img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (max-width: 900px) {
  .loc-jobs-layout { grid-template-columns: 1fr; gap: 40px; }
  .loc-divider { margin-bottom: 38px; }
  .loc-aside-photo img { min-height: 220px; }
}

/* Small inline map inside the contact column. */
.loc-map--inline { border-radius: var(--radius); }
.loc-map--inline iframe { height: 230px; }

/* Full-width map under the contact row. The gap above the heading is what
   keeps it from crowding the phone/address line. */
.loc-directions { margin-top: 34px; }
.loc-directions h4 {
  font-size: .84rem;
  letter-spacing: .12em;
  color: var(--steel-500);
  margin-bottom: .9em;
}

/* Flush section edges - used on the location pages so the rule between the
   contact block and the openings block sits an equal distance from both. */
.section--flush-b { padding-bottom: 48px; }
.section--flush-t { padding-top: 0; }
.section--flush-t .loc-divider { margin: 0 0 48px; }

@media (max-width: 900px) {
  .loc-facts { grid-template-columns: 1fr; gap: 28px; }
  .loc-facts--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .loc-map--inline iframe { height: 210px; }
}

@media (max-width: 600px) {
  .loc-facts--row { grid-template-columns: 1fr; gap: 20px; }
}


/* =============================================================================
   17. Careers - inverted principles band, ZIP job search
   ========================================================================== */

/* The careers version of the principles band is the same charcoal band as the
   home page - the only difference is that its three columns are held inside
   the page margins instead of running edge to edge. Zeroing the outer padding
   keeps the first and last column's type flush with the rest of the page. */
.principles--boxed .principles__grid { border-top: 1px solid rgba(255,255,255,.13); }
.principles--boxed .principles__item { padding: 46px 42px; }
.principles--boxed .principles__item:first-child { padding-left: 0; }
.principles--boxed .principles__item:last-child { padding-right: 0; }

/* On a phone the boxed grid is one column inside .wrap, which already supplies
   the side margin - so the items need no side padding of their own. Without
   this, the 42px above wins over the mobile rule further up the file and
   indents items 02 and 03. */
@media (max-width: 900px) {
  .principles--boxed .principles__item { padding: 40px 0; }
}

/* ZIP search - small text field with a same-height button beside it. */
.zip-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.zip-form__label {
  flex: 0 0 100%;
  font-family: var(--font-display);
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: 2px;
}
.zip-form__input {
  width: 150px;
  height: 46px;
  padding: 0 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--slate-800);
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
}
.zip-form__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.zip-form__submit {
  height: 46px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
}

.zip-msg { font-size: 1.05rem; color: var(--steel-700); margin: 0; }

.zip-result h3 {
  font-size: 1.35rem;
  margin-bottom: .15em;
}
.zip-result__dist {
  font-size: .88rem;
  color: var(--steel-500);
  margin-bottom: 1em;
}
.zip-result .loc-jobs { font-size: .95rem; }
.zip-result__more { margin: 14px 0 0; font-size: .92rem; }

@media (max-width: 600px) {
  .zip-form__input { width: 130px; }
}

/* =============================================================================
   18. Forms - errors, fine print
   ========================================================================== */

.form-errors {
  background: #fdf1f1;
  border: 1px solid #e8b9b9;
  border-left: 4px solid var(--btn-accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.form-errors p {
  margin: 0 0 .4em;
  font-size: .95rem;
  color: #7a2426;
}
.form-errors p:last-child { margin-bottom: 0; }

.form-fineprint {
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--steel-500);
}
.form-fineprint a { color: var(--steel-700); text-decoration: underline; }

.prose--narrow { max-width: 720px; }