/* ============================================================
   Integrity General Construction — "The Drawing Sheet"
   Paper #F2F2F0 · Ink #111110 · Slate annotations
   Instrument Sans throughout; the logo mark is the only serif.
   ============================================================ */

:root {
  --paper:      #F2F2F0;   /* matches the entrance video's field exactly */
  --paper-hi:   #FAFAF8;
  --ink:        #111110;
  --ink-2:      #1A1A19;
  --slate:      #6E7276;
  --slate-lt:   #A9ADB1;
  --line:       rgba(17, 17, 16, 0.16);
  --line-ink:   rgba(242, 242, 240, 0.18);
  --paper-soft: rgba(242, 242, 240, 0.72);
  --sans: "Instrument Sans", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x: clamp(1.4rem, 5vw, 5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Lenis owns smooth scrolling + anchor easing; scroll-padding covers the
   native fallback (reduced motion). Lenis scrollTo ignores scroll-padding,
   so zero it while Lenis runs or the nav clearance stacks twice. */
html { scroll-padding-top: 92px; }
html.lenis { scroll-padding-top: 0; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- type system ---------- */
.display {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
h2.display { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.label {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--slate); display: flex; align-items: center; gap: 14px; margin-bottom: 1.8rem;
}
.label::after { content: ""; flex: 1; max-width: 72px; height: 1px; background: var(--line); }
.on-ink .label { color: var(--slate-lt); }
.on-ink .label::after { background: var(--line-ink); }

/* ---------- sheet frame: the site sits inside a drawing border ---------- */
.sheet-frame {
  position: fixed; inset: 12px; z-index: 700; pointer-events: none;
  border: 1px solid #fff; mix-blend-mode: difference; opacity: 0.4;
}
@media (max-width: 900px) { .sheet-frame { display: none; } }

/* ---------- entrance (one-time video intro + shatter) ---------- */
.entrance {
  position: fixed; inset: 0; z-index: 1000; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.entrance.done { opacity: 0; visibility: hidden; pointer-events: none; }
.entrance-video { width: 100%; height: 100%; object-fit: cover; }
.entrance-skip {
  position: absolute; right: 20px; bottom: 20px; z-index: 2;
  background: transparent; border: 1px solid var(--line-ink); color: var(--paper);
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 10px 16px; cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.entrance-skip:hover, .entrance-skip:focus-visible { border-color: var(--paper); background: rgba(242, 242, 240, 0.12); }
.entrance.shattering .entrance-skip { display: none; }
/* shatter reveal: overlay goes clear, shards carry the last video frame */
.entrance.shattering { background: transparent; transition: none; pointer-events: none; }
.entrance-shard {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform, opacity;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--ink); border: 1px solid var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 1.05rem 2.3rem; text-decoration: none; cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.3s, background 0.3s, color 0.3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(17, 17, 16, 0.22); }
.btn.on-paper:hover { background: var(--ink-2); }
.btn-invert { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-invert:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.btn-block { width: 100%; text-align: center; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem var(--pad-x);
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
}
.nav.scrolled {
  background: rgba(242, 242, 240, 0.94); backdrop-filter: blur(10px);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
  box-shadow: 0 1px 0 var(--line);
}
.nav-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.nav-mark { height: 36px; width: auto; }
.nav-name { display: flex; flex-direction: column; line-height: 1; }
.nav-name strong { font-size: 0.94rem; font-weight: 600; letter-spacing: 0.2em; }
.nav-name span { font-size: 0.5rem; font-weight: 600; letter-spacing: 0.37em; color: var(--slate); margin-top: 4px; }
.nav-right { display: flex; align-items: center; gap: 1.5rem; }
.nav-phone { text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05em; font-weight: 500; }
.nav-phone:hover { color: var(--slate); }
.nav-toggle { display: flex; flex-direction: column; gap: 5.5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 25px; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.3s, background 0.3s; }
.nav-toggle.open span { background: var(--paper); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle.open { position: relative; z-index: 620; }
@media (max-width: 760px) { .nav-phone, .nav-cta { display: none; } }

/* ---------- fullscreen menu ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 610; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: 3rem;
  padding: 0 clamp(1.6rem, 8vw, 7rem);
  opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
}
.menu-overlay.open { opacity: 1; pointer-events: all; }
.menu-links { display: flex; flex-direction: column; gap: 0.2rem; }
.menu-links a {
  font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 6vw, 3.4rem); line-height: 1.3;
  text-decoration: none; display: flex; align-items: baseline; gap: 1.3rem;
  opacity: 0; transform: translateY(24px); transition: color 0.3s;
}
.menu-overlay.open .menu-links a { animation: menu-rise 0.55s var(--ease) forwards; }
.menu-overlay.open .menu-links a:nth-child(1) { animation-delay: 0.07s; }
.menu-overlay.open .menu-links a:nth-child(2) { animation-delay: 0.13s; }
.menu-overlay.open .menu-links a:nth-child(3) { animation-delay: 0.19s; }
.menu-overlay.open .menu-links a:nth-child(4) { animation-delay: 0.25s; }
.menu-overlay.open .menu-links a:nth-child(5) { animation-delay: 0.31s; }
@keyframes menu-rise { to { opacity: 1; transform: none; } }
.menu-links a:hover { color: var(--slate-lt); }
.menu-links a small { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.3em; color: var(--slate-lt); }
.menu-meta { color: var(--paper-soft); font-size: 0.85rem; }
.menu-meta a { text-decoration: none; }
.menu-meta a:hover { color: var(--slate-lt); }

/* ---------- hero: kinetic construction type ----------
   The headline assembles like framing: a level line sweeps across,
   the lines stack bottom-up with a settle, then a measuring-tape
   ruler draws in beneath with a marker that drifts along it. */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
}

/* ---------- hero backdrop ----------
   The work itself, full bleed at full strength, with the type carried on an
   ink scrim over it. The scrim is sized so white type clears 4.5:1 even over
   a bright photo, not just the near-black render currently in place, because
   this image will get swapped.
   Photo and scrim are separate layers so the scrim can be retuned without
   touching the image. */
.hero-photo { position: absolute; inset: 0; }
.hero-photo i {
  display: block; position: absolute; inset: 0;
  background: url("../images/hero-frame.jpg") center right / cover no-repeat;
}
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(17,17,16,0.93) 0%, rgba(17,17,16,0.88) 32%, rgba(17,17,16,0.70) 55%, rgba(17,17,16,0.28) 82%, rgba(17,17,16,0.12) 100%),
    linear-gradient(to top, rgba(17,17,16,0.95) 0%, rgba(17,17,16,0.45) 30%, rgba(17,17,16,0) 62%),
    linear-gradient(to bottom, rgba(17,17,16,0.72) 0%, rgba(17,17,16,0) 18%);
}
/* content sits above both backdrop layers */
.hero-main, .hero .proof { position: relative; z-index: 1; }

/* Narrow screens: the copy spans the full width, so there is no clear column
   to keep the photo out of. Weight the scrim bottom-up instead of left-right. */
@media (max-width: 860px) {
  .hero-photo i { background-position: 72% center; }
  /* On a phone the copy runs the full width, so there is no clear column and
     the scrim alone has to carry the white type. It is deliberately heavy:
     measured at 4.4:1 over a bright photo before this, which fails AA. */
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(17,17,16,0.95) 0%, rgba(17,17,16,0.88) 38%, rgba(17,17,16,0.74) 74%, rgba(17,17,16,0.66) 100%),
      linear-gradient(to bottom, rgba(17,17,16,0.72) 0%, rgba(17,17,16,0) 18%);
  }
}

.hero-main {
  padding: clamp(7rem, 14vh, 10rem) var(--pad-x) 0;
  max-width: 1440px; width: 100%; margin: 0 auto;
}
.hero-copy { padding-bottom: clamp(2.4rem, 5vh, 4rem); }
.hero-eyebrow {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 2rem;
}
.hero-title {
  position: relative;
  font-size: clamp(3rem, 9.5vw, 8.4rem);
  font-weight: 600; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.96;
  margin-bottom: 0.6rem;
}
.hero-title .h-mask { display: block; overflow: hidden; }
/* settle ease: passes zero slightly, then sets down — a beam being placed */
.hero-title .h-line {
  display: block; transform: translateY(112%);
  transition: transform 0.85s cubic-bezier(0.22, 1.18, 0.36, 1);
}
.site-in .hero-title .h-line { transform: none; }
/* built bottom-up: foundation line first, top course last */
.site-in .h-mask:nth-of-type(3) .h-line { transition-delay: 0.12s; }
.site-in .h-mask:nth-of-type(2) .h-line { transition-delay: 0.30s; }
.site-in .h-mask:nth-of-type(1) .h-line { transition-delay: 0.48s; }
.hero-title .dim { color: var(--slate-lt); }

/* The level sweep and the measuring-tape ruler that used to sit here were
   drawn linework, the same vocabulary as the blueprint SVG the owner asked us
   to move away from. On a photographic hero they also read as clutter, so
   they are gone. The photo carries the section now. */

.hero-sub { max-width: 46ch; font-size: 1.02rem; color: var(--slate); margin-bottom: 2.4rem; }
.hero-cta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.hero-call { font-size: 0.9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.hero-call:hover { color: var(--slate); }
.hero-eyebrow, .hero-sub, .hero-cta {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.site-in .hero-eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.site-in .hero-sub    { opacity: 1; transform: none; transition-delay: 0.75s; }
.site-in .hero-cta    { opacity: 1; transform: none; transition-delay: 0.85s; }

/* title-block proof strip: the sheet's stamp of record */
.proof {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  max-width: 1440px; width: 100%; margin: 0 auto;
}
.proof-cell {
  padding: 1.5rem var(--pad-x) 1.7rem 1.6rem;
  border-right: 1px solid var(--line);
}
.proof-cell:first-child { padding-left: var(--pad-x); }
.proof-cell:last-child { border-right: 0; }
.proof-cell small {
  display: block; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 0.45rem;
}
.proof-cell strong { font-size: clamp(0.98rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: 0.01em; }

/* ---------- hero on ink ----------
   The hero is now a dark section, so everything that was tuned for ink on
   paper flips here. Placed after the base rules so it wins without !important. */
.hero .hero-eyebrow { color: var(--slate-lt); }
.hero .hero-title .dim { color: rgba(242, 242, 240, 0.55); }
.hero .hero-sub { color: var(--paper-soft); }
.hero .hero-call { color: var(--paper); border-bottom-color: var(--line-ink); }
.hero .hero-call:hover { color: var(--slate-lt); }
.hero .proof { border-top-color: var(--line-ink); }
.hero .proof-cell { border-right-color: var(--line-ink); }
.hero .proof-cell small { color: var(--slate-lt); }
@media (max-width: 860px) {
  .hero .proof-cell { border-bottom-color: var(--line-ink); }
}
/* the nav sits on the photo until it gains its own paper bar on scroll */
.nav:not(.scrolled) .nav-name strong,
.nav:not(.scrolled) .nav-phone { color: var(--paper); }
.nav:not(.scrolled) .nav-name span { color: rgba(242, 242, 240, 0.66); }
.nav:not(.scrolled) .nav-toggle span { background: var(--paper); }

/* The hero photo settle and the scroll parallax that used to live here were
   removed on request: the photo is now simply there when the page loads.
   The headline build below is the site's original .site-in choreography and
   is untouched. */

/* Nothing may depend on the script to become visible. Without these the whole
   headline stays invisible if main.js fails, since .site-in is JS-applied. */
html:not(.js) .hero-eyebrow,
html:not(.js) .hero-sub,
html:not(.js) .hero-cta { opacity: 1; transform: none; }
html:not(.js) .hero-title .h-line { transform: none; }
/* the reduced-motion overrides for all of this live in one block at the end */
@media (max-width: 860px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof-cell { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
  .proof-cell:nth-child(2n) { border-right: 0; }
  .proof-cell:nth-child(n+3) { border-bottom: 0; }
}

/* ---------- sections shared ---------- */
/* Was clamp(5.5rem, 11vw, 9rem), which put ~290px of air between every pair of
   sections on a laptop. Tightened to roughly 210px. */
.section { padding: clamp(4rem, 7.5vw, 7rem) var(--pad-x); }
.section-inner { max-width: 1280px; margin: 0 auto; }
.on-ink { background: var(--ink); color: var(--paper); }

/* ---------- advantage (ink) ---------- */
.advantage { position: relative; overflow: hidden; }
/* The 150px blueprint grid that used to overlay this section is gone. It was
   part of the same drawn-linework vocabulary being retired, and over a
   photograph it read as noise. */

/* Photo bleeds the whole section; the scrim dissolves it into the ink under
   the copy. Mirrors the hero, which fades toward the left. */
.adv-photo { position: absolute; inset: 0; }
.adv-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 42% center;
}
.adv-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(17,17,16,0.10) 0%,
      rgba(17,17,16,0.28) 24%,
      rgba(17,17,16,0.86) 44%,
      rgba(17,17,16,0.98) 54%,
      var(--ink) 64%),
    linear-gradient(to top, rgba(17,17,16,0.55) 0%, rgba(17,17,16,0) 34%);
}
/* Copy sits in the right half, over solid ink. */
.advantage .section-inner {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.advantage .adv-copy { grid-column: 2; grid-row: 1; }
.adv-blurb { margin: 1.5rem 0 2.6rem; color: var(--paper-soft); max-width: 50ch; }
.adv-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.9rem 2rem; margin-bottom: 2.8rem; }
.adv-point span { display: block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.3em; color: var(--slate-lt); margin-bottom: 0.55rem; }
.adv-point h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.35rem; }
.adv-point p { font-size: 0.87rem; color: var(--paper-soft); }
@media (max-width: 960px) {
  /* One column: the copy spans the width, so the scrim has to go bottom-up
     like the hero does on a phone rather than left-to-right. */
  .advantage .section-inner { grid-template-columns: 1fr; }
  .advantage .adv-copy { grid-column: 1; grid-row: 1; }
  .adv-photo img { object-position: 55% center; }
  .adv-scrim {
    background: linear-gradient(to top,
      rgba(17,17,16,0.97) 0%,
      rgba(17,17,16,0.94) 46%,
      rgba(17,17,16,0.86) 78%,
      rgba(17,17,16,0.74) 100%);
  }
}
@media (max-width: 620px) { .adv-points { grid-template-columns: 1fr; } }

/* ---------- services: ruled rows that invert on hover ---------- */
.svc-rows { border-top: 1px solid var(--line); margin-top: 3rem; }
.svc-row {
  display: grid; grid-template-columns: 4rem 1.1fr 1.3fr auto; align-items: baseline; gap: 1.6rem;
  padding: 2.1rem 1rem; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.svc-row:hover { background: var(--ink); color: var(--paper); padding-left: 1.8rem; }
.svc-idx { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; color: var(--slate); transition: color 0.35s; }
.svc-row:hover .svc-idx { color: var(--slate-lt); }
.svc-name { font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 600; text-transform: uppercase; letter-spacing: -0.01em; }
.svc-desc { font-size: 0.87rem; color: var(--slate); transition: color 0.35s; }
.svc-row:hover .svc-desc { color: var(--paper-soft); }
.svc-arrow { font-size: 1.2rem; transition: transform 0.35s var(--ease); }
.svc-row:hover .svc-arrow { transform: translateX(8px); }
.svc-note { margin-top: 1.8rem; font-size: 0.85rem; color: var(--slate); }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 2.6rem 1fr auto; }
  .svc-desc { display: none; }
}

/* ---------- process ---------- */
.timeline { position: relative; max-width: 760px; margin: 3.4rem 0 0; padding-left: 3.2rem; }
.timeline-rail { position: absolute; left: 0.6rem; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.timeline-fill { width: 100%; height: 0%; background: var(--ink); }
.tl-step { position: relative; padding-bottom: 3rem; }
.tl-step:last-child { padding-bottom: 0; }
.tl-num {
  position: absolute; left: -3.2rem; top: 0.1rem; width: 2.4rem; text-align: center;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; color: var(--slate);
  background: var(--paper); padding: 3px 0;
}
.tl-step h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.4rem; text-transform: uppercase; }
.tl-step p { color: var(--slate); font-size: 0.95rem; max-width: 54ch; }

/* ---------- quote (ink) ---------- */
.quote .section-inner {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 6vw, 6rem);
}
.quote-blurb { margin-top: 1.5rem; color: var(--paper-soft); max-width: 44ch; }
.quote-assurances { list-style: none; margin: 2.2rem 0; border-top: 1px solid var(--line-ink); }
.quote-assurances li {
  padding: 0.85rem 0 0.85rem 2rem; position: relative; font-size: 0.9rem;
  color: var(--paper-soft); border-bottom: 1px solid var(--line-ink);
}
.quote-assurances li::before {
  content: ""; position: absolute; left: 2px; top: 1.35rem;
  width: 12px; height: 1px; background: var(--slate-lt);
}
.quote-tel {
  display: inline-block; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600;
  letter-spacing: 0.01em; text-decoration: none; margin-top: 0.8rem;
  border-bottom: 1px solid var(--line-ink); padding-bottom: 4px;
}
.quote-tel:hover { color: var(--slate-lt); }

