/* =========================================================================
   SW Michigan Roofing, plain CSS. No build step: edit and upload.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* Minimal reset (what the Tailwind version got from its preflight) */
[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
summary { cursor: pointer; }
/* =========================================================================
   SW Michigan Roofing site styles
   Brand: Great Lakes Classic. Tokens mirror brand/brand-tokens.css.
   Design idea: sections and photos use the same asymmetric gable peak as the
   logo. Navy carries the structure, orange is reserved for calls to action.
   No text on this page is smaller than 1.0625rem.
   ========================================================================= */

:root {
  --navy: #0b2a4a;
  --navy-dark: #081e35;
  --navy-light: #324c67;
  --orange: #c94a0a;
  --orange-dark: #ad4009;
  --orange-light: #cf6027;
  --orange-tint: #f9e9e2;
  --blue: #3e7cb1;
  --ink: #0f1b2d;
  --paper: #f6f8fb;
  --mist: #e6edf5;
  --muted: #43526a;
  --ridge: clamp(2rem, 6vw, 5.5rem);
  --pad-y: clamp(3.5rem, 7vw, 6rem);
  --font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --danger: #b3261e;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .s-media video { display: none; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

img { max-width: 100%; }

/* ------------------------------------------------------------- headings
   Every heading balances its lines, so a heading that needs two lines splits
   them evenly instead of leaving one word hanging. Headings mark preferred
   break points (see phrased() in app/lib/core.php); when the column is wide enough
   each phrase stays on one line, so breaks land where the sentence reads well.
   Heading sizes follow the width of the column they sit in (cqi units), not the
   window, so a narrow column never gets a five line headline. */
h1, h2, h3, .acc-label { text-wrap: balance; }
p, li, blockquote, address { text-wrap: pretty; }
.s-phrase { display: inline; }

.s-wrap, .s-hero-copy, .s-quote-card, .s-card-body, .s-benefit, .s-step, .s-more,
.s-panel, .s-crew-copy, .s-thanks, .s-split > div, .s-weather-grid > div,
.s-final-grid > div, .s-foot-areas {
  container-type: inline-size;
}

/* Planned breaks apply once a column is wide enough for the longest phrase. In
   narrower columns phrases flow and balancing picks even lines instead. */
@container (min-width: 34rem) {
  .s-phrase { display: inline-block; }
}

/* The hero is sized from its column so its longest phrase ("Southwest Michigan",
   about 10.9x the font size wide) always fits, so its planned breaks always hold. */
.s-hero h1 .s-phrase { display: inline-block; }

.s-skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--navy);
  padding: 1rem 1.5rem;
  font-weight: 700;
}
.s-skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
}

.s-wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.s-narrow { max-width: 58rem; }
.s-center { text-align: center; margin: 3rem 0 0; }

/* ----------------------------------------------------------------- buttons */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.85rem 1.6rem;
  border: 3px solid transparent;
  border-radius: 0.5rem;
  font: 800 1.15rem/1.15 var(--font-head);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.s-btn-lg { min-height: 4rem; padding: 1rem 2rem; font-size: 1.2rem; }
