/* ============================================================
   NORTH AUSTIN MAKEREADY
   off-white · raw concrete · one electric accent
   ============================================================ */

:root{
  --paper:      #EDEAE3;
  --paper-dim:  #E1DDD4;
  --concrete:   #9A9992;
  --concrete-d: #6A6A65;
  --ink:        #121210;
  --ink-soft:   #4A4A45;
  --accent:     #1B2BFF;

  --gap: clamp(14px, 1.6vw, 26px);
  --pad: clamp(20px, 5vw, 92px);

  --dur: .9s;
  --ease: cubic-bezier(.16,1,.3,1);

  --f: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont,
       "Segoe UI", Arial, sans-serif;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f);
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }

::selection{ background:var(--accent); color:var(--paper); }

/* ── shared grid ─────────────────────────────────────────── */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  padding-inline:var(--pad);
}
/* ── display type ────────────────────────────────────────── */
.hero__title,.sec-title,.statement__lead,.contact__title{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.045em;
  line-height:.84;
  font-size:clamp(2.6rem,10.6vw,10.5rem);
}
em{ font-style:normal; color:var(--accent); }

/* ── scroll progress ─────────────────────────────────────── */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.progress span{
  display:block; height:100%; width:0%;
  background:var(--accent);
  transition:width .1s linear;
}

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  color:var(--paper);
  transition:padding .45s var(--ease), background-color .45s var(--ease),
             color .45s var(--ease), box-shadow .45s var(--ease);
}
/* past the hero the nav sits on paper and flips to ink */
.nav.is-solid{
  background:var(--paper);
  color:var(--ink);
  padding-block:14px;
  box-shadow:0 1px 0 rgba(18,18,16,.14);
}

