/* =====================================================================
   HERITAGE MODERNISM, built to DESIGN.md, not interpreted.
   Every token below is lifted straight from the spec.
   ===================================================================== */
:root{
  /* surfaces */
  --surface:#fcf9f8;
  --surface-dim:#dcd9d9;
  --surface-container-lowest:#ffffff;
  --surface-container-low:#f6f3f2;
  --surface-container:#f0eded;
  --surface-container-high:#eae7e7;
  --surface-container-highest:#e4e2e1;
  /* ink */
  --on-surface:#1b1c1c;
  --on-surface-variant:#434843;
  --outline:#737973;
  --outline-variant:#c3c8c1;
  --inverse-surface:#303030;
  --inverse-on-surface:#f3f0f0;
  /* brand */
  --primary:#061b0e;
  --on-primary:#ffffff;
  --primary-container:#1b3022;
  --on-primary-container:#819986;
  --inverse-primary:#b4cdb8;
  --primary-fixed:#d0e9d4;
  /* gold, CTA only */
  --secondary:#735c00;
  --secondary-container:#fed65b;
  --secondary-fixed-dim:#e9c349;
  --on-secondary-fixed:#241a00;

  /* type */
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* spacing, 8px unit */
  --container-max:1280px;
  --gutter:32px;
  --margin-desktop:64px;
  --margin-mobile:24px;
  --section-padding:120px;

  /* motion: slow, 300ms+ */
  --ease:cubic-bezier(.4,0,.2,1);
  --t:.42s;
  --t-slow:.9s;
}

*{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--surface);color:var(--on-surface);
  font-family:var(--body);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Sharp. 0px everywhere, per the spec. */
:root{--r-ui:0px;--r-media:0px}
button,input,textarea,select,.btn{border-radius:0}
.card figure,.tile,.bleed figure{border-radius:0;overflow:hidden}

.wrap{max-width:var(--container-max);margin:0 auto;
  padding-left:var(--margin-desktop);padding-right:var(--margin-desktop)}

/* ---------- type scale, exactly as specified ---------- */
.display-lg{font-family:var(--display);font-size:64px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
.headline-md{font-family:var(--display);font-size:32px;font-weight:600;line-height:1.3;margin:0}
.headline-sm{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.4;margin:0}
.body-lg{font-size:18px;font-weight:400;line-height:1.6;letter-spacing:.01em}
.body-md{font-size:16px;font-weight:400;line-height:1.6}
.label-caps{font-family:var(--body);font-size:12px;font-weight:600;line-height:1;letter-spacing:.15em;text-transform:uppercase}
@media(max-width:760px){ .display-lg{font-size:40px;line-height:1.2;letter-spacing:-.01em} }

/* ---------- navigation: centred, airy, glass ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* three parts again: name left, menu centred, actions right. The mobile
     override below drops back to 1fr auto, because the menu is hidden
     there and a three-column grid would strand the actions mid-bar. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px var(--margin-desktop);
  transition:background var(--t) var(--ease),padding var(--t) var(--ease),border-color var(--t) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(252,249,248,.90);backdrop-filter:blur(14px) saturate(150%);
  border-bottom-color:rgba(27,28,28,.10);padding-top:16px;padding-bottom:16px;
}
/* over a bright hero the white nav type loses contrast, so the nav carries
   its own soft scrim until it goes solid */
.nav::before{content:"";position:absolute;inset:-40px 0 auto 0;height:190px;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(6,27,14,.62) 0%,rgba(6,27,14,.34) 45%,rgba(6,27,14,0) 100%);
  transition:opacity var(--t) var(--ease)}
