/* ==========================================================================
   SAM Enterprises Canada Ltd. — Components & Layout  (P2 Preview · v2.0)
   Art direction: "Technical Precision"
   Structure = hairlines. Gold = circuit trace. Mono = drawing schedule.
   No shadows, no glows, no glass, no decorative gradients, no card lifts.
   Preview only — not production code.
   ========================================================================== */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* ---------- TYPE ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.62; }

/* Mono label — the signature element. */
.label {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-accent);
  line-height: 1;
}
.label--dk { color: var(--text-accent-dk); }
.label--muted { color: var(--text-meta); }
.label__rule { width: 32px; height: 1px; background: currentColor; opacity: .55; flex: none; }

/* ---------- LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--subtle { background: var(--bg-subtle); }
.section--line { border-top: var(--hairline) solid var(--line); }
.section--inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.section--inverse h2, .section--inverse h3, .section--inverse h4 { color: var(--text-inverse); }
.section--inverse .lead { color: var(--text-on-navy); }

/* Asymmetric section header: title left, supporting text offset right. */
.shead { display: grid; gap: var(--space-6); margin-bottom: var(--shead-gap); }
@media (min-width: 900px) {
  .shead { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: end; }
  .shead__aside { padding-bottom: .35rem; }
}
.shead h2 { margin-top: var(--space-5); max-width: 18ch; }
.shead__aside p { color: var(--text-secondary); max-width: 46ch; }
.section--inverse .shead__aside p { color: var(--text-on-navy); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 1.15rem 2rem;
  min-height: 52px;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-linear),
              color var(--dur-base) var(--ease-linear),
              border-color var(--dur-base) var(--ease-linear);
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--primary { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn--gold { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.btn--gold:hover { background: var(--navy-800); color: var(--white); border-color: var(--navy-800); }
.btn--outline { background: transparent; color: var(--navy-800); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--navy-800); background: var(--navy-800); color: var(--white); }
.btn--on-dark { background: transparent; color: var(--white); border-color: var(--line-on-dark-2); }
.btn--on-dark:hover { background: var(--white); color: var(--navy-800); border-color: var(--white); }
.btn--block { width: 100%; }

/* Text link with a rule that extends on hover. */
.tlink {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-button); text-transform: uppercase;
  color: var(--navy-700); padding-bottom: var(--space-2); position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--line-strong);
}
.tlink::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold-500); z-index: 1;
  transition: width var(--dur-slow) var(--ease);
}
.tlink:hover::before { width: 100%; }
.tlink svg { width: 14px; height: 14px; }
.tlink--dk { color: var(--white); }
.tlink--dk::after { background: var(--line-on-dark-2); }

/* ---------- TOPBAR ---------- */
.topbar { background: var(--navy-900); color: var(--text-on-navy); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: 38px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em;
}
.topbar__left { display: flex; gap: var(--space-8); }
.topbar__left span:last-child { color: var(--gold-400); }
.topbar__right { display: flex; align-items: center; gap: var(--space-6); }
.topbar__right a:hover { color: var(--gold-400); }
@media (max-width: 900px) { .topbar { display: none; } }

/* ---------- HEADER ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: var(--hairline) solid var(--line);
}
.header__inner { display: flex; align-items: center; gap: var(--space-10); min-height: var(--header-h); }
.header__logo { margin-right: auto; }
.header__logo img { height: 40px; width: auto; }
/* Mobile: larger lockup + tighter flex gap. The 40px desktop gap left only
   ~10px between logo and burger at 375px, which read as cramped. */
@media (max-width: 1100px) { .header__inner { gap: var(--space-4); } }
@media (max-width: 600px)  { .header__logo img { height: 36px; } }
@media (max-width: 360px)  { .header__logo img { height: 32px; } }

.nav { display: flex; align-items: center; gap: var(--space-8); }
.nav__link {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate-700); padding-block: var(--space-3); position: relative;
  transition: color var(--dur-base) var(--ease-linear);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold-500); transition: width var(--dur-base) var(--ease);
}
.nav__link:hover { color: var(--navy-800); }
.nav__link:hover::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--navy-800); }
.nav__link[aria-current="page"]::after { width: 100%; }