.s-btn-block { display: flex; width: 100%; }
.s-btn-orange { background: var(--orange); color: #fff; }
.s-btn-orange:hover { background: var(--orange-dark); }
/* "Get My Free Estimate" buttons. White text on this red is 5.6:1. */
.s-btn-red { background: #c62828; color: #fff; }
.s-btn-red:hover { background: #a51f1f; }
.s-btn-navy { background: var(--navy); color: #fff; }
.s-btn-navy:hover { background: var(--navy-light); }
.s-btn-outline-light { border-color: #fff; color: #fff; background: transparent; }
.s-btn-outline-light:hover { background: rgba(255, 255, 255, 0.16); }

/* ------------------------------------------------------------------ header */
.s-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 0 var(--mist);
}
.s-header-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.75rem;
}
.s-logo { display: block; flex: none; }
.s-logo img { display: block; height: 2.9rem; width: auto; }
.s-nav { display: none; margin-left: auto; gap: 1.75rem; }
.s-nav a {
  color: var(--navy);
  font: 700 1.15rem/1 var(--font-head);
  text-decoration: none;
  padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
}
.s-nav a:hover { border-bottom-color: var(--orange); }
.s-header-cta { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.s-nav + .s-header-cta { margin-left: 0; }
.s-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--navy);
  font: 800 1.25rem/1 var(--font-head);
  text-decoration: none;
}
.s-phone-text { display: none; }
.s-phone svg { width: 1.75rem; height: 1.75rem; }

.s-nav a, .s-phone, .s-header .s-btn { white-space: nowrap; }
@media (min-width: 66rem) { .s-nav { display: flex; } }
@media (min-width: 78rem) { .s-phone-text { display: inline; } }
@media (max-width: 39.99rem) {
  /* The fixed bottom bar already has Call and Free Estimate buttons on phones */
  .s-header .s-btn { display: none; }
  .s-logo img { height: 2.5rem; }
  .s-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.5rem;
    background: var(--navy);
    color: #fff;
  }
}

/* ------------------------------------------------------------------- media */
.s-media { margin: 0; position: relative; overflow: hidden; background: var(--mist); }
.s-media img, .s-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-fill { position: absolute; inset: 0; aspect-ratio: auto; }
.s-video { background-size: cover; background-position: center; }

.s-ph {
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
  color: var(--navy);
  background:
    repeating-linear-gradient(135deg, rgba(11, 42, 74, 0.07) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, #dbe6f1, #c3d3e5);
}
.s-ph-body { display: grid; justify-items: center; gap: 0.6rem; max-width: 28rem; }
.s-ph-label { margin: 0; font: 700 1.125rem/1.35 var(--font-head); }

.s-fill.s-ph {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, #0f3a66, #081e35);
}
.s-fill .s-ph-body {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  justify-items: end;
  text-align: right;
  max-width: 24rem;
}

/* The same asymmetric peak as the logo */
.s-frame-peak { clip-path: polygon(0 12%, 38% 0, 100% 7%, 100% 100%, 0 100%); }
.s-frame-peak-r { clip-path: polygon(0 7%, 62% 0, 100% 12%, 100% 100%, 0 100%); }

/* Add ?prompts=1 to the URL to see the AI prompt on every placeholder */
.s-prompts [data-image-prompt] { outline: 4px dashed var(--orange); outline-offset: -4px; }
.s-prompts [data-image-prompt]::after {
  content: "IMAGE PROMPT: " attr(data-image-prompt);
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: auto;
  padding: 1rem;
  background: rgba(8, 30, 53, 0.96);
  color: #fff;
  font: 600 1.0625rem/1.5 var(--font-body);
  text-align: left;
  white-space: pre-wrap;
}
.s-prompts [data-video-prompt]::after {
  content: "IMAGE PROMPT: " attr(data-image-prompt) "\A\A VIDEO PROMPT: " attr(data-video-prompt);
}
.s-prompts .s-fill[data-image-prompt] { z-index: 45; }

/* ---------------------------------------------------------------- sections */
.s-sec { position: relative; padding: var(--pad-y) 0 calc(var(--pad-y) + var(--ridge)); }
.s-sec > .s-wrap { position: relative; z-index: 2; }
.s-ridge {
  margin-top: calc(var(--ridge) * -1);
  padding-top: calc(var(--ridge) + clamp(3rem, 6vw, 5rem));
  clip-path: polygon(0 var(--ridge), 38% 0, 100% calc(var(--ridge) * 0.55), 100% 100%, 0 100%);
}
.s-white { background: #fff; }
.s-paper { background: var(--paper); }
.s-navy { background: var(--navy); color: #fff; }

.s-h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.85rem, 5.4cqi, 3.1rem);
  color: var(--navy);
}
.s-navy .s-h2 { color: #fff; }
.s-h3 { margin: 2.25rem 0 0.75rem; font-size: clamp(1.45rem, 4.6cqi, 1.9rem); }
.s-intro { max-width: 46rem; margin: 0 0 2rem; font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.55; }

.s-grid-3 {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.s-split {
  display: grid;
  gap: 3rem;
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
@media (max-width: 56rem) {
  .s-split, .s-weather-grid, .s-final-grid, .s-hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ------------------------------------------------------------ check lists */
.s-checks { margin: 0 0 1.75rem; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.s-checks li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1.3rem; line-height: 1.4; font-weight: 600; }
.s-check-icon { flex: none; width: 1.9rem; height: 1.9rem; margin-top: 0.05rem; color: var(--orange); }
.s-checks-light .s-check-icon { color: var(--orange-light); }

/* -------------------------------------------------------------------- hero */
.s-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  color: #fff;
  background: var(--navy-dark);
}
.s-hero-media { z-index: -2; }
.s-hero-media video { object-position: 65% center; }
.s-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 30, 53, 0.93) 0%, rgba(8, 30, 53, 0.72) 45%, rgba(8, 30, 53, 0.3) 100%);
}
.s-hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.s-hero h1 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 8.9cqi, 4.1rem); line-height: 1.06; color: #fff; }
.s-lead { max-width: 37rem; margin: 0 0 1.75rem; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.5; }
.s-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

.s-quote-card {
  padding: 1.75rem;
  color: var(--ink);
  background: #fff;
  border-top: 8px solid var(--orange);
  border-radius: 0.5rem;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
}
.s-card-title { margin: 0 0 1.1rem; font-size: clamp(1.4rem, 7cqi, 1.75rem); line-height: 1.15; color: var(--navy); }

/* ------------------------------------------------------------------- forms */
.s-form { display: grid; gap: 1rem; }
.s-form-note { margin: 0; font-size: 1.125rem; text-align: center; color: var(--muted); }
.s-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.s-thanks { display: grid; justify-items: center; gap: 0.75rem; padding: 1rem 0; text-align: center; }
.s-thanks h3 { margin: 0; font-size: 1.6rem; color: var(--navy); }
.s-thanks p { margin: 0; font-size: 1.2rem; }
.s-link-strong { font-weight: 800; color: var(--navy); }

/* --------------------------------------------------------------- trust bar */
.s-trust { background: var(--navy-dark); color: #fff; padding: 1.75rem 0 calc(1.75rem + var(--ridge)); }
.s-trust-list {
  display: grid;
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 36rem) { .s-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 66rem) { .s-trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s-trust-list li { display: flex; align-items: center; gap: 0.9rem; font: 700 1.2rem/1.25 var(--font-head); }
.s-trust-list svg { flex: none; color: var(--orange-light); }

/* ------------------------------------------------------------------- cards */
.s-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--mist);
  border-radius: 0.5rem;
}
/* House shaped cards: the card itself is cut to the logo's asymmetric peak and the
   shell traces that exact outline with stacked drop shadows, so there is no white
   box or rectangular border around the roof line. */
.s-house-shell {
  --outline: #cfdae7;
  display: flex;
  filter:
    drop-shadow(2px 0 0 var(--outline)) drop-shadow(-2px 0 0 var(--outline))
    drop-shadow(0 2px 0 var(--outline)) drop-shadow(0 -2px 0 var(--outline));
}
.s-house {
  flex: 1;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 2.75rem, 38% 0, 100% 1.75rem, 100% 100%, 0 100%);
}
.s-house .s-ribbon { top: 2.6rem; }
.s-card-body { display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: 1.5rem 1.5rem 1.75rem; }
.s-card-body h3 { margin: 0; font-size: clamp(1.4rem, 7.4cqi, 1.65rem); color: var(--navy); }
.s-card-body p { margin: 0; }
.s-card-body .s-checks { margin: 0; }
.s-card-body .s-btn { margin-top: auto; }
.s-ribbon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  padding: 0.4rem 1rem;
  border-radius: 0.35rem;
  background: var(--orange);
  color: #fff;
  font: 800 1.125rem/1.2 var(--font-head);
}
.s-more { margin-top: 3.5rem; padding: 2rem; background: var(--paper); border: 2px solid var(--mist); border-radius: 0.5rem; }
.s-more h3 { margin: 0 0 1.25rem; font-size: clamp(1.45rem, 4.5cqi, 1.7rem); color: var(--navy); }
.s-more-list {
  display: grid;
  gap: 0.8rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.s-more-list li { display: flex; gap: 0.75rem; font-size: 1.25rem; font-weight: 600; }

.s-benefit { padding: 2rem; background: #fff; border: 2px solid var(--mist); border-radius: 0.5rem; }
.s-benefit-icon { color: var(--orange); margin-bottom: 1rem; }
.s-benefit h3 { margin: 0 0 0.6rem; font-size: clamp(1.35rem, 7cqi, 1.55rem); color: var(--navy); }
.s-benefit p { margin: 0; }

/* ------------------------------------------------------------------- steps */
.s-steps { margin: 0; padding: 0; list-style: none; }
.s-step { position: relative; }
.s-step-number {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  z-index: 3;
  font: 800 5.5rem/1 var(--font-head);
  color: #fff;
  -webkit-text-stroke: 3px var(--navy);
  paint-order: stroke fill;
}
.s-step h3 { margin: 1.25rem 0 0.5rem; font-size: 1.7rem; color: var(--navy); }
.s-step p { margin: 0; }

/* ------------------------------------------------------------ before/after */
.s-ba-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .s-ba-grid { grid-template-columns: minmax(0, 1fr); } }
.s-ba { position: relative; }
.s-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  padding: 0.4rem 1rem;
  border-radius: 0.35rem;
  color: #fff;
  font: 800 1.2rem/1.2 var(--font-head);
}
.s-tag-navy { background: var(--navy); }
.s-tag-orange { background: var(--orange); }