.nav.solid::before{opacity:0}
.nav .mark{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.01em;color:#fff;transition:color var(--t) var(--ease)}
.nav.solid .mark{color:var(--on-surface)}
.nav ul{display:flex;gap:38px;list-style:none;margin:0;padding:0;justify-content:center}
.nav ul a{color:rgba(255,255,255,.86);transition:color var(--t) var(--ease)}
.nav.solid ul a{color:var(--on-surface-variant)}
.nav ul a:hover{color:#fff}
.nav.solid ul a:hover{color:var(--on-surface)}
.nav .end{display:flex;justify-content:flex-end;gap:26px;align-items:center}
/* the nav sits over unpredictable footage, so its type carries a shadow
   until the bar goes solid. removed on solid, where it would read as grime */
.nav .mark,.nav ul a,.nav .end a{text-shadow:0 1px 3px rgba(6,27,14,.8),0 2px 12px rgba(6,27,14,.55)}
.nav.solid .mark,.nav.solid ul a,.nav.solid .end a{text-shadow:none}
.nav .end a{color:#fff}
/* the solid bar had a rule for the mark, the list and the gold link, but
   not for the plain phone number, which left it white on parchment and so
   invisible from the moment the page scrolls past the hero */
.nav.solid .end a{color:var(--on-surface)}
/* the inquiry link is a GOLD text-link, per the spec */
/* This is the whole point of the page and it was a gold text link sitting
   quieter than the phone number beside it. It is now the only filled thing
   in the bar, in both nav states. */
.nav .end a.inquire,.nav .inquire{
  background:var(--secondary-container);color:var(--primary);
  padding:11px 18px;text-shadow:none;
  transition:background var(--t) var(--ease)}
.nav.solid .end a.inquire,.nav.solid .inquire{
  background:var(--primary);color:var(--secondary-container)}
.nav .inquire:hover{background:var(--secondary-fixed-dim)}
.nav.solid .inquire:hover{background:var(--primary-container)}

/* ---------- buttons: sharp, forest green, gold text ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:17px 34px;border:1px solid transparent;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.btn-primary{background:var(--primary);color:var(--secondary-container);border-bottom:2px solid var(--secondary-container)}
.btn-primary:hover{background:var(--primary-container)}
.btn-secondary{background:transparent;border:1px solid var(--on-surface);color:var(--on-surface)}
.btn-secondary:hover{background:var(--on-surface);color:var(--surface)}
.btn-on-dark{background:transparent;border:1px solid rgba(255,255,255,.62);color:#fff}
.btn-on-dark:hover{background:#fff;color:var(--primary)}
/* the one loud thing on the page. Gold is reserved for this and nothing else. */
.btn-gold{background:var(--secondary-container);color:var(--primary);border:1px solid var(--secondary-container)}
.btn-gold:hover{background:var(--secondary-fixed-dim);border-color:var(--secondary-fixed-dim)}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:flex-end;
  background:var(--primary);overflow:hidden}
.hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--primary)}
.hero-media>img,.hero-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.hero-video{opacity:0;transition:opacity 1.1s var(--ease);will-change:opacity}
.hero.reel-ready .hero-video{opacity:1}
/* the video is decorative: it never takes focus and never carries meaning */
.hero-video::-webkit-media-controls{display:none!important}
.hero-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(6,27,14,.58) 0%,rgba(6,27,14,.16) 15%,rgba(6,27,14,0) 34%,rgba(6,27,14,.14) 56%,rgba(6,27,14,.80) 100%),
    linear-gradient(to right,rgba(6,27,14,.36) 0%,rgba(6,27,14,0) 52%)}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(44px,6vh,72px)}
.hero .label-caps{color:var(--secondary-container);margin-bottom:24px}
.hero-sub{color:rgba(255,255,255,.88);max-width:40ch;margin:0 0 28px}

/* ---------- the slogan, scattered across the whole hero --------------
   Ambrose does not set its slogan as a block. Each word is placed at its
   own point and the five of them occupy the entire screen. Measured off
   their live page at 1440x900: Stories 1.7%/10.2%, ready 45.2%/27.3%,
   to 89.8%/27.3%, live 25.8%/50%, in 57.7%/82.2%, all at 11.7vw.

   Ours uses the same idea in Playfair, which is far wider than their
   condensed face, so the size comes down accordingly. Every position is
   a percentage and every size is viewport-relative, so the whole
   arrangement is self-similar at any window size: it cannot overlap at
   one width and gap at another, because it is the same picture scaled.
   Capping against vh as well as vw keeps tall words from colliding on a
   wide, short window.
   ------------------------------------------------------------------ */
.hero-in{position:absolute;inset:0;z-index:2;padding:0}
.hero-slogan{position:absolute;inset:0;margin:0;color:#fff;
  font-family:var(--display);font-weight:600;
  font-size:min(9vw,13.5vh);line-height:1;letter-spacing:-.022em;
  text-transform:uppercase;pointer-events:none}
.hero-slogan .w{position:absolute;white-space:nowrap;display:block}

/* Alternating margins: left, right, left, right. Two things fall out of
   anchoring to the edges rather than to a measured offset. The words reach
   both sides at any width, so no separate large-screen rule is needed and
   the middle of the frame stays open for the footage. And the alternation
   is a rule a viewer can feel, which is what keeps it reading as placed
   rather than dropped. */
.hero-slogan .w1{left:6%;   top:13%}
.hero-slogan .w2{right:7%;  top:29%}
.hero-slogan .w3{left:6%;   top:44%}
.hero-slogan .w4{right:11%; top:59%}

/* ---------- the scroll cue ------------------------------------------
   The short stroke from C carrying the falling segment from A, with the
   word held just at the edge of legibility so it registers without being
   read. It fades out the moment the page moves, having done its job.
   ------------------------------------------------------------------ */
.scroll-cue{position:absolute;left:0;right:0;bottom:clamp(26px,3.6vh,46px);
  z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  transition:opacity .5s var(--ease)}
/* The intro reveal writes an inline opacity here, so the hide is driven
   inline too (see setCue below) rather than by a class that would have to
   out-rank it. */
.scroll-cue span{font-family:var(--body);font-size:8.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.24)}
.scroll-cue i{position:relative;display:block;width:1px;height:26px;
  background:rgba(255,255,255,.20);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-70%;
  width:1px;height:70%;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.95));
  animation:cue-fall 2.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cue-fall{0%{top:-70%}70%,100%{top:100%}}

/* ---------- the bottom strip: actions left, corner mark right -------- */
.hero-foot{position:absolute;left:0;right:0;bottom:clamp(28px,4.2vh,54px);
  padding:0 2.2%;display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;z-index:3}

