/* =====================================================================
   Self-hosted fonts. Both families are variable, so one file each covers
   every weight the site uses (Playfair 600-700, Inter 400-600).

   Previously these came from fonts.googleapis.com, which cost a visitor
   four round trips across two third-party origins before the hero headline
   could paint in its real face. That headline is the homepage LCP element,
   so the chain was the single biggest thing standing between a visitor and
   a painted page. Now it is one request to our own origin, already warm.

   font-display:swap keeps the fallback visible while the file arrives, so
   text is never invisible. Latin subset only; the site is English.
   ===================================================================== */
@font-face {
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
  src:url('fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   HERITAGE MODERNISM, built to DESIGN.md, not interpreted.
   Every token below is lifted straight from the spec.
   ===================================================================== */
:root{
  /* surfaces */
  /* Oyster shell. Tabby — the crushed-shell concrete Charleston is built out
     of — rather than white with a rumour of warmth in it. The whole ramp is
     re-derived on the same warm axis: leaving the containers on the old
     neutral grey would have made every card and panel read cold and slightly
     dirty against it, which is the usual way a warm ground goes wrong. */
  --surface:#f4f0e9;
  --surface-dim:#ddd6c9;
  --surface-container-lowest:#fdfbf6;
  --surface-container-low:#f8f5ee;
  --surface-container:#efeae1;
  --surface-container-high:#e9e3d8;
  --surface-container-highest:#e2dbce;
  /* ink */
  --on-surface:#1b1c1c;
  --on-surface-variant:#434843;
  /* darkened from #767065, which fell to 4.32:1 on the warmer ground */
  --outline:#5f5a50;
  --outline-variant:#cdc6b8;
  --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{
  /* Oldstyle (text) figures site-wide: digits with ascenders and descenders
     that rise and fall through a line like lowercase letters. They are the
     numeral of the printed page in Charleston's own century; lining figures
     are a twentieth-century convention for ledgers and timetables.
     Playfair carries real text figures, so this is genuine, not a fake.
     Inter has no oldstyle set at all, which is why every numeral meant to
     show them is set in the display face (see .fig below). */
  font-variant-numeric:oldstyle-nums;
  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%);
  /* mobile override below drops the blur: see the note there */
  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:var(--sh,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 was left on permanently, which pins a compositor layer for the
   life of the page for a fade that happens once. The transition works without
   it and the layer is released. */
.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,calc(var(--sh,100vh) * .06),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,calc(var(--sh,100vh) * .135));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,calc(var(--sh,100vh) * .036),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,calc(var(--sh,100vh) * .042),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}
/* a clock reads better on even columns, so this one keeps lining figures */
.hero .hero-egg .eg-t{color:rgba(255,255,255,.70);
  font-variant-numeric:lining-nums 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 */
/* "Learn more about us" and "Tell us what you need" were a line of small caps
   over a hairline, which on a page made of small caps and hairlines read as
   more text. They are secondary calls to action and now carry a border, so
   they look like something to press without taking the gold that belongs to
   the primary action. */
.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);
  border:1px solid var(--outline);padding:15px 22px;position:relative;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.more:hover{background:var(--primary);border-color:var(--primary);color:#fff}

.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){
  /* All six services stay on screen as a compact two-up grid, and the
     chosen one opens underneath. Dropping the list and stacking every panel
     was correct when the panels were short, but with six of them it made
     this the longest scroll on the site for no gain. */
  .svc{display:block;margin-top:28px}
  /* On a phone these read as six lines of text, not six controls. As bordered
     chips with a chevron — and the chosen one filled forest — there is no
     question that they are pickable. */
  .svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;border-top:0}
  .svc-btn{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:15px 13px;border:1px solid var(--outline-variant);
    background:var(--surface-container-lowest);
    transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
  }
  .svc-btn:hover{padding-left:13px}
  .svc-btn.on{
    padding-left:13px;box-shadow:none;
    background:var(--primary);border-color:var(--primary);
  }
  .svc-btn.on .svc-name{color:#fff}
  /* the number and descriptor are desktop luxuries; the chevron earns its
     place here because it is what says "tap me" */
  .svc-btn .svc-n,.svc-btn .svc-sub{display:none}
  .svc-btn svg{display:block;grid-row:auto;width:13px;flex:none;
    color:var(--outline)}
  .svc-btn.on svg{color:var(--secondary-container);transform:none}
  .svc-name{font-size:16px;line-height:1.25}

  .svc-panel{padding:26px 0 8px;gap:20px}
  .svc-panel[hidden]{display:none}
  .svc-panel img{height:clamp(200px,46vw,260px)}
  /* the panel repeats the number now that the list no longer shows it */
  .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:0;margin-top:40px;padding-top:0;border-top:0}
  /* The three steps ran together into one long column with nothing between
     them. Each now opens on its own rule, so the form reads as three short
     asks rather than one endless one. */
  .qstep{grid-template-columns:1fr;gap:18px;
    border-top:1px solid var(--outline-variant);padding:32px 0}
  .qstep-n{padding-top:0}
  .qfields{grid-template-columns:1fr;gap:24px}
  .qsend{margin-top:30px;gap:18px}

  /* Six services stacked one under another was 370px on its own. Two columns
     — the names are short enough — and the step comes down by about half. */
  .picks-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 18px}
  .pick{padding:13px 0;gap:12px}
  .pick input{width:20px;height:20px}
  .pick span{font-size:16px;line-height:1.25}
}

/* a numeral inside a small-caps label: the label stays in the UI face, the
   digits move to Playfair so they can actually be oldstyle */
.fig{
  font-family:var(--display);font-style:normal;font-weight:500;
  font-variant-numeric:oldstyle-nums;
  font-size:1.5em;line-height:0;letter-spacing:.02em;
}

/* ---------- 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)}
/* Forty-nine elements sliding and fading at once is what makes a phone stutter.
   On mobile the reveal is a fade only — no transform, so nothing needs its own
   layer — and it is quicker, so fewer run at the same time. */