.header__cta { display: flex; align-items: center; gap: var(--space-6); padding-left: var(--space-8); border-left: var(--hairline) solid var(--line); }
.header__phone { display: grid; gap: 2px; }
.header__phone span { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; color: var(--text-meta); }
.header__phone b { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -.01em; color: var(--navy-800); }

.burger {
  display: none; width: 46px; height: 46px; background: transparent;
  border: var(--hairline) solid var(--line-strong); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger i { display: block; width: 18px; height: 1.5px; background: var(--navy-800); }
@media (max-width: 1100px) { .nav, .header__cta { display: none; } .burger { display: flex; } }

/* ---------- DRAWER ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(6,13,22,.6);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-linear);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 90vw);
  background: var(--navy-800); color: var(--white); box-shadow: var(--shadow-drawer);
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-6); border-bottom: var(--hairline) solid var(--line-on-dark); }
.drawer__top img { height: 38px; width: auto; }
.drawer__close { width: 44px; height: 44px; background: transparent; border: var(--hairline) solid var(--line-on-dark); color: var(--white); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.drawer__nav { display: flex; flex-direction: column; padding-block: var(--space-4); }
.drawer__nav a {
  display: flex; align-items: baseline; gap: var(--space-4);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.375rem;
  letter-spacing: -.02em; padding-block: var(--space-4);
  border-bottom: var(--hairline) solid var(--line-on-dark);
  transition: color var(--dur-base) var(--ease-linear);
}
.drawer__nav a i { font-family: var(--font-mono); font-size: var(--fs-micro); font-style: normal; color: var(--gold-400); letter-spacing: .1em; }
.drawer__nav a:hover { color: var(--gold-400); }
.drawer__foot { margin-top: auto; padding-top: var(--space-8); display: grid; gap: var(--space-4); }
.drawer__foot .meta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; color: var(--text-on-navy); line-height: 1.9; }

/* ==========================================================================
   HERO — asymmetric 6/5 grid. Photography carries the right column; the
   credentials sit as a compact horizontal band under the CTAs so the page
   reads as a commercial site, not a datasheet.
   ========================================================================== */
/* Hero sits under the sticky header, so it opens tighter than a mid-page
   section but closes on the standard rhythm. */
.hero { padding-block: var(--section-y-hero) var(--section-y); }
.hero__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 6fr 5fr; gap: var(--space-12); align-items: center; } }

.hero__index { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); }
.hero h1 { margin-bottom: var(--space-6); max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--navy-700); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .12em; height: 3px; background: var(--gold-500); }
.hero__rule { width: 100%; height: 1px; background: var(--line); margin-bottom: var(--space-6); position: relative; }
.hero__rule::after { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: 1px; background: var(--gold-500); }
.hero__lead { max-width: 46ch; margin-bottom: var(--space-8); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

/* Credential band — three facts, hairline-separated. Not a spec table. */
.hero__facts {
  display: grid; grid-template-columns: 1fr; margin-top: var(--space-10);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 560px) { .hero__facts { grid-template-columns: repeat(3, 1fr); } }
.hero__facts div {
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: var(--hairline) solid var(--line);
}
@media (min-width: 560px) {
  .hero__facts div { padding-left: var(--space-5); border-right: var(--hairline) solid var(--line); border-bottom: 0; }
  .hero__facts div:first-child { padding-left: 0; }
  .hero__facts div:last-child { border-right: 0; }
}
.hero__facts dt {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-meta); margin-bottom: var(--space-2);
}
.hero__facts dd { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-small); letter-spacing: -.01em; }
.hero__facts dd b { color: var(--gold-700); font-weight: var(--fw-semibold); }