/* ---------- the corner mark -----------------------------------------
   Ambrose puts "Madrid, Spain / 16:25 (CEST)" in the corner at 12px.
   Same move: where we are, and what time it is there, ticking live.
   ------------------------------------------------------------------ */
.hero .hero-egg{margin:0;display:grid;gap:1px;text-align:right;
  font-size:9.5px;letter-spacing:.17em;line-height:1.9;
  color:rgba(255,255,255,.42);pointer-events:none;
  transition:color var(--t) var(--ease)}
.hero:hover .hero-egg{color:rgba(255,255,255,.60)}
.hero .hero-egg .eg-sp{margin-top:11px}
.hero .hero-egg .eg-t{color:rgba(255,255,255,.70);font-variant-numeric:tabular-nums}

/* ===================== THE INTRO =====================================
   Rebuilt from Olivia Harper's own timeline, read out of their inline
   script rather than guessed. The move that matters: the video is BORN IN
   THE GAP BETWEEN THE TWO WORDS, sized to the text height at the video's
   own aspect ratio. The words then slide apart while the seam opens
   between them, and only then does it expand to fill the screen.
   Their numbers: stagger .05, char .5, startDelay .3, splitDelay .6,
   split 1.0, expand 1.0, gap 30px. Nothing starts until fonts AND video
   metadata are ready, which is why theirs never janks.
   ==================================================================== */
.intro{position:fixed;inset:0;z-index:9998;background:var(--surface);
  display:grid;place-items:center;overflow:hidden}
.intro__line{display:flex;align-items:baseline;white-space:nowrap;max-width:96vw}
.intro__word{display:inline-flex;will-change:transform}
.intro__gap{display:inline-block;width:.42em}
.intro__ch{display:inline-block;overflow:hidden;vertical-align:top;
  font-family:var(--display);font-weight:600;color:var(--on-surface);
  font-size:clamp(30px,5.4vw,92px);line-height:1;padding-bottom:.2em}
.intro__ch>i{display:inline-block;font-style:normal;transform:translateY(110%);will-change:transform}
body.intro-lock{overflow:hidden}
/* during the intro the hero media is driven as a fixed box by JS */
.hero-media.is-intro{position:fixed;z-index:9999;will-change:clip-path,top,left,width,height}

/* anyone who asked for less motion gets the finished page immediately */


/* ---------- the introduction ----------------------------------------
   Modelled on how Acacia and Olivia Harper open: a small label, one very
   large heading, one short paragraph, and a way through to the longer
   story. Measured off both: Acacia sets "Who Are We" at 128px in weight
   400 and a soft #4a4a4a rather than black, with a single ~190-character
   paragraph at 20/28. Olivia Harper does the same move at 55px in a
   muted tan. The lesson in both is that the big line is quieter in tone
   than the body text under it, which is what stops it shouting.
   ------------------------------------------------------------------ */
.intro-h{
  font-family:var(--display);font-weight:600;
  font-size:clamp(40px,7vw,104px);line-height:1.02;letter-spacing:-.025em;
  color:var(--on-surface-variant);          /* softer than the body ink */
  max-width:13ch;margin:0 0 clamp(36px,5vw,64px);
  text-wrap:balance;
}
.intro-grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--gutter) clamp(40px,7vw,120px);align-items:start;
}
.intro-copy p{
  font-size:20px;line-height:1.5;color:var(--on-surface);
  max-width:46ch;margin:0 0 20px;
}
.intro-copy p.second{color:var(--on-surface-variant);font-size:18px;margin-bottom:34px}

/* a plain text link, the way both references end this section, with the
   rule drawing itself out on hover rather than a button competing with
   the gold one in the hero */
.more{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--on-surface);
  padding-bottom:9px;position:relative;
}
.more::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--on-surface);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.more:hover::after{transform:scaleX(.34)}
.more svg{width:15px;height:9px;overflow:visible;
  transition:transform var(--t) var(--ease)}
.more:hover svg{transform:translateX(5px)}

/* the small facts column: the corner-detail habit the client liked, made
   useful. Real facts only. */
.facts{display:grid;gap:26px;padding-top:6px}
.facts dt{
  font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--outline);
  margin:0 0 9px;
}
.facts dd{margin:0;font-size:16px;line-height:1.5;color:var(--on-surface)}
.facts .hair{height:1px;background:var(--outline-variant);margin:0}

@media(max-width:900px){
  .intro-grid{grid-template-columns:1fr;gap:44px}
  .intro-copy p{max-width:none}
  .intro-h{max-width:none}
}

/* A page with no hero starts directly under the fixed nav, so it has to
   reserve the height the hero would otherwise have absorbed. */
/* Sections carry their own 120px now, so this only has to clear the fixed
   nav; together they land the first label the same distance below the bar
   as the home page's first section sits below the hero. */
.page{padding-top:64px}

/* ---------- services: a selector, not a wall -------------------------
   The mechanic is BP Marine's: the five services listed down the left,
   the chosen one opening as image plus detail on the right. The skin is
   not theirs - theirs is navy gradients, rounded cards and icon bubbles;
   this is DESIGN.md, so parchment, hairlines, sharp corners, Playfair for
   the names, and no shadow anywhere.

   The panels sit in their own column rather than spanning the button
   rows. Spanning made the grid stretch every button to a fifth of the
   panel's height, which pulled each label away from its own name.

   Under 900px the list is dropped rather than shrunk: on a phone a
   selector is friction, and every panel already carries its own number
   and name, so the five simply read in order.
   ------------------------------------------------------------------ */