.nav__mark{
  display:flex; flex-direction:column; line-height:1;
  font-size:15.4px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.nav__mark-b{ color:var(--accent); }

.nav__links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,38px); }
.nav__links a{
  font-size:15.4px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding-block:4px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{ color:var(--accent); }

@media(max-width:720px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:clamp(92px,13vh,150px);   /* keeps tall hero copy clear of the fixed nav */
  padding-bottom:clamp(40px,7vh,90px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); will-change:transform;
}
/* The aerial plate is bright and busy (pale sky, sunlit concrete), so the
   hero runs light type on a dark wash rather than ink on a paper wash —
   dark type simply disappears into the roofs and road. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(18,18,16,.72) 0%,rgba(18,18,16,.34) 12%,rgba(18,18,16,.10) 26%,rgba(18,18,16,0) 44%),
    linear-gradient(0deg,
      rgba(18,18,16,.94) 0%,
      rgba(18,18,16,.88) 20%,
      rgba(18,18,16,.66) 38%,
      rgba(18,18,16,.30) 56%,
      rgba(18,18,16,.06) 74%,
      rgba(18,18,16,0)   86%);
}
.hero__title{ color:var(--paper); }
.hero__eyebrow{ color:var(--paper); }
.hero__meta p{ color:rgba(237,234,227,.88); }
.hero .btn{ background:var(--paper); color:var(--ink); }
.hero__inner{ position:relative; z-index:2; width:100%; align-items:end; }

.hero__eyebrow{
  grid-column:1/-1;
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:clamp(14px,2.2vh,26px);
}
.hero__eyebrow span{ color:var(--accent); }

.hero__title{ grid-column:1/9; }
@media(max-width:900px){ .hero__title{ grid-column:1/-1; } }

.hero__meta{
  grid-column:9/13; align-self:end; padding-bottom:.9rem;
  display:flex; flex-direction:column; gap:22px; align-items:flex-start;
}
.hero__meta p{
  font-size:clamp(13px,1.05vw,15px); line-height:1.5;
  color:var(--ink-soft); font-weight:500;
}
@media(max-width:900px){
  .hero__meta{ grid-column:1/-1; margin-top:30px; padding-bottom:0; }
}

.hero__index{
  position:absolute; z-index:2; left:var(--pad); top:0;
  display:none;
}

/* line-mask reveal */
.line{ display:block; overflow:hidden; }
.line__i{
  display:block;
  transform:translateY(102%);
  transition:transform 1.05s var(--ease);
}
.is-in .line__i{ transform:translateY(0); }
.line:nth-child(2) .line__i{ transition-delay:.09s; }
.line:nth-child(3) .line__i{ transition-delay:.18s; }

/* ── button ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--ink); color:var(--paper);
  padding:17px 26px;
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  position:relative; overflow:hidden;
}
.btn span,.btn svg{ position:relative; z-index:2; }
.btn svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  transition:transform .55s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:translateY(101%); transition:transform .55s var(--ease); z-index:1;
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(6px); }

/* ── ticker ──────────────────────────────────────────────── */
.ticker{
  border-block:1px solid rgba(18,18,16,.16);
  padding-block:18px; overflow:hidden; background:var(--paper);
}
.ticker__track{
  display:flex; align-items:center; gap:30px; width:max-content;
  animation:slide 42s linear infinite;
}
.ticker__track span{
  font-size:clamp(15px,2.1vw,26px); font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em; white-space:nowrap;
}
.ticker__track i{ width:7px; height:7px; background:var(--accent); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── section heads ───────────────────────────────────────── */
.sec-num{
  grid-column:1/-1;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--concrete-d);
  padding-bottom:clamp(18px,3vw,34px);
  border-bottom:1px solid rgba(18,18,16,.14);
  margin-bottom:clamp(26px,4.5vw,56px);
}
.sec-head{ padding-top:clamp(74px,11vw,150px); }
.sec-title{ grid-column:1/9; }
@media(max-width:800px){ .sec-title{ grid-column:1/-1; } }

/* ══ WHAT WE DO — scroll-scrubbed timelapse ═══════════════ */
.wwd{ position:relative; height:340vh; background:var(--ink); }
.wwd__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:stretch;
}
.wwd__media{ position:absolute; inset:0; }
.wwd__media video{
  width:100%; height:100%; object-fit:cover;
  /* scrubbed via JS — never autoplays */
}
.wwd__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(18,18,16,.74) 0%,rgba(18,18,16,.46) 20%,
                            rgba(18,18,16,.16) 40%,rgba(18,18,16,0) 58%),
    linear-gradient(0deg,rgba(18,18,16,.86) 0%,rgba(18,18,16,.34) 38%,rgba(18,18,16,0) 66%);
}
.wwd__inner{
  position:relative; z-index:2; width:100%; height:100%; color:var(--paper);
  grid-template-rows:auto 1fr auto;
  padding-top:clamp(92px,13vh,140px);      /* clears the fixed nav */
  padding-bottom:clamp(46px,8vh,96px);
}
.wwd .sec-num{
  color:rgba(237,234,227,.74); border-color:rgba(237,234,227,.26);
  margin-bottom:clamp(18px,3vw,30px); padding-bottom:clamp(14px,2vw,22px);
}
.wwd__head{ grid-column:1/8; grid-row:1; align-self:start; }
.wwd__title{
  font-weight:800; text-transform:uppercase; letter-spacing:-.045em;
  line-height:.84; font-size:clamp(2.6rem,9vw,8rem);
  margin-bottom:clamp(16px,2.4vw,26px);
}
/* Per-stage write-up, swapped by main.js as the scrub crosses each stage.
   Sits over the timelapse rather than beside it, so the words and the footage
   they describe read as one thing. */
