/* ==========================================================================
   Ironhill Roofing Co. — "The Ridgeline"
   Steel + rust industrial-editorial system. Built by Obris Launch (spec site).
   Type: Archivo (display) + Instrument Sans (body) + Spline Sans Mono (labels).
   ========================================================================== */

:root {
  /* ---- palette: steel + rust duotone ---- */
  --ink:        #101820;
  --steel-950:  #0b1219;
  --steel-900:  #12212c;
  --steel-800:  #17303f;
  --steel-700:  #1d465e;
  --steel-500:  #2f6d92;
  --steel-300:  #7ba7c2;
  --steel-100:  #d7e5ee;
  --rust-700:   #9c3a17;
  --rust-600:   #b5451e;
  --rust-500:   #c85a2c;
  --rust-300:   #e19064;
  --limestone:  #f1ece3;
  --paper:      #faf8f4;
  --line:       #ddd6ca;
  --white:      #ffffff;

  /* ---- semantic ---- */
  --bg:         var(--paper);
  --text:       #24303a;
  --text-soft:  #55606a;
  --heading:    var(--ink);
  --primary:    var(--steel-700);
  --accent:     var(--rust-600);

  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 18px 44px -26px rgba(16, 33, 44, 0.45);
  --shadow-sm: 0 8px 22px -16px rgba(16, 33, 44, 0.5);

  /* section spacing ceiling */
  --sp-body: clamp(40px, 5vh, 64px);
  --sp-band: clamp(48px, 6vh, 80px);
  --sp-foot: clamp(44px, 6vh, 72px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--steel-700); text-decoration: none; }
a:hover { color: var(--rust-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.04;
  margin: 0 0 .5em;
  font-weight: 800;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); }