@media(max-width:900px){
  .rv{transform:none;transition:opacity .45s var(--ease)}
  .rv.in{transform:none}
}
.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}
  /* The page ran to nearly twenty screens on a phone, largely because the
     section intros and the rhythm between sections were still at desktop
     size. Body copy comes down two points and the sections close up; the
     headings stay as they are, because they are what makes it scannable. */
  section{padding:58px 0}
  .lede,.body-lg{font-size:16px;line-height:1.55}
  .lede{margin-bottom:16px}
  .headline-md{font-size:27px;line-height:1.25}
  .eyebrow{margin-bottom:20px}
  .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. */
  /* Blurring behind a full-width fixed bar forces the browser to re-composite
     the whole strip on every scroll frame, which is the main reason scrolling
     felt shaky on a phone. Opaque parchment instead — visually near-identical
     over this palette, and free. */
  .nav.solid{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}

  /* The words keep the desktop arrangement on a phone — left, right, left,
     right — rather than collapsing into a stack. It fits because the type is
     smaller here: CHARLESTON, the long one, runs to about 56% of the screen. */
  /* Vertical positions are Nikita's, set by hand on the design canvas: he
     pulled the four words into a tighter group sitting lower in the frame,
     which opens the top of the reel up. Converted from where he dropped the
     block (y136, 553 tall) back into percentages of the hero. */
  .hero-slogan{font-size:min(9.4vw,calc(var(--sh,100vh) * .066));line-height:1;letter-spacing:-.03em}
  .hero-slogan .w1{left:6%;   top:23.3%}
  .hero-slogan .w2{right:7%;  top:33.8%}
  .hero-slogan .w3{left:6%;   top:44.3%}
  .hero-slogan .w4{right:8%;  top:54.8%}
  /* 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 on one row. Stacked full-width buttons cost about 60px of
     hero on their own, and the two labels fit side by side once the type
     comes down. Still a 46px target each, so they stay thumb-sized. */
  .hero-foot{flex-direction:column;align-items:stretch;gap:16px;
    padding:0 var(--margin-mobile);bottom:clamp(18px,calc(var(--sh,100vh) * .026),30px)}
  .hero-btns{flex-direction:row;gap:10px}
  .hero-btns .btn{flex:1 1 0;min-width:0;padding:15px 8px;
    font-size:10px;letter-spacing:.08em;text-align:center;white-space:nowrap}
  /* the corner mark keeps the coordinates and drops the clock: four lines of
     it was more furniture than a phone hero can spare */
  .hero .hero-egg{font-size:8px;letter-spacing:.12em;line-height:1.7}
  .hero .hero-egg .eg-sp,.hero .hero-egg .eg-t{display:none}
}
/* 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,calc(var(--sh,100vh) * .12))}
  .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)}
/* Nikita's size, set on the design canvas. This is the only mobile rule for
   .hero-sub — an earlier duplicate higher up was being overridden here and
   silently did nothing. */
/* desktop leaves 28px under this line; the phone had 18px at a much smaller
   type size, which read as none at all */
@media(max-width:760px){ .hero-sub{font-size:11px;line-height:1.5;margin-bottom:30px;max-width:36ch} }

/* ---- 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. */
/* ---------- the reveal control ----------------------------------------
   I stripped the colour out of this and it went dead — the two-tone tags and
   the gold seam are what gave the control life and told you which half you
   were looking at. Colour is back. What stays from the quieter pass is the
   SIZE: a 3px seam and a 44px knob sat on the photograph like furniture, so
   the same colours are carried at a scale that lets the picture lead.
   ------------------------------------------------------------------ */
.wcard .ba__line{
  width:2px;transform:translateX(-1px);
  background:var(--secondary-container);
  box-shadow:0 0 0 1px rgba(6,27,14,.30);
}
.wcard .ba__knob{
  width:38px;height:38px;
  background:var(--secondary-container);color:var(--primary);
  box-shadow:0 0 0 1px rgba(6,27,14,.24);
}
.wcard .ba__knob svg{width:17px;height:9px}
/* two colours, so which side is which reads without reading the words */
.wcard .ba__tag{
  top:13px;font-size:9px;letter-spacing:.17em;padding:6px 10px;
}
.wcard .ba__tag--before{background:var(--primary);color:var(--surface)}
.wcard .ba__tag--after{background:var(--secondary-container);color:var(--primary)}

/* ---------- the work: cards that deal themselves out ------------------
   Olivia Harper's scroll accordion, measured off their page rather than
   guessed at. The mechanism is one declaration: every card is sticky
   against the BOTTOM of the viewport at a negative offset, so when a card
   has been read it does not leave — a strip of it stays pinned down there
   while the next card rides up and overlaps it. The cards pile up like a
   hand being dealt.

   --card is the card's height and --peek is how much of it stays visible
   once pinned; the negative offset is derived from both, so they cannot
   drift apart. Theirs: 650px card with a 250px peek on desktop, 520/250 on
   a phone. No scroll listener, so nothing here can stutter.
   ------------------------------------------------------------------ */
.work-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:0 clamp(36px,5vw,80px);align-items:start}
.work-intro{position:sticky;top:118px}

.wstack{
  --card:clamp(440px,calc(var(--sh,100vh) * .62),580px);
  /* The waiting stack was eating 422px of a 900px screen. Both numbers come
     down: the last card now stops exactly on the rule under its header
     rather than showing a third of itself, and each waiting card keeps a
     narrower band. That hands about 160px back to the open card's
     photograph. */
  --head:60px;
  --peek:var(--head);
  --strip:42px;
  display:grid;gap:0;
}

/* Measured off theirs rather than guessed: a 650px card showing a 250px peek,
   heading 17.5px, description 13px at weight 300, and the photograph taking
   460 of the card's 520px. The richness is restraint — the picture does the
   talking and the writing stays out of its way. Mine had it backwards.

   One thing done better than the reference: theirs pins every card at the
   SAME offset, so a pinned card is completely hidden by the next one and you
   only ever see the last. Each card here pins a --strip higher than the one
   after it, so a band of every section stays on screen and the stack reads as
   a stack. The offset is derived, so the six stay evenly spaced. */
.wcard{
  position:sticky;
  bottom:calc(var(--peek) - var(--card) + (var(--i) * var(--strip)));
  height:var(--card);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);
  margin-top:26px;
}
.wcard:first-child{margin-top:0}
/* --i counts DOWN, so the first card pins highest and the last sits lowest */
.wcard:nth-child(1){--i:5}
.wcard:nth-child(2){--i:4}
.wcard:nth-child(3){--i:3}
.wcard:nth-child(4){--i:2}
.wcard:nth-child(5){--i:1}
.wcard:nth-child(6){--i:0}