.wwd__note{
  grid-column:1/7; grid-row:3; align-self:end;
  font-size:clamp(19px,2.4vw,32px); line-height:1.4;
  color:rgba(237,234,227,.82);
  max-width:34ch; min-height:4.2em;      /* reserved so swaps do not shift the layout */
  border-left:2px solid var(--accent);
  padding-left:clamp(12px,1.4vw,18px);
  opacity:0; transform:translateY(8px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.wwd__note.is-in{ opacity:1; transform:none; }

@media(max-width:900px){
  .wwd__note{ min-height:5.6em; }
}

.wwd__stages{ grid-column:9/13; grid-row:3; align-self:end; }
.wwd__stages li{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-top:1px solid rgba(237,234,227,.18);
  font-size:clamp(15px,1.7vw,22px); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(237,234,227,.4);
  transition:color .35s var(--ease);
}
.wwd__stages li:last-child{ border-bottom:1px solid rgba(237,234,227,.18); }
.wwd__stages li::before{
  content:""; width:9px; height:9px; flex:none;
  background:rgba(237,234,227,.28);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.wwd__stages li.is-active{ color:var(--paper); }
.wwd__stages li.is-active::before{ background:var(--accent); transform:scale(1.5); }
.wwd__stages li.is-done{ color:rgba(237,234,227,.62); }
.wwd__stages li.is-done::before{ background:var(--accent); }

.wwd__progress{
  position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
  background:rgba(237,234,227,.14);
}
.wwd__progress span{ display:block; height:100%; width:0%; background:var(--accent); }

@media(max-width:900px){
  .wwd{ height:300vh; }
  .wwd__inner{ grid-template-rows:auto 1fr auto auto; }
  .wwd__head{ grid-column:1/-1; grid-row:1; }
  .wwd__note{ grid-column:1/-1; grid-row:3; }
  .wwd__stages{ grid-column:1/-1; grid-row:4; margin-top:18px; }
  .wwd__stages li{ padding:9px 0; }
}

/* ══ WARP PANELS — one pinned stage, panels float away ════ */
/* Panels are absolutely stacked inside a single sticky stage, so the
   incoming panel never moves in layout — no slide. Scrolling floats the
   OUTGOING panel away (lift + shrink + dissolve), revealing the next one
   already sitting in place beneath it.
   Panel transforms stay at or below scale(1): a 100vw panel scaled above 1
   overflows horizontally, and clipping that (overflow:clip/hidden) would
   create a clip context that breaks position:sticky on the stage. */

@media(max-width:900px){
}

@media(max-width:900px){
}

/* ══ HAMMER CURSOR ════════════════════════════════════════ */
/* Only ever active when hammer.js confirms a fine pointer, so touch and
   reduced-motion users keep their normal cursor. */
.hammer-on,
.hammer-on a,
.hammer-on button,
.hammer-on .btn{ cursor:none; }
/* ...but text fields keep their caret. `cursor:none` on the body inherits
   everywhere, and typing an address with no I-beam is miserable. */
.hammer-on input,
.hammer-on textarea{ cursor:text; }

.hmr{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0; transition:opacity .25s var(--ease);
}
.hmr.is-on{ opacity:1; }

.hmr__tool{
  position:absolute; top:0; left:0;
  width:92px; height:92px;
  will-change:transform;
}
/* offset so the striking face sits on the pointer, and pivot at the grip.
   The tool is near-black, so it needs a pale rim to stay readable against
   the dark video sections as well as a shadow for the light ones. */
.hmr__tool svg{
  display:block; margin-left:-21px; margin-top:-46px;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.5))
         drop-shadow(0 0 1.6px rgba(255,255,255,.5));
  overflow:visible;
}
.hmr__g{ transform-origin:69px 65px; }

.hmr__glow{
  position:absolute; top:0; left:0;
  width:78px; height:78px; border-radius:50%;
  background:radial-gradient(circle,
    rgba(37,99,235,.44) 0%,
    rgba(37,99,235,.20) 42%,
    rgba(37,99,235,0)   70%);
  will-change:transform;
}

/* the mark left behind — a dimple with a lit upper edge */
.hmr-dent{
  position:absolute; z-index:5; pointer-events:none;
  width:19px; height:15px; margin:-7px 0 0 -9px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 38%,
    rgba(18,18,16,.50) 0%,
    rgba(18,18,16,.26) 46%,
    rgba(18,18,16,0)   72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}

/* ══ MOBILE MEDIA — image crossfade stands in for video ═══ */
/* Desktop plays video; phones cross-fade a before/after pair instead. The
   pair is a fraction of the weight, needs no seeking, and sidesteps iOS
   Safari's limit on simultaneously decoding videos. */
.xf{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none;
}
.xf--b{ opacity:0; }
.hero__still{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero__vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s var(--ease);
}
.hero__vid.is-live{ opacity:1; }

/* when JS puts the page in image mode, videos step aside */
.media-stills .xf{ display:block; }
.media-stills .wwd__media video{ display:none; }

/* ══ MOBILE CALL BAR ══════════════════════════════════════ */
.callbar{ display:none; }
@media(max-width:720px){
  .callbar{
    position:fixed; z-index:120; left:0; right:0; bottom:0;
    display:grid; grid-template-columns:auto 1fr;
    background:var(--ink);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(110%); transition:transform .5s var(--ease);
  }
  .callbar.is-up{ transform:translateY(0); }
  .callbar a{
    display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:56px; padding:0 20px;          /* ≥44px touch target */
    font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  }
  .callbar__a{ color:var(--paper); border-right:1px solid rgba(237,234,227,.2); }
  .callbar__b{ background:var(--accent); color:var(--paper); }
  .callbar svg{ width:16px; height:16px; }
  .callbar__a svg{ fill:currentColor; stroke:none; }
  .callbar__b svg{ fill:none; stroke:currentColor; stroke-width:1.9; }
  /* keep the footer clear of the fixed bar */
  .contact{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
}

/* ══ MOBILE PACING & TYPE ═════════════════════════════════ */
@media(max-width:720px){
  /* Desktop pacing is ~15,600px of scroll. On a phone that reads as endless,
     so every pinned section gets a shorter runway. */
  .wwd{ height:210vh; }

  .hero{ min-height:100svh; padding-bottom:clamp(74px,12vh,110px); }
  .hero__title{ font-size:clamp(2.9rem,15vw,4.6rem); }
  .hero__meta{ gap:16px; }
  .hero__meta p{ font-size:13.5px; }

  .wwd__title{ font-size:clamp(2.6rem,14vw,4rem); }
  .wwd__body{ font-size:13.5px; }
  .wwd__stages li{ padding:8px 0; font-size:10.5px; }

  /* taps, not hovers */
  .btn{ min-height:52px; padding:16px 24px; }
  .nav__cta{ padding:10px 4px; }
}

/* very small phones: keep the oversized type from overflowing */
@media(max-width:380px){
  .hero__title{ font-size:2.65rem; }
  .wwd__title,.across__title{ font-size:2.4rem; }
}

/* ── punch list builder (hosts the embedded flow) ─────────── */
/* Symmetric on purpose, unlike the rest of the page: one centered bordered
   frame, heading and intro on the centre line, and the survey as a plain
   rectangular box beneath them. The heavy border marks it as the one section
   the visitor acts in rather than reads. */
.build{
  background:var(--paper);
  padding:clamp(56px,8vw,110px) var(--pad);
}
.build__frame{
  position:relative; overflow:hidden;
  max-width:1180px; margin-inline:auto;
  border:2px solid var(--ink);
  background:var(--paper);
  padding:clamp(30px,5vw,72px) clamp(18px,4vw,64px) clamp(24px,4vw,56px);
  text-align:center;
}
/* Grain on the card itself, so it reads as a plate laid on the page rather
   than a hairline rectangle drawn on it. Multiplied rather than laid over, so
   the texture darkens the paper instead of fogging it grey. The flow inside
   paints its own opaque ground, so this shows in the margins around it and
   never sits under the form fields. */
.build__bg{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:multiply;
  pointer-events:none;
}
.build__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1);
}
.build__frame > :not(.build__bg){ position:relative; z-index:1; }
.build__num{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--concrete-d);
  margin-bottom:clamp(16px,2.4vw,26px);
}
.build__title{
  font-weight:800; text-transform:uppercase; letter-spacing:-.045em;
  line-height:.9; font-size:clamp(2.2rem,6vw,5.6rem);
  margin-bottom:clamp(14px,2vw,22px);
}
.build__lead{
  max-width:56ch; margin:0 auto clamp(26px,3.6vw,44px);
  font-size:clamp(13px,1.05vw,15px); line-height:1.6;
  color:var(--ink-soft);
}
.build__card{
  max-width:960px; margin-inline:auto;
  text-align:left;                 /* the survey reads left-aligned inside */
}