h2 { font-size: clamp(1.85rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.65rem); font-weight: 700; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ---- utility ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--rust-600);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--rust-600);
  display: inline-block;
}
.lede { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--text-soft); line-height: 1.6; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.eyebrow-c { justify-content: center; }
.section-top { padding-top: clamp(56px, 9vh, 96px); }
.h1-lg { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.mt-xs { margin-top: 10px; }
.mt-sm { margin-top: 14px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 26px; }
.btn-block { width: 100%; }
.btn-row.jc-center { justify-content: center; }
.hp { display: none !important; }

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--rust-600); color: #fff;
  padding: 12px 18px; z-index: 300; border-radius: 0 0 4px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
  padding: 15px 28px;
  min-height: 48px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  text-align: center;
}
.btn-primary { background: var(--rust-600); color: #fff; }
.btn-primary:hover { background: var(--rust-700); color: #fff; }
.btn-steel { background: var(--steel-700); color: #fff; }
.btn-steel:hover { background: var(--steel-800); color: #fff; }
.btn-outline { background: transparent; color: var(--steel-700); border-color: var(--steel-700); }
.btn-outline:hover { background: var(--steel-700); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(215,229,238,.55); }
.btn-ghost-light:hover { background: #fff; color: var(--steel-900); border-color: #fff; }
.btn-lg { padding: 17px 34px; font-size: 1.05rem; min-height: 54px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--paper) 97%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(16,33,44,.5);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding-block: 10px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: clamp(190px, 20vw, 232px); height: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600; font-size: .96rem;
  color: var(--ink);
  padding: 8px 2px;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--rust-600); transform: scaleX(0);
  transform-origin: left; transition: transform .2s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--rust-600); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-phone {
  font-family: var(--font-mono);
  font-weight: 500; font-size: .95rem;
  color: var(--steel-700); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45em;
}
.nav-phone:hover { color: var(--rust-600); }
.nav-phone svg { width: 15px; height: 15px; flex-shrink: 0; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 12px;
  min-width: 48px; min-height: 48px; align-items: center; justify-content: center;
}
.nav-toggle span { width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* hide the supplementary phone on mid widths so inline links + CTA stay */
@media (max-width: 992px) { .nav-actions .nav-phone { display: none; } }
/* hamburger is MOBILE-ONLY: inline nav persists until 768px */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-toggle { display: flex; }
  .mobile-panel .nav-phone { display: inline-flex; }
}

/* mobile panel */
.mobile-panel {
  position: fixed; inset: 76px 0 auto 0; z-index: 99;
  box-sizing: border-box; max-width: 100vw;
  background: var(--steel-900);
  padding: 24px var(--gutter) 34px;
  transform: translateY(-120%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}
.mobile-panel.open { transform: translateY(0); }
.mobile-panel ul { list-style: none; margin: 0 0 22px; padding: 0; }
.mobile-panel li { border-bottom: 1px solid rgba(123,167,194,.22); }
.mobile-panel a {
  display: block; padding: 15px 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.18rem;
  color: #fff;
}
.mobile-panel a:hover { color: var(--rust-300); }
.mobile-panel .nav-phone { color: var(--steel-300); font-size: 1.05rem; margin-bottom: 16px; }
.mobile-panel .btn { width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  padding-block: clamp(96px, 15vh, 168px) clamp(64px, 9vh, 104px);
  isolation: isolate;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero::before { /* steel scrim + rust glow (gradient register) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 82% 8%, color-mix(in srgb, var(--rust-600) 34%, transparent), transparent 55%),
    linear-gradient(90deg, rgba(11,18,25,.94) 0%, rgba(11,18,25,.78) 42%, rgba(11,18,25,.34) 78%, rgba(11,18,25,.12) 100%),
    linear-gradient(0deg, rgba(11,18,25,.72), rgba(11,18,25,.05) 55%);
}
.hero-inner { max-width: 1120px; }
.hero .eyebrow { color: var(--rust-300); }
.hero .eyebrow::before { background: var(--rust-300); }
.hero h1 { color: #fff; text-wrap: balance; margin-bottom: .35em; }
.hero h1 .em { color: var(--rust-300); }
.hero-sub { font-size: clamp(1.12rem, 1.7vw, 1.4rem); color: var(--steel-100); max-width: 820px; margin-bottom: 2rem; line-height: 1.55; }
.hero .btn-row { margin-bottom: clamp(30px, 5vh, 48px); }

/* trust strip woven under hero */
.trust-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(123,167,194,.28);
  border: 1px solid rgba(123,167,194,.28); border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 820px;
}
.trust-strip div {
  background: color-mix(in srgb, var(--steel-950) 62%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 16px 18px;
}
.trust-strip .t-k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-300); display: block; margin-bottom: 4px; }
.trust-strip .t-v { font-family: var(--font-display); font-weight: 700; font-size: .96rem; color: #fff; line-height: 1.2; }
@media (max-width: 720px) {
  .trust-strip { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section { position: relative; }
.band { padding-block: var(--sp-body); }
.band-limestone { background: var(--limestone); }
.band-limestone::before { /* faint radial depth (gradient register on alternating band) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 12% 0%, color-mix(in srgb, var(--steel-500) 8%, transparent), transparent 60%);
}
.band-limestone > .wrap { position: relative; }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vh, 44px); }
.section-head.center { margin-inline: auto; }
.section-head h2.ws-nowrap { white-space: nowrap; }
@media (max-width: 680px) { .section-head h2.ws-nowrap { white-space: normal; } }

/* two-col editorial split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.split.rev .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.split-media .tag {
  position: absolute; left: 16px; bottom: 16px;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--rust-600); color: #fff; padding: 7px 12px; border-radius: 2px;
}
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split.rev .split-media { order: 0; }
}

/* ---- statement ---- */
.statement p { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.32; letter-spacing: -0.01em; }
.statement .accent { color: var(--rust-600); }
.statement .narrow { max-width: 1040px; }

/* ==========================================================================
   RECENT WORK (proof engine)
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.work-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.work-card.feature { grid-column: span 2; display: grid; grid-template-columns: 1.15fr 1fr; }
.work-media { overflow: hidden; }
.work-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .5s ease; }
.work-card:hover .work-media img { transform: scale(1.04); }
.work-card.feature .work-media img { aspect-ratio: auto; min-height: 280px; }
.work-body { padding: clamp(20px, 2vw, 28px); }
.work-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; }
.work-meta div { min-width: 0; }
.work-meta .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-500); display: block; }
.work-meta .v { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink); }
.work-body h3 { margin-bottom: .35em; }
.work-body p { color: var(--text-soft); font-size: .98rem; margin: 0; }
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card.feature { grid-column: auto; grid-template-columns: 1fr; }
  .work-card.feature .work-media img { min-height: 0; aspect-ratio: 4/3; }
}
.illus-note {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .04em;
  color: var(--text-soft); margin-top: 20px;
}

/* ==========================================================================
   PROCESS NARRATIVE (dark steel band, ridgeline cut)
   ========================================================================== */
.ridge {
  background: var(--steel-900);
  color: var(--steel-100);
  padding-block: calc(var(--sp-band) + 22px);
  position: relative;
  clip-path: polygon(0 2.4vw, 100% 0, 100% 100%, 0 calc(100% - 2.4vw));
  margin-block: clamp(-14px, -1.6vw, -8px);
}
.ridge::before { /* rust glow + steel radial (gradient register) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 88% 10%, color-mix(in srgb, var(--rust-600) 24%, transparent), transparent 58%),
    radial-gradient(70% 80% at 4% 96%, color-mix(in srgb, var(--steel-500) 30%, transparent), transparent 60%);
}
.ridge > .wrap { position: relative; }
.ridge h2 { color: #fff; }
.ridge .eyebrow { color: var(--rust-300); }
.ridge .eyebrow::before { background: var(--rust-300); }
.ridge .lede { color: var(--steel-100); }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: clamp(30px, 5vh, 48px); }
.step { position: relative; padding: 0 18px; }
.step::before { /* ridgeline connector */
  content: ""; position: absolute; top: 22px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(123,167,194,.4) 15%, rgba(123,167,194,.4) 85%, transparent);
}
.step:first-child::before { left: 50%; }
.step:last-child::before { right: 50%; }
.step-num {
  position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--steel-800); border: 2px solid var(--rust-500);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff;
  margin-bottom: 18px;
}
.step h3 { color: #fff; font-size: 1.12rem; margin-bottom: .4em; }
.step p { font-size: .92rem; color: var(--steel-100); margin: 0; opacity: .92; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 6px; }
  .step { padding: 14px 0 14px 0; display: grid; grid-template-columns: 46px 1fr; gap: 0 18px; align-items: start; }
  .step::before { display: none; }
  .step-num { margin-bottom: 0; grid-row: span 2; }
  .step h3 { align-self: center; }
}

/* ==========================================================================
   SERVICE TILES
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.svc-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 30px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.svc-card:hover { transform: translateY(-3px); border-color: var(--steel-300); box-shadow: var(--shadow-sm); }
.svc-ico { width: 44px; height: 44px; margin-bottom: 16px; color: var(--rust-600); }
.svc-ico svg { width: 100%; height: 100%; }
.svc-card h3 { font-size: 1.24rem; margin-bottom: .45em; }
.svc-card p { color: var(--text-soft); font-size: .97rem; margin: 0; }
.svc-card .more {
  display: inline-flex; align-items: center; gap: .4em; margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--steel-700);
}
.svc-card:hover .more { color: var(--rust-600); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* detailed service list (services page) */
.svc-detail { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); padding-block: clamp(26px, 4vh, 40px); border-top: 1px solid var(--line); }
.svc-detail:first-of-type { border-top: 0; }
.svc-detail .n { font-family: var(--font-mono); font-size: .9rem; color: var(--rust-600); letter-spacing: .1em; padding-top: .5em; }
.svc-detail h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.svc-detail ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.svc-detail li { position: relative; padding-left: 22px; font-size: .96rem; color: var(--text-soft); }
.svc-detail li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-left: 2px solid var(--rust-600); border-top: 2px solid var(--rust-600); transform: rotate(45deg) translateY(-1px); }
@media (max-width: 640px) { .svc-detail { grid-template-columns: 1fr; gap: 8px; } .svc-detail ul { grid-template-columns: 1fr; } .svc-detail .n { padding-top: 0; } }

/* ==========================================================================
   FEATURE / WHY split with facts
   ========================================================================== */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.fact { border-left: 3px solid var(--rust-600); padding: 4px 0 4px 16px; }
.fact .k { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); display: block; }
.fact .d { font-size: .9rem; color: var(--text-soft); }

/* ==========================================================================
   CTA BAND (steel gradient + rust glow — never footer color)
   ========================================================================== */
.cta-band {
  background:
    radial-gradient(90% 120% at 88% 12%, color-mix(in srgb, var(--rust-600) 40%, transparent), transparent 52%),
    linear-gradient(120deg, var(--steel-800), var(--steel-700) 60%, var(--steel-500));
  color: #fff;
  padding-block: var(--sp-band);
  text-align: center;
}
.cta-band h2 { color: #fff; text-wrap: balance; }
.cta-band p { color: var(--steel-100); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 560px; margin-inline: auto; margin-bottom: 1.8rem; }
.cta-band .btn-row { justify-content: center; }
.cta-phone { font-family: var(--font-mono); margin-top: 18px; color: var(--steel-100); font-size: .95rem; }
.cta-phone a { color: #fff; font-weight: 600; }

/* ==========================================================================
   FORM
   ========================================================================== */
.form-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .form-wrap { grid-template-columns: 1fr; gap: 30px; } }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: 7px; }
.field .req { color: var(--rust-600); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 13px 15px; min-height: 48px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--steel-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--steel-500) 22%, transparent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--text-soft); line-height: 1.5; }
.consent input { width: 20px; height: 20px; min-height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--rust-600); }
.form-note { font-size: .82rem; color: var(--text-soft); margin-top: 14px; }
.form-status { margin-top: 16px; font-weight: 600; display: none; padding: 12px 16px; border-radius: var(--radius); }
.form-status.ok { display: block; background: color-mix(in srgb, var(--steel-500) 14%, #fff); color: var(--steel-800); border: 1px solid var(--steel-300); }
.form-status.err { display: block; background: color-mix(in srgb, var(--rust-600) 12%, #fff); color: var(--rust-700); border: 1px solid var(--rust-300); }

/* contact aside */
.contact-aside .block { margin-bottom: 26px; }
.contact-aside .block h3 { font-size: 1.05rem; margin-bottom: .3em; }
.contact-aside .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-500); display: block; margin-bottom: 3px; }
.contact-aside a.big { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.contact-aside a.big:hover { color: var(--rust-600); }
.hours-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.hours-row span:first-child { color: var(--text-soft); }
.hours-row span:last-child { font-weight: 600; color: var(--ink); }

/* area chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--font-mono); font-size: .8rem; padding: 7px 13px; border: 1px solid var(--steel-300); border-radius: 40px; color: var(--steel-700); background: var(--paper); }

/* ==========================================================================
   VALUE / ABOUT
   ========================================================================== */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.value { padding: 24px; background: var(--limestone); border-radius: var(--radius-lg); border-top: 3px solid var(--rust-600); }
.value h3 { font-size: 1.18rem; margin-bottom: .4em; }
.value p { font-size: .96rem; color: var(--text-soft); margin: 0; }
@media (max-width: 780px) { .values { grid-template-columns: 1fr; } }

/* ==========================================================================
   404
   ========================================================================== */
.oops { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--sp-band); }
.oops .code { font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 20vw, 11rem); line-height: .9; color: var(--steel-700); letter-spacing: -.03em; }
.oops .code .r { color: var(--rust-600); }

/* legal / prose */
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-500); }