/* ---------- TECHNICAL IMAGE PLACEHOLDER (preview only) ---------- */
.ph {
  position: relative; background: var(--navy-800); overflow: hidden;
  display: grid; place-items: center;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size: 44px 44px;
}
.ph__mark {
  position: relative; z-index: 1; text-align: center; padding: var(--space-6);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(255,255,255,.5);
}
.ph__mark svg { width: 30px; height: 30px; margin: 0 auto var(--space-4); color: var(--gold-500); }
.ph__corner { position: absolute; width: 14px; height: 14px; border: 1px solid var(--gold-500); z-index: 1; }
.ph__corner:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.ph__corner:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.ph__corner:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.ph__corner:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.ph--tall { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--sq   { aspect-ratio: 1 / 1; }
.ph--card { aspect-ratio: 3 / 2; }

/* ---------- PHOTOGRAPHY ----------
   Real images sit inside a frame that keeps the drawing-sheet language:
   thin gold register marks at the corners, a mono caption, nothing else.
   No rounded corners, no shadow, no gradient scrim. */
.figure { position: relative; margin: 0; }
.figure__img { position: relative; overflow: hidden; background: var(--navy-800); }
.shot { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.figure--mark .figure__img::before,
.figure--mark .figure__img::after {
  content: ""; position: absolute; width: 18px; height: 18px; z-index: 2;
  border: 1px solid var(--gold-500); pointer-events: none;
}
.figure--mark .figure__img::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.figure--mark .figure__img::after  { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.figure__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-meta);
}
.figure__cap b { color: var(--gold-700); font-weight: var(--fw-medium); }

/* Hero image: tall on desktop, letterboxed on mobile so it never eats the fold.
   object-position keeps the gloved hand + marker in frame at both crops. */
/* Source is 4:5, so desktop crops nothing. On mobile a square keeps 80% of the
   frame — enough to hold head, meter display and both hands on the probes,
   which a 4:3 letterbox would have cut. */
.hero__media .figure__img { aspect-ratio: 4 / 5; }
.hero__media .shot { object-position: center center; }
@media (max-width: 1023px) {
  .hero__media .figure__img { aspect-ratio: 1 / 1; }
  .hero__media .shot { object-position: center 48%; }
}

/* ==========================================================================
   METRICS BAR — left-aligned, hairline-divided. No icons, no centering.
   ========================================================================== */
/* Same gutter system as .svc-grid: zero horizontal padding, rules drawn in the
   middle of the gap. auto-fit means the row reflows correctly for 2, 3 or 4
   metrics without touching CSS. */
.metrics { border-block: var(--hairline) solid var(--line); }
.metrics__grid {
  --metric-gutter: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--metric-gutter);
}
/* Explicit column count rather than auto-fit: with auto-fit the first item of
   a second row would still draw a left rule, and CSS alone cannot detect row
   starts. Three metrics fit one row from 640px up. */
@media (min-width: 640px) { .metrics__grid { grid-template-columns: repeat(3, 1fr); } }

.metric { position: relative; padding-block: var(--space-10); }
.metric + .metric { border-top: var(--hairline) solid var(--line); }
@media (min-width: 640px) {
  .metric + .metric { border-top: 0; }
  .metric + .metric::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--metric-gutter) / -2 - var(--hairline) / 2);
    width: var(--hairline); background: var(--line);
  }
}
.metric b {
  display: block; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1;
  letter-spacing: -.04em; color: var(--navy-800); margin-bottom: var(--space-3);
}
.metric b i { font-style: normal; color: var(--gold-500); }
.metric span { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-meta); }

/* ==========================================================================
   SERVICES — engineering schedule. Hairline cells, no cards, no shadows.
   ========================================================================== */
/* Gutter system — the fix for cells 03/05 colliding with their divider.
   Previously each cell carried horizontal padding and the rules were cell
   borders, so the inset had to be re-derived per column with nth-child. Those
   nth-child rules (0,2,0) outranked the plain `.svc` reset (0,1,0) and leaked
   across breakpoints, stripping padding from every ODD cell at 3 columns.

   Now: cells have ZERO horizontal padding, columns are separated by a real
   column-gap, and each vertical rule is drawn down the MIDDLE of that gap.
   Every cell therefore sits exactly gap/2 from any rule, on every side, in
   every column count — no per-cell padding maths at all. */
.svc-grid {
  --svc-gutter: var(--space-12);          /* 48px → 24px clear either side */
  display: grid;
  column-gap: var(--svc-gutter);
  border-top: var(--hairline) solid var(--line);
}
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  padding-block: var(--space-10);
  border-bottom: var(--hairline) solid var(--line);
}

/* gold hover rule along the cell's top edge */
.svc::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px;
  background: var(--gold-500); transition: width var(--dur-slow) var(--ease);
}
.svc:hover::before { width: 100%; }