.svc{
  display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);
  column-gap:clamp(32px,5vw,80px);align-items:start;
  border-top:1px solid var(--outline-variant);margin-top:52px;
}

.svc-btn{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:0 20px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--outline-variant);
  padding:26px 4px 26px 0;cursor:pointer;font:inherit;color:inherit;
  transition:padding-left var(--t) var(--ease);
}
.svc-btn:hover{padding-left:10px}
.svc-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.svc-n{
  font-family:var(--body);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--outline);
  display:block;margin-bottom:9px;transition:color var(--t) var(--ease);
}
.svc-name{
  font-family:var(--display);font-size:clamp(21px,2.1vw,27px);
  font-weight:600;line-height:1.15;color:var(--on-surface-variant);display:block;
  transition:color var(--t) var(--ease);
}
.svc-sub{
  font-size:14px;line-height:1.45;color:var(--outline);
  display:block;margin-top:7px;max-width:32ch;
}
.svc-btn svg{
  grid-column:2;grid-row:1 / span 3;width:16px;height:10px;overflow:visible;
  color:var(--outline-variant);
  transition:transform var(--t) var(--ease),color var(--t) var(--ease);
}
/* the chosen one: a forest rule down its edge, ink at full strength */
.svc-btn.on{padding-left:18px;box-shadow:inset 2px 0 0 var(--primary)}
.svc-btn.on .svc-n{color:var(--primary)}
.svc-btn.on .svc-name{color:var(--on-surface)}
.svc-btn.on svg{color:var(--primary);transform:translateX(4px)}

.svc-panel{display:grid;gap:28px;padding:36px 0 40px}
.svc-panel[hidden]{display:none}
.svc-panel figure{margin:0;overflow:hidden;background:var(--surface-container)}
/* the old work grid ran greyscale-to-colour on hover. This is that move
   inverted, which is what was asked for: the picture sits in full colour
   and drains as the cursor crosses it. */
.svc-panel img{filter:grayscale(0);
  transition:filter .55s var(--ease),transform 1.6s var(--ease)}
.svc-panel figure:hover img{filter:grayscale(1);transform:scale(1.04)}
@media (hover:none){
  /* a tap is not a hover: nothing should stick on a touch screen */
  .svc-panel figure:hover img{filter:grayscale(0);transform:none}
  .split > figure:hover img{filter:none;transform:none}
}
.svc-panel img{display:block;width:100%;
  height:clamp(240px,30vw,392px);object-fit:cover}
.svc-panel h3{
  font-family:var(--display);font-size:clamp(26px,2.6vw,34px);font-weight:600;
  line-height:1.2;margin:0 0 16px;color:var(--on-surface);
}
.svc-panel p{font-size:17px;line-height:1.6;color:var(--on-surface-variant);
  max-width:52ch;margin:0 0 22px}
.svc-points{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:11px}
.svc-points li{position:relative;padding-left:20px;font-size:15px;
  line-height:1.5;color:var(--on-surface)}
/* a hairline tick, not a dot: the page has no dots anywhere else */
.svc-points li::before{content:"";position:absolute;left:0;top:9px;
  width:9px;height:1px;background:var(--primary)}
/* the number is the button's job on desktop; the panel repeats it only
   once the buttons are gone */
.svc-panel .on-stack{display:none}

/* the switch is a fade. Nothing slides, per the spec's slow easing. */
@media(prefers-reduced-motion:no-preference){
  .svc-panel:not([hidden]){animation:svc-in .42s cubic-bezier(.4,0,.2,1) both}
  @keyframes svc-in{from{opacity:0}to{opacity:1}}
}

@media(max-width:900px){
  .svc{display:block;margin-top:36px}
  .svc-list{display:none}
  .svc-panel,.svc-panel[hidden]{display:grid;animation:none;
    padding:30px 0 42px;gap:22px;
    border-bottom:1px solid var(--outline-variant)}
  .svc-stage>.svc-panel:last-child{border-bottom:0}
  .svc-panel img{height:clamp(210px,52vw,300px)}
  .svc-panel .on-stack{display:block;margin-bottom:12px}
}

/* the note under the selector: the six are the instantly quotable ones,
   not the edge of the trade */
.svc-more{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,5vw,72px);flex-wrap:wrap;
  border-top:1px solid var(--outline-variant);margin-top:8px;padding-top:34px;
}
.svc-more p{margin:0;max-width:58ch;font-size:17px;line-height:1.6;
  color:var(--on-surface-variant)}
.svc-more .more{flex:none}
@media(max-width:900px){ .svc-more{margin-top:0;padding-top:30px} }

/* an inline text link inside body copy, underlined so it reads as a link
   without borrowing the gold that belongs to the buttons */
