/* =========================================================
   Perfectionist Aluminum — Almont, MI
   Trade-shop, metal-forward. Palette sampled from the logo
   (navy italic wordmark, red band) plus copper and aluminum.
   ========================================================= */

:root {
  /* brand */
  --blue: #1e3f8f;
  --blue-deep: #142a63;
  --blue-ink: #0d1a3d;
  --blue-ink-deep: #08122c;
  --red: #c4262e;
  --red-deep: #9e1c23;
  --copper: #b8733d;
  --copper-deep: #8a5127;
  --copper-light: #e6bf95;

  /* neutrals tinted toward the brand blue, like brushed aluminum */
  --ink: #161b26;
  --ink-2: #2b3242;
  --mute: #5e6777;
  --line: #cbd0d9;
  --line-soft: #e2e5eb;
  --alu-50: #f5f6f8;
  --alu-100: #eceef2;
  --alu-200: #dfe2e8;
  --paper: #f8f9fb;

  /* ink on dark */
  --fg-2: #c9d1e3;
  --fg-3: #9aa6c2;
  --edge: rgba(242, 245, 250, .16);
  --edge-soft: rgba(242, 245, 250, .08);

  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4rem, 9vw, 8rem);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 640ms;

  --radius-xs: 2px;
  /* the bar is tall over the hero and compacts once the page moves */
  --header-h: clamp(5.75rem, 11vh, 7.25rem);
  --header-h-stuck: 4.4rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1; }
p { margin: 0; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); scroll-margin-top: 5.5rem; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blue); color: #fff; padding: .6rem 1rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.skip:focus { top: 1rem; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 3px; background: var(--red); flex: none; }
.eyebrow--copper { color: var(--copper-light); }
.eyebrow--copper::before { background: var(--copper); }