/* The form moved to /intake. What stands here is the invitation: show the
   questions so nobody has to guess what they're walking into. */
.quote-start { border: 1px solid var(--line-ink); padding: clamp(1.8rem, 3.4vw, 3rem); background: var(--ink-2); }
.qs-label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--slate-lt);
}
.qs-list { list-style: none; counter-reset: qs; margin: 1.6rem 0 2.4rem; }
.qs-list li {
  counter-increment: qs; position: relative; padding: 0.7rem 0 0.7rem 2.6rem;
  font-size: 1rem; color: var(--paper-soft); border-bottom: 1px solid var(--line-ink);
}
.qs-list li:first-child { border-top: 1px solid var(--line-ink); }
.qs-list li::before {
  content: counter(qs, decimal-leading-zero); position: absolute; left: 2px; top: 0.85rem;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; color: var(--slate-lt);
}
.qs-note { margin-top: 0.9rem; font-size: 0.78rem; color: var(--slate-lt); line-height: 1.5; }
@media (max-width: 960px) { .quote .section-inner { grid-template-columns: 1fr; } }

/* ---------- footer (ink, continues from quote) ---------- */
.footer { background: var(--ink); color: var(--paper-soft); padding: 0 var(--pad-x) 2rem; }
.footer-rule { border-top: 1px solid var(--line-ink); max-width: 1280px; margin: 0 auto; }
.footer-word {
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(3.6rem, 14vw, 12.5rem); line-height: 1.1; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 242, 240, 0.14);
  user-select: none; padding-top: 1.6rem;
}
@supports not (-webkit-text-stroke: 1px black) { .footer-word { color: rgba(242, 242, 240, 0.07); } }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; padding: 1.2rem 0 3rem; max-width: 1280px; margin: 0 auto; }
.footer h4 { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--slate-lt); margin-bottom: 0.9rem; }
.footer p { font-size: 0.9rem; margin-bottom: 0.7rem; }
.footer a { color: var(--paper); text-decoration: none; }
.footer a:hover { color: var(--slate-lt); }
.footer-base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line-ink); font-size: 0.75rem;
  max-width: 1280px; margin: 0 auto;
}
.footer-admin { color: var(--paper-soft) !important; }
.footer-admin:hover { color: var(--paper) !important; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- sticky mobile call bar ---------- */
.callbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 580; display: none;
  background: rgba(17, 17, 16, 0.97); border-top: 1px solid var(--line-ink);
  backdrop-filter: blur(10px);
}
.callbar a {
  flex: 1; text-align: center; padding: 1.05rem 0.5rem; text-decoration: none; color: var(--paper);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
.callbar .cb-solid { background: var(--paper); color: var(--ink); }
@media (max-width: 760px) {
  .callbar { display: flex; }
  body { padding-bottom: 52px; }
}

/* ---------- selected work: numbered plates on the sheet ---------- */
/* paper section sits between two paper sections, so its padding stacked with
   theirs — pull it back in so the vertical rhythm matches a single section */
/* The negative margins that used to sit here pulled this section up into its
   neighbour. That was harmless when Selected Work sat between two paper
   sections, but The Advantage is now directly above it and on ink, so the
   pull dragged paper up over the dark block and the two collided. */
.section.work {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.work-blurb { max-width: 560px; color: var(--slate); margin: 1.6rem 0 3.4rem; }
.work-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.work-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.work-more {
  display: inline-block; margin-top: 0.55rem;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--slate); opacity: 0; transform: translateY(4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.work-open:hover .work-more, .work-open:focus-visible .work-more { opacity: 1; transform: none; }
.work-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.2rem, 4.5vw, 3.6rem) clamp(1.2rem, 2.5vw, 2.2rem);
}
.work-fig { margin: 0; }
.wf-a, .wf-d, .wf-e { grid-column: span 7; }
.wf-b, .wf-c, .wf-f { grid-column: span 5; }
.work-img { overflow: hidden; border: 1px solid var(--line); background: var(--paper-hi); }
.work-img img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;
  transition: transform 1s var(--ease);
}
.work-fig:hover .work-img img { transform: scale(1.03); }
.work-fig figcaption {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-top: 0.75rem;
}
.wf-num { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.28em; color: var(--slate); }
.wf-name { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.wf-loc { margin-left: auto; font-size: 0.78rem; color: var(--slate); }
.work-credit {
  margin-top: 3rem; font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-lt);
}
@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; }
  .wf-a, .wf-b, .wf-c, .wf-d, .wf-e, .wf-f { grid-column: auto; }
  .wf-loc { margin-left: 0; flex-basis: 100%; }
}