.wcard-head{
  display:flex;align-items:center;gap:16px;flex:none;
  margin:0;padding:0 26px;height:var(--head);
  border-bottom:1px solid var(--outline-variant);
  font-family:var(--display);font-size:21px;font-weight:600;
  line-height:1.1;letter-spacing:-.012em;color:var(--on-surface);
}
/* An oldstyle figure carries this now. The filled forest tile was the
   loudest thing in a card meant to let the photograph lead, and a descending
   numeral cannot sit centred in a box anyway. */
.wcard-no{
  font-family:var(--display);font-size:26px;font-weight:500;
  font-variant-numeric:oldstyle-nums;letter-spacing:.01em;
  color:var(--outline);min-width:30px;flex:none;
}

.wcard-body{
  flex:1;min-height:0;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
}
.wcard-say{
  display:flex;flex-direction:column;justify-content:center;
  padding:26px 28px;min-width:0;
}
.wcard-title{
  font-family:var(--display);font-size:18px;font-weight:600;
  line-height:1.3;margin:0 0 12px;color:var(--on-surface);
}
/* small and light, like theirs — three lines at most, then the link */
.wcard-say > p:not(.wcard-title):not(.job-more){
  margin:0;font-size:13px;line-height:1.62;font-weight:400;
  color:var(--on-surface-variant);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.wcard-say .job-more{margin:18px 0 0;font-size:12.5px}
.wcard-say .job-more a{border-bottom-color:var(--outline)}

/* the photograph runs to the card's edges and carries the card */
.wcard-body .ba{height:100%;aspect-ratio:auto;min-height:0;
  border-left:1px solid var(--outline-variant)}

@media(max-width:900px){
  .work-grid{grid-template-columns:1fr;gap:0}
  .work-intro{position:static;top:auto;margin-bottom:26px}
  .wstack{--card:clamp(410px,calc(var(--sh,100vh) * .62),520px);--head:52px;--peek:var(--head);--strip:36px}
  .wcard{margin-top:18px}
  .wcard-head{padding:0 18px;height:var(--head);font-size:17px;gap:12px}
  .wcard-no{font-size:22px;min-width:26px}
  /* photograph on top, writing beneath — their phone order */
  .wcard-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .wcard-body .ba{order:-1;border-left:0;border-bottom:1px solid var(--outline-variant)}
  .wcard-say{padding:16px 18px 18px;justify-content:flex-start}
  .wcard-title{font-size:16px;margin-bottom:7px}
  .wcard-say > p:not(.wcard-title):not(.job-more){font-size:12.5px;-webkit-line-clamp:2}
  .wcard-say .job-more{margin-top:12px}
}

/* a card cannot pin against a viewport shorter than itself, and the whole
   effect is unwanted when someone has asked for less motion */
@media(prefers-reduced-motion:reduce){
  .wcard{position:relative;bottom:auto;height:auto}
  .wcard-body{grid-template-rows:auto}
  .wcard-body .ba{aspect-ratio:3/2}
}

.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}
.job-more{margin-top:12px !important}

/* On a phone this section was 4.6 screens of scrolling, and the writing under
   each slider stood taller than the slider itself. The old rule here made it
   worse by sizing both UP from desktop. Now: a wider, shorter frame, smaller
   type, and the description held to two lines with the link to the full
   service page kept underneath it. */
@media(max-width:900px){
  .jobs{gap:30px}
  .job-meta{margin-top:14px;padding-top:13px}
  .job-meta h3{font-size:18px;line-height:1.25;margin-bottom:7px}
  .job-meta p{font-size:14.5px;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden}
  /* the link is its own paragraph now, so clamping the description above
     cannot swallow it */
  .job-more{-webkit-line-clamp:none;display:block;overflow:visible}
  .job-tag{font-size:9.5px;margin-bottom:5px}
  .ba{aspect-ratio:16/10}
}

/* ---- 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 */

/* ===== Hardscape photo slots, drawings and the two-sided service split (2026-09-23) =====
   A photo slot renders a real photo when the file exists and a marked
   placeholder when it does not (seo-scripts/photo_slots.py decides at build
   time). Placeholders show only in preview: localhost, or any URL carrying
   ?photos. On the live site an empty slot takes no space, and a section that
   holds nothing but empty slots disappears with it. The three large slots at
   the top of the patio, driveway and drainage pages fall back to a
   construction drawing instead, so those pages always open on a picture. */
.ph{display:none}
html.preview .ph{display:flex}
html:not(.preview) .ph-only{display:none}
html:not(.preview) .split--ph{grid-template-columns:1fr}
.ph{position:relative;margin:0;align-items:center;justify-content:center;
  aspect-ratio:var(--ar,4/3);border:1.5px dashed var(--outline);
  background:repeating-linear-gradient(135deg,var(--surface-container) 0 14px,var(--surface-container-high) 14px 28px)}
.ph-in{max-width:36ch;margin:20px;padding:22px 24px;background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant)}
.ph-n,.ph-badge b{display:block;font-family:var(--body);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--primary)}
.ph-n::before{content:"";display:inline-block;width:14px;height:10px;margin-right:9px;vertical-align:-1px;
  border:1.5px solid currentColor;border-radius:2px;box-shadow:inset 0 0 0 2.5px var(--surface-container-lowest),inset 0 0 0 5px currentColor}
.ph-t{display:block;font-family:var(--display);font-size:20px;font-weight:600;line-height:1.3;margin:10px 0 8px;color:var(--on-surface)}
.ph-d{display:block;font-size:14px;line-height:1.55;color:var(--on-surface-variant)}
.ph-f{display:block;margin-top:12px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--outline);word-break:break-all}
.ph--wide,.shot--wide{--ar:16/9}
.ph--land,.shot--land{--ar:4/3}
.ph--port,.shot--port{--ar:3/4}
.ph--sq,.shot--sq{--ar:1/1}
.shot{margin:0;overflow:hidden;background:var(--surface-container);aspect-ratio:var(--ar,4/3)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot-sec{padding-top:0}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.pair .ph,.pair .shot{--ar:4/3}
.pair-lbl{display:block;margin-bottom:10px;font-family:var(--body);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--outline)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.trio figcaption,.pair figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--on-surface-variant)}
.trio > div > .ph,.trio > div > .shot{--ar:1/1}
@media(max-width:760px){
  .pair,.trio{grid-template-columns:1fr;gap:28px}
}