/* ==========================================================================
   FOOTER (deep steel → ink radial)
   ========================================================================== */
.site-footer {
  background:
    radial-gradient(70% 90% at 8% 0%, color-mix(in srgb, var(--steel-700) 34%, transparent), transparent 60%),
    linear-gradient(180deg, var(--steel-950), var(--ink));
  color: var(--steel-100);
  padding-top: var(--sp-foot);
}
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(24px, 4vw, 48px); padding-bottom: var(--sp-foot); }
.footer-brand img { width: 210px; margin-bottom: 16px; }
.footer-brand p { color: var(--steel-300); font-size: .94rem; max-width: 30ch; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-300); font-weight: 500; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a, .footer-col p { color: var(--steel-100); font-size: .95rem; }
.footer-col a:hover { color: var(--rust-300); }
.footer-col .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-300); display: block; margin-bottom: 2px; }
.footer-bottom {
  border-top: 1px solid rgba(123,167,194,.2);
  padding-block: 22px var(--sp-foot);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: .84rem; color: var(--steel-300); margin: 0; }
.footer-disclosure {
  border-top: 1px solid rgba(123,167,194,.2);
  padding-block: 18px;
}
.footer-disclosure p { font-size: .8rem; color: var(--steel-300); margin: 0; line-height: 1.55; max-width: 92ch; }
.footer-disclosure a { color: var(--steel-100); }
.footer-credit a { color: #fff; font-weight: 600; }
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } }

