/* ============================================================
   G&M BUILDING SOLUTIONS LTD — styles
   Brand: ink black / brand red / warm paper white (from logo).
   Motion rules: animate only transform / opacity / stroke-dashoffset.
   All animation lives inside prefers-reduced-motion: no-preference;
   the authored base state is always the finished frame.
   ============================================================ */

/* Size-adjusted local fallbacks so font swap doesn't shift layout */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Segoe UI"), local("Roboto"), local("Arial");
  size-adjust: 99%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Display Fallback";
  src: local("Arial Black"), local("Segoe UI Black"), local("Roboto"), local("Arial Bold");
  size-adjust: 95%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  --paper: #f7f4ee;        /* warm drafting paper */
  --paper-2: #efeae0;      /* deeper paper */
  --paper-line: #e3dcce;   /* hairlines on paper */
  --ink: #131316;          /* logo black */
  --ink-2: #1b1b1f;        /* raised dark surface */
  --ink-3: #232328;        /* dark card */
  --ink-line: #303036;     /* hairlines on dark */
  --red: #d2232a;          /* logo red */
  --red-deep: #a91d23;     /* red small-text on light surfaces (AA) */
  --red-lift: #ff6b70;     /* red small-text on dark surfaces (AA) */
  --muted: #645f55;        /* secondary text on paper */
  --muted-dark: #a5a3a9;   /* secondary text on ink */
  --brick: #b1583f;        /* built masonry */
  --amber: #f0c070;        /* lit windows */

  --display: "Archivo Black", "Display Fallback", Arial, sans-serif;
  --font: "Archivo", "Archivo Fallback", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);   /* out-expo */
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);    /* plotter strokes */
  --ease-door: cubic-bezier(0.77, 0, 0.18, 1);    /* big panel moves */

  --container: 1240px;
  --header-h: 132px;
  --header-h-small: 104px;
}
@media (max-width: 640px) {
  :root { --header-h: 106px; --header-h-small: 88px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 48px);
}

::selection { background: var(--red); color: #fff; }

/* ---------- type helpers ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--red);
  flex: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  padding: 18px 30px;
  border-radius: 6px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  position: relative;
  background: var(--red);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(210, 35, 42, .55);
}
.btn-primary:hover { background: var(--red-deep); }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 12px;
  box-shadow: 0 0 36px 10px rgba(210, 35, 42, .5);
  opacity: 0;
  pointer-events: none;
}

.btn-ink {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-ink:hover { background: var(--ink); color: var(--paper); }
.btn-ink svg { transition: transform .18s ease; }
.btn-ink:hover svg { transform: translateX(4px); }

.btn-paper {
  background: var(--paper);
  color: var(--ink);
}
.btn-paper:hover { background: #fff; }

.btn-ghost-light {
  border-color: rgba(247, 244, 238, .4);
  color: var(--paper);
}
.btn-ghost-light:hover { border-color: var(--paper); }

/* ============================================================
   STICKY HEADER — adapts to scroll and to the section behind it
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .35s var(--ease-settle), background-color .3s ease,
              box-shadow .3s ease, color .3s ease;
  /* cream over the hero video; flips to ink once the white bar appears */
  color: var(--paper);
}
.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* over the hero the bar is fully transparent: the hero's own progressive
   blur layer provides the glass, so the fixed bar never runs a filter.
   Past the hero the coloured bars are ~95% opaque, so no blur is needed. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  pointer-events: none;
}
.site-header.is-scrolled { height: var(--header-h-small); }

/* past the hero, the bar takes whichever colour contrasts best with the
   section behind it: ink over cream, cream over ink, red for variety */