.h2 {
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .95;
  max-width: 14ch;
}
.lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.lead--light { color: var(--fg-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: .8rem 1.4rem; border: 2px solid transparent; border-radius: var(--radius-xs);
  cursor: pointer; white-space: nowrap;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--lg { font-size: 1.15rem; padding: 1rem 1.75rem; }
.btn--block { width: 100%; font-size: 1.15rem; padding: 1rem 1.25rem; }
.btn--red { background: var(--red); color: #fff; border-color: var(--red); }
.btn--red:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn--outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost-dark:hover { background: #fff; color: var(--blue-ink); border-color: #fff; }
.btn--ghost-tint { background: rgba(13,26,61,.45); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(2px); }
.btn--ghost-tint:hover { background: #fff; color: var(--blue-ink); border-color: #fff; }
.btn[disabled] { opacity: .7; cursor: default; }
.nowrap { white-space: nowrap; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--blue);
  border-bottom: 2px solid var(--red); padding-bottom: .15rem;
}
.link-arrow::after { content: "→"; transition: transform 200ms var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--light { color: #fff; border-bottom-color: var(--copper); }

/* ---------- Logo lockup ----------
   The real horizontal mark, whose wordmark is navy on transparency: over the
   navy bar, and over the hero photograph, it would simply disappear. The halo
   is stacked drop-shadows rather than a panel behind it, because a filter reads
   the alpha channel and so the light follows the letterforms themselves — the
   transparent field around them stays transparent. Each shadow is applied to
   the result of the one before it, which is what builds the spread. */
.logo {
  position: relative; display: flex; align-items: center; flex: none;
  /* it is a flex item in the bar but plain block flow on the thanks page, where
     a flex container would otherwise stretch it across the column */
  width: max-content; max-width: 100%;
}
.logo img {
  display: block; height: clamp(2.5rem, 3.4vw, 3.05rem); width: auto;
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 5px rgba(255, 255, 255, .92))
    drop-shadow(0 0 13px rgba(255, 255, 255, .5));
  transition: height 450ms var(--ease-out);
}

/* ---------- Header: a scrim over the hero, a solid bar once you scroll ----------
   Transparent to start, riding on its own gradient scrim so the links stay
   readable over the photograph; past 60px the scrim fades out, the navy comes
   in, and the row (with the lockup in it) shrinks. Below 1000px the nav folds
   into a panel that drops out of the bar. The panel is only hidden when JS is
   running, so with no JS the links simply stay out in the bar. */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; box-shadow: none;
  transition: background-color 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}
.header.is-scrolled, .header.is-open { background-color: var(--blue-ink); }
.header.is-scrolled { box-shadow: 0 8px 28px -12px rgba(0,0,0,.6); }
.header__scrim {
  position: absolute; top: 0; left: 0; right: 0; bottom: -3.5rem;
  pointer-events: none; opacity: 1;
  background: linear-gradient(180deg, rgba(8,18,44,.86), rgba(8,18,44,.42) 52%, rgba(8,18,44,0));
  transition: opacity 450ms var(--ease-out);
}
.header.is-scrolled .header__scrim, .header.is-open .header__scrim { opacity: 0; }
.header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--header-h); padding-block: .6rem;
  transition: min-height 450ms var(--ease-out);
}
.header.is-scrolled .header__inner { min-height: var(--header-h-stuck); }
.header.is-scrolled .logo img { height: 2.15rem; }
/* flex: none the whole way down. A flex item shrinks below its width by
   default, so a wide wordmark (a fallback font, a large system text size)
   could squeeze the burger to nothing and take the menu off the bar. The
   lockup gives way instead. */
.header__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.header__phone, .nav-toggle { flex: none; }
.logo { min-width: 0; }
.logo img { max-width: 100%; }

.nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #fff;
  position: relative; padding: .25rem 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }
.nav__mobile-extra { display: none; }
/* the pages that only exist off the home page: in the panel, not the bar,
   because the bar is full at exactly the width the panel takes over */
@media (min-width: 1000px) { .nav__more { display: none; } }

.nav-toggle {
  display: none; width: 44px; height: 44px; min-width: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center;
}
/* margin rather than gap: flexbox gap is missing on iOS below 14.5, and there
   the three bars would stack flush and read as a single block */
.nav-toggle span { display: block; width: 24px; height: 3px; background: #fff; transition: transform 240ms var(--ease-out), opacity 200ms; transform-origin: center; }
.nav-toggle span + span { margin-top: 5px; }

@media (max-width: 999px) {
  :root { --header-h: 5.25rem; --header-h-stuck: 3.9rem; }
  .header__phone span { display: none; }
  .header__phone { padding: .7rem .8rem; }
  .logo img { height: 2.35rem; }
  .header.is-scrolled .logo img { height: 2rem; }
  body.js .nav-toggle { display: flex; }
  /* the panel that drops out of the bar */
  body.js .nav {
    /* the bar rides in the container, the panel bleeds back out to full width */
    position: absolute; top: 100%; z-index: 60;
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
    display: none;
    background: var(--blue-ink); color: #fff;
    border-top: 1px solid var(--edge);
    box-shadow: 0 22px 44px -18px rgba(0,0,0,.7);
    padding: .25rem var(--gutter) 1.4rem;
    max-height: calc(100svh - var(--header-h-stuck)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.js .header.is-open .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em;
    padding: .9rem 0; border-bottom: 1px solid var(--edge-soft);
  }
  .nav ul li:last-child a { border-bottom: 0; }
  .nav ul a::after {
    content: ""; position: static; width: .5rem; height: .5rem; flex: none;
    border-right: 2px solid var(--copper-light); border-top: 2px solid var(--copper-light);
    background: none; transform: rotate(45deg); transition: transform 220ms var(--ease-out);
  }
  .nav ul a:hover::after { transform: rotate(45deg) translate(2px, -2px); }
  .nav__mobile-extra { display: grid; gap: .6rem; margin-top: 1rem; }
  .nav__mobile-extra .btn { font-size: 1.1rem; letter-spacing: .06em; padding: .9rem 1.2rem; color: #fff; }
  .nav__mobile-note { color: var(--fg-3); font-size: .95rem; margin-top: .5rem; }
  .header.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

@media (max-width: 400px) {
  .logo img { height: 1.95rem; }
  .header.is-scrolled .logo img { height: 1.8rem; }
}

/* ---------- Hero: fills the first screen ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--blue-ink-deep); color: #fff;
}
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; object-position: 62% 40%; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,18,44,.88) 0%, rgba(8,18,44,.42) 24%, rgba(8,18,44,.30) 48%, rgba(8,18,44,.78) 82%, rgba(8,18,44,.96) 100%),
    linear-gradient(90deg, rgba(8,18,44,.86) 0%, rgba(8,18,44,.52) 46%, rgba(8,18,44,.08) 88%);
}
.hero__inner {
  position: relative; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; color: var(--copper-light);
}
.hero h1 {
  font-size: clamp(2.9rem, 1rem + 5.4vw, 5.4rem);
  font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.01em;
  max-width: 14ch; color: rgba(226,233,245,.74); text-wrap: balance;
  text-shadow: 0 2px 30px rgba(8,18,44,.5);
}
.hero h1 em { font-style: italic; color: #fff; }
.hero__lede { margin-top: 1.4rem; max-width: 46ch; font-size: clamp(1.05rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(8,18,44,.7); }
.hero__prompt { margin-top: 1.8rem; margin-bottom: .7rem; color: var(--copper-light); font-size: 1rem; }
.btn--hero { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); padding: 1rem 1.6rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hero__ghost { display: none; }
.hero__trust {
  margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem;
  font-size: .92rem; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(8,18,44,.8);
}
.hero__trust .dot { width: 4px; height: 4px; background: var(--copper-light); }

.hero__card {
  background: #fff; color: var(--ink); border-radius: var(--radius-xs);
  box-shadow: 0 24px 60px -10px rgba(4,10,30,.6); border-top: 6px solid var(--red);
  padding: 1.35rem 1.4rem 1.4rem; width: 100%; max-width: 470px; justify-self: end;
}
.hero__card-title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.05; text-transform: uppercase; }
.hero__card-sub { color: var(--mute); font-size: .9rem; margin: .2rem 0 1rem; }

@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); align-items: end; }
  .hero__copy { padding-bottom: .5rem; }
}
@media (max-width: 999px) {
  .hero__card { display: none; }
  .hero__ghost { display: inline-flex; margin-top: .7rem; width: 100%; max-width: 360px; padding: .95rem 1.2rem; font-size: 1.1rem; }
  .btn--hero { width: 100%; max-width: 360px; }
  .hero__bg img { object-position: 58% 40%; }
}
@media (max-width: 400px) {
  .btn--hero, .hero__ghost, .btn--block, .btn--lg, .btn--outline { white-space: normal; text-align: center; flex-wrap: wrap; row-gap: .1rem; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(8,18,44,.9) 0%, rgba(8,18,44,.55) 30%, rgba(8,18,44,.6) 60%, rgba(8,18,44,.96) 100%);
  }
}

/* ---------- Trust bar under the hero ---------- */
.trust { position: relative; background: var(--blue-deep); color: #fff; padding-block: clamp(1.6rem, 3vw, 2.2rem); }
.trust__apex {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%);
  width: clamp(110px, 11vw, 150px); height: clamp(28px, 3.2vw, 40px);
  background: var(--blue-deep); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(1.1rem, 2.6vw, 2.2rem); }
.trust__grid li { display: flex; gap: .8rem; align-items: flex-start; }
.trust__grid svg { flex: none; margin-top: .15rem; color: var(--copper-light); }
.trust__grid strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
.trust__grid span { display: block; margin-top: .15rem; font-size: .88rem; color: var(--fg-3); line-height: 1.4; }

/* ---------- Ticker ---------- */
.ticker { background: var(--blue); color: #fff; overflow: hidden; border-block: 3px solid var(--blue-deep); }
.ticker__track {
  display: flex; width: max-content; padding-block: .8rem;
  animation: ticker 48s linear infinite;
}
.ticker__track span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase;
  padding-inline: 1.6rem; position: relative; white-space: nowrap;
}
.ticker__track span::after { content: "•"; position: absolute; right: -.35rem; color: var(--copper-light); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- Quick estimate: the mid-page form ----------
   The stand-in for the hero card, which is hidden below 1000px. It shows on
   exactly the widths that lose the card, so no screen ever gets both. */
.quick { display: none; background: var(--alu-100); border-bottom: 1px solid var(--line-soft); padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
@media (max-width: 999px) { .quick { display: block; } }
.quick__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; }
.quick__title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: .98; margin-top: 1rem; max-width: 16ch;
}
.quick__lede { margin-top: 1rem; color: var(--ink-2); max-width: 40ch; }
.quick__or { margin-top: 1.25rem; font-size: .98rem; color: var(--mute); }
.quick__tel {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: .05rem;
}
.quick__tel:hover { color: var(--red); border-color: var(--ink); }
/* two classes deep so it beats the generic .form rule further down the file */
.quick .quick__form {
  background: #fff; padding: clamp(1.25rem, 2.6vw, 1.9rem);
  border-top: 4px solid var(--red); box-shadow: 0 22px 44px -26px rgba(22, 27, 38, .5);
}

/* ---------- Services: a photo card per trade ---------- */
.services { background: var(--paper); }
.services__head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.services__intro .lead { margin-bottom: 1.25rem; }

.svc-grid { list-style: none; display: grid; gap: clamp(.75rem, 1.4vw, 1.1rem); grid-template-columns: 1fr; }
.svc {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 5; min-height: 17rem;
  background: var(--blue-ink-deep); color: #fff;
  display: flex; align-items: flex-end;
}
.svc img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.svc::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,18,44,.30) 0%, rgba(8,18,44,.10) 34%, rgba(8,18,44,.72) 66%, rgba(8,18,44,.94) 100%);
}
.svc:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .svc:hover img { transform: none; } }
/* the copper rule is the same mark the numbered list used to carry */
.svc__body { position: relative; padding: 1.15rem 1.15rem 1.25rem; }
.svc__num {
  font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .18em;
  color: var(--copper-light); margin-bottom: .35rem;
}
.svc h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.35rem); font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.05;
}
.svc__body p:last-child { margin-top: .5rem; font-size: .95rem; line-height: 1.45; color: var(--fg-2); }
.svc::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out);
}
.svc:hover::before { transform: scaleX(1); }

