/* Safety Shine Maintenance — FloorCareSoCal.com
   Commercial floor care, Southern California. Visual system: deep navy field, machine-white
   surfaces, safety-green action colour, one gold hairline used as a rule only. */

:root {
  --navy-900: #05172B;
  --navy-800: #0A2340;
  --navy-700: #123458;
  --navy-050: #EAF0F7;
  --slate-600: #4E5F72;
  --slate-400: #7C8CA0;
  --slate-200: #D5DDE6;
  --slate-100: #EDF1F5;
  --white: #FFFFFF;
  --green-600: #0F7F4F;
  --green-500: #16A06A;
  --green-300: #4FCB92;
  --gold: #C08A2E;
  --danger: #A32020;

  --measure: 68ch;
  --shell: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.25rem);
  --band: clamp(3.25rem, 7vw, 5.5rem);

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

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

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #16202B;
  background: var(--white);
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--navy-900);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.05rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); margin-top: 1.6em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-top: 1.5em; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; margin-top: 1.3em; }

p, ul, ol, dl, table { margin: 0 0 1.15rem; }
p, li { max-width: var(--measure); }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.45rem; }

a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green-600); }

strong { font-weight: 700; color: var(--navy-900); }

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

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

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-600); color: #fff; padding: 0.75rem 1.15rem;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */

.topbar {
  background: var(--navy-900);
  color: #C9D6E4;
  font-size: 0.875rem;
}
.topbar .shell {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 0.5rem;
}
.topbar a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.topbar a:hover { color: var(--green-300); text-decoration: underline; }
.topbar .flag { color: var(--green-300); font-weight: 700; }

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
}
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.7rem;
}

/* Text-only wordmark. No pictorial symbol; the green rule carries the accent. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark .name {
  font-weight: 800; font-size: 1.06rem; letter-spacing: -0.02em;
  color: var(--navy-900); line-height: 1.15;
  border-left: 3px solid var(--green-600); padding-left: 0.7rem;
}
.wordmark .name span {
  display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--slate-600);
}

.navtoggle {
  display: none; align-items: center; gap: 0.5rem;
  background: var(--navy-800); color: #fff; border: 0;
  font: inherit; font-weight: 700; font-size: 0.95rem;
  padding: 0.6rem 0.9rem; cursor: pointer;
}

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.nav li { margin: 0; max-width: none; }
.nav > ul > li > a, .nav .submenu-btn {
  display: block; padding: 0.6rem 0.7rem;
  font-size: 0.95rem; font-weight: 650; color: var(--navy-800);
  text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav > ul > li > a:hover, .nav .submenu-btn:hover { color: var(--green-600); }
.nav .has-sub { position: relative; }
.nav .submenu-btn::after {
  content: ""; display: inline-block; margin-left: 0.4rem;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
}
.nav .submenu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 265px;
  background: var(--white); border: 1px solid var(--slate-200);
  border-top: 3px solid var(--green-500);
  box-shadow: 0 14px 30px rgba(5, 23, 43, 0.14);
  padding: 0.4rem; flex-direction: column; align-items: stretch; gap: 0;
}
.nav .submenu.open { display: flex; }
.nav .submenu a {
  display: block; padding: 0.55rem 0.7rem; font-size: 0.94rem;
  color: var(--navy-800); text-decoration: none; font-weight: 600;
}
.nav .submenu a:hover { background: var(--navy-050); color: var(--green-600); }

.btn {
  display: inline-block; font-weight: 750; font-size: 1rem;
  padding: 0.85rem 1.35rem; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; font-family: inherit; text-align: center;
}
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: #0B6A41; color: #fff; }
/* The header CTA is a .btn inside the nav, and ".nav > ul > li > a" (0,1,3)
   outranks ".btn-primary" (0,1,0), which stripped the button back to plain
   text. This restores it at matching specificity. */