.inline-link{
  color:var(--on-surface);text-decoration:none;
  border-bottom:1px solid var(--outline-variant);
  transition:border-color var(--t) var(--ease);white-space:nowrap;
}
.inline-link:hover{border-bottom-color:var(--on-surface)}

/* ---------- the estimate request form ------------------------------
   Mechanism unchanged from the old site (FormSubmit straight to email),
   only the skin is new.

   Three numbered steps down one column, chosen off the design canvas.
   Every class here is prefixed rather than reusing .form/.field: those
   shared rules set inputs to width:100% and blockify label spans, which
   is what stretched an earlier checkbox to the full column width and
   pushed its label outside its own box.
   ------------------------------------------------------------------ */
.quote-h{
  font-family:var(--display);font-weight:600;
  font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.025em;
  margin:0 0 24px;max-width:20ch;text-wrap:balance;
}
.qform{max-width:840px;margin-top:56px;display:grid;gap:56px;
  border-top:1px solid var(--outline-variant);padding-top:56px}

.qstep{display:grid;grid-template-columns:180px minmax(0,1fr);
  gap:48px;align-items:start}
.qstep-n{
  margin:0;padding-top:14px;color:var(--outline);
  display:flex;align-items:baseline;gap:14px;
}
.qstep-n span{letter-spacing:.15em}

.qfields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px 40px}
.qf{display:flex;flex-direction:column;gap:9px}
.qf>span{font-size:14px;color:var(--outline)}
.qf input,.qf textarea{
  width:100%;border:0;border-bottom:1px solid var(--on-surface);
  background:transparent;font-family:var(--body);font-size:17px;
  color:var(--on-surface);padding:8px 0;resize:none;
  transition:border-color var(--t) var(--ease);
}
.qf input:focus,.qf textarea:focus{outline:0;border-bottom-color:var(--secondary)}
.qf textarea::placeholder{color:var(--outline)}

/* step 02 — the services, as large rows in the same voice as the
   service selector further up the page */
.picks{border:0;margin:0;padding:0;min-width:0}
.picks-list{display:block}
.pick{
  display:flex;align-items:center;gap:18px;cursor:pointer;width:100%;
  padding:18px 0;border-bottom:1px solid var(--surface-container-highest);
  transition:border-color var(--t) var(--ease);
}
.pick:last-child{border-bottom:0}
.pick:hover{border-bottom-color:var(--outline-variant)}
/* the native control is replaced: browsers draw a rounded blue tick and
   every corner on this site is square */
.pick input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex:none;margin:0;padding:0;
  border:1px solid var(--outline);background:transparent;
  display:grid;place-content:center;cursor:pointer;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.pick input::after{
  content:"";width:10px;height:10px;background:var(--surface);
  transform:scale(0);transition:transform .2s var(--ease);
}
.pick input:checked{background:var(--primary);border-color:var(--primary)}
.pick input:checked::after{transform:scale(1)}
.pick input:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.pick span{
  font-family:var(--display);font-size:21px;font-weight:600;line-height:1.3;
  color:var(--on-surface-variant);transition:color var(--t) var(--ease);
}
.pick:hover span,.pick input:checked+span{color:var(--on-surface)}

.qsend{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:44px}
.form-note{margin:0;font-size:15px;color:var(--on-surface-variant)}
.form-note a{color:var(--on-surface);border-bottom:1px solid var(--outline-variant)}

/* the legend names the group for a screen reader; the visible label is
   the step number beside it */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:820px){
  .qform{gap:44px;margin-top:44px;padding-top:44px}
  .qstep{grid-template-columns:1fr;gap:20px}
  .qstep-n{padding-top:0}
  .qfields{grid-template-columns:1fr;gap:26px}
  .qsend{margin-top:34px;gap:20px}
  .pick span{font-size:19px}
}

/* ---------- sections + 0.5px dividers ---------- */
section{padding:var(--section-padding) 0}
.rule{height:0;border:0;border-top:.5px solid rgba(27,28,28,.15);margin:0}
/* "Who we are" was disappearing: 12px at variant grey reads as a caption
   rather than a label. Darker ink, a touch larger, and a short forest rule
   in front so the eye catches the start of every section. */
.eyebrow{color:var(--on-surface);margin:0 0 28px;display:flex;align-items:center;
  gap:12px;font-size:12.5px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--primary);flex:none}
.lede{color:var(--on-surface-variant);max-width:58ch;margin:0 0 20px}

/* ---------- cards: image, no padding, type below ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gutter);margin-top:56px}
.card{background:transparent;border:0}
.card figure{margin:0 0 20px;overflow:hidden;aspect-ratio:4/5;background:var(--primary)}
.card img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease),filter 1.1s var(--ease);filter:grayscale(1)}
.card:hover img{transform:scale(1.045);filter:grayscale(0)}
.card .headline-sm{margin-bottom:6px}
.card .meta{color:var(--on-surface-variant)}

/* ---------- services: ghost-outline rows ---------- */
.rows{margin-top:56px;border-top:.5px solid rgba(27,28,28,.15)}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:var(--gutter);align-items:baseline;
  padding:32px 0;border-bottom:.5px solid rgba(27,28,28,.15);
  transition:padding-left var(--t-slow) var(--ease),background var(--t) var(--ease)}