.site-header[data-bar="ink"] { color: var(--paper); }
.site-header[data-bar="ink"]::before {
  background: rgb(19, 19, 22);
  border-bottom-color: rgba(247, 244, 238, .1);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
}
.site-header[data-bar="cream"] { color: var(--ink); }
.site-header[data-bar="cream"]::before {
  background: rgb(247, 244, 238);
  border-bottom-color: rgba(19, 19, 22, .08);
  box-shadow: 0 10px 30px -18px rgba(19, 19, 22, .35);
}
.site-header[data-bar="red"] { color: #fff; }
.site-header[data-bar="red"]::before {
  background: rgb(169, 29, 35);
  border-bottom-color: rgba(255, 255, 255, .15);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
}
.site-header[data-bar="red"] .scroll-progress { background: var(--paper); }
.site-header[data-bar="red"] .menu-btn:focus-visible { outline-color: #fff; }

/* pin label-bearing controls per bar state so they can never lag the
   header's inherited colour transition */
.site-header[data-bar="ink"] .menu-btn,
.site-header[data-bar="ink"] .header-phone { color: var(--paper); }
.site-header[data-bar="cream"] .menu-btn,
.site-header[data-bar="cream"] .header-phone { color: var(--ink); }
.site-header[data-bar="red"] .menu-btn,
.site-header[data-bar="red"] .header-phone { color: #fff; }

/* mid-hero scroll: the glass band scrolls away with the hero, so once
   the user is moving, the fixed bar gets its own dark backing */
.site-header.is-overhero::before {
  background: rgba(13, 14, 18, .96);
  border-bottom-color: rgba(247, 244, 238, .08);
}

/* while the menu overlay is open, the menu covers the header entirely;
   the dialog carries its own close control */
body.menu-open .site-header {
  z-index: 40;
  pointer-events: none;
  color: var(--paper);
}
body.menu-open .site-header::before { opacity: 0; }
body.menu-open .scroll-progress { opacity: 0; }

/* red build-progress hairline */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* brand — the logo is always shown whole: mark, G&M, and wordmark */
.brand {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ease-settle);
  transform-origin: left center;
}
.site-header.is-scrolled .brand { transform: scale(.84); }
.brand { gap: 16px; }
/* the client's logo file, shown whole on its own white field */
.logo-img {
  height: 102px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 6px 9px;
  box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .4);
}
/* the logo's own lettering beside the plaque — three recolours of the
   exact artwork, crossfaded so it always contrasts with the bar */
.wordmark { position: relative; height: 72px; flex: none; }
.wm {
  height: 100%;
  width: auto;
  display: block;
  /* if the brand column is squeezed, scale the artwork, never distort it */
  object-fit: contain;
  object-position: left center;
  transition: opacity .35s ease;
}
.wm-dark, .wm-mono { position: absolute; inset: 0; opacity: 0; }
.site-header[data-bar="cream"] .wm-light { opacity: 0; }
.site-header[data-bar="cream"] .wm-dark { opacity: 1; }
.site-header[data-bar="red"] .wm-light { opacity: 0; }
.site-header[data-bar="red"] .wm-mono { opacity: 1; }
body.menu-open .site-header .wm-light { opacity: 1; }
body.menu-open .site-header .wm-dark,
body.menu-open .site-header .wm-mono { opacity: 0; }
@media (max-width: 640px) {
  .site-header .logo-img { height: 76px; }
  .wordmark { height: 54px; }
  .brand { gap: 11px; }
}

.header-right { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.header-phone {
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: inherit;
  opacity: .85;
  transition: opacity .15s ease;
}
.header-phone:hover { opacity: 1; }

/* compact tap-to-call button, shown only where the number is hidden */
.header-call {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  color: inherit;
  border: 1.5px solid currentColor;
  border-radius: 10px;
  opacity: .9;
}
.header-call svg { width: 19px; height: 19px; }
.header-call:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (max-width: 640px) {
  .header-phone { display: none; }
  .header-call { display: grid; }
}
@media (max-width: 374px) {
  .slogan { display: none; }
  .wordmark { height: 46px; }
}

/* menu trigger — three courses that morph */
.menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 10px 2px;
}
.menu-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.menu-icon { width: 30px; height: 16px; position: relative; }
.menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .35s var(--ease-settle), opacity .25s ease, background-color .3s ease;
}
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 7px; width: 72%; }
.menu-icon span:nth-child(3) { top: 14px; }
.menu-btn:hover .menu-icon span:nth-child(2) { transform: translateX(28%); }
body.menu-open .menu-btn { color: var(--paper); }
body.menu-open .menu-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--red); }
body.menu-open .menu-icon span:nth-child(2) { opacity: 0; transform: translateX(40%); }
body.menu-open .menu-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--red); }

/* ============================================================
   FULL-SCREEN MENU — the "drawing index"
   ============================================================ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  visibility: hidden;
  transform: translateY(-102%);
  display: flex;
  overflow: hidden auto;
}
.menu.open { visibility: visible; transform: none; }

/* in-dialog close control, mirrors the header trigger position */
.menu-close {
  position: absolute;
  top: 22px;
  right: clamp(20px, 4.5vw, 48px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--paper);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 10px 2px;
}
.menu-close:focus-visible { outline: 3px solid var(--red-lift); outline-offset: 3px; }
.menu-close svg { width: 22px; height: 22px; }
.menu-close:hover { color: var(--red-lift); }