@media (min-width: 620px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) { .services__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } }

/* ---------- Materials ---------- */
.materials { background: var(--alu-100); border-top: 1px solid var(--line-soft); }
.materials__head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.materials__grid { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.material { padding: 2rem 0 2.25rem; border-bottom: 1px solid var(--line); }
.material h3 { font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; text-transform: uppercase; margin-top: 1.25rem; }
.material__tag { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-size: .9rem; margin-top: .35rem; }
.material > p:not(.material__tag) { margin-top: 1rem; color: var(--ink-2); max-width: 38ch; }
.material dl { margin-top: 1.5rem; display: grid; gap: .5rem; }
.material dl div { display: grid; grid-template-columns: 6rem 1fr; gap: .75rem; font-size: .95rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.material dt { font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-size: .8rem; padding-top: .15rem; }
.material dd { color: var(--ink); }

/* The swatch is a render of the actual profile, sat on the section ground
   rather than boxed, so the formed edge reads as the shape of the metal. */
.swatch { display: block; }
.swatch img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 18px rgba(22, 27, 38, .22));
}

@media (min-width: 720px) {
  .materials__head { grid-template-columns: 1fr 1fr; }
  .materials__grid { grid-template-columns: repeat(3, 1fr); }
  .material { padding: 2rem 2rem 2.5rem 0; border-bottom: 0; }
  .material + .material { padding-left: 2rem; border-left: 1px solid var(--line); }
}

/* ---------- Featured project ---------- */
.featured { background: var(--blue-ink); color: #fff; position: relative; }
.featured::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--copper-deep), var(--copper), var(--copper-light));
}
.featured__grid { display: grid; gap: 3rem; align-items: center; }
.featured__media { position: relative; padding-right: 16%; padding-bottom: 22%; }
.featured__img-main { width: 100%; aspect-ratio: 9 / 8; object-fit: cover; }
.featured__img-detail {
  position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 6px solid var(--blue-ink); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}