/* ══ ACROSS AUSTIN — service-area map ═════════════════════ */
/* Section 04 sits a clear step LIGHTER than the page ground to break the long
   flat stretch between the scrub and the contact block. The concrete plate is
   multiplied in at low opacity so it reads as grain on plaster rather than a
   grey wash. Text colours are re-stated here so nothing rides on cascade order. */
.across{
  position:relative; overflow:hidden;
  background:#FBFAF7; color:var(--ink);
  padding-block:clamp(60px,9vw,120px) clamp(56px,8vw,110px);
  border-block:1px solid rgba(18,18,16,.13);
}
.across__bg{ position:absolute; inset:0; opacity:.13; mix-blend-mode:multiply; }
.across__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(.85) brightness(1.5);
}
.across__head,.across__wrap{ position:relative; z-index:2; }
.across .sec-num{ color:var(--concrete-d); border-color:rgba(18,18,16,.16); }
.across__head{ align-items:end; row-gap:clamp(16px,2.4vw,26px); }
.across__title{
  grid-column:1/7;
  font-weight:800; text-transform:uppercase; letter-spacing:-.045em;
  line-height:.84; font-size:clamp(2.4rem,7.5vw,6.5rem);
}
.across__body{
  grid-column:8/13; align-self:end; max-width:40ch;
  font-size:clamp(13px,1.05vw,15px); line-height:1.6;
  color:var(--ink-soft);
}
.across__wrap{ margin-top:clamp(26px,4vw,52px); }