.nav > ul > li.headcta > a.btn-primary {
  background: var(--green-600); color: #fff; padding: 0.6rem 1.1rem;
  font-size: 0.95rem; white-space: nowrap;
}
.nav > ul > li.headcta > a.btn-primary:hover { background: #0B6A41; color: #fff; }

.btn-outline { border-color: var(--navy-800); color: var(--navy-800); background: transparent; }
.btn-outline:hover { background: var(--navy-800); color: #fff; }
.btn-light { background: var(--white); color: var(--navy-900); }
.btn-light:hover { background: var(--navy-050); color: var(--navy-900); }
.btn-sm { padding: 0.6rem 1rem; font-size: 0.94rem; }

/* Single mobile-menu breakpoint. This value and the V2 block below must
   stay identical: if the stacking rules apply at a wider width than the
   toggle, the full nav renders as a tall vertical stack inside the sticky
   header. */
@media (max-width: 1280px) {
  .navtoggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 3px solid var(--green-500);
    box-shadow: 0 18px 30px rgba(5, 23, 43, 0.16);
    padding: 0.5rem clamp(1rem, 4vw, 2rem) 1.25rem;
    max-height: 78vh; overflow-y: auto;
  }
  .masthead .shell { position: relative; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--slate-100); }
  .nav > ul > li > a, .nav .submenu-btn { padding: 0.85rem 0.2rem; width: 100%; text-align: left; font-size: 1.02rem; }
  .nav .submenu {
    position: static; border: 0; border-left: 3px solid var(--green-500);
    box-shadow: none; min-width: 0; margin: 0 0 0.7rem 0.2rem; padding: 0 0 0 0.6rem;
  }
  /* V2: the quote CTA stays available in the mobile menu. */
  .headcta { display: block; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 85% at 74% 8%, rgba(79, 203, 146, 0.20) 0%, rgba(10, 35, 64, 0) 62%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #E9F0F7;
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem);
}
.hero::after {
  /* specular sheen: the reflection a finished floor gives back under lights */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -42%; height: 72%;
  background: radial-gradient(58% 50% at 50% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
.hero .shell { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero p { color: #C8D6E5; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.hero .lede { max-width: 56ch; }

.qualifier {
  display: inline-block; background: var(--green-600); color: #fff;
  font-weight: 750; font-size: 0.94rem; letter-spacing: 0.005em;
  padding: 0.5rem 0.9rem; margin-bottom: 1.1rem;
}
.qualifier.plain {
  background: var(--navy-050); color: var(--navy-900);
  border-left: 5px solid var(--green-600);
}

.servicerail { list-style: none; padding: 0; margin: 1.75rem 0 1.9rem; display: grid; gap: 0; max-width: 640px; }
.servicerail li {
  margin: 0; max-width: none; border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.7rem 0;
}
.servicerail li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.servicerail a { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.08rem; }
.servicerail a:hover { color: var(--green-300); text-decoration: underline; }
.servicerail span { display: block; color: #9FB3C8; font-size: 0.94rem; font-weight: 400; }

.herocta { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.herophone { color: #fff; font-weight: 800; font-size: 1.22rem; text-decoration: none; }
.herophone:hover { color: var(--green-300); }
.herophone small { display: block; font-size: 0.82rem; font-weight: 500; color: #9FB3C8; }

/* ---------- Structure ---------- */

.band { padding-block: var(--band); }
.band-tint { background: var(--slate-100); }
.band-navy { background: var(--navy-900); color: #DCE6F0; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy a { color: var(--green-300); }
.band-tight { padding-block: clamp(2rem, 4vw, 3rem); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.grid p, .grid li { max-width: none; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.prose > *:first-child { margin-top: 0; }
.prose h2 { padding-top: 0.2rem; border-top: 1px solid var(--slate-200); }
.prose h2:first-of-type { border-top: 0; }

/* Cards used only where the content really is a set of parallel entries */
.card {
  background: var(--white); border: 1px solid var(--slate-200);
  border-top: 3px solid var(--navy-800); padding: 1.35rem 1.4rem;
}
.card h3 { margin-top: 0; font-size: 1.14rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card a.cardlink { font-weight: 700; text-decoration: none; }
.card a.cardlink:hover { text-decoration: underline; }
.card-green { border-top-color: var(--green-500); }

/* Spec-sheet rows: quote factors, process steps, service details */
.spec { border-top: 2px solid var(--navy-800); margin-bottom: 1.5rem; }
.spec > div {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.35rem 1.75rem; padding: 0.9rem 0; border-bottom: 1px solid var(--slate-200);
}
.spec dt { font-weight: 750; color: var(--navy-900); }
.spec dd { margin: 0; color: #23303D; }
.spec dd p, .spec dd ul { max-width: none; }
@media (max-width: 700px) { .spec > div { grid-template-columns: 1fr; } }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step; position: relative; padding-left: 3.4rem;
  margin-bottom: 1.5rem; max-width: var(--measure);
}
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05rem;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 8px;
  background: var(--navy-800); color: #fff; font-weight: 800; font-size: 0.98rem;
}
.steps h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.6rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.72rem; height: 0.72rem; background: var(--green-500);
}

.linklist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.linklist li { margin: 0; max-width: none; }
.linklist a {
  display: block; padding: 0.5rem 0.8rem; background: var(--white);
  border: 1px solid var(--slate-200); text-decoration: none; font-weight: 650;
  font-size: 0.95rem; color: var(--navy-800);
}
.linklist a:hover { border-color: var(--green-500); color: var(--green-600); }
.band-navy .linklist a { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; }
.band-navy .linklist a:hover { border-color: var(--green-300); color: var(--green-300); }

.columns { columns: 2; column-gap: 2rem; }
.columns ul { margin: 0; }
@media (max-width: 640px) { .columns { columns: 1; } }

.note {
  border-left: 5px solid var(--gold); background: #FDF8EE;
  padding: 1rem 1.2rem; margin-bottom: 1.4rem;
}
.note p:last-child { margin-bottom: 0; }

.faq { border-top: 1px solid var(--slate-200); margin-bottom: 1.6rem; }
.faq > div { border-bottom: 1px solid var(--slate-200); padding: 1.1rem 0; }
.faq h3 { margin: 0 0 0.45rem; font-size: 1.1rem; }
.faq p:last-child { margin-bottom: 0; }

.crumbs { background: var(--slate-100); border-bottom: 1px solid var(--slate-200); font-size: 0.9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; margin: 0; padding: 0.7rem 0; }
.crumbs li { margin: 0; max-width: none; color: var(--slate-600); }
.crumbs li + li::before { content: "/"; color: var(--slate-400); margin-right: 0.55rem; }
.crumbs a { color: var(--navy-700); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

.pagehead { background: var(--navy-050); border-bottom: 1px solid var(--slate-200); padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.pagehead p.standfirst { font-size: 1.15rem; color: #21313F; max-width: 62ch; margin-bottom: 0; }
.pagehead .qualifier { margin-bottom: 0.9rem; }

.cta-strip { background: var(--navy-800); color: #fff; }
.cta-strip h2 { color: #fff; margin-top: 0; }
.cta-strip p { color: #C8D6E5; }
.cta-strip .herocta { margin-top: 1.4rem; }

.sheen {
  height: 5px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--navy-800) 0%, var(--green-500) 38%, var(--gold) 62%, var(--navy-800) 100%);
}

/* ---------- Form ---------- */

.formwrap { background: var(--white); border: 1px solid var(--slate-200); border-top: 4px solid var(--green-500); padding: clamp(1.25rem, 3vw, 2rem); }
.field { margin-bottom: 1.15rem; }
.field label, .fieldset-legend { display: block; font-weight: 700; color: var(--navy-900); margin-bottom: 0.35rem; }
.field .hint { display: block; font-weight: 400; color: var(--slate-600); font-size: 0.9rem; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem;
  border: 1px solid #9AA9B8; background: #fff; color: #16202B; border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-600); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.25rem; }
fieldset { border: 1px solid var(--slate-200); padding: 1rem 1.1rem; margin: 0 0 1.15rem; }
legend { font-weight: 700; color: var(--navy-900); padding-inline: 0.4rem; }
.choice { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; }
.choice input { width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; flex: none; }
.choice label { font-weight: 500; margin: 0; }
.req { color: var(--danger); font-weight: 700; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.formmsg {
  display: none; border-left: 5px solid var(--danger); background: #FCEDED;
  padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; color: #6B1414; font-weight: 600;
}
.formmsg.show { display: block; }
.formmsg a { color: #6B1414; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--danger); border-width: 2px; }
.errortext { display: none; color: var(--danger); font-size: 0.9rem; font-weight: 600; margin-top: 0.3rem; }
.field-error .errortext { display: block; }

/* ---------- Footer ---------- */

.sitefoot { background: var(--navy-900); color: #B9C8D8; padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; font-size: 0.95rem; }
.sitefoot h2 { color: #fff; font-size: 0.98rem; letter-spacing: 0; margin: 0 0 0.7rem; }
.sitefoot ul { list-style: none; padding: 0; margin: 0; }
.sitefoot li { margin-bottom: 0.4rem; max-width: none; }
.sitefoot a { color: #DCE6F0; text-decoration: none; }
.sitefoot a:hover { color: var(--green-300); text-decoration: underline; }
.sitefoot .wordmark .name { color: #fff; border-left-color: var(--green-300); }
.sitefoot .wordmark .name span { color: #9FB3C8; }
.footgrid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footbase {
  border-top: 1px solid rgba(255,255,255,0.16); margin-top: 2.25rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: 0.9rem;
}
.footbase p { margin: 0; max-width: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .masthead, .topbar, .sitefoot, .cta-strip, .nav { display: none; }
  body { font-size: 11pt; }
}

/* ============================================================================
   V2 VISUAL SYSTEM
   Typography scale, brand logo, header, hero, cards, process, footer.
   Layered after the base rules so existing components keep working.
   ========================================================================== */

:root {
  --shell: 1200px;
  --navy-950: #061A30;
  --green-400: #35C98A;
  --ring: 0 0 0 3px rgba(53, 201, 138, 0.45);
  --card-radius: 14px;
  --shadow-sm: 0 1px 2px rgba(6, 26, 48, 0.06), 0 2px 8px rgba(6, 26, 48, 0.05);
  --shadow-md: 0 2px 4px rgba(6, 26, 48, 0.07), 0 10px 24px rgba(6, 26, 48, 0.08);
}

body { font-size: 1.0625rem; line-height: 1.62; }
@media (max-width: 640px) { body { font-size: 1rem; } }

.prose > p, .prose > ul, .prose > ol { max-width: 72ch; }

h1 { font-size: clamp(2.15rem, 4.6vw, 3.4rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
h3 { font-size: clamp(1.16rem, 1.6vw, 1.4rem); }

.band { padding-block: clamp(3.5rem, 7vw, 5.75rem); }
.band-tight { padding-block: clamp(2.75rem, 5vw, 4rem); }
.band + .band { border-top: 1px solid var(--slate-200); }
.band-tint + .band, .band + .band-tint { border-top: 0; }

/* --- brand logo ---------------------------------------------------------- */

/* flex: none is load-bearing. Inside the flex header the brand would
   otherwise shrink, and "img { max-width: 100% }" would then collapse the
   logo to zero width. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* The approved logo is 2.54:1, so width drives header height. These values
   keep the wordmark legible without a bulky sticky header. */
.brand img { display: block; width: 244px; height: auto; }
.masthead .brand { padding-block: 0.15rem; }
.sitefoot .brand img { width: 268px; }

@media (max-width: 1280px) { .brand img { width: 224px; } }
@media (max-width: 900px)  { .brand img { width: 188px; } }
@media (max-width: 380px)  { .brand img { width: 158px; } }

/* --- header -------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  box-shadow: 0 1px 0 rgba(6, 26, 48, 0.04);
}
.masthead > .shell {
  display: flex; align-items: center; gap: 1.25rem;
  max-width: 1400px; padding-block: 0.5rem;
}
.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.nav > ul > li > a,
.nav > ul > li > .submenu-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.62rem; border-radius: 8px;
  font-size: 0.93rem; font-weight: 650; line-height: 1.2;
  color: var(--navy-800); text-decoration: none; white-space: nowrap;
}
.nav > ul > li > a:hover,
.nav > ul > li > .submenu-btn:hover { background: var(--slate-100); color: var(--navy-900); }
.nav > ul > li > a:focus-visible,
.nav > ul > li > .submenu-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.nav > ul > li.headcta { margin-left: 0.5rem; }
.nav > ul > li.headcta > a.btn-primary {
  /* green-600 (#0F7F4F) gives ~5.04:1 with white; green-500 was ~3.35:1. */
  background: var(--green-600); color: #fff;
  padding: 0.72rem 1.15rem; min-height: 46px; font-size: 0.95rem;
  border-radius: 10px; white-space: nowrap; box-shadow: var(--shadow-sm);
}
.nav > ul > li.headcta > a.btn-primary:hover { background: #0B6A41; }

.headphone {
  display: none; align-items: center; line-height: 1.2; flex: 0 0 auto;
  padding: 0.5rem 0.65rem; border-radius: 8px; font-size: 1rem;
  font-weight: 800; color: var(--navy-900); text-decoration: none; white-space: nowrap;
}
.headphone:focus-visible { outline: none; box-shadow: var(--ring); }
/* Hidden at every width. The number remains in the top bar on every page and
   in the mobile action bar at narrow widths, so nothing is lost, and the
   header can never be pushed wide enough to clip the quote CTA. */
.headphone small { font-size: 0.79rem; font-weight: 600; color: var(--slate-600); letter-spacing: 0.02em; }
.headphone:hover { background: var(--slate-100); }

.navtoggle {
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; gap: 0.45rem;
  border: 1px solid var(--slate-200); border-radius: 10px;
  background: var(--white); color: var(--navy-800); font-weight: 700;
}
.navtoggle:focus-visible { outline: none; box-shadow: var(--ring); }

@media (max-width: 1280px) {
  .masthead > .shell { gap: 0.75rem; flex-wrap: wrap; padding-block: 0.45rem; }
  .nav { margin-left: 0; flex-basis: 100%; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li > a,
  .nav > ul > li > .submenu-btn { min-height: 46px; width: 100%; }
  .nav > ul > li.headcta { margin: 0.6rem 0 0.2rem; }
  .nav > ul > li.headcta > a.btn-primary { display: flex; justify-content: center; }
}

/* --- hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 6vw, 5rem); }
.hero .shell { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 3.6vw, 3.45rem); margin-bottom: 0.55em; }
.hero .lede { font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.6; max-width: 60ch; }
.hero .qualifier { margin-bottom: 1.1rem; }

.heropanel {
  background: linear-gradient(160deg, #0D2B4C 0%, var(--navy-950) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px; padding: 1.4rem; box-shadow: var(--shadow-md);
}
.heropanel svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.herotags { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.herotags li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.62rem 0.75rem; border-radius: 9px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10);
  color: #E9F0F7; font-size: 0.9rem; font-weight: 650; line-height: 1.25;
}
.herotags li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--green-400); flex: none; }

@media (max-width: 980px) {
  .hero .shell { grid-template-columns: 1fr; }
  .heropanel { order: 2; }
}
@media (max-width: 460px) { .herotags { grid-template-columns: 1fr; } }

/* --- service cards ------------------------------------------------------- */

.svcgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1080px) { .svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .svcgrid { grid-template-columns: 1fr; } }

.svccard {
  display: flex; flex-direction: column; gap: 0.6rem; height: 100%;
  padding: 1.5rem 1.35rem; background: var(--white);
  border: 1px solid var(--slate-200); border-top: 3px solid var(--green-500);
  border-radius: var(--card-radius); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.svccard:hover, .svccard:focus-within { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--slate-200); }
.svccard .svcicon { width: 40px; height: 40px; color: var(--green-600); }
.svccard h3 { margin: 0.1rem 0 0; font-size: 1.14rem; }
.svccard p { margin: 0; color: #33414F; font-size: 0.985rem; line-height: 1.55; }
.svccard .more { margin-top: auto; padding-top: 0.5rem; font-weight: 700; font-size: 0.95rem; }
.svccard a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* --- three-step process (homepage card variant only) --------------------- */

/* Scoped to .steps-cards. The plain .steps component is a vertical numbered
   list used for the longer service processes and must not be forced into
   narrow three-column cards. */
.steps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: step; }
@media (max-width: 860px) { .steps-cards { grid-template-columns: 1fr; } }
.steps-cards > li {
  position: relative; padding: 1.5rem 1.35rem 1.4rem; padding-left: 1.35rem;
  margin-bottom: 0; max-width: none;
  background: var(--white); border: 1px solid var(--slate-200);
  border-radius: var(--card-radius); box-shadow: var(--shadow-sm);
}
/* The card carries its own .stepnum badge, so the generated counter from the
   base .steps component would render a second visible number. */
.steps-cards > li::before { content: none; }
.steps-cards .stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 0.85rem;
  background: var(--navy-800); color: #fff; font-weight: 800; font-size: 0.95rem;
}
.steps-cards h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.steps-cards p { margin: 0; font-size: 0.975rem; color: #33414F; }
.steps-cards .stepicon { position: absolute; top: 1.4rem; right: 1.3rem; width: 30px; height: 30px; color: var(--green-400); }

/* --- property-type tags -------------------------------------------------- */

.taglist { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.taglist a {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--slate-200);
  color: var(--navy-800); font-weight: 650; font-size: 0.94rem; text-decoration: none;
}
.taglist a:hover { border-color: var(--green-500); color: var(--green-600); background: #F5FBF8; }
.taglist a:focus-visible { outline: none; box-shadow: var(--ring); }

/* --- buttons ------------------------------------------------------------- */

.btn { min-height: 48px; border-radius: 10px; font-size: 1rem; padding: 0.8rem 1.4rem; }
.btn-sm { min-height: 46px; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { box-shadow: var(--shadow-sm); }

/* --- mobile action bar --------------------------------------------------- */

.actionbar { display: none; }
@media (max-width: 780px) {
  .actionbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--slate-200);
    box-shadow: 0 -2px 12px rgba(6, 26, 48, 0.08);
  }
  .actionbar a {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; border-radius: 10px;
    font-weight: 750; font-size: 0.98rem; text-decoration: none;
  }
  .actionbar .ab-call { background: var(--white); color: var(--navy-900); border: 1.5px solid var(--navy-800); }
  .actionbar .ab-quote { background: var(--green-600); color: #fff; }
  .actionbar a:focus-visible { outline: none; box-shadow: var(--ring); }
  body { padding-bottom: 76px; }
  .quoteform-page .actionbar { display: none; }
  body.quoteform-page { padding-bottom: 0; }
}

/* --- breadcrumbs and page heads ------------------------------------------ */

.crumbs { background: var(--slate-100); border-bottom: 1px solid var(--slate-200); }
.crumbs ol { padding-block: 0.85rem; font-size: 0.92rem; }
.crumbs a { color: var(--slate-600); }
.crumbs a:hover { color: var(--green-600); }

.pagehead { padding-block: clamp(2.5rem, 5vw, 3.75rem); background: linear-gradient(180deg, var(--slate-100) 0%, var(--white) 100%); }
.pagehead h1 { margin-bottom: 0.5em; }
.pagehead .standfirst { font-size: clamp(1.05rem, 1.3vw, 1.18rem); color: #33414F; max-width: 66ch; }

/* --- footer -------------------------------------------------------------- */

.sitefoot { background: var(--navy-950); padding-block: clamp(3rem, 5.5vw, 4.5rem) 0; }
.sitefoot .footgrid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.sitefoot h2 {
  font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--green-400); margin: 0 0 0.9rem;
}
.sitefoot ul { margin: 0; padding: 0; list-style: none; }
.sitefoot li { margin-bottom: 0.55rem; }
.sitefoot a { color: #D7E2EE; text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }
.sitefoot p { color: #B9C7D6; line-height: 1.6; }
.sitefoot .footbase {
  margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
}
.sitefoot .footbase p { margin: 0; font-size: 0.9rem; color: #9FB2C4; }
.sitefoot a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

@media (max-width: 1080px) { .sitefoot .footgrid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px)  { .sitefoot .footgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .sitefoot .footgrid { grid-template-columns: 1fr; } }

/* Hero refinements: keep the qualifier visible as a restrained badge rather
   than a slab, and hold the H1 to the 48-58px desktop target with a measure
   that avoids one-word line breaks. */
.hero .qualifier {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(53, 201, 138, 0.14);
  border: 1px solid rgba(53, 201, 138, 0.42);
  color: #BFF0D8; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.045em;
  text-transform: uppercase; padding: 0.42rem 0.9rem;
}
.hero .qualifier::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-400); flex: none;
}
.hero h1 { font-size: clamp(2.15rem, 3.45vw, 3.4rem); max-width: none; }
@media (min-width: 981px) { .hero .shell { grid-template-columns: 1.24fr 0.76fr; } }

/* The divider below the hero: a restrained green hairline rather than the
   original gold, so it reads as part of the brand accent. */
hr.sheen {
  border: 0; height: 2px; margin: 0;
  background: linear-gradient(90deg, rgba(53,201,138,0) 0%, rgba(53,201,138,0.65) 50%, rgba(53,201,138,0) 100%);
}

/* Card headings read as headings, not as underlined links, until hover. */
.svccard h3 .cardlink, .steps h3 { text-decoration: none; }
.svccard h3 .cardlink { color: var(--navy-900); }
.svccard h3 .cardlink:hover { color: var(--green-600); text-decoration: underline; }
.svccard .svcicon { color: var(--green-600); width: 34px; height: 34px; }

/* Bring the callout box onto the navy/green system. */
.note {
  background: #F2FAF6; border-left: 5px solid var(--green-500);
  border-radius: 0 10px 10px 0;
}
.note p:last-child { margin-bottom: 0; }

/* ============================================================================
   V3 PHOTOGRAPHY
   The homepage hero is built around the approved rotary-buffer photograph.
   Its natural dark wall sits on the left, so the existing copy sits there and
   the technician and machine stay visible on the right.
   ========================================================================== */

.hero-photo { position: relative; overflow: hidden; background: var(--navy-950); }

.hero-photo .heromedia { position: absolute; inset: 0; z-index: 0; }
.hero-photo .heromedia picture,
.hero-photo .heromedia img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
}
/* Restrained left-side scrim, purely for text contrast. It fades out well
   before the technician so the machine and polished floor stay clear. */
.hero-photo .heromedia::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(6, 26, 48, 0.94) 0%,
    rgba(6, 26, 48, 0.88) 30%,
    rgba(6, 26, 48, 0.55) 48%,
    rgba(6, 26, 48, 0.12) 62%,
    rgba(6, 26, 48, 0.02) 74%);
}

.hero-photo > .shell { position: relative; z-index: 1; display: block; }
.hero-photo .herotext { max-width: 46rem; }
.hero-photo { padding-block: clamp(2.75rem, 4.4vw, 3.75rem); }
.hero-photo .herotext { min-height: clamp(300px, 30vw, 400px); }
.hero-photo h1 { font-size: clamp(2.05rem, 3.15vw, 3.1rem); max-width: 17ch; }
.hero-photo .lede { max-width: 44ch; }

/* Below the two-column threshold the hero recomposes: copy first so the
   headline and CTA stay high on the page, then the full uncropped photograph
   so the technician, machine and pad are never cut off. */
@media (max-width: 980px) {
  .hero-photo { display: flex; flex-direction: column; padding-bottom: 0; }
  .hero-photo .heromedia { position: static; order: 2; margin-top: 1.75rem; }
  .hero-photo .heromedia::after { display: none; }
  .hero-photo .heromedia img {
    height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 62% center;
  }
  .hero-photo > .shell { order: 1; }
  .hero-photo .herotext { min-height: 0; max-width: none; }
  .hero-photo h1, .hero-photo .lede { max-width: none; }
}

/* Service-page photograph, directly under the opening answer. */
.pagephoto { margin: 1.9rem 0 2.1rem; }
.pagephoto img {
  display: block; width: 100%; height: auto;
  border-radius: var(--card-radius); border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
}