/* ==========================================================================
   REVEAL MOTION
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.d1, .reveal.d2, .reveal.d3, .reveal.d4 {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .work-card:hover .work-media img, .work-card:hover, .svc-card:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--steel-800); color: #fff; border: 2px solid var(--rust-500);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background-color .18s ease, visibility .25s;
  box-shadow: var(--shadow-sm);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--rust-600); }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .25s, visibility .25s; } }

/* Portfolio critic fix (2026-07-15): Materials band (.ridge) is a dark section; the
   .fact grid inherited light-section ink colors (dark-on-dark, ~1.06:1). Override to
   light text on the dark band. Higher specificity than base .fact .k/.d so order-safe. */
.ridge .fact .k { color: #fff; }
.ridge .fact .d { color: var(--steel-100); }

/* ==========================================================================
   IRONHILL v2 — Lúmen-method pass (2026-07-15)
   Warmer refined register · line-mask hero · CTA fill-wipe · storm seal ·
   type + band-spacing brought under the ceiling. Appended = wins the cascade.
   ========================================================================== */
:root {
  /* recolor refine — warmer paper, deeper rust, richer steel-blue (approved v2) */
  --paper:     #f3ede2;
  --limestone: #ece3d4;
  --line:      #ddd3c2;
  --rust-700:  #8f3416;
  --rust-600:  #ae4420;
  --rust-500:  #c05a2e;
  --rust-300:  #dd9061;
  --ink:       #12181d;
  --steel-700: #204a63;
  --steel-800: #17394d;
}

/* type brought down from the 5rem hero shout */
h1 { font-size: clamp(2.3rem, 1.55rem + 3vw, 3.75rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.8rem); }

/* ---- band spacing under the 80px ceiling (.ridge was 102px) ---- */
.ridge {
  padding-block: clamp(56px, 6vh, 80px);
  clip-path: polygon(0 1.8vw, 100% 0, 100% 100%, 0 calc(100% - 1.8vw));
}

/* ==========================================================================
   HERO — line-mask headline
   ========================================================================== */
.reveal-headline .line { display: block; overflow: hidden; }
.reveal-headline .line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-headline .line > span {
    transform: translateY(105%);
    animation: ir-line-rise 1000ms cubic-bezier(.22,1,.36,1) both;
  }
  .reveal-headline .line:nth-child(1) > span { animation-delay: .12s; }
  .reveal-headline .line:nth-child(2) > span { animation-delay: .28s; }
}
@keyframes ir-line-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* ---- storm seal: stamped confidence, image side, desktop only ---- */
.storm-badge {
  position: absolute; top: clamp(102px, 13vh, 150px); right: var(--gutter); z-index: 1;
  width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 1px;
  border: 2px solid var(--rust-300);
  background: color-mix(in srgb, var(--steel-950) 52%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.6);
  transform: rotate(-7deg);
}
.storm-badge::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1px dashed rgba(221,144,97,.5);
}
.storm-badge .sb-top, .storm-badge .sb-bot {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--rust-300);
}
.storm-badge .sb-big {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: #fff; line-height: 1; letter-spacing: .01em; margin: 2px 0;
}
@media (max-width: 992px) { .storm-badge { display: none; } }