.row:hover{padding-left:16px;background:var(--surface-container-low)}
.row .n{color:var(--outline)}
.row .t{font-family:var(--display);font-size:28px;font-weight:600;line-height:1.3}
.row .d{color:var(--on-surface-variant);text-align:right;max-width:36ch;font-size:15px}

/* ---------- the dark band: forest green ---------- */
.band{background:var(--primary);color:var(--inverse-on-surface)}
.band .eyebrow{color:var(--on-primary-container)}
/* the new rule is forest green, which is the band's own background */
.band .eyebrow::before{background:var(--inverse-primary)}
.band .headline-md,.band .display-lg{color:#fff}
.band .lede{color:rgba(255,255,255,.76)}
.band .btn-primary{background:var(--secondary-container);color:var(--on-secondary-fixed);border-bottom-color:var(--secondary)}
.band .btn-primary:hover{background:var(--secondary-fixed-dim)}

/* ---------- input: bottom border only, floating caps label ---------- */
.field{display:block;margin-bottom:34px}
.field span{display:block;color:var(--on-surface-variant);margin-bottom:10px}
.field input,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--on-surface);background:transparent;
  font-family:var(--body);font-size:16px;color:var(--on-surface);padding:10px 0;
  transition:border-color var(--t) var(--ease)}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--secondary)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gutter);max-width:760px;margin-top:48px}
.field.full{grid-column:1/-1}

/* ---------- footer: forest green ---------- */
footer{background:var(--primary);color:rgba(255,255,255,.66);padding:80px 0 56px}
footer .mark{font-family:var(--display);font-size:22px;font-weight:600;color:#fff;display:block;margin-bottom:14px}
footer a{color:rgba(255,255,255,.66)}
footer a:hover{color:var(--secondary-container)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--gutter)}
.foot-grid h4{margin:0 0 16px;color:rgba(255,255,255,.5)}
.foot-grid ul{list-style:none;margin:0;padding:0;line-height:2.1}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .bleed,.form,.foot-grid{grid-template-columns:1fr}
  .bleed figure{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:60vw}
  .bleed .txt{padding:40px 0 0!important}
  .bleed.flip{direction:ltr}
}
@media(max-width:760px){
  .wrap{padding-left:var(--margin-mobile);padding-right:var(--margin-mobile)}
  /* The wordmark was wrapping to two lines and running into the phone
     number. On a phone the bar carries the name and one action; calling
     is a full-width button in the hero right underneath it. */
  .nav{padding:14px var(--margin-mobile);grid-template-columns:1fr auto}
  .nav ul{display:none}
  .nav .mark{white-space:nowrap;font-size:16px}
  .nav .end{gap:0}
  .nav .end a:not(.inquire){display:none}
  .nav .end a.inquire{font-size:11px;letter-spacing:.12em;white-space:nowrap}
  section{padding:72px 0}
  .row{grid-template-columns:40px 1fr;gap:16px}
  .row .d{display:none}
  /* A phone is too narrow to scatter into: the words would collide. Below
     this width the arrangement collapses to a plain left-aligned stack,
     which is the same sentence, just read straight down. */
  .hero-slogan{position:absolute;inset:auto 0 auto 0;top:16%;
    display:block;font-size:min(12.6vw,9vh);line-height:1.08;letter-spacing:-.02em;
    padding:0 var(--margin-mobile)}
  .hero-slogan .w{position:static;display:block}
  .hero-slogan .w2,.hero-slogan .w3,.hero-slogan .w4{left:auto;right:auto;top:auto}
  /* the stacked buttons already own the bottom of a phone screen, and there
     is nowhere for the cue to sit that is not on top of them */
  .scroll-cue{display:none}
  /* both actions stay reachable with one thumb */
  .hero-foot{flex-direction:column;align-items:stretch;gap:20px;
    padding:0 var(--margin-mobile);bottom:clamp(24px,3.5vh,40px)}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%;padding:16px 20px}
  .hero .hero-egg{font-size:8.5px;letter-spacing:.14em;line-height:1.8}
  .hero .hero-egg .eg-sp{margin-top:8px}
}
/* Between phone and desktop the words stay on their alternating edges; only
   the long word needs relief, so this trims the size and pulls the margins
   in rather than moving anything. */
@media(min-width:761px) and (max-width:1080px){
  .hero-slogan{font-size:min(9.6vw,12vh)}
  .hero-slogan .w1{left:4%;  top:13%}
  .hero-slogan .w2{right:5%; top:29%}
  .hero-slogan .w3{left:4%;  top:44%}
  .hero-slogan .w4{right:8%; top:59%}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* with the fall switched off the segment would sit parked off-screen */
  .scroll-cue i::after{top:30%}
  .rv{opacity:1;transform:none}
}

/* =====================================================================
   COPY SECTIONS added in the copy rewrite.
   Same tokens, same 0px corners, no shadows. Nothing here introduces a
   colour, a font or a radius that is not already in DESIGN.md.
   ===================================================================== */

/* the plain line under the slogan: what we do and where, before scroll */
.hero-sub{font-size:17px;line-height:1.55;letter-spacing:.005em;
  text-shadow:0 1px 3px rgba(6,27,14,.8),0 2px 12px rgba(6,27,14,.55)}