/* faint grid + giant roofline watermark on the dark sheet */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to right, transparent 0 79px, rgba(247,244,238,.045) 79px 80px),
    repeating-linear-gradient(to bottom, transparent 0 79px, rgba(247,244,238,.045) 79px 80px);
  pointer-events: none;
}
.menu-watermark {
  position: absolute;
  bottom: -4vw;
  right: -6vw;
  width: 58vw;
  min-width: 480px;
  opacity: .14;
  pointer-events: none;
}

.menu-inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  padding-block: 110px 60px;
  margin-block: auto;
}

.menu-list { list-style: none; display: grid; gap: clamp(6px, 1.6vh, 18px); }
.menu-link {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
  text-decoration: none;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  width: fit-content;
  position: relative;
  transition: color .2s ease;
}
.menu-num {
  font-family: var(--mono);
  font-size: clamp(.8rem, 1.4vw, 1rem);
  letter-spacing: .2em;
  color: var(--red-lift);
}
.menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-settle);
}
.menu-link:hover::after, .menu-link:focus-visible::after { transform: scaleX(1); }
.menu-link:focus-visible { outline: none; color: #fff; }
/* persistent you-are-here marker */
.menu-link[aria-current="page"]::after { transform: scaleX(1); }

.menu-side {
  display: grid;
  gap: 26px;
  font-size: .95rem;
  color: var(--muted-dark);
  border-left: 1px solid var(--ink-line);
  padding-left: clamp(20px, 3vw, 44px);
}
.menu-side-block strong {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red-lift);
  margin-bottom: 8px;
  font-weight: 500;
}
.menu-side a { color: var(--paper); text-decoration: none; font-size: 1.15rem; font-weight: 600; }
.menu-side a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }

@media (max-width: 860px) {
  .menu-inner { grid-template-columns: 1fr; padding-block: 110px 50px; gap: 40px; }
  .menu-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink-line); padding-top: 28px; }
}

/* ============================================================
   SCROLL RULE — fixed measuring strip, right edge (desktop)
   ============================================================ */
.rule {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  z-index: 40;
  pointer-events: none;
  display: none;
  /* mid-grey ticks stay legible over both paper and ink sections */
  background:
    repeating-linear-gradient(to bottom, transparent 0 11px, rgba(127,124,116,.5) 11px 12px) right 6px top / 7px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 59px, rgba(127,124,116,.72) 59px 60px) right 6px top / 13px 100% no-repeat;
}
@media (min-width: 1180px) { .rule { display: block; } }
.rule-marker {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  will-change: transform;
}
.rule-marker::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 0;
  width: 20px;
  height: 2.5px;
  background: var(--red);
}
.rule-label {
  position: absolute;
  right: 16px;
  top: 10px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--red);
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* ============================================================
   HERO — slow-motion footage of the team at work
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  contain: paint;
  padding-block: calc(var(--header-h) + clamp(20px, 4vh, 56px)) clamp(48px, 7vh, 80px);
  background: #0d0e12;
  color: var(--paper);
}

.hero-media {
  position: absolute;
  inset: 0;
  /* static frame behind the video: instant first paint + reduced-motion fallback */
  background: url("../assets/img/hero-poster.jpg") center / cover no-repeat #0d0e12;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* constant overscan so the scroll drift never exposes edges;
     a static scale lets the compositor cache the video layer */
  transform: scale(1.08);
}
/* legibility scrim: heavier over the copy, lighter where the work shows */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(13, 14, 18, .78), transparent 42%),
    linear-gradient(80deg, rgba(13, 14, 18, .9) 0%, rgba(13, 14, 18, .68) 36%, rgba(13, 14, 18, .22) 72%, rgba(13, 14, 18, .38) 100%);
}

/* progressive blur, the cheap way: no live backdrop-filter (which would
   re-blur every video frame). Instead a pre-blurred still of the footage
   sits over the moving video, tinted and masked so it dissolves downward.
   The motion ghosts through underneath, so it still reads as frosted
   video, but the GPU pays nothing per frame. */
.hero-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + 110px);
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(33, 34, 37, .55), rgba(33, 34, 37, .28) 45%, transparent),
    url("../assets/img/hero-blur-band.jpg") top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
}

.hero-copy { max-width: 680px; }

.hero-eyebrow { color: rgba(247, 244, 238, .85); margin-bottom: 26px; }

.hero-headline {
  font-size: clamp(2.4rem, 4.8vw, 4.1rem);
  margin-bottom: 26px;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 420px) { .hero-headline { white-space: normal; } }