/* vertical rule, centred in the gutter to the left of the cell */
.svc::after {
  content: ""; position: absolute; top: 0; bottom: -1px;
  left: calc(var(--svc-gutter) / -2 - var(--hairline) / 2);
  width: var(--hairline); background: var(--line); display: none;
}
@media (min-width: 700px) {
  .svc::after { display: block; }
  .svc:nth-child(2n+1)::after { display: none; }   /* first cell of each row */
}
@media (min-width: 1100px) {
  .svc::after { display: block; }
  .svc:nth-child(2n+1)::after { display: block; }  /* explicit reset — see note */
  .svc:nth-child(3n+1)::after { display: none; }
}
.svc__no { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--text-meta); }
.svc:hover .svc__no { color: var(--gold-700); }
.svc h3 { max-width: 18ch; }
/* no max-width: the column itself is the measure now, so every cell wraps on
   the same rhythm instead of some cells breaking early against a ch limit. */
.svc p { font-size: var(--fs-small); color: var(--text-secondary); flex-grow: 1; }
.svc__go { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-button); text-transform: uppercase; color: var(--navy-700); }
.svc__go svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); }
.svc:hover .svc__go svg { transform: translateX(6px); }

/* ==========================================================================
   APPROACH — asymmetric split, numbered rows on hairlines.
   ========================================================================== */
.approach { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 1024px) { .approach { grid-template-columns: 5fr 6fr; gap: var(--space-16); align-items: start; } }
.approach__media { position: relative; }
/* Portrait on desktop: a square left ~200px of dead space under the image
   because the commitments column runs taller. Source is 3:4, so this crops
   nothing. Square on mobile, nudged up to keep face and hands over the meter. */
.approach__media .figure__img { aspect-ratio: 3 / 4; }
.approach__media .shot { object-position: center center; }
@media (max-width: 1023px) {
  .approach__media .figure__img { aspect-ratio: 1 / 1; }
  .approach__media .shot { object-position: center 42%; }
}
.approach__stat {
  position: absolute; right: 0; bottom: 0; background: var(--white);
  padding: var(--space-6) var(--space-8); border-top: 2px solid var(--gold-500);
  display: grid; gap: var(--space-1); min-width: 210px;
}
.approach__stat b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 2.25rem; line-height: 1; letter-spacing: -.04em; }
.approach__stat span { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-meta); }
.approach__list { border-top: var(--hairline) solid var(--line); }
.approach__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-6);
  padding-block: var(--space-8); border-bottom: var(--hairline) solid var(--line);
}
.approach__item > i { font-family: var(--font-mono); font-style: normal; font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--gold-700); padding-top: .45rem; }
.approach__item h3 { margin-bottom: var(--space-3); }
.approach__item p { font-size: var(--fs-small); color: var(--text-secondary); max-width: 52ch; }

/* ==========================================================================
   PROJECTS — deliberately unequal grid (one lead, two supporting).
   ========================================================================== */
.projects { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .projects { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; gap: var(--space-10) var(--space-8); } }
.proj { display: flex; flex-direction: column; }
@media (min-width: 900px) { .proj--lead { grid-row: span 2; } }
.proj__media { position: relative; margin-bottom: var(--space-5); }
.proj__media .figure__img { aspect-ratio: 3 / 2; }
.proj__media .shot { transition: transform var(--dur-slow) var(--ease); }
.proj:hover .proj__media .shot { transform: scale(1.03); }
.proj--lead .figure__img { aspect-ratio: 4 / 3.2; }
@media (max-width: 899px) { .proj--lead .figure__img { aspect-ratio: 3 / 2; } }
.proj__tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--gold-500); color: var(--navy-900);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium);
  letter-spacing: .12em; text-transform: uppercase; padding: .55rem .9rem;
}
.proj__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--line); margin-bottom: var(--space-4); }
.proj__loc { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text-meta); white-space: nowrap; }
.proj h3 { transition: color var(--dur-base) var(--ease-linear); }
.proj:hover h3 { color: var(--navy-700); }
.proj p { font-size: var(--fs-small); color: var(--text-secondary); max-width: 50ch; }

/* ==========================================================================
   PROCESS — on navy. Numbered columns with a partial gold rule.
   ========================================================================== */