@media(max-width:760px){ .hero-sub{font-size:15.5px;margin-bottom:20px;max-width:30ch} }

/* ---- the price list. The one thing no competitor puts on a page. ---- */
.ptable{margin-top:56px;border-top:.5px solid rgba(27,28,28,.15)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr);
  gap:var(--gutter);align-items:baseline;padding:30px 0;
  border-bottom:.5px solid rgba(27,28,28,.15);
  transition:padding-left var(--t-slow) var(--ease),background var(--t) var(--ease)}
.prow:hover{padding-left:16px;background:var(--surface-container-low)}
.pname{font-family:var(--display);font-size:25px;font-weight:600;line-height:1.3}
.pprice{font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--on-surface)}
.pnote{color:var(--on-surface-variant);font-size:15px;line-height:1.55;max-width:44ch}
.pfoot{margin:30px 0 0;color:var(--on-surface-variant);font-size:15px;
  line-height:1.6;max-width:62ch}
@media(max-width:760px){
  .prow{grid-template-columns:1fr auto;gap:10px 18px;padding:24px 0}
  .prow:hover{padding-left:0}
  .pname{font-size:21px}
  .pnote{grid-column:1/-1;max-width:none}
}

/* ---- three steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(30px,4vw,60px);margin-top:56px}
.step .n{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--outline);margin:0 0 14px;
  padding-top:18px;border-top:1px solid var(--outline-variant)}
.step h3{font-family:var(--display);font-size:22px;font-weight:600;
  line-height:1.35;margin:0 0 10px}
.step p{margin:0;color:var(--on-surface-variant);font-size:16px;
  line-height:1.6;max-width:36ch}

/* ---- straight answers ---- */
.qa{margin-top:56px;border-top:.5px solid rgba(27,28,28,.15)}
.qa-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--gutter) clamp(32px,5vw,80px);padding:34px 0;
  border-bottom:.5px solid rgba(27,28,28,.15)}
.qa-item h3{font-family:var(--display);font-size:22px;font-weight:600;
  line-height:1.35;margin:0;max-width:22ch}
.qa-item p{margin:0;color:var(--on-surface-variant);font-size:16px;line-height:1.65}
.qa-item p+p{margin-top:12px}
@media(max-width:760px){ .qa-item{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .qa-item h3{font-size:20px} }

/* ---- where we work ---- */
.areas{display:flex;flex-wrap:wrap;margin-top:44px;padding-top:32px;
  border-top:.5px solid rgba(27,28,28,.15)}
.areas span{font-size:12.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-surface);
  padding:6px 22px 6px 0;margin-right:22px;
  border-right:1px solid var(--outline-variant)}
.areas span:last-child{border-right:0;margin-right:0;color:var(--outline)}
@media(max-width:760px){ .areas span{padding-right:14px;margin-right:14px;font-size:11.5px} }

/* ---- service page furniture ---- */
.svc-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gutter) clamp(40px,6vw,96px);align-items:start}
.svc-hero figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--primary)}
.svc-hero figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){ .svc-hero{grid-template-columns:1fr;gap:36px} }

.spec{margin:0;padding:0;list-style:none;border-top:1px solid var(--outline-variant)}
.spec li{padding:16px 0 16px 26px;position:relative;font-size:16px;
  line-height:1.55;border-bottom:1px solid var(--outline-variant);
  color:var(--on-surface)}
.spec li::before{content:"";position:absolute;left:0;top:25px;
  width:12px;height:1px;background:var(--outline)}

.price-note{border-top:2px solid var(--primary);padding-top:22px;margin-top:8px}
.price-note .big{font-family:var(--display);font-size:34px;font-weight:600;
  line-height:1.1;margin:0 0 8px;display:block}
.price-note p{margin:0;color:var(--on-surface-variant);font-size:15px;
  line-height:1.6;max-width:48ch}

/* sibling service links at the foot of a service page */
.also{margin-top:56px;border-top:.5px solid rgba(27,28,28,.15)}
.also a{display:grid;grid-template-columns:64px 1fr auto;gap:var(--gutter);
  align-items:baseline;padding:26px 0;
  border-bottom:.5px solid rgba(27,28,28,.15);
  transition:padding-left var(--t-slow) var(--ease),background var(--t) var(--ease)}
.also a:hover{padding-left:16px;background:var(--surface-container-low)}
.also .n{color:var(--outline);font-size:12px;font-weight:600;letter-spacing:.15em}
.also .t{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.3}
.also .d{color:var(--on-surface-variant);text-align:right;max-width:34ch;font-size:15px}
@media(max-width:760px){ .also a{grid-template-columns:40px 1fr;gap:16px}
  .also .d{display:none} }

/* ---- the work: a draggable before / after reveal ----------------------
   Ported from the 2025 beta and rebuilt: two per row so the section does not
   run away with the page, a gold handle to match the quote button, and solid
   two-tone tag chips because the translucent ones washed out over the bright
   photographs. Pointer capture keeps a drag alive when the cursor leaves the
   frame. With JS off the clip sits at 50% and it still reads before / after. */
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,3.4vw,52px) var(--gutter);margin-top:56px}
/* a service page carries one pair, so it takes the full width rather than
   sitting in half a two-column grid */