.across__map{
  grid-column:1/9; position:relative;
  border:1px solid rgba(18,18,16,.22);
  overflow:hidden; background:var(--paper-dim);
  aspect-ratio:16/11;
}
.across__map iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
  /* the stock map is a touch brighter and bluer than the page; a light
     desaturation settles it into the off-white palette without going dark */
  filter:saturate(.82) contrast(1.02);
}

/* Stated in text as well as on the map: the iframe is third-party and may be
   blocked, slow, or unavailable — the service area still has to be readable. */
.across__areas{
  grid-column:9/13; align-self:start;
  display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start;
}
.across__areas li{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 13px;
  border:1px solid rgba(18,18,16,.24);
  color:var(--ink);
  background:rgba(255,255,255,.6);
}

@media(max-width:900px){
  .across__title{ grid-column:1/-1; }
  .across__body{ grid-column:1/-1; }
  .across__map{ grid-column:1/-1; aspect-ratio:4/3; }
  .across__areas{ grid-column:1/-1; margin-top:16px; }
  .across__areas li{ font-size:11px; padding:8px 11px; }
}

/* ── statement (retired — kept for reference) ─────────────── */
.statement{ padding-top:clamp(74px,11vw,150px); align-items:start; }
.statement__lead{
  grid-column:1/10;
  font-size:clamp(1.9rem,5.6vw,5rem); line-height:.94; letter-spacing:-.035em;
}
.statement__lead .w{
  display:inline-block;
  opacity:0; transform:translateY(.5em) rotate(1.6deg);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.statement__lead.is-in .w{ opacity:1; transform:none; }
.statement__lead .accent{ color:var(--accent); }

.statement__body{
  grid-column:10/13; align-self:end;
  display:flex; flex-direction:column; gap:16px;
}
.statement__body p{ font-size:14px; line-height:1.62; color:var(--ink-soft); }

.statement__fig{
  grid-column:1/-1; margin-top:clamp(40px,6vw,90px);
  aspect-ratio:16/7; overflow:hidden;
}
.statement__fig img{ width:100%; height:100%; object-fit:cover; }

@media(max-width:900px){
  .statement__lead,.statement__body{ grid-column:1/-1; }
  .statement__body{ margin-top:26px; }
}

/* ── services ────────────────────────────────────────────── */
.services{ padding-bottom:clamp(50px,8vw,110px); }
.svc{
  padding-top:clamp(48px,7vw,110px);
  align-items:center;
}
/* Sections 03 and 04 both run light against the page ground. They sit next to
   each other, so the hairline rule between them is what keeps them reading as
   two bands rather than one long block. */
.svcs{
  position:relative; overflow:hidden;
  background:#FBFAF7;
  padding-top:clamp(50px,7vw,96px);
  padding-bottom:clamp(46px,7vw,96px);
  border-top:1px solid rgba(18,18,16,.13);
}
.svcs__bg{ position:absolute; inset:0; opacity:.13; mix-blend-mode:multiply; }
.svcs__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(.85) brightness(1.5);
}
.svcs > .sec-head,
.svcs > .svc{ position:relative; z-index:2; }