/* ==========================================================================
   CTA FILL-WIPE (hover-only bottom wipe + arrow nudge + ≤2px lift)
   ========================================================================== */
.btn-primary, .btn-steel, .btn-ghost-light {
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary::before, .btn-steel::before, .btn-ghost-light::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.btn-primary::before  { background: var(--rust-700); }
.btn-steel::before    { background: var(--steel-800); }
.btn-ghost-light::before { background: #fff; }
.btn-primary:hover, .btn-primary:focus-visible,
.btn-steel:hover, .btn-steel:focus-visible,
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { color: #fff; }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { color: var(--steel-900); }
.btn-primary:hover::before, .btn-primary:focus-visible::before,
.btn-steel:hover::before, .btn-steel:focus-visible::before,
.btn-ghost-light:hover::before, .btn-ghost-light:focus-visible::before {
  transform: translateY(0);
}
@media (hover: hover) {
  .btn-primary, .btn-steel, .btn-ghost-light { transition: transform .18s ease, color .18s ease; }
  .btn-primary:hover, .btn-steel:hover, .btn-ghost-light:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-headline .line > span { transform: none !important; animation: none !important; }
  .btn-primary::before, .btn-steel::before, .btn-ghost-light::before { transition: none; }
  .btn-primary:hover, .btn-steel:hover, .btn-ghost-light:hover { transform: none; }
}

/* ==========================================================================
   BRAND MARK v3: new Ironhill logo (2026-08-06)
   The new artwork is 476x148 (3.2:1) where the old mark was 5.7:1, so the
   lockup is sized by HEIGHT here. That keeps it inside the header band no
   matter how the aspect ratio moves, instead of letting width drive it.
   ========================================================================== */
.nav { min-height: clamp(80px, 9vh, 96px); }
.brand img { width: auto; height: clamp(48px, 5.6vw, 64px); }
.footer-brand img { width: auto; height: 62px; }

/* Nav CTA was inheriting the body .btn size (178x60), nearly as heavy as the
   66px hero button. Scoped down so the header reads as navigation, not a
   second hero. Body and hero buttons are untouched. */
.nav-actions .btn {
  font-size: .88rem;
  padding: 10px 20px;
  min-height: 42px;
}

/* ==========================================================================
   HERO v3 (2026-08-06): new tear-off photo, flat tint, tighter mobile lead-in
   ========================================================================== */

/* Flat tint, not a scrim. The old treatment layered a rust radial glow over two
   dark gradients, which is what made this hero read as a sibling of the Northline
   HVAC one. A single even tint lets the photo be the photo. */
.hero::before {
  background: rgba(11, 18, 25, .66);
}

/* The old scrim was near-opaque down the left edge, so the warm accent type was
   sitting on almost-black and passed contrast by accident. An even tint does not
   do that, so the two warm colours are lifted here to earn their ratios on merit.
   Measured over the actual photo: eyebrow 4.8:1 (needs 4.5 at 12px),
   headline accent 3.3:1 (needs 3.0 at that size). */
.hero .eyebrow { color: #f7d0b4; }
.hero .eyebrow::before { background: #f7d0b4; }
.hero h1 .em { color: #efb189; }

/* Mobile opened with 127px of empty photo between the header and the first line
   of text, so the headline started below the fold on a small phone. */
@media (max-width: 768px) {
  .hero { padding-block: clamp(48px, 7.5vh, 72px) clamp(44px, 6vh, 72px); }
}

/* ==========================================================================
   PAGE-HEAD FULL WIDTH (2026-08-06)
   The head block at the top of each interior page sat in a 780px column inside
   a 1200px band, leaving the heading and lede stranded with empty space beside
   them. The head block runs the band's full width. Body copy further down the
   page keeps its readable measure.
   ========================================================================== */
.section-top .narrow { max-width: var(--wrap); }

/* ---- trust strip: uniform single-line values ----------------------------
   The four values wrapped unevenly (1 line, 2, 1, 2) because the strip was
   capped at 820px, leaving each cell 6px short of the longest value. Letting
   it use the hero's width clears it. Below 720px the strip becomes one row per
   item with the label and value on a single line, so every value stays on one
   line at every size instead of re-wrapping raggedly. */
.trust-strip { max-width: none; }
.trust-strip div { padding: 16px 20px; }
/* Below ~900px four cells are narrower than the longest value, so the strip
   switches to one row per item rather than wrapping some values and not others. */
@media (max-width: 900px) {
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 13px 16px;
  }
  .trust-strip .t-k { margin-bottom: 0; flex: none; }
  .trust-strip .t-v { text-align: right; }
}

/* ==========================================================================
   BREADCRUMBS + FAQ (2026-08-06)
   Added for the per-service pages. Both are reusable site-wide.
   ========================================================================== */

/* Plain underlined text, not pills. A breadcrumb is a path, not a filter set. */
.crumbs { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; color: var(--steel-500); margin: 0 0 1.4rem; }
.crumbs a { color: var(--steel-700); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--rust-600); }
.crumbs .sep { padding: 0 .55em; color: var(--steel-300); }

/* Accordion. The chevron is drawn at rest, not on hover, so the control reads
   as expandable before the pointer arrives (and on touch, where hover is a lie). */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem); color: var(--ink);
  text-wrap: balance;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: .4em;
  border-right: 2.4px solid var(--rust-600); border-bottom: 2.4px solid var(--rust-600);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-item > summary:hover { color: var(--rust-600); }
.faq-item > summary:focus-visible { outline: 3px solid var(--rust-600); outline-offset: 3px; }
.faq-answer { padding: 0 0 24px; color: var(--text-soft); font-size: 1rem; line-height: 1.65; text-wrap: pretty; }
.faq-answer p { margin-bottom: .85rem; }
.faq-answer a { color: var(--rust-600); text-decoration: underline; text-underline-offset: 3px; }
.faq-group + .faq-group { margin-top: clamp(34px, 5vh, 54px); }
.faq-group h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .6em; }

/* Standalone "read more" link (services list rows, outside a card) and the
   service headings on the services page, which now link to their own pages. */
a.more {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--rust-600); text-decoration: underline; text-underline-offset: 4px;
}
a.more:hover { color: var(--steel-800); }
.svc-detail h3 a { color: inherit; text-decoration: none; }
.svc-detail h3 a:hover { color: var(--rust-600); }

/* The step component was written assuming it only ever sat on the dark .ridge
   band, so its type was hard-coded white. The service pages put it on a light
   band, where it disappeared. Light is now the default and the reversed
   treatment is scoped to .ridge, so the component works on either surface. */
.step h3 { color: var(--ink); }
.step p { color: var(--text-soft); opacity: 1; }
.ridge .step h3 { color: #fff; }
.ridge .step p { color: var(--steel-100); opacity: .92; }
.step::before { background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }
.ridge .step::before { background: linear-gradient(90deg, transparent, rgba(123,167,194,.4) 15%, rgba(123,167,194,.4) 85%, transparent); }

/* Body copy now runs the full width of the band, so the intro sets a step up in
   size. Long measures need larger type, not the same type stretched wider. */
.svc-intro { max-width: 780px; }
.svc-intro p { font-size: 1.03rem; line-height: 1.7; color: var(--text-soft); text-wrap: pretty; }

/* ==========================================================================
   SERVICES DROPDOWN (2026-08-06)
   The motion is the site's ridgeline motif rather than a generic fade: the
   panel unfolds downward like a roof panel dropping into place, its lower edge
   cut on the same angle as the .ridge band, a rust course draws left to right
   along the top, and the items land in sequence behind it.
   ========================================================================== */
.nav-links .has-sub { position: relative; }
.nav-links .has-sub > a { display: inline-flex; align-items: center; gap: .45em; }

/* Drawn at rest, so the item reads as expandable before the pointer arrives. */
.nav-caret {
  width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.has-sub:hover > a .nav-caret,
.has-sub:focus-within > a .nav-caret,
.has-sub.open > a .nav-caret { transform: translateY(1px) rotate(-135deg); }

/* The wrapper is a transparent bridge across the gap under the nav item, so the
   pointer can travel from the link to the panel without losing hover. */
.submenu {
  position: absolute; top: 100%; left: -20px;
  padding-top: 16px; z-index: 120;
  pointer-events: none;
}
.submenu > ul {
  position: relative;
  list-style: none; margin: 0; padding: 12px 0 14px;
  min-width: 272px;
  background: var(--steel-900);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 28px 54px -24px rgba(11, 18, 25, .66);
  /* closed: zero height. open: full height with the ridgeline cut on the base. */
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    clip-path .42s cubic-bezier(.16, 1, .3, 1),
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .18s ease;
}
/* the rust course along the top edge */
.submenu > ul::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--rust-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform .44s cubic-bezier(.16, 1, .3, 1) .06s;
}
.submenu li { border: 0; }
.submenu a {
  display: block; padding: 9px 22px;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  color: var(--steel-100); white-space: nowrap;
  opacity: 0; transform: translateY(-7px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1),
              color .18s ease, background-color .18s ease;
  transition-delay: calc(80ms + var(--i, 0) * 38ms);
}
.submenu a::after { display: none; }   /* the nav underline does not belong here */
.submenu a:hover,
.submenu a:focus-visible { color: #fff; background: rgba(123, 167, 194, .14); }
.submenu a:focus-visible { outline: 2px solid var(--rust-500); outline-offset: -2px; }
.submenu .sub-all {
  margin-top: 8px; padding-top: 13px;
  border-top: 1px solid rgba(123, 167, 194, .24);
}
.submenu .sub-all a { color: var(--rust-300); }

/* open state, driven by hover, keyboard focus, or the JS toggle on touch */
.has-sub:hover .submenu,
.has-sub:focus-within .submenu,
.has-sub.open .submenu { pointer-events: auto; }
.has-sub:hover .submenu > ul,
.has-sub:focus-within .submenu > ul,
.has-sub.open .submenu > ul {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), 0 100%);
  opacity: 1; transform: translateY(0);
}
.has-sub:hover .submenu > ul::before,
.has-sub:focus-within .submenu > ul::before,
.has-sub.open .submenu > ul::before { transform: scaleX(1); }
.has-sub:hover .submenu a,
.has-sub:focus-within .submenu a,
.has-sub.open .submenu a { opacity: 1; transform: translateY(0); }

/* ---- mobile: the same list as an accordion inside the panel ---- */
.mobile-panel .m-has-sub { display: grid; grid-template-columns: 1fr auto; }
.mobile-panel .m-has-sub > a { grid-column: 1; }
.m-sub-toggle {
  grid-column: 2; align-self: center;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--rust-300);
  display: grid; place-items: center;
}
.m-sub-toggle::before {
  content: ""; width: 11px; height: 11px;
  border-right: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.m-sub-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.m-sub-toggle:focus-visible { outline: 2px solid var(--rust-500); outline-offset: -3px; }
.m-submenu {
  grid-column: 1 / -1; margin: 0; padding: 0; list-style: none;
  max-height: 0; overflow: hidden;
  transition: max-height .38s cubic-bezier(.16, 1, .3, 1);
}
.m-submenu.open { max-height: 460px; }
.mobile-panel .m-submenu li { border: 0; }
.mobile-panel .m-submenu a {
  padding: 11px 2px 11px 18px;
  font-size: 1rem; font-weight: 500; color: var(--steel-100);
  border-left: 2px solid rgba(123, 167, 194, .3);
}
.mobile-panel .m-submenu a:hover { color: var(--rust-300); border-left-color: var(--rust-500); }

@media (prefers-reduced-motion: reduce) {
  .submenu > ul, .submenu > ul::before, .submenu a,
  .nav-caret, .m-sub-toggle::before, .m-submenu { transition: none; }
}

/* ==========================================================================
   PORTFOLIO / WORK PAGE (2026-08-06)
   Built to stay usable as the project count grows. The Oklahoma roofing sites
   we looked at either dump 50 untitled photos into one scroll or hand-place a
   dozen cards with no filtering, so both break the moment a company has 25
   jobs worth showing. This filters by service and by metro area, reveals in
   pages of six, and keeps the per-project metadata those galleries omit.
   ========================================================================== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 22px 40px;
  padding: 20px 0 22px; margin-bottom: clamp(24px, 3vh, 34px);
  border-block: 1px solid var(--line);
}
.filter-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-set > .k {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel-500); margin-right: 6px;
}
.filter-btn {
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  color: var(--steel-700); background: transparent;
  border: 1px solid var(--line); border-radius: 40px;
  padding: 8px 15px; min-height: 38px; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.filter-btn:hover { border-color: var(--steel-300); color: var(--ink); }
.filter-btn[aria-pressed="true"] {
  background: var(--steel-800); border-color: var(--steel-800); color: #fff;
}
.filter-btn:focus-visible { outline: 3px solid var(--rust-500); outline-offset: 2px; }

.result-count {
  font-family: var(--font-mono); font-size: .8rem; color: var(--steel-500);
  margin: 0 0 18px;
}

.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 900px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .proj-grid { grid-template-columns: 1fr; } }

.proj {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.proj:hover { transform: translateY(-3px); border-color: var(--steel-300); box-shadow: var(--shadow); }
.proj[hidden] { display: none; }
/* new page of results settles in rather than snapping */
.proj.enter { animation: projIn .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes projIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .proj.enter { animation: none; } }

.proj-media { position: relative; aspect-ratio: 3 / 2; background: var(--limestone); }
.proj-media img { width: 100%; height: 100%; object-fit: cover; }
.proj-tag {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--rust-600); color: #fff;
  padding: 6px 10px; border-radius: 2px;
}
.proj-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.proj-body h3 { font-size: 1.12rem; margin-bottom: .45em; }
.proj-body > p { color: var(--text-soft); font-size: .95rem; margin: 0 0 16px; }
.proj-spec {
  margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.proj-spec div { display: flex; flex-direction: column; gap: 2px; }
.proj-spec .k {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--steel-500);
}
.proj-spec .v { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--ink); }