/* ----------------------------------------------------- weather / final band */
.s-section-bg { z-index: 0; }
.s-section-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(11, 42, 74, 0.84); }
.s-weather-grid { display: grid; gap: 3rem; align-items: start; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.s-panel { padding: 2rem; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 0.5rem; }
.s-panel h3 { margin: 0 0 1.25rem; font-size: clamp(1.45rem, 7cqi, 1.7rem); color: #fff; }
.s-final-grid { display: grid; gap: 3rem; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.s-call-line { margin: 1.5rem 0 0; font-size: 1.4rem; font-weight: 600; }
.s-big-phone { display: block; margin-top: 0.4rem; color: #fff; font: 800 clamp(2rem, 4vw, 3rem)/1.1 var(--font-head); text-decoration: none; }
.s-big-phone:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- reviews */
.s-review {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.75rem;
  background: var(--paper);
  border: 3px dashed #8fa2b9;
  border-radius: 0.5rem;
}
.s-review-photo { width: 6rem; border-radius: 50%; }
.s-review-photo .s-ph-label { display: none; }
.s-review blockquote { margin: 0; font-size: 1.3rem; line-height: 1.5; }
.s-review figcaption strong { display: block; font-size: 1.2rem; color: var(--navy); }
.s-review figcaption span { font-size: 1.125rem; color: var(--muted); }

/* -------------------------------------------------------------------- crew */
.s-crew-images { display: grid; gap: 1.5rem; align-items: end; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 40rem) { .s-crew-images { grid-template-columns: minmax(0, 1fr); } }
.s-crew-copy { max-width: 50rem; margin-top: 2.5rem; }

/* --------------------------------------------------------------------- faq */


/* ------------------------------------------------------------------ footer */
.s-footer {
  position: relative;
  margin-top: calc(var(--ridge) * -1);
  padding: calc(var(--ridge) + 3rem) 0 7rem;
  color: #fff;
  background: var(--navy-dark);
  font-size: 1.125rem;
  line-height: 1.55;
}
.s-footer h2 { margin: 0 0 1rem; font-size: clamp(1.35rem, 4cqi, 1.6rem); color: #fff; }
.s-footer ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.s-footer a { color: #fff; text-decoration: none; }
.s-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.s-foot-top { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 56rem) { .s-foot-top { grid-template-columns: minmax(0, 1fr); } }
.s-foot-brand img { display: block; height: 3.4rem; width: auto; margin-bottom: 1.25rem; }
.s-foot-brand p { max-width: 28rem; margin: 0 0 1.25rem; }
.s-foot-brand address { display: grid; gap: 0.4rem; font-style: normal; }
.s-foot-brand address a:first-child { font: 800 1.5rem/1.2 var(--font-head); }
.s-foot-areas { margin-top: 3.5rem; padding-top: 3rem; border-top: 2px solid rgba(255, 255, 255, 0.22); }
.s-foot-areas > p { max-width: 44rem; margin: 0 0 2rem; font-size: 1.2rem; }
.s-county-grid { display: grid; gap: 2.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.s-county-grid h3 { margin: 0 0 0.9rem; padding-bottom: 0.5rem; font: 800 1.2rem/1.2 var(--font-head); color: #fff; border-bottom: 3px solid var(--orange); }
.s-county-grid ul { gap: 0.15rem; }
.s-county-grid a { display: inline-block; padding: 0.25rem 0; }
.s-foot-bottom { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 2px solid rgba(255, 255, 255, 0.22); }
.s-foot-bottom p { margin: 0; }

/* ------------------------------------------------------------- mobile bar */
.s-mobile-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem;
  background: #fff;
  border-top: 2px solid var(--mist);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 47.99rem) { .s-mobile-bar { display: grid; } }
.s-mobile-bar .s-btn { min-height: 3.25rem; padding-inline: 0.75rem; white-space: nowrap; font-size: 1.1rem; }

/* ------------------------------------------------------------ admin portal
   Same brand, quieter. Large readable type, one clean table. */
.s-foot-admin { margin: 2.5rem 0 0; }
.s-foot-admin a { color: rgba(255, 255, 255, 0.72); font-size: 1.0625rem; }
.s-foot-admin a:hover { color: #fff; }

.s-admin-body { background: var(--paper); }
.s-nowrap { white-space: nowrap; }

.s-admin-auth { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1.25rem; }
.s-admin-card {
  width: 100%;
  max-width: 30rem;
  padding: 2.25rem;
  background: #fff;
  border-top: 8px solid var(--navy);
  border-radius: 0.5rem;
  box-shadow: 0 24px 48px -28px rgba(11, 42, 74, 0.45);
}
.s-admin-card h1 { margin: 1.5rem 0 1rem; font-size: 1.9rem; color: var(--navy); }
.s-admin-logo { display: block; height: 2.75rem; width: auto; }
.s-admin-note { margin: 0; font-size: 1.15rem; }
.s-admin-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--danger);
  background: #fdecea;
  color: #7a1b14;
  font-size: 1.125rem;
  font-weight: 600;
}

.s-admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 3vw, 2.5rem);
  background: #fff;
  box-shadow: 0 2px 0 var(--mist);
}
.s-admin-who { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 1.125rem; }
.s-admin-who .s-btn { min-height: 3rem; padding: 0.6rem 1.25rem; font-size: 1.05rem; }
.s-btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.s-btn-outline:hover { background: var(--navy); color: #fff; }

.s-admin-main { max-width: 96rem; margin: 0 auto; padding: 2.5rem clamp(1.25rem, 3vw, 2.5rem) 4rem; }
.s-admin-heading h1 { margin: 0 0 0.4rem; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--navy); }
.s-admin-heading p { margin: 0 0 1.75rem; font-size: 1.2rem; color: var(--muted); }
.s-admin-table {
  overflow-x: auto;
  background: #fff;
  border: 2px solid var(--mist);
  border-radius: 0.5rem;
}
.s-admin-table td { vertical-align: top; }
.s-admin-table a { color: var(--navy); font-weight: 700; }
.s-admin-message { display: block; min-width: 11rem; max-width: 30rem; white-space: pre-line; }
.s-admin-date, .s-admin-time { display: block; }
.s-admin-time { color: var(--muted); }

/* ------------------------------------------------------------------- icons */
.i { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.i-6 { width: 1.5rem; height: 1.5rem; }
.i-9 { width: 2.25rem; height: 2.25rem; }
.i-10 { width: 2.5rem; height: 2.5rem; }
.i-14 { width: 3.5rem; height: 3.5rem; }
.s-check-icon { width: 1.9rem; height: 1.9rem; }
.s-thanks-icon { color: var(--orange); }

/* ------------------------------------------------------------- form fields */
.f-field { display: grid; gap: 0.4rem; }
.f-label { font: 700 1.15rem/1.3 var(--font-body); color: var(--ink); }
.f-req { color: var(--danger); }
.f-input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 0.9rem;
  font: 400 1.1875rem/1.4 var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 2px solid #8fa2b9;
  border-radius: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.f-input:hover { border-color: var(--navy-light); }
.f-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(62, 124, 177, 0.25); }
textarea.f-input { min-height: 6.5rem; resize: vertical; }
.f-select { position: relative; }
.f-select select { appearance: none; -webkit-appearance: none; padding-right: 3rem; cursor: pointer; }
.f-select::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.f-has-error .f-input { border-color: var(--danger); }
.f-error, .f-form-error { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--danger); }
.f-form-error { padding: 0.75rem 1rem; background: #fdecea; border-left: 4px solid var(--danger); }
[data-lead-form].is-sending button[type="submit"] { opacity: 0.7; cursor: progress; }

/* ---------------------------------------------------------- faq accordion */
.acc-item { border-bottom: 2px solid var(--mist); }
.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  font: 700 1.3rem/1.35 var(--font-head);
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.acc-trigger::-webkit-details-marker { display: none; }
.acc-chev { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.acc-item[open] .acc-chev { transform: rotate(180deg); }
.acc-panel p { margin: 0 0 1.25rem; padding: 0 0.25rem; font-size: 1.2rem; line-height: 1.65; }

/* ------------------------------------------------------------- admin table */
.t-table { width: 100%; border-collapse: collapse; font-size: 1.125rem; }
.t-table th {
  padding: 0.9rem 1rem;
  text-align: left;
  font: 700 1.0625rem/1.2 var(--font-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid var(--mist);
}
.t-table th a { color: inherit; text-decoration: none; }
.t-table th a:hover { color: var(--navy); }
.t-table td { padding: 1rem; vertical-align: top; border-bottom: 1px solid var(--mist); }
.t-table tbody tr:last-child td { border-bottom: 0; }
.t-table tbody tr:hover { background: var(--paper); }
.t-table tr.is-new { animation: t-new 3s ease-out; }
@keyframes t-new { from { background: var(--orange-tint); } to { background: transparent; } }
.t-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }
.t-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; font-size: 1.125rem; }
.t-pages .s-btn { min-height: 3rem; padding: 0.5rem 1.25rem; font-size: 1.05rem; }
.t-per { display: flex; gap: 0.75rem; margin-left: auto; }
.t-per a { color: var(--navy); font-weight: 700; }
.t-per a[aria-current] { text-decoration: none; color: var(--ink); border-bottom: 3px solid var(--orange); }
.t-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  max-width: 24rem;
  padding: 1rem 1.25rem;
  background: var(--navy);
  color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
  font-size: 1.125rem;
}