.featured__copy .h2 { color: #fff; }
.featured__copy .lead { margin-top: 1.5rem; }
.spec { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 1rem; }
.spec th, .spec td { text-align: left; padding: .7rem 0; border-top: 1px solid var(--edge); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--edge); }
.spec th { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-light); font-size: .85rem; width: 7.5rem; padding-right: 1rem; padding-top: .8rem; }
.featured__quote { margin-top: 2rem; padding-left: 1.25rem; border-left: 3px solid var(--copper); }
.featured__quote p { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.featured__quote cite { display: block; margin-top: .5rem; font-style: normal; color: var(--fg-3); font-size: .95rem; }

@media (min-width: 900px) {
  .featured__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 7rem); }
}

/* ---------- Recent work mosaic ---------- */
.work { background: var(--paper); }
.work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.mosaic__item { position: relative; overflow: hidden; background: var(--alu-200); }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 900ms var(--ease-out); }
.mosaic__item:hover img { transform: scale(1.03); }
.mosaic__item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem .9rem;
  background: linear-gradient(180deg, rgba(13,26,61,0) 0%, rgba(13,26,61,.85) 100%);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .03em; line-height: 1.2;
  display: flex; flex-direction: column; gap: .3rem;
}
.tag {
  display: inline-block; width: max-content;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: .22rem .5rem .18rem; margin-bottom: .2rem;
}
/* The three written tiles have no photograph of their own — these are jobs we
   have no shot of — so rather than sit as flat blocks between the photographs
   they carry a length of the metal they were run in, repeated down the tile
   and knocked back into the tile colour. Material, not a claim about the job. */
.mosaic__item--text { position: relative; isolation: isolate; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 16rem; }
.mosaic__item--text::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: repeat-y; background-position: center top; background-size: 100% auto;
  mix-blend-mode: luminosity;
}
.mosaic__item--navy { background: var(--blue); color: #fff; }
.mosaic__item--navy::before { background-image: url(../images/profile-aluminum-800.webp); opacity: .17; }
.mosaic__item--copper { background: var(--copper-deep); color: #fff; }
.mosaic__item--copper::before { background-image: url(../images/profile-copper-800.webp); opacity: .34; mix-blend-mode: normal; }
.mosaic__item--light { background: var(--alu-200); color: var(--ink); }
.mosaic__item--light::before { background-image: url(../images/profile-steel-800.webp); opacity: .16; }
.mosaic__label { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.mosaic__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: .98; text-transform: uppercase; }
.mosaic__item--text > p:last-child { font-size: .95rem; opacity: .9; max-width: 30ch; }
@media (max-width: 719px) {
  .mosaic { grid-template-columns: 1fr; }
  .mosaic__item img { aspect-ratio: 1 / 1; object-position: center 30%; }
  .mosaic__item--text { grid-column: 1 / -1; min-height: 0; padding: 1.35rem; }
  .mosaic__item--text > p:last-child { max-width: 40ch; }
}
@media (min-width: 720px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(15rem, auto); grid-auto-flow: dense; }
  .mosaic__item--tall { grid-row: span 2; }
  .mosaic__item img { aspect-ratio: auto; position: absolute; inset: 0; }
  .mosaic__item { min-height: 15rem; }
}
@media (min-width: 1000px) {
  .mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 14rem; }
  .mosaic__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .mosaic__item:nth-child(2) { grid-column: span 2; grid-row: span 2; }
  .mosaic__item:nth-child(3) { grid-column: span 2; }
  .mosaic__item:nth-child(4) { grid-column: span 2; }
  .mosaic__item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
  .mosaic__item:nth-child(6) { grid-column: span 2; grid-row: span 2; }
  .mosaic__item:nth-child(7) { grid-column: span 2; }
  .mosaic__item:nth-child(8) { grid-column: span 2; }
}

/* ---------- Process ---------- */
.process { background: var(--alu-100); border-top: 1px solid var(--line-soft); }
.process__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.process__head .h2 { max-width: 20ch; }
.steps { list-style: none; display: grid; gap: 2rem; }
.steps li { position: relative; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.steps__num { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--copper); display: block; }
.steps h3 { font-size: 1.45rem; font-weight: 700; text-transform: uppercase; margin-top: .75rem; letter-spacing: .01em; }
.steps p { margin-top: .5rem; color: var(--ink-2); max-width: 32ch; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }

/* ---------- Reviews ---------- */
.reviews { background: var(--blue-ink); color: #fff; position: relative; }
.reviews::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--red); }
.reviews__head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.reviews__head .h2 { color: #fff; }
.reviews__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }

.review { background: var(--blue-deep); padding: clamp(1.5rem, 3vw, 2.5rem); border-left: 4px solid var(--copper); }
.review__stars { display: flex; gap: .2rem; margin-bottom: 1.1rem; }
.review__stars svg { width: 20px; height: 20px; fill: var(--copper-light); }
.review blockquote p { font-family: var(--font-display); font-weight: 600; font-size: var(--q, clamp(1.45rem, 2.4vw, 2.1rem)); line-height: 1.15; }
.review figcaption { margin-top: 1.25rem; display: grid; gap: .15rem; }
.review figcaption strong { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; }
.review figcaption span { font-size: .9rem; color: var(--fg-3); }
.review__reply { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--edge); font-size: .98rem; color: var(--fg-2); }
.review__reply-who { display: block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-light); margin-bottom: .25rem; }