.process { display: grid; gap: var(--space-10); }
@media (min-width: 640px)  { .process { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--space-8); border-top: var(--hairline) solid var(--line-on-dark); }
.step::after { content: ""; position: absolute; top: -1px; left: 0; width: 38%; height: 1px; background: var(--gold-500); }
.step > i {
  display: block; font-family: var(--font-mono); font-style: normal;
  font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--gold-400); margin-bottom: var(--space-6);
}
.step h3 { margin-bottom: var(--space-3); }
.step p { font-size: var(--fs-small); color: var(--text-on-navy); }

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */
.areas { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
@media (min-width: 1024px) { .areas { grid-template-columns: 4fr 7fr; gap: var(--space-16); align-items: start; } }
.areas__note { border-left: 2px solid var(--gold-500); padding-left: var(--space-6); }
.areas__note p { font-size: var(--fs-small); color: var(--text-secondary); }
/* auto-fill + gutter: the column count follows the available width, so this
   list stays correct whether the business covers 6 cities or 14. No nth-child
   padding to re-tune when a city is added or removed. */
.areas__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  column-gap: var(--space-6);
  border-top: var(--hairline) solid var(--line);
}
/* Optical alignment: drop the list so its top rule sits level with the CAP
   height of "Where we work." - not with the h2 line-box, which reads too high.
   Desktop only; the stacked mobile order is untouched. */
@media (min-width: 1024px) {
  .areas__list { margin-top: clamp(2rem, 1.1rem + 1.3vw, 2.75rem); }
}
.areas__list a {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-block: var(--space-5);
  border-bottom: var(--hairline) solid var(--line);
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-small);
  transition: color var(--dur-base) var(--ease-linear);
}
.areas__list a i { font-family: var(--font-mono); font-style: normal; font-size: var(--fs-micro); color: var(--slate-400); }
.areas__list a:hover { color: var(--navy-700); }
.areas__list a:hover i { color: var(--gold-500); }

/* ==========================================================================
   TESTIMONIALS — editorial quotes on hairlines. No cards.
   ========================================================================== */
.quotes { display: grid; gap: var(--space-8); border-top: var(--hairline) solid var(--line); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.quote { padding: var(--space-10) var(--space-8) var(--space-8) 0; border-bottom: var(--hairline) solid var(--line); display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 900px) {
  .quote { padding-left: var(--space-8); border-right: var(--hairline) solid var(--line); border-bottom: 0; }
  .quote:first-child { padding-left: 0; }
  .quote:last-child { border-right: 0; }
}
.stars { display: flex; gap: 4px; }
.stars svg { width: 15px; height: 15px; color: var(--gold-500); }
.quote blockquote { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 1.0625rem; line-height: 1.55; letter-spacing: -.01em; color: var(--navy-800); flex-grow: 1; }
.quote figcaption { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text-meta); line-height: 1.9; }
.quote figcaption b { display: block; color: var(--navy-800); font-weight: var(--fw-medium); }

/* ==========================================================================
   CREDENTIALS
   ========================================================================== */