.jobs > .job:only-child{grid-column:1 / -1}
@media(max-width:900px){ .jobs{grid-template-columns:1fr;gap:44px} }

.ba{--pos:50%;position:relative;aspect-ratio:3/2;overflow:hidden;
  background:var(--primary);cursor:ew-resize;user-select:none;
  touch-action:pan-y;outline-offset:3px}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none}
.ba__after{clip-path:inset(0 0 0 var(--pos))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;
  background:var(--secondary-container);transform:translateX(-1.5px);
  pointer-events:none;z-index:3;box-shadow:0 0 0 1px rgba(6,27,14,.35)}
.ba__knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:var(--secondary-container);
  color:var(--primary);display:grid;place-items:center;z-index:4;
  box-shadow:0 0 0 1px rgba(6,27,14,.28);
  transition:transform var(--t) var(--ease)}
.ba:hover .ba__knob,.ba.is-dragging .ba__knob{transform:translate(-50%,-50%) scale(1.08)}
.ba__knob svg{width:20px;height:10px;display:block}

/* solid chips, two colours, so the sides read at a glance on any photo */
.ba__tag{position:absolute;top:12px;z-index:5;
  font-family:var(--body);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;
  pointer-events:none;box-shadow:0 1px 6px rgba(6,27,14,.30)}
.ba__tag--before{left:12px;background:var(--primary);color:#fff}
.ba__tag--after{right:12px;background:var(--secondary-container);color:var(--primary)}
.ba:focus-visible{outline:2px solid var(--secondary)}
@media(max-width:900px){
  .ba{aspect-ratio:4/3}
  .ba__knob{width:46px;height:46px}
}

.job-meta{margin-top:18px;padding-top:16px;
  border-top:1px solid var(--outline-variant)}
.job-meta h3{font-family:var(--display);font-size:21px;font-weight:600;
  line-height:1.3;margin:0 0 10px}
.job-meta p{margin:0;color:var(--on-surface-variant);font-size:15px;line-height:1.6}
.job-tag{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--outline);margin:0 0 7px}
@media(max-width:900px){ .job-meta h3{font-size:22px} .job-meta p{font-size:16px} }

/* ---- text left, image right ------------------------------------------
   Three sections ran text at 660px inside a 1152px container and left the
   right-hand half empty. This pairs each with a portrait image. On the
   forest band the frame gets a hairline so it does not float. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.68fr);
  gap:var(--gutter) clamp(40px,6vw,88px);align-items:center}
.split > figure{margin:0;aspect-ratio:3/4;overflow:hidden;
  background:var(--primary)}
.split > figure img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease),filter .55s var(--ease)}
.split > figure:hover img{transform:scale(1.04);filter:grayscale(1)}
.split-copy > :last-child{margin-bottom:0}
.band .split > figure{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
/* image on the left instead of the right */
.split--flip{grid-template-columns:minmax(0,.68fr) minmax(0,1fr)}
.split--flip > figure{order:1}
.split--flip > .split-copy{order:2}
@media(max-width:900px){
  .split,.split--flip{grid-template-columns:1fr;gap:36px}
  .split > figure,.split--flip > figure{aspect-ratio:4/3;order:2}
  .split-copy,.split--flip > .split-copy{order:1}
}

/* area chips are links now, so they need to carry the underline behaviour */
.areas span a{color:inherit;text-decoration:none;position:relative;
  padding-bottom:3px;transition:color var(--t) var(--ease)}
.areas span a::after{content:"";position:absolute;left:0;bottom:0;height:1px;
  width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease)}
.areas span a:hover::after{transform:scaleX(1)}

/* reviews:start */
/* ---- real reviews. Quiet on purpose: the words carry it, not the frame. ---- */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 var(--gutter);margin-top:56px;
  border-top:.5px solid rgba(27,28,28,.15)}
.rev{margin:0;padding:38px 0 34px;
  border-bottom:.5px solid rgba(27,28,28,.15);
  display:flex;flex-direction:column}
.rev-stars{display:flex;gap:5px;margin:0 0 20px}
.rev-stars svg{width:13px;height:auto;fill:var(--on-surface);flex:none}
.rev blockquote{margin:0;font-family:var(--display);font-size:21px;font-weight:600;
  line-height:1.45;letter-spacing:-.005em;max-width:34ch;color:var(--on-surface)}
.rev blockquote::before{content:"\201C"}
.rev blockquote::after{content:"\201D"}
.rev figcaption{margin-top:auto;padding-top:22px;font-size:12px;font-weight:600;line-height:1;
  letter-spacing:.15em;text-transform:uppercase;color:var(--outline);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rev-where{color:var(--on-surface-variant)}
.rev-where::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--outline-variant);margin-right:10px;vertical-align:middle}
.rev-foot{margin:34px 0 0;font-size:15px;color:var(--on-surface-variant)}
@media(max-width:760px){
  .revs{gap:0}
  .rev{padding:30px 0 28px}
  .rev blockquote{font-size:19px;max-width:none}
}
/* reviews:end */