/* ---------- Review carousel ----------
   Slides are stacked in one grid cell, so the frame is as tall as the longest
   recommendation and nothing below it jumps when the slide changes. With no
   JS the stack simply renders as a column of every review, controls hidden. */
.carousel { display: grid; gap: 1.1rem; }
.js .carousel__track { display: grid; }
.js .carousel__track > .review { grid-area: 1 / 1; }
.js .carousel__track > .review[aria-hidden="true"] {
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 320ms var(--ease-out), transform 380ms var(--ease-out), visibility 0s linear 380ms;
}
.js .carousel__track > .review {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 380ms var(--ease-out), transform 420ms var(--ease-out), visibility 0s;
}
.carousel__track > .review + .review { margin-top: 1rem; }
.js .carousel__track > .review + .review { margin-top: 0; }

.carousel__ui { display: flex; align-items: center; gap: .85rem; }
/* the controls are only unhidden by the script, so a no-JS page keeps the stack */
.carousel__ui[hidden] { display: none; }
.carousel__arrow {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--edge); background: transparent; color: #fff; cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.carousel__arrow svg { width: 19px; height: 19px; }
.carousel__arrow:hover { background: var(--copper); border-color: var(--copper); color: var(--blue-ink); }
.carousel__dots { display: flex; align-items: center; gap: .4rem; }
/* The active dot stretches into a pill and fills across the dwell time. Its
   width is set frame by frame from main.js rather than by a CSS animation —
   see the note there — so everything below is the resting state only. */
.carousel__dot {
  position: relative; overflow: hidden; width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 999px; background: rgba(242, 245, 250, .3); cursor: pointer;
  /* quick: the fill starts the moment the pill is selected, so a slow stretch
     reads as the bar failing to start */
  transition: width 190ms var(--ease-out), background-color 200ms ease;
}
.carousel__dot:hover { background: rgba(242, 245, 250, .55); }
/* wide enough that the fill covers real distance over the dwell: at 34px it
   crawls about four pixels a second and reads as stalled */
.carousel__dot[aria-selected="true"] { width: 46px; background: rgba(230, 191, 149, .34); }
.carousel__fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  border-radius: 999px; background: var(--copper-light); pointer-events: none;
}
/* going backwards, the bar is anchored right and fills the way you moved */
.carousel.is-back .carousel__dot[aria-selected="true"] .carousel__fill { left: auto; right: 0; }
@media (prefers-reduced-motion: reduce) { .carousel__dot { transition: none; } }
.carousel__count { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .1em; color: var(--fg-3); }
.carousel__count span:first-child { color: #fff; }

.reviews__side { display: grid; gap: 1rem; }
.reviews__stat { padding: 1.75rem; border: 1px solid var(--edge); display: grid; gap: .1rem; }
.reviews__pct { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 6vw, 5rem); line-height: .9; color: #fff; }
.reviews__pct-label { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-light); }
.reviews__count { color: var(--fg-3); margin-top: .4rem; }
.reviews__stat .link-arrow { margin-top: 1.1rem; width: max-content; }
.reviews__ask { padding: 1.5rem 1.75rem; border: 1px solid var(--edge); }
.reviews__ask p { color: var(--fg-2); font-size: .98rem; margin-bottom: 1rem; }
.reviews__ask strong { color: #fff; }

@media (min-width: 720px) { .reviews__head { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .reviews__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }

/* ---------- Service area ---------- */
.area { background: var(--paper); }
.area__grid { display: grid; gap: 3rem; }
.area__copy .lead { margin-block: 1.5rem 2rem; }
.area__lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.area__lists h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); padding-bottom: .5rem; border-bottom: 2px solid var(--ink); margin-bottom: .6rem; }
.area__lists li { padding: .3rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
.area__lists a { text-decoration: none; transition: color 160ms var(--ease-out); }
.area__lists a:hover { color: var(--red); }
.area__more { margin-top: 1.5rem; }
@media (min-width: 900px) {
  .area__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .area__lists { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Contact ---------- */
.contact { background: var(--blue-deep); color: #fff; position: relative; }
.contact::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--red); }
.contact__grid { display: grid; gap: 3rem; }
.contact__info .h2 { color: #fff; }
.contact__info .lead { margin-top: 1.25rem; }
.contact__phone {
  display: inline-block; margin-top: 2rem; text-decoration: none; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -.01em;
  border-bottom: 4px solid var(--red); padding-bottom: .2rem;
}
.contact__phone:hover { color: var(--copper-light); }
.contact__details { margin-top: 2.25rem; display: grid; gap: .8rem; }
.contact__details div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--edge); }
.contact__details dt { font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--fg-3); padding-top: .2rem; }
.contact__details dd a { color: #fff; }
.contact__details dd span { margin-inline: .4rem; color: var(--fg-3); }

/* ---------- Nudge: the call-or-form pair that closes each section ----------
   One button and one sentence, and the sentence always carries the other
   route, so neither the phone nor the form is the only way through. */
.nudge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.nudge .btn { flex: none; }
.nudge p { color: var(--mute); font-size: 1.02rem; line-height: 1.5; max-width: 46ch; }
.nudge a:not(.btn) {
  color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--red); padding-bottom: .05rem;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.nudge a:not(.btn):hover { color: var(--red); border-color: var(--ink); }

.nudge--dark { border-top-color: var(--edge); }
.nudge--dark p { color: var(--fg-2); }
.nudge--dark a:not(.btn) { color: #fff; border-bottom-color: var(--copper); }
.nudge--dark a:not(.btn):hover { color: var(--copper-light); border-color: var(--copper-light); }

/* ---------- Locale band: the photo strip that opens the contact section ---------- */
.locale {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--section)); margin-bottom: clamp(2.75rem, 6vw, 5rem);
  min-height: clamp(15rem, 27vw, 22rem);
  display: flex; align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--blue-ink-deep); color: #fff;
}
.locale img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
}
/* a warm sweep off the top right, then navy over the whole frame, so the
   photograph reads as texture behind the type rather than as a picture */