/* masked line reveals (padding keeps descenders inside the mask) */
.hl-line { display: block; overflow: hidden; padding: .06em 0 .14em; margin-bottom: -.14em; }
.hl-inner { display: inline-block; }
.headline-accent {
  position: relative;
  color: var(--red);
  white-space: nowrap;
}
.headline-underline {
  position: absolute;
  left: 0;
  bottom: -0.06em;
  width: 100%;
  height: .12em;
  overflow: visible;
}
.headline-underline path {
  fill: none;
  stroke: var(--red);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.hero-sub {
  font-size: clamp(1.04rem, 1.4vw, 1.18rem);
  color: #ccd1da;
  max-width: 52ch;
  margin-bottom: 36px;
}
.hero-sub strong { color: #fff; font-weight: 600; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

.trust-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* 2x2 on wider screens so no chip is orphaned on its own row */
@media (min-width: 600px) {
  .trust-chips {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
  }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  font-weight: 600;
  color: #eceef2;
  border: 1.5px solid rgba(247, 244, 238, .28);
  background: rgba(13, 14, 18, .52);
  padding: 9px 15px;
  border-radius: 999px;
}
.chip svg { width: 15px; height: 15px; color: var(--red-lift); flex: none; }

@media (max-width: 980px) {
  .hero { min-height: 88svh; }
}

/* ============================================================
   THE DRAWING BOARD — paper section carrying the animated scene
   ============================================================ */
.board {
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(1100px 600px at 70% 12%, rgba(255,255,255,.7) 0%, transparent 60%),
    repeating-linear-gradient(to right, transparent 0 119px, rgba(19,19,22,.06) 119px 120px),
    repeating-linear-gradient(to bottom, transparent 0 119px, rgba(19,19,22,.06) 119px 120px),
    repeating-linear-gradient(to right, transparent 0 23px, rgba(19,19,22,.035) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgba(19,19,22,.035) 23px 24px),
    var(--paper);
}
.board-visual {
  max-width: 940px;
  margin-inline: auto;
}
.scene { width: 100%; height: auto; }

/* ============================================================
   SCENE — base styles = the finished poster frame
   ============================================================ */
/* parallax layers only get their own compositor layers where the
   pointer parallax actually runs (desktop, fine pointer) */
@media (pointer: fine) {
  [data-depth] { will-change: transform; }
}

.s-skyline { fill: #e7e0d2; }

.s-drafted { opacity: .5; }
.s-d, .s-a {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-w3 { stroke-width: 4.5; }   /* logo-weight gable lines */
.s-w2 { stroke-width: 2.6; }
.s-w1 { stroke-width: 2; }
.s-w0 { stroke-width: 1.4; }
.s-echo { stroke: var(--red); }  /* the red roofline echo from the logo */
.s-foot { stroke-width: 1.3; stroke-dasharray: 6 5; opacity: .7; }
.s-a { stroke: #8a8576; stroke-width: 1.3; }

.s-cross { stroke: var(--red); stroke-width: 2; fill: none; }
.s-ping circle { fill: none; stroke: var(--red); stroke-width: 1.6; opacity: 0; }
.s-laser { opacity: 0; }
.s-redline { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.s-redlbl { fill: var(--red); }
.s-reg { stroke: #b3ac9b; stroke-width: 1.6; fill: none; opacity: .65; }

.s-lbl {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  fill: #8a8576;
}
.s-sm { font-size: 11px; }

/* the sign-off stamp */
.s-stamp {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-8deg);
  opacity: .88;
}
.s-stamp circle, .s-stamp path { stroke: var(--red); fill: none; }
.s-stamp text { fill: var(--red); }
.st-arc { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; }
.st-main { font-family: var(--display); font-size: 10.5px; letter-spacing: 0; }

.s-smoke path { fill: #98938a; opacity: 0; }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec { padding-block: clamp(76px, 10vw, 130px); position: relative; }
.sec, main { scroll-margin-top: calc(var(--header-h-small) + 10px); }
.sec-dark { background: var(--ink); color: var(--paper); }
.sec-paper-2 { background: var(--paper-2); }
.sec-red { background: linear-gradient(135deg, #b32026 0%, var(--red-deep) 100%); color: #fff; }
.sec-red .btn:focus-visible { outline-color: var(--ink); }

/* small gable ornament that opens dark/red sections */
.roof-mark { width: 64px; height: 24px; margin-bottom: 26px; }
.roof-mark path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.roof-mark .rm-a { stroke: var(--red); }
.roof-mark .rm-b { stroke: currentColor; }

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-eyebrow { color: var(--red); margin-bottom: 16px; }
.sec-dark .sec-eyebrow { color: var(--red-lift); }
.sec-paper-2 .sec-eyebrow { color: var(--red-deep); }
.sec-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
  text-wrap: balance;
}
.sec-sub { color: var(--muted); max-width: 60ch; font-size: 1.05rem; }
.sec-dark .sec-sub { color: var(--muted-dark); }

/* ---------- services (dark) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.service-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 30px 26px 28px;
  overflow: hidden;
  transition: transform .25s var(--ease-settle), border-color .25s ease;
}
.service-card:hover { transform: translateY(-5px); border-color: #4a4a52; }
.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-settle);
}
.service-card:hover::after { transform: scaleX(1); }
.service-num {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--red-lift);
}
.service-icon { width: 44px; height: 44px; color: var(--paper); margin-block: 20px 18px; }
.service-icon .ic-red { stroke: var(--red); }
.service-card h3 { font-size: 1.18rem; margin-bottom: 9px; font-weight: 700; }
.service-card p { font-size: .93rem; color: var(--muted-dark); }

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

.slider { max-width: 880px; }
.slider-top {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: 18px;
}
.slider-count {
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--ink);
  flex: none;
}
.slider-count [data-slider-now] { color: var(--red-deep); font-weight: 700; }
.slider-sep { margin-inline: 6px; color: var(--muted); }

.slider-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-right: auto;
}
.slider-tab {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  font-size: .88rem;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 6px;
  position: relative;
  transition: color .15s ease, background-color .15s ease;
}
.slider-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2.5px;
  background: var(--red-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-settle);
}
.slider-tab:hover { color: var(--ink); }
.slider-tab[aria-selected="true"] { color: var(--ink); }
.slider-tab[aria-selected="true"]::after { transform: scaleX(1); }
.slider-tab:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 720px) { .slider-tabs { display: none; } .slider-count { margin-right: auto; } }

.slider-arrows { display: flex; gap: 8px; flex: none; }
.slider-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.slider-btn svg { width: 17px; height: 17px; }
.slider-btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.slider-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.slider-viewport { overflow: hidden; touch-action: pan-y; }
.slider-track {
  list-style: none;
  display: flex;
  align-items: stretch;
}
.slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  background: #fff;
  border: 1.5px solid var(--paper-line);
  border-radius: 14px;
  padding: clamp(26px, 4vw, 44px);
  min-height: 200px;
}
.slide-num {
  position: absolute;
  top: 18px;
  right: 24px;
  font-family: var(--mono);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--red-deep);
  opacity: .18;
  pointer-events: none;
}
.slide-icon { width: clamp(54px, 7vw, 72px); flex: none; color: var(--ink); }
.slide-icon .ic-red { stroke: var(--red); }
.slide-body h3 { font-size: 1.3rem; margin-bottom: 8px; font-weight: 700; }
.slide-body p { color: var(--muted); max-width: 52ch; }
@media (max-width: 540px) {
  .slide { flex-direction: column; align-items: flex-start; gap: 16px; }
}

.assurance {
  margin-top: clamp(44px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  font-size: .95rem;
  font-weight: 600;
}
.assurance li { list-style: none; display: flex; align-items: center; gap: 10px; }
.assurance li::before {
  content: "";
  width: 13px;
  height: 8px;
  border-left: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  transform: rotate(-45deg) translateY(-2px);
}

/* ---------- quote band (red) ---------- */
.sec-red .roof-mark .rm-a { stroke: #fff; }
.sec-red .sec-sub { color: #fff; }
.quote-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 34px clamp(28px, 4vw, 64px);
}
@media (max-width: 900px) {
  .quote-inner { grid-template-columns: 1fr; }
}
.quote-copy .sec-title { margin-bottom: 10px; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.quote-phone {
  font-family: var(--mono);
  letter-spacing: .04em;
  font-size: 1rem;
  color: #fff;
  width: 100%;
}
.quote-phone a { color: #fff; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--muted-dark);
  padding-block: 56px 36px;
  position: relative;
  overflow: hidden;
}
.footer-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 26px;
  font-size: .88rem;
}
.footer-brand { color: var(--paper); }
.footer-brand .logo-img { height: 132px; margin-bottom: 16px; }
.footer-meta { text-align: right; }
.footer-meta a { color: var(--paper); text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.footer-roofline {
  position: absolute;
  right: -30px;
  bottom: -8px;
  width: 380px;
  opacity: .12;
  pointer-events: none;
}
@media (max-width: 700px) { .footer-meta { text-align: left; } }

/* ---------- scroll reveals: base = visible ----------
   Hidden state only applies when JS is running (html.js) AND the
   user allows motion — so no-JS visitors and printers see everything. */
/* controls that do nothing without JS are hidden without JS */
html:not(.js) .menu-btn, html:not(.js) .rule { display: none !important; }

.noscript-nav { display: flex; gap: 20px; align-items: center; }
.noscript-nav a { color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; }
.noscript-nav a:hover { text-decoration: underline; text-decoration-color: var(--red); }

/* ============================================================
   MOTION — only for users who haven't asked for reduced motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes in     { from { opacity: 0; } }
  @keyframes draw   { from { stroke-dashoffset: 1; } }
  @keyframes rise   { from { opacity: 0; transform: translateY(16px); } }
  @keyframes lineUp { from { transform: translateY(112%); } }
  @keyframes ghost  { from { opacity: 1; } }
  @keyframes laser {
    0%   { transform: translateX(180px); opacity: 0; }
    6%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(760px); opacity: 0; }
  }
  @keyframes thud {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(2px); }
  }
  @keyframes remeasure {
    0%   { stroke-dashoffset: 1; }
    3.2% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes ping {
    0%        { transform: scale(.25); opacity: .55; }
    75%, 100% { transform: scale(1.8); opacity: 0; }
  }
  @keyframes breathe { to { opacity: .82; } }
  @keyframes smoke {
    0%   { opacity: 0; transform: translateY(0) scale(.7); }
    18%  { opacity: .4; }
    100% { opacity: 0; transform: translateY(-46px) scale(1.45); }
  }
  @keyframes stampIn {
    0%   { opacity: 0; transform: scale(2.05) rotate(4deg); }
    55%  { opacity: .95; transform: scale(.94) rotate(-10deg); }
    78%  { transform: scale(1.03) rotate(-7.4deg); }
    100% { opacity: .88; transform: scale(1) rotate(-8deg); }
  }
  @keyframes ignite {
    0%   { opacity: 0; transform: scale(.96); }
    35%  { opacity: .6; }
    100% { opacity: 0; transform: scale(1.1); }
  }

  /* generic intro helpers — per-element delay/duration via --d / --t */
  .fx-in   { animation: in var(--t, .7s) var(--ease-settle) var(--d, 0s) both; }
  .fx-stp  { animation: in .36s steps(2, end) var(--d, 0s) both; }
  .fx-stp4 { animation: in .55s steps(4, end) var(--d, 0s) both; }
  .fx-drw {
    stroke-dasharray: 1 1;
    animation: draw var(--t, .6s) var(--ease-draw) var(--d, 0s) both;
  }

  /* named beats — compressed choreography, signature complete by ~4.4s */
  .s-laser      { animation: laser 1.15s linear 2.85s both; }
  .s-drafted    { animation: ghost .95s linear 2.95s both; }
  .s-built-wrap { animation: thud .18s ease-out 4s both; }
  .s-redline {
    stroke-dasharray: 1 1;
    animation: remeasure 16s linear 3.95s infinite both;
  }
  .s-ping circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: ping 5.5s cubic-bezier(0, .55, .45, 1) var(--d, 4.9s) infinite;
  }
  .s-glow1 { animation: breathe 7s ease-in-out 4.7s infinite alternate; }
  .s-glow2 { animation: breathe 9s ease-in-out 5.4s infinite alternate; }
  .s-glow3 { animation: breathe 11s ease-in-out 6.2s infinite alternate; }
  .s-smoke path { animation: smoke var(--t, 7s) linear var(--d, 4.6s) infinite; }
  .s-stamp { animation: stampIn .42s cubic-bezier(.3, 1.2, .4, 1) 4.25s both; }

  /* copy entrance — early and brief, never gates reading or LCP */
  .hl-inner      { animation: lineUp .6s var(--ease-settle) var(--d, 0s) both; }
  .hero-eyebrow  { animation: rise .45s var(--ease-settle) .03s both; }
  .hero-sub      { animation: rise .5s var(--ease-settle) .3s both; }
  .hero-ctas     { animation: rise .5s var(--ease-settle) .4s both; }
  .trust-chips   { animation: rise .5s var(--ease-settle) .5s both; }

  /* red ignition — underline + CTA glow fire once the copy has landed */
  .headline-underline path { animation: draw .5s var(--ease-settle) 1.15s both; }
  .btn-primary::after      { animation: ignite .9s ease-out 1.3s both; }

  /* the drawing waits below the fold until scrolled into view */
  html.js .board:not(.is-live) .scene * { animation-play-state: paused; }

  /* ambient power switch — paused while the board is off-screen */
  .board.is-off .amb,
  .board.is-off .s-smoke path { animation-play-state: paused; }

  /* scroll-driven hero parallax (progressive enhancement) —
     translate only, so the video texture is never re-rasterised */
  @supports (animation-timeline: scroll()) {
    @keyframes videoDrift { from { transform: scale(1.08); } to { transform: scale(1.08) translateY(4%); } }
    @keyframes copyDrift { to { transform: translateY(50px); opacity: .25; } }
    .hero-video {
      animation: videoDrift linear both;
      animation-timeline: scroll();
      animation-range: 0 110vh;
    }
    .hero-copy {
      animation: copyDrift linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
    }
  }

  /* slider motion */
  .slider-track { transition: transform .55s var(--ease-door); }
  /* service icons redraw on hover */
  .service-card:hover .service-icon path[pathLength] {
    stroke-dasharray: 1 1;
    animation: draw .7s var(--ease-draw) both;
  }

  /* scroll reveals — hidden state requires JS to be running */
  html.js .reveal { opacity: 0; transform: translateY(26px); }
  html.js .reveal.in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease var(--rd, 0s), transform .8s var(--ease-settle) var(--rd, 0s);
  }

  /* menu open/close motion */
  .menu { transition: transform .65s var(--ease-door), visibility 0s .65s; }
  .menu.open { transition: transform .65s var(--ease-door); }
  .menu-item { opacity: 0; transform: translateY(30px); }
  .menu.open .menu-item {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease var(--md, .25s), transform .6s var(--ease-settle) var(--md, .25s);
  }
  .menu-side { opacity: 0; transform: translateY(24px); }
  .menu.open .menu-side {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease .5s, transform .6s var(--ease-settle) .5s;
  }
}

/* reduced motion: menu still works, just without the slide */
@media (prefers-reduced-motion: reduce) {
  .menu { transform: none; opacity: 0; pointer-events: none; }
  .menu.open { opacity: 1; pointer-events: auto; }
}

/* print: everything visible, nothing mid-animation */
@media print {
  .reveal, .hl-inner, .hero-eyebrow, .hero-sub, .hero-ctas, .trust-chips {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* scene elements print in their authored (finished) state */
  .scene *, .btn-primary::after { animation: none !important; }
  .fx-drw, .s-redline, .headline-underline path { stroke-dasharray: none !important; }
  .site-header, .rule, .menu, .hero-media { display: none !important; }
  .hero { color: var(--ink) !important; background: #fff !important; }
  .hero-sub { color: var(--muted) !important; }
  .hero-sub strong { color: var(--ink) !important; }
}

/* ============================================================
   SLOGAN — sits under the wordmark, recolours with the bar
   ============================================================ */
.brand-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.slogan {
  font-style: italic;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--red-lift);
  transition: color .35s ease;
  white-space: nowrap;
}
.site-header[data-bar="cream"] .slogan { color: var(--red-deep); }
.site-header[data-bar="red"] .slogan { color: #fff; }
@media (max-width: 640px) { .slogan { font-size: .68rem; } }

/* ============================================================
   WORK GALLERY — staggered cascade grid
   ============================================================ */
.work-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }

.work-item figure { margin: 0; }
.work-frame {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  border: 1.5px solid var(--paper-line);
  background: var(--paper-2);
}
.work-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease-settle);
}
.work-item:hover .work-frame img { transform: scale(1.045); }
.work-item figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 0;
}
.work-cap-type { font-weight: 600; font-size: .95rem; color: var(--ink); }
.work-cap-tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-deep);
  flex: none;
}
.sec-dark .work-cap-type { color: var(--paper); }
.sec-dark .work-cap-tag { color: var(--red-lift); }
.sec-dark .work-frame { border-color: var(--ink-line); background: var(--ink-2); }
.work-more { margin-top: 36px; }

/* ============================================================
   AREAS — where we work
   ============================================================ */
.areas-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.area-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  transition: transform .2s var(--ease-settle), border-color .2s ease;
}
.area-link svg { width: 16px; height: 16px; flex: none; color: var(--red-lift); transition: transform .2s ease; }
.area-link:hover { transform: translateY(-3px); border-color: #4a4a52; }
.area-link:hover svg { transform: translateX(4px); }
.area-link:focus-visible { outline: 3px solid var(--red-lift); outline-offset: 3px; }
.area-link .area-town { display: flex; flex-direction: column; gap: 3px; }
.area-link .area-sub {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.areas-note { margin-top: 30px; color: var(--muted-dark); max-width: 64ch; }
.areas-note a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.areas-note a:hover { color: #fff; }

/* footer area links for crawlability */
.footer-areas {
  margin-top: 10px;
  font-size: .85rem;
}
.footer-areas a { color: var(--muted-dark); text-decoration: none; }
.footer-areas a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--red); }

/* ============================================================
   SUBPAGES (work.html, areas/*) — header offset + shared bits
   ============================================================ */
.subpage-main { padding-top: var(--header-h); }
.page-head { padding-block: clamp(48px, 7vw, 80px) clamp(20px, 3vw, 36px); }
.page-head .eyebrow { color: var(--red-deep); margin-bottom: 14px; }
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 16px; text-wrap: balance; }
.page-head .lede { color: var(--muted); max-width: 64ch; font-size: 1.08rem; }
.breadcrumb {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.prose { max-width: 70ch; color: var(--ink); }
.prose p { margin-bottom: 18px; color: #3c3a34; font-size: 1.04rem; }
.prose h2 { font-size: 1.5rem; margin: 30px 0 12px; }
.gallery-group { margin-bottom: clamp(40px, 6vw, 64px); }
.gallery-group h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 18px; }

/* ============================================================
   AUDIT FIXES — tap targets, mobile legibility, print
   ============================================================ */

/* comfortable touch targets in the menu and breadcrumbs */
.menu-link { padding-block: 7px; }
.menu-side a {
  display: inline-block;
  padding-block: 7px;
  overflow-wrap: anywhere;
}
.breadcrumb a {
  display: inline-block;
  padding: 10px 4px;
  margin: -10px -4px;
}

/* drawing-board drafting labels stay legible on small screens */
@media (max-width: 600px) {
  .scene .s-lbl { font-size: 19px; }
  .scene .s-sm { font-size: 15px; }
}

/* current step name beside the counter where the tab rail is hidden */
.slider-current { display: none; }
@media (max-width: 720px) {
  .slider-current {
    display: inline;
    margin-left: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink);
    text-transform: none;
  }
}

/* secondary footer nav: main site routes, not just areas */
.footer-links { margin-top: 14px; }

/* video element hides itself if autoplay is refused (e.g. iOS Low
   Power Mode) so no struck-out play glyph sits over the hero */
.hero-video.video-blocked { display: none; }

/* print: dark and red sections flip to ink-on-white */
@media print {
  .sec-dark, .sec-red, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .sec-dark *, .sec-red *, .site-footer * {
    color: #000 !important;
    border-color: #bbb !important;
    background: transparent !important;
  }
  .service-card, .area-link, .slide { background: #fff !important; border: 1px solid #bbb !important; }
  .btn { border: 1.5px solid #000 !important; box-shadow: none !important; }
  .menu-watermark, .footer-roofline, .roof-mark, .scroll-progress { display: none !important; }
}

/* ============================================================
   ENHANCEMENTS — lightbox, CTA strip, skip link, grid band fix
   ============================================================ */

/* skip to content (visible on keyboard focus only) */
.skip-link {
  position: fixed;
  top: -90px;
  left: 18px;
  z-index: 120;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 14px; outline: 3px solid var(--red-lift); outline-offset: 2px; }

/* services grid: 2x2 in the band where 3+1 would strand an orphan */
@media (min-width: 540px) and (max-width: 1150px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* slim conversion strip between gallery and process */
.cta-strip {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(36px, 5vw, 58px);
}
.cta-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.cta-strip-copy { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.cta-strip-copy span { color: var(--red-lift); }
.cta-strip-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* gallery lightbox */
html.js .work-frame { cursor: zoom-in; }
html.js .work-frame:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 10, 12, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  padding: clamp(12px, 3vw, 40px);
}
.lightbox.open { visibility: visible; opacity: 1; }
.lb-fig { margin: 0; max-width: min(1100px, 94vw); }
.lb-img {
  display: block;
  margin: 0 auto;
  max-width: 94vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.lb-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 0;
  color: var(--paper);
}
.lb-title { font-weight: 600; }
.lb-count { font-family: var(--mono); font-size: .85rem; color: var(--muted-dark); flex: none; }
.lb-close, .lb-prev, .lb-next {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(247, 244, 238, .07);
  border: 1.5px solid rgba(247, 244, 238, .4);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(247, 244, 238, .18); border-color: var(--paper); }
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible { outline: 3px solid var(--red-lift); outline-offset: 3px; }
.lb-close { top: 16px; right: clamp(14px, 3.5vw, 40px); }
.lb-prev { left: clamp(8px, 2.5vw, 32px); top: 50%; margin-top: -26px; }
.lb-next { right: clamp(8px, 2.5vw, 32px); top: 50%; margin-top: -26px; }
.lb-close svg, .lb-prev svg, .lb-next svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .lb-close, .lb-prev, .lb-next { width: 46px; height: 46px; }
  .lb-img { max-height: 70vh; }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox { transition: opacity .25s ease, visibility 0s .25s; }
  .lightbox.open { transition: opacity .25s ease; }
}