/* Media box: light parallax only, driven by main.js. No sticky, no pinning —
   the section reads at normal scroll speed. */
.svc__fig{
  position:relative; overflow:hidden;
  aspect-ratio:4/3; background:var(--paper-dim);
}
.svc__fig video,
.svc__fig .xf{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; will-change:transform;
}
.svc__fig .xf--b{ opacity:0; }
.media-stills .svc__fig video{ display:none; }
.media-stills .svc__fig .xf{ display:block; }

.svc__fig{ grid-column:1/7; }
.svc--flip .svc__fig{ grid-column:7/13; order:2; }
.svc__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.svc:hover .svc__fig img{ transform:scale(1.045); }

.svc__txt{ grid-column:8/13; }
.svc--flip .svc__txt{ grid-column:1/6; order:1; }

.svc__num{
  display:block; font-size:11px; font-weight:800; letter-spacing:.2em;
  color:var(--accent); margin-bottom:18px;
}
.svc__txt h3{
  font-size:clamp(1.9rem,4vw,3.5rem); font-weight:800;
  text-transform:uppercase; letter-spacing:-.04em; line-height:.9;
  margin-bottom:20px;
}
.svc__txt p{ font-size:14px; line-height:1.62; color:var(--ink-soft); margin-bottom:26px; }
.svc__txt li{
  font-size:12px; font-weight:600; letter-spacing:.04em;
  padding:13px 0; border-top:1px solid rgba(18,18,16,.14);
  display:flex; align-items:center; gap:12px;
}
.svc__txt li::before{
  content:""; width:5px; height:5px; background:var(--accent); flex:none;
}
.svc__txt li:last-child{ border-bottom:1px solid rgba(18,18,16,.14); }

@media(max-width:900px){
  .svc__fig,.svc--flip .svc__fig{ grid-column:1/-1; order:1; aspect-ratio:4/3; }
  .svc__txt,.svc--flip .svc__txt{ grid-column:1/-1; order:2; margin-top:28px; }
}

@media(max-width:900px){ }

/* ── gallery ─────────────────────────────────────────────── */
.standard{ padding-bottom:clamp(60px,9vw,130px); }
.gal{ padding-top:clamp(40px,6vw,80px); row-gap:clamp(20px,3vw,40px); }
.gal__i{ position:relative; overflow:hidden; }
.gal__i img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.gal__i:hover img{ transform:scale(1.05); }

.gal__i--a{ grid-column:1/8;  aspect-ratio:3/2; }
.gal__i--b{ grid-column:9/13; aspect-ratio:4/5; align-self:end; }
.gal__i--c{ grid-column:1/5;  aspect-ratio:3/2; }
.gal__i--d{ grid-column:6/13; aspect-ratio:16/9; }