/* construction drawings */
.plate{position:relative;margin:0;overflow:hidden;background:#061b0e;aspect-ratio:16/9}
.plate svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate .ph-badge{display:none}
html.preview .plate .ph-badge{display:block;position:absolute;top:14px;right:14px;max-width:34ch;
  padding:14px 16px;background:var(--surface-container-lowest);border:1.5px dashed var(--outline);
  font-size:13px;line-height:1.5;color:var(--on-surface-variant)}
html.preview .plate .ph-badge b{margin-bottom:6px}
@media(max-width:700px){ .plate .pl-note{display:none} }
.svc-panel .plate{aspect-ratio:auto;height:clamp(240px,30vw,392px);background:#061b0e}

/* a count of the empty slots, pinned to the corner in preview only */
html.preview body[data-ph]::after{content:attr(data-ph);position:fixed;left:16px;bottom:16px;z-index:9999;
  padding:12px 14px;background:var(--primary);color:var(--secondary-container);
  font:600 11px/1 var(--body);letter-spacing:.15em;text-transform:uppercase}

/* homepage services: hardscape and landscape as two named groups */
.svc-group{display:block;padding:18px 0 10px;border-bottom:1px solid var(--outline-variant);
  font-family:var(--body);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
.svc-list > .svc-group:first-child{padding-top:12px}
/* eight tabs instead of six: a little less air in each, so the list stays
   close to the height of the panel beside it */
@media(min-width:901px){
  .svc-btn{padding:19px 4px 19px 0}
  .svc-n{margin-bottom:6px}
  .svc-sub{margin-top:5px}
}
@media(max-width:900px){
  .svc-group{grid-column:1 / -1;padding:12px 0 0;border-bottom:0}
  .svc-list > .svc-group:first-child{padding-top:0}
}

/* footer: hardscape and landscape side by side, equal columns. The h3 rule
   also fixes the footer labels on every page that uses h3 rather than h4. */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}
.foot-grid h3{margin:0 0 16px;color:rgba(255,255,255,.5)}
@media(max-width:1000px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} }
/* restated after the rule above, which would otherwise win on a phone */
@media(max-width:900px){ .foot-grid{grid-template-columns:1fr} }

/* ===== Services menu, phone menu, services directory, footer (2026-09-23) =====
   Modeled on how the large residential firms carry a long service list: one
   Services item in the bar that opens a grouped panel (GrandScapes, Carolina
   Paver, Pacific Outdoor Living), a grouped directory on the homepage and the
   hub, and a footer that lists everything. The groups live in
   seo-scripts/services.py. */
.nav ul{align-self:stretch;align-items:center}
.nav ul > li{display:flex;align-items:center}
/* the item reaches down to the bottom of the bar, so the pointer can travel
   from the word to the panel without the panel closing on the way */
.nav-drop{align-self:stretch;padding-bottom:24px;margin-bottom:-24px}
.mega{display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--surface);border-top:1px solid var(--outline-variant);border-bottom:1px solid var(--outline-variant);
  padding:40px var(--margin-desktop) 30px}
.nav-drop:hover .mega,.nav-drop:focus-within .mega{display:block}
.mega-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;max-width:var(--container-max);margin:0 auto}
.mega-h{display:block;margin-bottom:14px;font:600 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.nav ul .mega a,.nav.solid ul .mega a{display:block;padding:6px 0;font-family:var(--display);font-size:17px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--on-surface);text-shadow:none;transition:color var(--t) var(--ease)}
.nav ul .mega a:hover,.nav.solid ul .mega a:hover{color:var(--primary)}
.nav ul .mega a.mega-all,.nav.solid ul .mega a.mega-all{max-width:var(--container-max);margin:26px auto 0;padding-top:16px;
  border-top:1px solid var(--outline-variant);font:600 11px/1 var(--body);letter-spacing:.15em;text-transform:uppercase}
.nav-toggle{display:none}
body.nav-lock{overflow:hidden}
@media(max-width:760px){
  .nav{column-gap:12px}
  .nav .end a.inquire{padding:11px 13px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:38px;margin-right:8px;padding:0;
    cursor:pointer;background:none;border:1px solid currentColor;color:#fff}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:1.5px;background:currentColor;
    transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
  .nav-toggle span{position:relative}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}
  .nav.open .nav-toggle span{background:transparent}
  .nav.open .nav-toggle span::before{top:0;transform:rotate(45deg)}
  .nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
  .nav.solid .nav-toggle{color:var(--on-surface)}
  .nav.open{background:var(--surface)}
  .nav.open::before{opacity:0}
  .nav.open .mark,.nav.open .nav-toggle{color:var(--on-surface);text-shadow:none}
  .nav.open ul{display:block;position:fixed;top:var(--navh,64px);left:0;right:0;bottom:0;overflow-y:auto;
    background:var(--surface);padding:6px var(--margin-mobile) 48px;border-top:1px solid var(--outline-variant)}
  .nav.open ul > li{display:block;border-bottom:1px solid var(--outline-variant)}
  .nav.open ul > li > a{display:block;padding:16px 0;color:var(--on-surface);text-shadow:none}
  .nav.open .nav-drop{padding-bottom:0;margin-bottom:0}
  .nav.open .mega{display:block;position:static;padding:0 0 18px;border:0;background:none}
  .nav.open .mega-in{grid-template-columns:1fr 1fr;gap:18px 20px}
  .nav.open ul .mega a{font-size:16px;padding:5px 0}
}

/* the services directory */
.sx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px;margin-top:40px;border-top:1px solid var(--outline-variant)}
.sx--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-col{padding-top:26px}
.sx-h{display:block;margin-bottom:8px;color:var(--primary)}
.sx a{display:block;padding:14px 0;border-bottom:1px solid var(--outline-variant);transition:padding-left var(--t) var(--ease)}
.sx a:hover{padding-left:8px}
.sx-t{display:block;font-family:var(--display);font-size:19px;font-weight:600;line-height:1.25;color:var(--on-surface)}
.sx-d{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--on-surface-variant)}
.sx-wrap{margin-top:72px}
@media(max-width:1100px){ .sx,.sx--4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:760px){
  .sx,.sx--4{grid-template-columns:1fr 1fr;gap:0 16px}
  .sx-t{font-size:16px}
  .sx-d{display:none}
  .sx-wrap{margin-top:48px}
}

/* footer: every hardscape service in two short columns */
.foot-grid{grid-template-columns:1.3fr 2fr 1fr 1fr 1fr}
.foot-hard ul{columns:2;column-gap:28px}
.foot-hard li{break-inside:avoid}
@media(max-width:1000px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} .foot-hard{grid-column:span 2} }
@media(max-width:900px){ .foot-grid{grid-template-columns:1fr} .foot-hard{grid-column:auto} }