.creds { display: grid; grid-template-columns: repeat(2, 1fr); border-top: var(--hairline) solid var(--line); }
@media (min-width: 900px) { .creds { grid-template-columns: repeat(4, 1fr); } }
.cred { padding: var(--space-8) var(--space-6) var(--space-8) 0; border-bottom: var(--hairline) solid var(--line); }
.cred:nth-child(2n) { padding-left: var(--space-6); }
@media (min-width: 900px) {
  .cred { padding-left: var(--space-8); border-right: var(--hairline) solid var(--line); border-bottom: 0; }
  .cred:nth-child(2n) { padding-left: var(--space-8); }  /* reset the 2-col rule */
  .cred:first-child { padding-left: 0; }
  .cred:last-child { border-right: 0; }
}
.cred > i { display: block; font-family: var(--font-mono); font-style: normal; font-size: var(--fs-micro); letter-spacing: var(--ls-label); color: var(--gold-700); margin-bottom: var(--space-4); }
.cred b { display: block; font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: -.015em; margin-bottom: var(--space-2); }
.cred span { font-size: var(--fs-xs); color: var(--text-meta); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta { background: var(--navy-800); color: var(--white); }
.cta__inner { display: grid; gap: var(--space-10); }
@media (min-width: 900px) { .cta__inner { grid-template-columns: 7fr 4fr; gap: var(--space-16); align-items: center; } }
.cta h2 { margin-block: var(--space-5) var(--space-4); max-width: 20ch; }
.cta p { color: var(--text-on-navy); max-width: 48ch; }
.cta__actions { display: grid; gap: var(--space-4); }
.cta__phone { border-top: var(--hairline) solid var(--line-on-dark); padding-top: var(--space-5); margin-top: var(--space-2); }
.cta__phone span { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-on-navy); margin-bottom: var(--space-2); }
.cta__phone b { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.03em; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--navy-900); color: var(--text-on-navy); }
.footer__top { display: grid; gap: var(--space-10); padding-block: var(--section-y-tight); }
@media (min-width: 700px)  { .footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 4fr 2fr 2fr 3fr; gap: var(--space-10); } }
.footer__brand img { height: 52px; width: auto; margin-bottom: var(--space-6); }
.footer__brand p { font-size: var(--fs-small); max-width: 40ch; margin-bottom: var(--space-6); }
.footer h4 { color: var(--white); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: var(--space-6); }
.footer__list { display: grid; gap: var(--space-3); font-size: var(--fs-small); }
.footer__list a { transition: color var(--dur-base) var(--ease-linear); }
.footer__list a:hover { color: var(--gold-400); }
.footer__contact { display: grid; gap: var(--space-5); font-size: var(--fs-small); }
.footer__contact div span { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--slate-500); margin-bottom: var(--space-1); }
.footer__contact div b { color: var(--white); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.social a { width: 42px; height: 42px; border: var(--hairline) solid var(--line-on-dark); display: grid; place-items: center; transition: all var(--dur-base) var(--ease-linear); }
.social svg { width: 17px; height: 17px; }
.social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.footer__bottom {
  border-top: var(--hairline) solid var(--line-on-dark); padding-block: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer__legal a:hover { color: var(--gold-400); }

/* Build credit — its own hairline-separated row below the legal line, so it
   reads as a signature rather than competing with the client's copyright.
   slate-400 on navy-900 is 7.0:1; slate-500 would have been 4.1 and failed. */
.footer__credit {
  border-top: var(--hairline) solid var(--line-on-dark);
  padding-block: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--slate-400);
  text-align: center;
}
.footer__credit a {
  color: rgba(255,255,255,.72);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line-on-dark-2);
  transition: color var(--dur-base) var(--ease-linear),
              border-color var(--dur-base) var(--ease-linear);
}
.footer__credit a:hover { color: var(--gold-400); border-bottom-color: var(--gold-400); }

/* ---------- STICKY MOBILE CALL BAR ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; grid-template-columns: 1fr 1fr; }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 58px;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-button); text-transform: uppercase;
}
.callbar a svg { width: 16px; height: 16px; }
.callbar__call { background: var(--navy-800); color: var(--white); }
.callbar__quote { background: var(--gold-500); color: var(--navy-900); }
/* Reserve space inside the (navy) footer so the fixed bar never covers content
   and no white strip appears beneath the footer. */
@media (max-width: 1100px) {
  .callbar { display: grid; }
  .footer__bottom { padding-bottom: calc(var(--space-6) + 58px); }
}

/* ---------- PREVIEW RIBBON (preview file only) ---------- */
.pnote {
  background: var(--navy-950); color: var(--slate-400);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em;
  text-align: center; padding: var(--space-3) var(--space-4);
}
.pnote b { color: var(--gold-400); font-weight: var(--fw-medium); }

/* ==========================================================================
   QUOTE FORM  — /quote.php
   Same hairline language as the rest of the site: no cards, no shadows, no
   rounded corners. Fields sit on rules; the grid is the structure.
   ========================================================================== */
.qform { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 1024px) { .qform { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; } }

.qform__aside p { font-size: var(--fs-small); color: var(--text-secondary); }
.qform__aside .areas__note { margin-top: var(--space-6); }

.qfield { margin-bottom: var(--space-6); }
.qfield > label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-meta); margin-bottom: var(--space-2);
}
.qfield > label .req { color: var(--gold-700); }

.qform input[type=text], .qform input[type=tel], .qform input[type=email],
.qform textarea, .qform select {
  width: 100%; padding: .85rem .9rem;
  font: inherit; font-size: var(--fs-small); font-family: var(--font-body);
  color: var(--text-primary); background: var(--white);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-none);
  transition: border-color var(--dur-base) var(--ease-linear);
}
.qform textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.qform input:focus, .qform textarea:focus, .qform select:focus {
  outline: none; border-color: var(--navy-700);
}
.qform input[aria-invalid="true"], .qform textarea[aria-invalid="true"], .qform select[aria-invalid="true"] {
  border-color: var(--danger);
}
.qfield__err { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--danger); }
.qfield__hint { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-meta); }