.gal__i figcaption{
  position:absolute; left:0; bottom:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  background:linear-gradient(0deg,rgba(18,18,16,.72),transparent);
  color:var(--paper);
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.gal__i:hover figcaption{ opacity:1; transform:none; }
.gal__i figcaption span:last-child{ color:var(--accent); }

@media(max-width:900px){
  .gal__i--a,.gal__i--b,.gal__i--c,.gal__i--d{
    grid-column:1/-1; aspect-ratio:4/3;
  }
}

/* ── contact ─────────────────────────────────────────────── */
.contact{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); }
.contact__bg{ position:absolute; inset:0; opacity:.17; }
.contact__bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15); }
.contact__inner{
  position:relative; z-index:2;
  padding-block:clamp(80px,12vw,170px);
}
.contact .sec-num{ color:var(--concrete); border-color:rgba(237,234,227,.2); }
.contact__title{ grid-column:1/-1; margin-bottom:clamp(44px,7vw,90px); }

.contact__rows{ grid-column:1/-1; }
.row{
  display:grid;
  grid-template-columns:clamp(90px,13vw,180px) 1fr auto;
  align-items:center; gap:20px;
  padding:clamp(20px,2.6vw,32px) 0;
  border-top:1px solid rgba(237,234,227,.2);
  position:relative;
}
.row:last-child{ border-bottom:1px solid rgba(237,234,227,.2); }
.row__k{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--concrete);
}
.row__v{
  font-size:clamp(1.05rem,3.1vw,2.5rem); font-weight:800;
  letter-spacing:-.035em; line-height:1; word-break:break-word;
  transition:color .4s var(--ease),transform .55s var(--ease);
}
.row svg{
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6;
  opacity:0; transform:translateX(-10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
a.row:hover .row__v{ color:var(--accent); transform:translateX(10px); }
a.row:hover svg{ opacity:1; transform:none; color:var(--accent); }

@media(max-width:640px){
  .row{ grid-template-columns:1fr; gap:10px; }
  .row svg{ display:none; }
}

/* ── footer ──────────────────────────────────────────────── */
.foot{
  padding-block:34px;
  border-top:1px solid rgba(18,18,16,.14);
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft);
}
.foot__mark{ grid-column:1/5; color:var(--ink); }
.foot__area{ grid-column:5/11; display:flex; align-items:center; gap:10px; }
.foot__area i{ width:5px; height:5px; background:var(--accent); }
.foot__yr{ grid-column:11/13; text-align:right; }
/* Staff way in. Deliberately in the footer rather than the nav — every item up
   there is doing sales work, and this one is useful to nobody who visits. */
.foot__staff{
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid rgba(18,18,16,.28);
  padding-bottom:1px; margin-right:12px;
  transition:color .18s ease, border-color .18s ease;
}
.foot__staff:hover{ color:var(--ink); border-color:var(--accent); }

@media(max-width:760px){
  .foot__mark,.foot__area,.foot__yr{ grid-column:1/-1; text-align:left; }
  /* The sticky call bar is fixed over the bottom of the page, so the last
     footer line sits underneath it and the staff link cannot be tapped.
     Clear its height plus the home-indicator inset. */
  .foot{ row-gap:12px; padding-bottom:calc(34px + 52px + env(safe-area-inset-bottom)); }
}

/* ── reveal primitives ───────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* the wipe lives on the inner <img>, never on the observed box:
   a fully clip-path'd element reports an empty intersection rect,
   so IntersectionObserver would never fire and it could never un-hide. */
.reveal-img{ overflow:hidden; }
.reveal-img img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.12);
  transition:clip-path 1.2s var(--ease), transform 1.6s var(--ease);
}
.reveal-img.is-in img{
  clip-path:inset(0 0 0% 0);
  transform:scale(1);
}

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.statement__lead .w{ opacity:1; transform:none; }
  .reveal-img img{ clip-path:none; transform:none; }
  .line__i{ transform:none; }

}