.locale::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(85% 120% at 84% 4%, rgba(184, 115, 61, .38), rgba(184, 115, 61, 0) 60%),
    linear-gradient(90deg, rgba(8, 18, 44, .92) 0%, rgba(8, 18, 44, .74) 46%, rgba(8, 18, 44, .34) 100%),
    linear-gradient(180deg, rgba(8, 18, 44, .66), rgba(8, 18, 44, .24) 46%, rgba(8, 18, 44, .74));
}
.locale__grid { display: grid; gap: 1.5rem; align-items: end; }
.locale .eyebrow { margin-bottom: 1rem; }
.locale h2 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: .95; letter-spacing: -.005em; color: #fff;
}
.locale h2 em { font-style: italic; color: var(--copper-light); }
.locale__note { color: var(--fg-2); font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
.locale__note strong { color: #fff; font-weight: 600; }
@media (min-width: 900px) {
  .locale__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); }
}

/* ---------- Forms (hero card + contact) ---------- */
.form { background: var(--paper); color: var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem); border-top: 6px solid var(--copper); }
.form--compact { background: transparent; padding: 0; border-top: 0; }
.form__row { display: grid; gap: .8rem; }
.field { display: grid; gap: .3rem; margin-bottom: .8rem; }
.field span { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
/* 16px flat: anything smaller makes iOS zoom on focus */
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-xs);
  padding: .7rem .8rem; width: 100%; min-height: 2.9rem;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,63,143,.18); }
.field input::placeholder, .field textarea::placeholder { color: #98a0af; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.form__foot .btn--block { flex: 1 1 100%; }
.form__note { color: var(--mute); font-size: .95rem; }
.form__note a { color: var(--blue); }
.form__fine { margin-top: .7rem; text-align: center; font-size: .8rem; color: var(--mute); }
.form__status { margin-top: .6rem; font-weight: 500; min-height: 0; }
.form__status:empty { display: none; }

/* Every estimate CTA points at the form itself, not at the section around it:
   the section opens with an eyebrow, a heading, the phone number and, on the
   contact section, a full-bleed photo band, so landing on the section top left
   the fields below the fold on both phones and desktop. The margin clears the
   compacted bar the anchor jump lands under. */
#estimateForm, .quick__form { scroll-margin-top: calc(var(--header-h-stuck) + 1.25rem); }
.form__status.is-error { color: var(--red-deep); }

@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  /* stretch, not start: the panel runs the full height of the column beside it
     rather than stopping short of it, and the details field takes up whatever
     slack that leaves so the growth lands somewhere useful */
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: stretch; }
  .contact__grid .form { display: flex; flex-direction: column; }
  .contact__grid .form > .field { flex: 1 1 auto; grid-template-rows: auto 1fr; }
  .contact__grid .form > .field textarea { height: 100%; }
}

/* ---------- Footer ---------- */
.footer { background: var(--blue-ink-deep); color: var(--fg-3); padding-top: clamp(3rem, 5.4vw, 4.75rem); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(1.75rem, 3vw, 3rem); }
.footer__brand .badge { margin-bottom: 1.1rem; }
.footer__tagline { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; color: #fff; max-width: 20ch; margin-bottom: .6rem; }
.footer__brand p:not(.footer__tagline) { font-size: .88rem; line-height: 1.55; max-width: 34ch; }
.footer__col { display: grid; gap: .5rem; align-content: start; }
.footer__col h3 { font-size: .82rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--copper-light); margin-bottom: .4rem; }
.footer__col a { color: var(--fg-3); text-decoration: none; font-size: .9rem; }
.footer__col a:hover { color: #fff; }
.footer__more { color: var(--copper-light) !important; }
.footer__social { display: inline-flex; align-items: center; gap: .45rem; }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: clamp(2rem, 3.4vw, 2.75rem); padding-block: 1.1rem; border-top: 1px solid var(--edge); font-size: .8rem;
}
/* the build credit: quieter than the legal line it sits in */
.by-lnk {
  font-family: var(--font-body); font-weight: 500; font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fg-3);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(154, 166, 194, .5);
  transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out);
}
.by-lnk:hover { color: var(--copper-light); text-decoration-color: var(--copper-light); }

.footer__sig {
  width: min(100% - clamp(2.5rem, 10vw, 7rem), 1420px); margin: .5rem auto 0;
  line-height: .92; overflow: hidden;
}
.footer__sig span {
  display: block; text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: calc(min(100vw - clamp(2.5rem, 10vw, 7rem), 1420px) / 9.6);
  letter-spacing: .01em; color: rgba(242,245,250,.07); transform: translateY(.06em);
}