/* ---------- redesign: the bar, in the house's own finish ---------------
   The solid bar takes the plaster tone and a faint tan double rule, the
   links draw a hairline under themselves, and nothing in the bar wraps:
   between phone and wide desktop it tightens up, then gives up the
   phone number (the hero and every section carry a call button). */
.nav ul a,.nav .end a{white-space:nowrap}
.nav.solid{background:rgba(246,241,232,.94);border-bottom-color:rgba(163,138,102,.3)}
.nav.solid::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:rgba(163,138,102,.16);pointer-events:none}
.nav-main > ul > li > a{position:relative}
.nav-main > ul > li > a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nav-main > ul > li > a:hover::after,.nav-main > ul > li > a:focus-visible::after{transform:none}
@media(max-width:1200px) and (min-width:761px){
  .nav{padding-left:40px;padding-right:40px}
  .nav ul{gap:26px}
  .nav .end{gap:18px}
}
@media(max-width:1080px) and (min-width:761px){
  .nav .end a[href^="tel:"]{display:none}
}

/* ---------- redesign pass 6: Deco buttons -------------------------------
   Each button is a small panel with a second keyline inside it, the way a
   Deco doorplate is edged. Square corners stay square. */
.btn-gold{box-shadow:inset 0 0 0 3px var(--secondary-container),inset 0 0 0 4px rgba(6,27,14,.28)}
.btn-primary{box-shadow:inset 0 0 0 3px var(--primary),inset 0 0 0 4px rgba(216,188,136,.45)}
.band .btn-primary,.btn-gold:hover{box-shadow:inset 0 0 0 3px currentColor,inset 0 0 0 4px rgba(6,27,14,.22)}
.band .btn-primary{box-shadow:inset 0 0 0 3px var(--secondary-container),inset 0 0 0 4px rgba(6,27,14,.28)}
.btn-on-dark{box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(216,188,136,.3)}
.btn-secondary{box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(163,138,102,.35)}

/* ---------- redesign: moving between the rooms of the house -------------
   Going from one page to the next, the page you are on dims into the green
   of the house and the next one opens through an arch rising from the foot
   of the screen, the way the arched windows on the pages open. Pure CSS
   (cross-document view transitions): browsers that do not have it simply
   change page, as before. The menu bar stays where it is throughout. */