.load-wrap { text-align: center; margin-top: clamp(26px, 4vh, 40px); }
.no-results { padding: 40px 0; color: var(--text-soft); }

/* ---- case studies: the three jobs told properly ---- */
.case { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.case + .case { margin-top: clamp(40px, 6vh, 72px); padding-top: clamp(40px, 6vh, 72px); border-top: 1px solid rgba(123,167,194,.24); }
.case:nth-child(even) .case-media { order: 2; }
.case-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.case-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.case-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.case-steps .n {
  font-family: var(--font-mono); font-size: .75rem; color: var(--rust-300);
  border: 1px solid rgba(225,144,100,.45); border-radius: 40px;
  padding: 3px 9px; margin-top: 2px;
}
.case-steps .t { font-family: var(--font-display); font-weight: 700; color: #fff; display: block; margin-bottom: 2px; }
.case-steps p { margin: 0; font-size: .95rem; color: var(--steel-100); }
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; gap: 24px; }
  .case:nth-child(even) .case-media { order: 0; }
}
.proj-spec.proj-area { border-top: 0; padding-top: 10px; grid-template-columns: 1fr; }
.case-title { font-size: clamp(1.4rem, 2.4vw, 2rem); color: #fff; }
.case-intro { color: var(--steel-100); }
.on-dark { color: #fff; }
.on-dark-soft { color: var(--steel-100); }