.qgrid { display: grid; gap: 0 var(--space-6); }
@media (min-width: 620px) { .qgrid { grid-template-columns: 1fr 1fr; } .qgrid .full { grid-column: 1 / -1; } }

/* Segmented choice — replaces a radio group without inventing a new widget. */
.qseg { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); border: var(--hairline) solid var(--line-strong); }
.qseg label {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: .8rem .6rem; cursor: pointer; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
  border-right: var(--hairline) solid var(--line-strong);
  transition: background var(--dur-base) var(--ease-linear), color var(--dur-base) var(--ease-linear);
}
.qseg label:last-child { border-right: 0; }
.qseg input { position: absolute; opacity: 0; pointer-events: none; }
.qseg label:hover { background: var(--navy-50); }
.qseg input:checked + span { color: var(--white); }
.qseg label:has(input:checked) { background: var(--navy-700); color: var(--white); }
.qseg input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 3px; }
/* Emergency reads as a warning once chosen, not before. */
.qseg label.is-emergency:has(input:checked) { background: var(--danger); }

.qconsent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; margin-bottom: var(--space-6); }
.qconsent input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.qconsent label { font-size: var(--fs-small); color: var(--text-secondary); }

.qfiles { border: var(--hairline) dashed var(--line-strong); padding: var(--space-5); }
.qfiles input { font-size: var(--fs-small); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.qtrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.qsubmit { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; padding-top: var(--space-4); border-top: var(--hairline) solid var(--line); }
.qsubmit .note { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; color: var(--text-meta); }

/* ---------- result states ---------- */
.qresult { max-width: 62ch; }
.qresult__mark {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-accent); margin-bottom: var(--space-5);
}
.qresult__mark::before { content: ""; width: 28px; height: 2px; background: var(--gold-500); }
.qresult__ref {
  display: inline-block; margin-top: var(--space-6); padding: var(--space-4) var(--space-6);
  border-left: 2px solid var(--gold-500); background: var(--bg-subtle);
}
.qresult__ref span { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-meta); margin-bottom: var(--space-1); }
.qresult__ref b { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -.02em; }

.qalert { border-left: 2px solid var(--danger); background: #FBEDED; padding: var(--space-4) var(--space-5); margin-bottom: var(--space-8); }
.qalert p { font-size: var(--fs-small); color: #8E1B1B; }
.qalert ul { margin: var(--space-2) 0 0 var(--space-5); list-style: disc; font-size: var(--fs-small); color: #8E1B1B; }

/* Emergency callout — mirrors the CTA band's weight without repeating it. */
.qemergency { background: var(--navy-800); color: var(--white); padding: var(--space-6); margin-bottom: var(--space-8); }
.qemergency b { display: block; font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.qemergency p { font-size: var(--fs-small); color: var(--text-on-navy); margin-bottom: var(--space-4); }
.qemergency a.tel { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; color: var(--gold-400); }
tail -28 public_html/assets/styles.css

/* --------------------------------------------------------------------------
   Quote page header.
   The generic .shead is 1fr/1fr from 900px, but .qform below it is 5fr/7fr
   from 1024px — so the intro paragraph started about 8% of the container to
   the right of the first form field. This modifier borrows the form's own grid
   and breakpoint so the two line up exactly, and trims the headline, which was
   crowding the form at full size.
   -------------------------------------------------------------------------- */
.shead--form { margin-bottom: var(--space-8); }
.shead--form h1 {
  font-size: clamp(1.875rem, 1.3rem + 2.1vw, 2.875rem);
  margin-top: var(--space-4);
  max-width: 16ch;
}
.shead--form .shead__aside p { max-width: 44ch; }

/* Between 900 and 1023 the form is still one column, so the header must be too
   — otherwise it splits while the fields below it have not. */
@media (min-width: 900px) and (max-width: 1023px) {
  .shead--form { grid-template-columns: 1fr; gap: var(--space-5); }
  .shead--form .shead__aside { padding-bottom: 0; }
}
@media (min-width: 1024px) {
  .shead--form { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: end; }
  .shead--form .shead__aside { padding-bottom: .2rem; }
}