@view-transition{navigation:auto}
::view-transition{background:#12231a}
/* the bar is named for the page transition only while one runs (nav.js):
   a standing name would stop the Services glass from seeing the page */
.nav.vt{view-transition-name:site-nav}
::view-transition-group(site-nav){animation-duration:.5s}
::view-transition-old(root){animation:room-out .5s cubic-bezier(.4,0,.6,1) both}
::view-transition-new(root){animation:room-in .75s cubic-bezier(.65,0,.2,1) both}
@keyframes room-out{to{opacity:.2;transform:scale(.97);filter:brightness(.8)}}
@keyframes room-in{
  from{clip-path:inset(92% 38% 0 38% round 999px 999px 0 0);opacity:.6}
  55%{opacity:1}
  to{clip-path:inset(0 0 0 0 round 0 0 0 0);opacity:1}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- redesign: seams between the rooms of the page ----------------
   seams.js paints each section's ground as a gradient that dissolves into
   its neighbours (--seam-bg), and says how deep each blend is (--ft top,
   --fb bottom). Frames and textures step back out of the blend so nothing
   draws a straight line across it. */
.seamed:not(.sec){background:var(--seam-bg)!important}
.page .sec.seamed::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;
  pointer-events:none;background:var(--seam-bg)!important;box-shadow:none!important}
.seamed.revs-band::before,.seamed.revs-band::after,.seamed.gr-promise::before,.seamed.gr-how::before,.seamed.loggia::before,
.seamed.foyer::before,.seamed.band::before{
  -webkit-mask-image:linear-gradient(transparent,#000 var(--ft,0px),#000 calc(100% - var(--fb,0px)),transparent);
          mask-image:linear-gradient(transparent,#000 var(--ft,0px),#000 calc(100% - var(--fb,0px)),transparent)}
.seamed.gr-how::after,.seamed.gr-promise::after,.seamed.band::after{
  top:calc(var(--ft,0px) * .75 + clamp(14px,1.6vw,24px))!important;bottom:calc(var(--fb,0px) * .75 + clamp(14px,1.6vw,24px))!important}
.seamed .foyer-frame{bottom:calc(var(--fb,0px) * .75 + clamp(14px,1.6vw,24px))!important}
.seamed .loggia-frame{top:calc(var(--ft,0px) * .75 + clamp(14px,1.6vw,24px))!important;bottom:calc(var(--fb,0px) * .75 + clamp(14px,1.6vw,24px))!important}
/* the jasmine wall and the evening in "What we do" fade at their edges too */
/* (the jasmine wall's own fade is painted into its canvas by work.js) */
.rooms-mood,.rooms-glow{-webkit-mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 56px),transparent);
          mask-image:linear-gradient(transparent,#000 56px,#000 calc(100% - 56px),transparent)}

/* ---------- redesign: the bar, Deco (2026-09-26) ---------------------------
   The logo is the monogram, a gilt rule, and the name set in live type, so
   it reads at bar size. Menu items are parted by small gilt diamonds; the
   bar sits on a gilt double rule with a stepped plaque and a sunburst at
   its centre; the quote button is a chamfered doorplate with a keyline.
   The phone number is always in the bar. Under 1100px the menu folds into
   the panel; under 760px the name drops its tagline and the button reads
   "Quote". */
:root{--gilt:#c9a86a;--gilt-soft:rgba(201,168,106,.55)}
.nav{padding-top:14px;padding-bottom:14px}
.nav.solid{padding-top:10px;padding-bottom:10px}
.nav .mark-lockup{display:inline-flex;align-items:center;gap:14px;color:#f3ecdd;text-shadow:0 1px 8px rgba(6,27,14,.55);
  font-size:0;line-height:1;letter-spacing:0}
.mark-lockup .ml-mono{height:46px;width:auto;flex:none;filter:drop-shadow(0 1px 6px rgba(6,27,14,.45))}
.mark-lockup .ml-light{display:none;filter:none}
.nav.solid .mark-lockup .ml-dark,.nav.open .mark-lockup .ml-dark{display:none}
.nav.solid .mark-lockup .ml-light,.nav.open .mark-lockup .ml-light{display:block}
.mark-lockup .ml-words{display:grid;gap:4px;padding-left:14px;border-left:1px solid var(--gilt-soft)}
.mark-lockup .ml-name{font:600 20px/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.mark-lockup .ml-co{font:500 10.5px/1 var(--display);letter-spacing:.38em;text-transform:uppercase;opacity:.92}
.mark-lockup .ml-tag{font:600 9.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#e2c992;margin-top:2px}
.nav.solid .mark-lockup,.nav.open .mark-lockup{color:#232518;text-shadow:none}
.nav.solid .mark-lockup .ml-tag,.nav.open .mark-lockup .ml-tag{color:#8d7350}
.nav.solid .mark-lockup .ml-words{border-left-color:rgba(141,115,80,.45)}

/* gilt diamonds between the menu items */
.nav-main > ul > li + li > a::before{content:"";position:absolute;left:-21px;top:50%;width:4px;height:4px;margin-top:-2.5px;
  background:var(--gilt);transform:rotate(45deg);opacity:.75;pointer-events:none}

/* the phone, set off from the button by a gilt hairline */
.nav .end a[href^="tel:"]{display:inline-flex;align-items:center;gap:9px;font-variant-numeric:lining-nums tabular-nums}
.nav .end a[href^="tel:"]::before{content:"";width:11px;height:11px;flex:none;background:currentColor;opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.nav .end{gap:22px}
.nav .end a.inquire{position:relative;margin-left:0}
.nav .end a[href^="tel:"] + a.inquire::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:1px;background:var(--gilt-soft)}

/* the quote button: a chamfered doorplate with a keyline inside */
.nav .end a.inquire,.nav .inquire{padding:12px 20px;letter-spacing:.18em;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  box-shadow:inset 0 0 0 3px var(--secondary-container),inset 0 0 0 4px rgba(6,27,14,.35)}
.nav.solid .end a.inquire,.nav.solid .inquire{box-shadow:inset 0 0 0 3px var(--primary),inset 0 0 0 4px rgba(216,188,136,.55)}
.q-long{display:inline}

/* the gilt double rule with a stepped plaque and sunburst at its centre */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;pointer-events:none;
  border-top:1px solid rgba(201,168,106,.34);border-bottom:1px solid rgba(201,168,106,.18);
  transition:border-color var(--t) var(--ease)}
.nav.solid::after{border-top-color:rgba(163,138,102,.45);border-bottom-color:rgba(163,138,102,.25);bottom:-4px;height:4px;background:none}
.nav .nav-plaque{position:absolute;left:50%;bottom:-13px;width:64px;height:16px;transform:translateX(-50%);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath d='M0 1.5H14V5.5H20V9.5H26V13.5H38V9.5H44V5.5H50V1.5H64' fill='none' stroke='%23c9a86a' stroke-width='1'/%3E%3Cg stroke='%23c9a86a' stroke-width='.9'%3E%3Cpath d='M32 11.5L25.5 11.5M32 11.5L26.6 8.2M32 11.5L29 6.2M32 11.5V5.4M32 11.5L35 6.2M32 11.5L37.4 8.2M32 11.5L38.5 11.5'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.8}
.nav.solid .nav-plaque{background-color:transparent;opacity:.95}

/* up to 1100px the menu lives in the panel; the bar keeps logo, phone, quote */
@media(max-width:1100px){
  .nav{grid-template-columns:1fr auto;column-gap:14px}
  .nav ul{display:none}
  .nav .end a[href^="tel:"]{display:inline-flex}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:38px;margin-left:4px;padding:0;
    cursor:pointer;background:none;border:1px solid currentColor;color:#fff;order:3}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:1.5px;background:currentColor;
    transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
  .nav-toggle span{position:relative}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}
  .nav.open .nav-toggle span{background:transparent}
  .nav.open .nav-toggle span::before{top:0;transform:rotate(45deg)}
  .nav.open .nav-toggle span::after{top:0;transform:rotate(-45deg)}
  .nav.solid .nav-toggle,.nav.open .nav-toggle{color:var(--on-surface)}
  .nav.open{background:var(--surface)}
  .nav.open::before{opacity:0}
  .nav.open .end a:not(.inquire){color:var(--on-surface);text-shadow:none}
  .nav.open ul{display:block;position:fixed;top:var(--navh,64px);left:0;right:0;bottom:0;overflow-y:auto;
    background:var(--surface);padding:6px var(--margin-mobile) 48px;border-top:1px solid var(--outline-variant)}
  .nav.open ul > li{display:block;border-bottom:1px solid var(--outline-variant)}
  .nav.open ul > li > a::before{display:none}
  .nav.open ul > li > a{display:block;padding:16px 0;color:var(--on-surface);text-shadow:none}
  .nav.open .nav-drop{padding-bottom:0;margin-bottom:0}
  .nav.open .mega{display:block;position:static;padding:0 0 18px;border:0;background:none}
  .nav.open .mega-in{grid-template-columns:1fr 1fr;gap:18px 20px}
  .nav.open ul .mega a{font-size:16px;padding:5px 0}
  .nav .nav-plaque{display:none}
}
@media(max-width:760px){
  .nav{padding:10px 14px;column-gap:8px}
  .nav.solid{padding-top:8px;padding-bottom:8px}
  .nav .end{gap:9px}
  .nav .end a:not(.inquire){display:inline-flex}
  .nav .end a[href^="tel:"]{font-size:10px;letter-spacing:0;gap:4px}
  .nav .end a[href^="tel:"]::before{width:10px;height:10px}
  .nav .end a[href^="tel:"] + a.inquire::before{display:none}
  .nav .end a.inquire{padding:10px 9px;font-size:10px;letter-spacing:.1em}
  .q-long{display:none}
  .nav-toggle{width:36px;height:36px;margin-left:0}
  .mark-lockup{gap:8px}
  .nav .mark-lockup{min-width:0}
  .mark-lockup .ml-mono{height:30px}
  .mark-lockup .ml-words{padding-left:7px;gap:3px}
  .mark-lockup .ml-name{font-size:12px;letter-spacing:.1em}
  .mark-lockup .ml-co{font-size:6.8px;letter-spacing:.22em}
  .mark-lockup .ml-tag{display:none}
}
@media(max-width:374px){
  .mark-lockup .ml-words{display:none}
}

/* ---------- the Services panel: frosted glass (2026-09-26) ------------------
   The panel lets whatever is behind it show through, blurred and lifted, so
   the film or the page colours carry into it while the words stay readable.
   A blurred child only sees the page if no ancestor is itself blurring, so
   the solid bar gives up its own blur (it is nearly opaque anyway). */
.nav.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(246,241,232,.96)}
.mega{background:rgba(246,241,232,.62);
  -webkit-backdrop-filter:blur(26px) saturate(170%) brightness(1.12);backdrop-filter:blur(26px) saturate(170%) brightness(1.12);
  border-top:1px solid rgba(201,168,106,.45);border-bottom:1px solid rgba(201,168,106,.45);
  box-shadow:0 18px 40px -24px rgba(6,27,14,.35)}
.mega::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:rgba(201,168,106,.25);pointer-events:none}
.nav ul .mega a.mega-all,.nav.solid ul .mega a.mega-all{border-top-color:rgba(141,115,80,.3)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .mega{background:rgba(246,241,232,.96)} }

/* ---------- pre-launch QA fixes (2026-09-26) ------------------------------ */
/* gold text: a darker ink that passes contrast on the cream; dark rooms keep the light gilt */
:root{--tan-text:#6b5638}
.foyer,.loggia,.band,main.ty,.gr-promise,.gr-how{--tan-text:var(--gilt,#d8bc88)}
.nav.solid .mark-lockup .ml-tag,.nav.open .mark-lockup .ml-tag{color:#6f5a3c}
.hero .hero-egg{color:rgba(255,255,255,.62)}
.hero .hero-egg .eg-t{color:rgba(255,255,255,.82)}
.scroll-cue span{color:rgba(255,255,255,.5)}

/* price tables whose middle column holds sentences, not prices */
.page .ptable--notes .pprice{white-space:normal;max-width:26ch;line-height:1.45}
@media(max-width:900px){
  .page .ptable--notes .prow{grid-template-columns:minmax(0,1fr);gap:8px}
  .page .ptable--notes .pprice{max-width:none}
}

/* the arched side picture on service pages: the old square-photo rule must not reach it */
.page .split > figure.split-fig{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}
.page .split > figure.split-fig:hover img{transform:none}

/* long links in answers wrap instead of running off a small phone */
.qa-item > *{min-width:0}
.qa-item p,.qa-item a{overflow-wrap:anywhere}

/* painted plants at the screen edge stay clear of the text between tablet and wide desktop */
@media(min-width:761px) and (max-width:1439px){
  .edge-plant{width:calc(var(--pw,300px) * .66)}
  .edge-plant:not(.left){margin-right:-4vw}
  .edge-plant.left{margin-left:-4vw}
}

/* the oyster-shell ground fades in and out at the section's edges: rooms.js
   paints that into the shells themselves (a mask over the layer cost every frame) */

/* footer: three columns until there is room for five; the phone number never breaks */
@media(max-width:1180px) and (min-width:901px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} .foot-hard{grid-column:span 2} }
footer a[href^="tel:"]{white-space:nowrap}

/* the bar: fully opaque when solid; the Services glass keeps more of its cream over dark pictures */
.nav.solid{background:#f6f1e8}
.mega{background:rgba(246,241,232,.7)}
/* hover intent: the panel lingers a moment, so a diagonal move toward it doesn't close it */
.mega{display:block;visibility:hidden;opacity:0;transition:opacity .18s ease,visibility 0s linear .3s}
.nav-drop:hover .mega,.nav-drop:focus-within .mega{visibility:visible;opacity:1;transition:opacity .18s ease,visibility 0s}
.nav-drop.shut .mega{visibility:hidden;opacity:0;transition:none}
/* diamonds sit centred in the gap between menu items */
.nav ul{--navgap:38px;gap:var(--navgap)}
.nav-main > ul > li + li > a::before{left:calc(var(--navgap) / -2 - 2px)}
@media(min-width:1101px) and (max-width:1280px){
  .nav{padding-left:32px;padding-right:32px}
  .nav ul{--navgap:24px}
  .nav ul a{letter-spacing:.12em}
  .nav .end{gap:16px}
  .mark-lockup .ml-mono{height:40px}
  .mark-lockup .ml-name{font-size:17px}
  .mark-lockup .ml-co{font-size:9.5px;letter-spacing:.32em}
  .mark-lockup .ml-tag{font-size:8.5px}
}
/* the phone/tablet menu panel: a plain list, not the desktop glass card */
@media(max-width:1100px){
  .nav.open .mega{visibility:visible;opacity:1;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;border:0;padding:4px 0 18px;transition:none}
  .nav.open .mega::after{display:none}
  .nav.open .mega-h{margin-top:10px}
}
/* iPhone SE / mini: the name gives way to the monogram before it can touch the phone number */
@media(max-width:386px){ .mark-lockup .ml-words{display:none} }
/* skip link: hidden until a keyboard user tabs to it */
.skip-link{position:fixed;left:12px;top:-60px;z-index:10000;padding:12px 16px;background:#0e1712;color:#f3ecdd;
  font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;transition:top .2s ease}
.skip-link:focus{top:12px;outline:2px solid #e2c992;outline-offset:2px}
.qa-item .inline-link{white-space:normal}
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
/* the privacy page: one readable column */
.legal .legal-in{max-width:760px;margin:0 auto}
.legal h1{margin:18px 0 8px}
.legal h2{margin:40px 0 10px}
.legal p{font-size:17px;line-height:1.7;color:var(--on-surface-variant);margin:0 0 14px}
.legal .legal-date,.legal .legal-sign{font-size:14px;color:var(--outline)}
.legal .legal-sign{margin-top:44px}
.foot-legal{color:inherit}
.foot-legal:hover{opacity:1}
.legal{padding-top:clamp(104px,calc(var(--sh,100vh) * .14),150px)}
.page.legal > .sec{padding-top:0}
/* the quote form's consent line */
.qform .form-consent{font-size:13px;line-height:1.55;color:var(--on-surface-variant);margin:10px 0 0;max-width:52ch}
.qform .form-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* the footer map waits for a click (nav.js), so Google loads nothing until asked */
.fm-load{appearance:none;border:0;margin:0;padding:18px;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;color:#efe7d6;font:inherit;text-align:center;
  background:radial-gradient(120% 90% at 50% 40%,rgba(216,188,136,.14),rgba(216,188,136,0) 60%),
             repeating-linear-gradient(35deg,rgba(239,231,214,.05) 0 1px,transparent 1px 22px),
             repeating-linear-gradient(-55deg,rgba(239,231,214,.04) 0 1px,transparent 1px 30px),#1b2a20}
.fm-load:hover .fm-load-t,.fm-load:focus-visible .fm-load-t{text-decoration:underline;text-underline-offset:4px}
.fm-load:focus-visible{outline:2px solid #d8bc88;outline-offset:-4px}
.fm-load-t{font-size:13px;letter-spacing:.18em;color:#f1e9d8}
.fm-load-n{font-size:12.5px;line-height:1.45;color:rgba(239,231,214,.72);max-width:34ch}
.fm-pin{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:1.5px solid #d8bc88;margin-bottom:4px}
/* the footer's fine print: the same small type as the legal links */
.foot-legals{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center}
.foot-fine{font-size:11.5px;line-height:1.55;color:rgba(239,231,214,.74);margin-top:10px;padding-bottom:22px}
.foot-fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* the chart was drawn from OpenStreetMap, whose licence asks for this credit */
.chart-credit{font-size:11px;letter-spacing:.02em;color:var(--on-surface-variant);opacity:.8;margin-top:8px;text-align:right}
.chart-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---- accessibility pass (2026-09-26) ---- */
/* the header list sits in a <nav> landmark that takes no box of its own */
.nav-main{display:contents}
/* the quote form's fields show clearly which one has focus */
.qform.letter .qf input:focus-visible,.qform.letter .qf textarea:focus-visible{outline:2px solid var(--ink-forest);outline-offset:4px}
/* the footer's small print reads at 4.5:1 or better on the dark ground */
footer.gr-foot .foot-time{color:rgba(239,231,214,.66)}
/* the wren and the hummingbird cannot take focus while they are not there */
.wren:not(.landed):not(.gone),.hummer:not(.here){visibility:hidden}
/* the hero film's pause button stills every looping animation on the page too */
html.still *,html.still *::before,html.still *::after{animation-play-state:paused!important}
/* a closed answer is not read out: hidden once it has finished closing */
.ask:not(.open) .aa{visibility:hidden;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),visibility 0s linear .55s}
.ask.open .aa{visibility:visible;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1),visibility 0s}
/* the footer's hours line reads as text, not a link */
.foot-hours{opacity:.72;white-space:nowrap;font-size:.92em}

/* ---------- the phone and tablet menu, 2026-09-27 ---------------------------
   It read as one long list: every line the same ink, the sections in the same
   small capitals as the categories under them, and it handed the swipe to the
   page behind it at either end, so scrolling back up fought you. Now the five
   sections are big serif rows with a gilt chevron, Services opens and closes
   in place (nav.js), each category is a gilt heading over its services as
   tiles, and the list keeps its own swipe. */
@media(max-width:1100px){
  .nav.open ul{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-top:2px}
  .nav.open ul > li{border-bottom-color:rgba(141,115,80,.26)}
  .nav.open .nav-main > ul > li > a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;
    font:600 24px/1.1 var(--display);letter-spacing:0;text-transform:none;color:var(--primary)}
  .nav.open .nav-main > ul > li > a::after,
  .nav.open .nav-main > ul > li > a:hover::after,
  .nav.open .nav-main > ul > li > a:focus-visible::after{content:"";position:static;flex:none;width:8px;height:8px;margin-right:6px;
    background:none;border:solid #a38a66;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .3s var(--ease)}
  .nav.open .nav-main > ul > li.nav-drop > a::after{transform:rotate(135deg);margin-top:-5px}
  .nav.open .nav-main > ul > li.nav-drop.expanded > a::after{transform:rotate(-45deg);margin-top:5px}
  .nav.open .nav-drop:not(.expanded) .mega{display:none}
  .nav.open .mega{padding:0 0 22px}
  .nav.open .mega-in{display:block}
  .nav.open .mega-col{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .nav.open .mega-col:first-child{margin-top:2px}
  .nav.open .mega-h,.nav.open .mega-col .mega-h{flex:0 0 100%;display:flex;align-items:center;gap:12px;margin:0 0 4px;
    font:600 10.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--tan-text,#6b5638)}
  .nav.open .mega-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(163,138,102,.6),rgba(163,138,102,0))}
  .nav.open ul .mega a{display:inline-flex;align-items:center;padding:11px 14px;font:500 14.5px/1.1 var(--body);letter-spacing:0;
    color:var(--primary);background:rgba(255,255,255,.6);border:1px solid rgba(141,115,80,.34)}
  .nav.open ul .mega a:active{background:#eee3d1}
  .nav.open ul .mega a.mega-all{display:flex;justify-content:space-between;align-items:center;max-width:none;margin:24px 0 0;
    padding:16px 18px;background:var(--primary);border:0;color:#f4efe6;font:600 11px/1 var(--body);letter-spacing:.16em}
  .nav.open ul .mega a.mega-all::after{content:"\2192";font-size:15px;letter-spacing:0;color:#c9a86a}
}

/* ---------- the glint ---------------------------------------------------------
   Now and then a band of light runs across something you can press, the way
   light runs down a blade: one thing at a time, at random, never two at
   once (nav.js picks). Buttons get a warm sheen across their face; text
   links flash gilt through the letters. Nothing runs between glints, and
   nothing at all with reduced motion. The !important: a button's own
   background (and its hover) is a shorthand that would wipe the band. */
@media (prefers-reduced-motion: no-preference){
  .gl.glint{background-image:linear-gradient(105deg,rgba(255,248,230,0) 38%,rgba(255,248,230,.5) 50%,rgba(255,248,230,0) 62%)!important;
    background-size:260% 100%!important;background-repeat:no-repeat!important;animation:glint 1.15s cubic-bezier(.45,.05,.35,1) both}
  .gl.gl-lite.glint{background-image:linear-gradient(105deg,rgba(201,168,106,0) 38%,rgba(201,168,106,.42) 50%,rgba(201,168,106,0) 62%)!important}
  .glt.glint{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    background-image:linear-gradient(100deg,var(--ink) 0 40%,#d2ad66 50%,var(--ink) 60% 100%)!important;
    background-size:260% 100%!important;background-repeat:no-repeat!important;animation:glint 1.3s cubic-bezier(.45,.05,.35,1) both}
}
@keyframes glint{from{background-position:112% 0}to{background-position:-12% 0}}