/* The badge is the real painted mark, so it is set as artwork: sized by width,
   nothing drawn around it, and it carries its own ring and white disc onto any
   ground. It also scales as one piece, which the type-built version it replaced
   never did once a phone shrank it. */
.badge { display: block; width: min(11.75rem, 62vw); height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); }

/* ---------- Mobile call bar: waits offstage until the hero is behind you ---------- */
.callbar, .callbar__pad { display: none; }
@media (max-width: 767px) {
  .callbar {
    position: fixed; inset: auto 0 0 0; z-index: 40; display: grid;
    grid-template-columns: 1fr 1fr; background: var(--blue-ink);
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    gap: .5rem; box-shadow: 0 -8px 24px -12px rgba(0,0,0,.5); border-top: 1px solid var(--edge);
    transition: transform 420ms var(--ease-out), opacity 280ms ease, visibility 0s linear 420ms;
  }
  body.js .callbar { transform: translateY(115%); opacity: 0; visibility: hidden; pointer-events: none; }
  body.js .callbar.is-here { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform 420ms var(--ease-out), opacity 280ms ease, visibility 0s; }
  .callbar a {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; padding: .85rem; border-radius: var(--radius-xs);
  }
  .callbar__call { background: var(--red); color: #fff; }
  .callbar__quote { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
  /* the band the bar lands on, so it never covers the footer wordmark */
  .callbar__pad { display: block; height: calc(4.4rem + env(safe-area-inset-bottom)); }
}

/* ---------- Reveal (only when JS is running; without it everything is simply visible) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .mosaic__item img { transition: none; }
  .callbar { transition: none; }
}

/* ---------- Print ---------- */
@media print {
  .header, .callbar, .callbar__pad, .ticker, .skip, .footer__sig, .hero__bg, .hero__shade,
  .locale img, .carousel__ui { display: none !important; }
  .locale { margin: 0 0 1.5rem; min-height: 0; padding-block: 0; background: #fff; color: #000; }
  .locale::after { display: none; }
  .locale h2, .locale__note, .locale__note strong { color: #000; }
  /* every review prints, not just the one the carousel happens to be on */
  .js .carousel__track { display: block; }
  .js .carousel__track > .review[aria-hidden="true"] { opacity: 1; visibility: visible; transform: none; }
  .js .carousel__track > .review + .review { margin-top: 1rem; }
  .hero { min-height: 0; color: #000; background: #fff; }
  .hero h1, .hero h1 em, .hero__lede, .hero__trust { color: #000; text-shadow: none; }
  .hero__inner { padding-top: 1rem; }
  .section { padding-block: 1.5rem; }
  .featured, .reviews, .contact, .footer { background: #fff; color: #000; }
  .featured__copy .h2, .reviews__head .h2, .contact__info .h2, .contact__phone, .lead--light, .review, .review blockquote p, .footer, .footer__col a { color: #000; background: transparent; }
  .js .reveal { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* =========================================================
   Inner pages: /services, /service-area, /faq, /contact, 404.
   Built from the home page's own vocabulary (eyebrow, .h2,
   .lead, .btn, .svc, .nudge, .contact) plus the few pieces
   only a second page needs. Generated by build.mjs; see README.
   ========================================================= */

/* ---------- Section grounds ---------- */
.section--white { background: #fff; }
.section--alu { background: var(--alu-100); border-top: 1px solid var(--line-soft); }
.section__head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.section__head .h2 { max-width: 16ch; }
@media (min-width: 720px) { .section__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } }
.section__foot { margin-top: clamp(1.75rem, 3vw, 2.5rem); color: var(--ink-2); font-size: 1rem; max-width: 70ch; }
.section__foot a { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: .05rem; }
.section__foot a:hover { color: var(--red); border-color: var(--ink); }

/* ---------- Page head: the dark band every inner page opens with ----------
   The fixed header rides over it the way it rides over the hero. Behind the
   type is a length of the aluminum profile, repeated and knocked back into
   the navy, the same treatment as the written tiles in Recent work: material
   texture, not a photograph claiming a job. The contact page swaps in the
   crew photograph under the locale band's scrims instead. */
.page-head {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--blue-ink); color: #fff;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vh, 4.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--red); z-index: 1; }
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url(../images/profile-aluminum-800.webp);
  background-repeat: repeat-y; background-position: center top; background-size: 100% auto;
  mix-blend-mode: luminosity; opacity: .11;
}
.page-head img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
}
.page-head--photo::after {
  background-image:
    radial-gradient(85% 120% at 84% 4%, rgba(184, 115, 61, .38), rgba(184, 115, 61, 0) 60%),
    linear-gradient(90deg, rgba(8, 18, 44, .94) 0%, rgba(8, 18, 44, .78) 46%, rgba(8, 18, 44, .42) 100%),
    linear-gradient(180deg, rgba(8, 18, 44, .7), rgba(8, 18, 44, .3) 46%, rgba(8, 18, 44, .82));
  background-size: auto; background-repeat: no-repeat; mix-blend-mode: normal; opacity: 1;
}
.page-head__inner { position: relative; }
.page-head h1 {
  font-size: clamp(2.6rem, 1rem + 4.6vw, 4.8rem);
  font-weight: 800; text-transform: uppercase; line-height: .94; letter-spacing: -.005em;
  max-width: 16ch; color: rgba(226,233,245,.78); text-wrap: balance;
}
.page-head h1 em { font-style: italic; color: #fff; }
.page-head .lead { margin-top: 1.4rem; }
.page-head__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.page-head__alt {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 600; text-decoration: none; font-size: 1rem;
  border-bottom: 2px solid var(--copper); padding-bottom: .05rem;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.page-head__alt:hover { color: var(--copper-light); border-color: var(--copper-light); }
.crumb {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3); text-decoration: none;
}
.crumb::before { content: "\2190"; transition: transform 200ms var(--ease-out); }
.crumb:hover { color: #fff; }
.crumb:hover::before { transform: translateX(-3px); }
@media (max-width: 400px) { .page-head__cta .btn { width: 100%; white-space: normal; text-align: center; } }

/* ---------- Fact rows: the process steps' construction, four to a row ---------- */
.facts { display: grid; gap: clamp(1.5rem, 2.8vw, 2.5rem); }
.fact { border-top: 2px solid var(--ink); padding-top: 1rem; }
.fact__key { font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.fact__val { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; margin-top: .3rem; }
.fact__note { margin-top: .45rem; color: var(--mute); font-size: .92rem; line-height: 1.5; }
.facts--dark .fact { border-top-color: var(--edge); }
.facts--dark .fact__key { color: var(--copper-light); }
.facts--dark .fact__val { color: #fff; }
.facts--dark .fact__note { color: var(--fg-2); }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ: one red rule per answer, two columns when there is room ---------- */
.qa-grid { display: grid; gap: clamp(1.75rem, 3.2vw, 2.75rem) clamp(2rem, 4vw, 4rem); }
@media (min-width: 900px) { .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa { border-left: 3px solid var(--red); padding: .2rem 0 .2rem 1.25rem; }
.qa h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: 1.08; max-width: 24ch; }
.qa p { margin-top: .6rem; color: var(--ink-2); font-size: 1rem; line-height: 1.6; max-width: 60ch; }

/* ---------- Contact cards: the hero card's construction, three across ---------- */
.cards { display: grid; gap: clamp(.9rem, 1.8vw, 1.4rem); }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line-soft); border-top: 6px solid var(--red);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  box-shadow: 0 22px 44px -30px rgba(22, 27, 38, .45);
  transition: border-top-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.card:hover { border-top-color: var(--blue); transform: translateY(-2px); box-shadow: 0 26px 48px -28px rgba(22, 27, 38, .55); }
.card__key { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.card__val { display: block; margin: .6rem 0 .35rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1; text-transform: uppercase; letter-spacing: .005em; overflow-wrap: anywhere; }
.card__note { display: block; color: var(--mute); font-size: .95rem; line-height: 1.5; }

/* ---------- Service-area hub: the area lists, as links ---------- */
.towns__group + .towns__group { margin-top: clamp(2rem, 3.6vw, 3rem); }
.towns__group h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); padding-bottom: .5rem; border-bottom: 2px solid var(--ink); margin-bottom: 1rem; }
.towns__list { display: grid; gap: clamp(.7rem, 1.4vw, 1rem); }
@media (min-width: 620px) { .towns__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .towns__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.town {
  display: block; height: 100%; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line-soft); border-left: 3px solid var(--red);
  padding: .9rem 1.1rem 1rem;
  transition: border-left-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.town:hover { border-left-color: var(--blue); background: var(--alu-50); }
.town__row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.town__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.town__min { font-size: .78rem; color: var(--mute); white-space: nowrap; }
.town__line { display: block; margin-top: .35rem; font-size: .92rem; color: var(--mute); line-height: 1.45; }

/* ---------- Service page: the photograph beside the story ---------- */
.svc-page { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .svc-page { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); } }
.svc-page__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--alu-200); }
.svc-page__media figcaption { margin-top: .6rem; font-size: .85rem; color: var(--mute); }
.svc-page__copy .h2 { max-width: 16ch; }
.prose { margin-top: 1.5rem; color: var(--ink-2); font-size: 1.05rem; line-height: 1.62; max-width: 62ch; }
.prose p + p { margin-top: 1rem; }
.prose--after { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 70ch; }
.svc-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the card is a link now the page behind it exists: the stretched anchor in
   the heading covers the whole card, and the copy stays selectable text */
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc:focus-within::before { transform: scaleX(1); }
.related { background: var(--blue-ink); color: #fff; }
.related .h2 { color: #fff; }

/* ---------- 404 ---------- */
.notfound {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 82svh; display: grid; align-items: center;
  background: var(--blue-ink); color: #fff;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem)); padding-bottom: clamp(3rem, 6vw, 5rem);
}
.notfound::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--red); }
.notfound h1 { font-size: clamp(2.6rem, 1rem + 4.6vw, 4.8rem); font-weight: 800; text-transform: uppercase; line-height: .94; max-width: 16ch; color: rgba(226,233,245,.78); text-wrap: balance; }
.notfound h1 em { font-style: italic; color: #fff; }
.notfound .lead { margin-top: 1.4rem; }

@media print {
  .page-head, .notfound { background: #fff; color: #000; padding-top: 1rem; }
  .page-head::after, .page-head img { display: none; }
  .page-head h1, .page-head h1 em, .page-head .lead { color: #000; }
  .related { background: #fff; color: #000; }
  .related .h2 { color: #000; }
}