/* ---------- before/after compare: one drag line, Wildwood only ----------
   The range input is a transparent overlay across the whole frame: it gives
   drag, click-to-jump, touch, and keyboard for free. The visible line and
   grip just track its value through the --ba custom property. */
.ba { margin-top: clamp(3.2rem, 7vw, 5.5rem); }
.ba-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 28px; margin-bottom: 1.7rem;
}
.ba-head .label { margin-bottom: 0; }
.ba-copy { font-size: 0.92rem; color: var(--slate); max-width: 58ch; }
.ba-compare {
  --ba: 50%;
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-2);
}
.ba-compare:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.ba-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ba-top {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--ba)) 0 0);
}
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--ba); width: 0;
  border-left: 1.5px solid var(--paper);
  box-shadow: 0 0 0 0.5px rgba(17, 17, 16, 0.35);
  transform: translateX(-0.75px);
  pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  font-size: 0.95rem;
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: ew-resize;
  touch-action: pan-y; /* horizontal drags drive the line, vertical still scrolls the page */
  -webkit-appearance: none; appearance: none;
}
.ba-tag {
  position: absolute; top: 12px; pointer-events: none;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 10px;
}
.ba-tag-before { left: 12px; background: rgba(17, 17, 16, 0.55); color: var(--paper); }
.ba-tag-after { right: 12px; background: rgba(242, 242, 240, 0.78); color: var(--ink); }

/* ---------- work lightbox: full-bleed plate viewer on ink ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  background: rgba(17, 17, 16, 0.97); color: var(--paper);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lb-head {
  display: flex; align-items: center; gap: 18px;
  padding: 1.1rem var(--pad-x); border-bottom: 1px solid var(--line-ink);
}
.lb-title {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
}
.lb-count { font-size: 0.72rem; color: var(--slate-lt); letter-spacing: 0.12em; }
.lb-close {
  margin-left: auto; width: 40px; height: 40px;
  border: 1px solid var(--line-ink); background: none; color: var(--paper);
  font-size: 0.9rem; cursor: pointer; transition: background 0.3s, color 0.3s;
}
.lb-close:hover { background: var(--paper); color: var(--ink); }
.lb-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem) var(--pad-x);
}
.lb-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border: 1px solid var(--line-ink); background: var(--ink-2);
}
.lb-img.loading { opacity: 0.35; }
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 1px solid var(--line-ink);
  background: rgba(17, 17, 16, 0.6); color: var(--paper);
  font-size: 1.1rem; cursor: pointer; transition: background 0.3s, color 0.3s;
}
.lb-arrow:hover { background: var(--paper); color: var(--ink); }
.lb-prev { left: clamp(0.6rem, 2vw, 2rem); }
.lb-next { right: clamp(0.6rem, 2vw, 2rem); }
@media (max-width: 700px) {
  .lb-arrow { top: auto; bottom: 1rem; transform: none; }
  .lb-prev { left: var(--pad-x); }
  .lb-next { right: var(--pad-x); }
  .lb-stage { padding-bottom: 5rem; }
}

/* ---------- reveal system ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.rv.visible { opacity: 1; transform: none; }

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv, .hero-eyebrow, .hero-sub, .hero-cta { opacity: 1; transform: none; transition: none; }
  .hero-title .h-line { transform: none; transition: none; }
  /* these need the html.js prefix to outrank the rules that hide them */
  html.js .hero-photo i, html.js .hero .proof { opacity: 1; transform: none; transition: none; }
  .hero-scrim::after { opacity: 0; }
  .entrance { display: none; }
  .menu-overlay.open .menu-links a { animation: none; opacity: 1; transform: none; }
}