/* ═══════════════════════════════════════════════════════════════════════════
   R&A Electric — design system.

   Built on the Ghost Ridge / Elite Sewer spine: the same sections, the same
   component vocabulary, the same one-bespoke-silhouette rule. What changes is
   the trade, so the palette, the faces and the signature shape change with it.

   Everything comes off their own lockup. The ground is the black of the round
   R⚡A badge and the crew shirt in the wall pack photo, pulled a touch warm so
   it never reads as the blue-black a dark site defaults to. The one accent is
   the gold of the bolt and of "Electric", sampled at #E7C25C off the lockup;
   the silver of "R&A" (#EBEBEA) is the ink on dark. Gold is too light to carry
   type on the paper bands, so there it steps down to a burnt brass that keeps
   the hue and earns the contrast.

   The wordmark is a heavy geometric italic, so the display face is Montserrat
   and the one italic per heading is its own 800 italic: the same move the
   lockup makes on "Electric". Barlow carries the body. The spaced capitals
   between two gold hairlines under the wordmark are the kicker. Radius is
   2px: a panel cover is not rounded.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Grounds — the badge black, warmed a step, never blue-black */
  --ink:#121110;
  --ink-deep:#0B0A09;
  --panel:#191816;
  --panel-2:#211F1C;
  --panel-3:#2E2B27;

  /* Light bands — a warm plaster paper, not a UI-kit grey */
  --paper:#F5F3EE;
  --paper-2:#E9E5DC;

  /* The one gold, off the bolt */
  --accent:#E7C25C;
  --accent-lift:#F0D27A;
  --accent-deep:#8A6512;
  /* gold that can carry type on paper */
  --accent-ink:#9C7314;

  /* The silver of "R&A": what carries small type on dark */
  --bone:#D9D4C8;

  /* Ink on dark */
  --fg:#F2F1EE;
  --fg-2:#CFCBC3;
  --fg-3:#A29D94;
  --fg-4:#6F6A62;

  /* Ink on light */
  --dark:#1A1917;
  --dark-2:#46433D;
  --dark-3:#65615A;

  /* Self-coloured edges — sensed, not drawn */
  --edge:rgba(242,241,238,.15);
  --edge-soft:rgba(242,241,238,.08);
  --edge-lt:rgba(26,25,23,.13);

  --radius:2px;

  --disp:Montserrat,'Segoe UI',Arial,sans-serif;
  --sig:Montserrat,'Segoe UI',Arial,sans-serif;
  --body:Barlow,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --gut:clamp(20px,5vw,56px);
  --max:1180px;
  --pad:clamp(62px,7vw,106px) var(--gut);

  --e:cubic-bezier(.33,0,.25,1);
  --e-out:cubic-bezier(.16,1,.3,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
section[id],div[id]{ scroll-margin-top:76px }
html,body{ margin:0; padding:0 }

body{
  background:var(--ink);
  color:var(--dark);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--accent); color:var(--ink) }
:focus-visible{ outline:2.5px solid var(--accent-lift); outline-offset:3px }
[hidden]{ display:none !important }

h1,h2,h3,h4{ font-family:var(--disp); font-weight:700; margin:0 }
/* The one italic: a single emphasised phrase per heading, in the display
   italic and in the accent. */
h1 em,h2 em{ font-style:italic; font-weight:800; color:var(--accent) }
.sec--paper h2 em,.sec--stone h2 em,.bookdlg h2 em{ color:var(--accent-ink) }

/* Hover changes state, never position: no lift, no scale on a control. */
a,button{ transition:background-color .28s var(--e-out),color .28s var(--e-out),border-color .28s var(--e-out) }
input,select,textarea{ transition:border-color .2s ease,box-shadow .2s ease }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:var(--ink); padding:12px 20px; font-weight:700; border-radius:var(--radius) }
.skip:focus{ left:12px; top:12px }

/* ── shared measures ─────────────────────────────────────────────────────── */
.wrap{ max-width:var(--max); margin-inline:auto }
.sec{ padding:var(--pad) }
.sec--paper{ background:var(--paper) }
.sec--stone{ background:var(--paper-2) }
.sec--dark{ background:var(--panel-2); color:var(--fg) }

/* The substrate carries the grain, never the content over it. */
.sec--paper,.sec--stone{ position:relative; isolation:isolate }
.sec--paper::before,.sec--stone::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grain); opacity:.05;
}

.kicker{
  margin:0 0 13px; font-family:var(--disp); font-weight:600; font-size:.74rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--accent-ink);
  display:flex; align-items:center; gap:12px;
}
/* The spaced capitals under the wordmark sit between two gold hairlines. The
   kicker keeps the leading one. */
.kicker::before{ content:''; flex:none; width:30px; height:1px; background:currentColor; opacity:.8 }
.kicker--lt{ color:var(--accent) }
.kicker svg{ flex:none }

h2,.h2{
  font-size:clamp(1.8rem,1.1rem + 2.3vw,2.9rem);
  line-height:1.06; letter-spacing:-.022em; text-wrap:balance;
}
.lede{ margin:0; color:var(--dark-2); font-size:1.02rem }
.sec--dark .lede{ color:var(--fg-3) }

/* The head: a heading and, beside it, the paragraph. One filled action to a
   head, never a filled button next to an outlined one. */
.head{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:20px clamp(34px,4vw,64px); align-items:end; margin-bottom:clamp(26px,3.2vw,42px);
}
.head--solo{ grid-template-columns:1fr }

/* ── the one bespoke silhouette ──────────────────────────────────────────── */
/* A short gold bar with both ends cut on the slant of the wordmark: the italic
   of "Electric", and the angle of the bolt's own strokes. It tops every step,
   every answer and every spec column, and it is the travelling rule on a
   service card. Short, not full width, so it reads as a mark rather than as a
   border. */
.spark{
  position:absolute; left:0; top:0; width:56px; height:5px; background:var(--accent);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.sec--paper .spark,.sec--stone .spark{ background:var(--accent-ink) }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--disp); font-weight:700; font-size:.98rem; line-height:1; letter-spacing:-.005em;
  padding:15px clamp(19px,2.2vw,26px); border:0; border-radius:var(--radius);
  cursor:pointer; font-variant-numeric:tabular-nums;
}
.btn--lg{ font-size:clamp(1.02rem,.92rem + .4vw,1.2rem); padding:17px clamp(20px,2.4vw,28px) }
.btn--block{ display:flex; width:100% }
.cta{ background:var(--accent); color:var(--ink) }
.cta:hover{ background:var(--fg); color:var(--dark) }
.cta-d{ background:var(--dark); color:#fff }
.cta-d:hover{ background:var(--accent); color:var(--ink) }
.ghost{ border:1.5px solid rgba(242,241,238,.4); color:var(--fg); background:transparent }
.ghost--tint{ background:rgba(18,17,16,.42); border-color:rgba(242,241,238,.5) }
.ghost--solid{ background:var(--panel-3); border-color:rgba(242,241,238,.42) }
.ghost:hover{ background:var(--fg); color:var(--dark); border-color:var(--fg) }
.lnk{ color:var(--accent-deep); border-bottom:2px solid rgba(156,115,20,.35); font-family:var(--disp); font-weight:700 }
.lnk:hover{ color:var(--dark); border-color:var(--dark) }
.ft-a{ color:var(--fg-3) }
.ft-a:hover{ color:#fff }
.tel-big{ color:#fff }
.tel-big:hover{ color:var(--accent) }
.by-lnk{
  font-family:var(--body); text-transform:uppercase; font-size:.72rem; font-weight:500;
  letter-spacing:.07em; color:var(--fg-3); text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; text-decoration-color:rgba(162,157,148,.5);
}
.by-lnk:hover{ color:var(--accent); text-decoration-color:var(--accent) }

/* ── header ──────────────────────────────────────────────────────────────── */
/* The bar is driven by the scroll rather than switched by it.
   `--p` is how far through the collapse we are, 0 at the top of the page and 1
   once it is fully compact, written once per frame by main.js. Every part of
   the bar reads off that one number, so the ground, the shadow, the scrim, the
   bar height and the lockup all move together and land together.

   There is deliberately no `transition` on any of these. The value already
   changes every frame in step with the scroll; a transition on top of that
   would chase it and arrive late. It also removes the old problem at the
   threshold, where scrolling slowly across 60px flipped the bar back and forth
   and each flip started a fresh 0.45s animation. */
.hdr{
  --p:0;
  --hud-tall:clamp(92px,11vh,116px);
  --hud-short:68px;
  --mark-tall:clamp(46px,4.4vw,60px);
  --mark-short:40px;
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(25,24,22,var(--p));
  box-shadow:0 6px 26px rgba(8,8,7,calc(.46 * var(--p)));
}
/* An open menu is solid whatever the scroll is doing. */
.hdr.is-open{ background:var(--panel) }
.hdr__scrim{
  position:absolute; top:0; left:0; right:0; bottom:-64px; pointer-events:none;
  opacity:calc(1 - var(--p));
  background:linear-gradient(180deg,rgba(11,10,9,.86),rgba(11,10,9,.42) 52%,rgba(11,10,9,0));
}
.hdr.is-open .hdr__scrim{ opacity:0 }
.hdr__in{ position:relative; padding-inline:var(--gut) }
.hdr__row{
  max-width:1300px; margin-inline:auto; display:flex; align-items:center;
  gap:clamp(14px,2.4vw,32px); padding:12px 0;
  min-height:calc(var(--hud-tall) + (var(--hud-short) - var(--hud-tall)) * var(--p));
}
.hdr__mark{ display:flex; align-items:center; gap:11px; flex:none }
/* The lockup is trimmed to its own ink and carries an alpha channel, so it is
   sized by HEIGHT and set bare on the surface: no box, no tile, no radius.
   It runs taller than a bare mark would because it has a drawing inside it
   that has to survive at this size. */
.hdr__mark img{
  width:auto;
  height:calc(var(--mark-tall) + (var(--mark-short) - var(--mark-tall)) * var(--p));
}
.hdr__nav{ margin-left:auto; display:flex; flex-wrap:nowrap; white-space:nowrap; gap:clamp(13px,1.7vw,27px) }
.nav-a{ font-family:var(--disp); font-weight:600; font-size:.92rem; letter-spacing:-.005em; color:rgba(255,255,255,.86) }
.nav-a:hover{ color:var(--accent) }
.hdr__tel{ flex:none; padding:11px 17px; font-size:.94rem }
.hdr__burger{ display:none }
.hdr__menu{
  display:grid; justify-items:center; align-content:center; gap:4px; width:46px; height:46px;
  flex:none; padding:0; border:1.5px solid rgba(242,241,238,.42); border-radius:var(--radius);
  background:rgba(18,17,16,.4); cursor:pointer;
}
.hdr__menu:hover{ border-color:var(--accent) }
.hdr__bar{ display:block; width:20px; height:2px; background:var(--fg); transition:transform .3s var(--e-out),opacity .2s ease }
.hdr.is-open .hdr__bar--a{ transform:translateY(6px) rotate(45deg) }
.hdr.is-open .hdr__bar--m{ opacity:0 }
.hdr.is-open .hdr__bar--b{ transform:translateY(-6px) rotate(-45deg) }
.hdr__panel{
  display:none; position:relative; background:var(--panel); border-top:1px solid var(--edge);
  box-shadow:0 22px 44px rgba(8,8,7,.55); padding:4px var(--gut) 20px;
  max-height:calc(100svh - 62px); overflow-y:auto;
}
.hdr.is-open .hdr__panel{ display:block }
.menu-a{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px;
  border-bottom:1px solid rgba(242,241,238,.1); font-family:var(--disp); font-weight:600;
  font-size:1.08rem; color:var(--fg);
}
.menu-a:last-of-type{ border-bottom:0 }
.menu-a:hover{ color:var(--accent) }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative; background:var(--ink); isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; flex-direction:column;
}
.hero__pic,.hero__pic img{ position:absolute; inset:0; width:100%; height:100% }
/* The crew shirt on the lift. The wide crop is cut from the full 1440px
   original, so a desktop never sees an upscale; the phone gets the whole
   portrait frame. */
.hero__pic img{ object-fit:cover; object-position:50% 40% }
/* Wide screens: push the frame left so the lockup on the shirt lands in the
   gap between the headline and the card rather than under the card. */
@media (min-width:761px){ .hero__pic img{ object-position:100% 40% } }
/* Five stops that dip through the middle so the photograph still reads, in the
   deep token rather than black, resolving into the colour of the tape beneath
   it so there is no seam. A second sideways gradient carries the headline. */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,.4) 22%,rgba(11,10,9,.32) 44%,rgba(11,10,9,.76) 78%,rgba(11,10,9,.97) 100%);
}
.hero__scrim--x{ background:linear-gradient(90deg,rgba(11,10,9,.84) 0%,rgba(11,10,9,.46) 46%,rgba(11,10,9,.02) 84%) }
.hero__in{ position:relative; padding-inline:var(--gut); flex:1; display:flex; flex-direction:column }
.hero__grid{
  max-width:1300px; margin-inline:auto; width:100%; flex:1;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  gap:clamp(34px,4vw,72px); align-items:end; align-content:center;
  padding:clamp(104px,19vh,232px) 0 clamp(40px,6vh,72px);
}
.hero__eyebrow{
  margin:0 0 clamp(14px,2vh,20px); display:inline-flex; align-items:center; gap:9px;
  font-family:var(--disp); font-weight:600; font-size:.74rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent);
}
.hero h1{
  margin:0 0 clamp(18px,2.4vh,26px); max-width:15ch;
  font-size:clamp(2.35rem,1rem + 4.2vw,4.3rem); line-height:1; letter-spacing:-.03em;
  color:rgba(242,241,238,.8); text-wrap:balance; text-shadow:0 2px 30px rgba(11,10,9,.5);
}
.hero h1 em{ color:var(--accent) }
.hero__lede{
  margin:0 0 clamp(26px,4vh,42px); max-width:46ch;
  font-size:clamp(1rem,.94rem + .3vw,1.12rem); line-height:1.56;
  color:rgba(255,255,255,.9); text-shadow:0 1px 3px rgba(11,10,9,.72);
}
.hero__now{ margin:0 0 10px; font-size:1rem; color:var(--bone) }
.hero__ghost{ display:none; align-items:center; justify-content:center; gap:10px; margin-top:11px; max-width:340px; height:56px }
/* Four short unpunctuated proofs on one line. No icons, no boxes. */
.hero__trust{
  margin:16px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 10px; font-size:.9rem; color:rgba(255,255,255,.86); text-shadow:0 1px 3px rgba(11,10,9,.8);
}
.hero__trust li + li::before{
  content:''; display:inline-block; width:4px; height:4px; background:var(--accent);
  vertical-align:.18em; margin-right:10px; transform:skewX(-18deg);
}
.hero__card{
  background:#fff; border-radius:var(--radius); box-shadow:0 22px 50px rgba(8,8,7,.5);
  overflow:hidden; max-width:468px; width:100%; justify-self:end; padding:20px 22px 22px;
}
/* The card's top edge carries the bolt gold, so it reads as theirs and not as
   a white box dropped on a photograph. */
.hero__card{ border-top:4px solid var(--accent) }
.hero__card h2{ margin:0 0 3px; font-size:1.2rem; line-height:1.18; letter-spacing:-.02em; color:var(--dark) }
.hero__card > p{ margin:0 0 15px; font-size:.86rem; color:var(--dark-3) }

/* ── the divider, in their own geometry ──────────────────────────────────── */
/* Caution tape, black and bolt gold, between the hero and the page. */
.tape{
  height:9px; opacity:.96;
  background:repeating-linear-gradient(135deg,var(--ink) 0 16px,var(--accent) 16px 32px);
}

/* ── trust bar, under its apex ───────────────────────────────────────────── */
.trust{ position:relative; background:var(--panel-2); padding:clamp(26px,3vw,34px) var(--gut) }
.trust__apex{
  position:absolute; left:50%; top:0; transform:translate(-50%,-100%);
  width:clamp(112px,11vw,150px); height:clamp(30px,3.2vw,42px);
  background:var(--panel-2); clip-path:polygon(50% 0,100% 100%,0 100%);
}
.trust__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(226px,100%),1fr)); gap:clamp(20px,2.6vw,36px) }
.trust__i{ display:flex; gap:12px; align-items:flex-start }
.trust__i svg{ margin-top:2px; flex:none; color:var(--accent) }
.trust__i h3{ font-size:1rem; line-height:1.25; letter-spacing:-.01em; color:var(--fg) }
.trust__i p{ margin:3px 0 0; font-size:.85rem; color:var(--fg-3); line-height:1.45 }

/* ── marquee ─────────────────────────────────────────────────────────────── */
.mq{ background:var(--accent); color:var(--ink); overflow:hidden; padding:11px 0 }
.mq__in{ display:flex; align-items:center; width:max-content; animation:ra-mq 46s linear infinite }
.mq span{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-family:var(--disp);
  font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
}
.mq i{ display:block; width:6px; height:6px; margin:0 clamp(20px,3vw,40px); flex:none; background:rgba(18,17,16,.6); transform:skewX(-18deg) }
@keyframes ra-mq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .mq__in{ animation:none } }

/* ── services ────────────────────────────────────────────────────────────── */
.svcs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(258px,47%),1fr)); gap:clamp(10px,1.4vw,18px) }
/* Six of them, so the count is fixed to three across rather than left to
   auto-fit. At four columns the last row ran 4 + 2 and left two holes in it. */
@media (min-width:920px){ .svcs{ grid-template-columns:repeat(3,1fr) } }
.svc{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:var(--panel-2); margin:0;
}
.svc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out) }
.svc:hover img{ transform:scale(1.04) }
.svc__grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(11,10,9,.95) 4%,rgba(11,10,9,.7) 40%,rgba(11,10,9,.12) 72%,rgba(11,10,9,.02) 100%);
}
.svc__t{ position:absolute; left:0; right:0; bottom:0; padding:clamp(13px,1.5vw,20px) clamp(13px,1.5vw,20px) clamp(18px,1.9vw,25px); color:#fff }
.svc__t h3{ margin:0 0 6px; font-size:clamp(1.02rem,.88rem + .5vw,1.26rem); line-height:1.15; letter-spacing:-.015em }
.svc__d{ margin:0; font-size:.88rem; line-height:1.5; color:rgba(255,255,255,.85) }
/* A rule that travels the full width of the card and lands on the slant cut.
   Width animates, so the geometry never changes shape mid-transition and the
   cut end stays cut. The card itself does not move. */
.svc__rule{
  position:absolute; left:0; bottom:0; height:5px; width:0; background:var(--accent);
  clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);
  transition:width .52s var(--e-out); pointer-events:none;
}
.svc:hover .svc__rule,.svc:focus-within .svc__rule{ width:100% }

/* ── the walk-through, in three ──────────────────────────────────────────── */
.prep{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:clamp(20px,2.4vw,30px) }
/* height:auto is load-bearing: a definite height from the attributes makes the
   browser ignore aspect-ratio, and the three came out at three depths. */
.prep img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); margin-bottom:16px }
.prep h3{ margin:0 0 6px; font-size:1.24rem; line-height:1.15; letter-spacing:-.015em }
.prep p{ margin:0; font-size:.96rem; color:var(--dark-3); line-height:1.58 }

/* ── media band ──────────────────────────────────────────────────────────── */
/* Tall enough to read. These are phone clips cropped to a band, so a short
   wide band shows a letterbox slot through the middle of the frame and the
   job in it is unreadable. Height is what makes the footage legible. The line
   sits low and left, on the page measure, where both scrims are heaviest. */
.vband{ position:relative; background:var(--ink); overflow:hidden; min-height:clamp(420px,72vh,760px); display:grid; align-content:end }
.vband--tall{ min-height:clamp(460px,80vh,820px) }
.vband__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vband::before,.vband::after{ content:''; position:absolute; inset:0; pointer-events:none }
.vband::before{
  background:linear-gradient(180deg,rgba(11,10,9,.5) 0%,rgba(11,10,9,.14) 26%,rgba(11,10,9,.3) 54%,rgba(11,10,9,.82) 84%,rgba(11,10,9,.95) 100%);
}
.vband::after{
  background:linear-gradient(90deg,rgba(11,10,9,.8) 0%,rgba(11,10,9,.4) 42%,rgba(11,10,9,.02) 78%);
}
.vband__t{
  position:relative; z-index:1; width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--gut) clamp(30px,4.4vw,58px); text-align:left;
  font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(1.7rem,.9rem + 3.2vw,3.1rem); line-height:1.02; color:#fff;
  text-shadow:0 2px 26px rgba(11,10,9,.7);
}
.vband__t em{ color:var(--accent); font-style:italic }

/* ── work ────────────────────────────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(206px,46%),1fr)); gap:clamp(10px,1.2vw,16px) }
.shot{ position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--panel-2); display:block }
.shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-out) }
.shot:hover img{ transform:scale(1.04) }
.shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(11,10,9,.92) 0%,rgba(11,10,9,.48) 36%,rgba(11,10,9,0) 60%);
}
.shot__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:13px 14px 12px;
  font-family:var(--disp); font-weight:700; font-size:.9rem; line-height:1.25; letter-spacing:-.01em; color:#fff;
}
/* The tenth tile carries the mark and the label instead of a photograph, so it
   reads as the way out of the grid rather than as a picture that failed. */
.shot--more{ display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--edge) }
.shot--more::after{ background:none }
.shot--more svg{ position:relative; z-index:1; color:var(--accent); transition:color .28s var(--e-out) }
.shot--more:hover svg{ color:#fff }
.shot--more:hover{ background:var(--panel-3) }
.shot--more .shot__cap b{
  display:block; margin-top:2px; font-family:var(--body); font-weight:500; font-size:.78rem;
  letter-spacing:.01em; color:rgba(255,255,255,.74);
}

/* ── the steps ───────────────────────────────────────────────────────────── */
.steps{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:clamp(22px,2.8vw,38px) }
.step{ position:relative; padding-top:17px }
.step .step__n{
  margin:0 0 7px; font-family:var(--disp); font-weight:800; font-style:italic;
  font-size:clamp(2rem,1.4rem + 1.4vw,2.7rem); line-height:1; letter-spacing:-.02em;
  color:rgba(26,25,23,.16);
}
.step h3{ margin:0 0 6px; font-size:1.16rem; line-height:1.18; letter-spacing:-.015em }
.step p{ margin:0; font-size:.94rem; line-height:1.56; color:var(--dark-3) }

/* ── who you get ─────────────────────────────────────────────────────────── */
/* The columns stretch to a shared height, so the picture runs the full depth of
   the text instead of leaving a void under itself. */
.who{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:clamp(30px,4vw,72px); align-items:stretch }
.who__pic{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden; max-width:460px; min-height:min(74vw,520px) }
.who__pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.who__pic figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:52px 22px 20px; color:#fff;
  background:linear-gradient(0deg,rgba(11,10,9,.94),rgba(11,10,9,0));
  font-family:var(--disp); font-weight:700; font-size:1.02rem; line-height:1.25;
}
.who__pic figcaption b{
  display:block; font-family:var(--body); font-weight:600; font-size:.68rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px;
}
.who h2{ margin:0 0 15px; color:var(--fg-3) }
.who h2 em{ color:var(--accent); font-style:italic }
.who__body > p:not(.kicker){ margin:0 0 13px; color:var(--fg-2); max-width:56ch; font-size:1.02rem }

/* Facts as a <dl>, hairline rules, never a grid of tinted icon boxes. */
.facts{ margin:clamp(20px,2.8vw,28px) 0 0; display:grid; border-bottom:1px solid var(--edge) }
.facts > div{ display:grid; grid-template-columns:minmax(0,116px) minmax(0,1fr); gap:6px 20px; padding:13px 0; border-top:1px solid var(--edge) }
.facts dt{ font-family:var(--disp); font-weight:700; font-size:.9rem; color:var(--accent) }
.facts dd{ margin:0; font-size:.96rem; color:var(--fg) }
.facts dd a{ border-bottom:1px solid var(--edge) }
.facts dd a:hover{ color:var(--accent) }

/* ── the spec, as slant-cut fact columns ──────────────────────────────────── */
/* The value reserves a second line so a long one in one column can never push
   its own note out of line with the note beside it, but only from the width at
   which the grid actually has more than one column. */
.spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:clamp(22px,2.8vw,38px) }
.spec > div{ position:relative; padding-top:17px }
.spec__k{ margin:0 0 3px; font-family:var(--disp); font-weight:700; font-size:.86rem; line-height:1.2; color:var(--accent-ink) }
.spec__v{ margin:0 0 7px; font-family:var(--disp); font-weight:700; font-size:1.12rem; line-height:1.18; letter-spacing:-.015em; color:var(--dark) }
.spec__n{ margin:0; font-size:.9rem; line-height:1.55; color:var(--dark-3) }
@media (min-width:560px){ .spec__v{ min-height:2.36em } }

/* ── service area ────────────────────────────────────────────────────────── */
.area{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:clamp(30px,4vw,64px); align-items:center }
.area h2{ margin:0 0 15px; color:var(--fg) }
.area h2 em{ color:var(--accent); font-style:italic }
/* The three the accounts themselves name, set in the display italic. The state
   change is the ink; the full stop stays accent so the row keeps its rhythm. */
.towns--big{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px clamp(16px,2.2vw,28px);
  border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  padding:clamp(18px,2.2vw,26px) 0; margin:0; list-style:none;
}
.town{
  font-family:var(--disp); font-weight:800; font-style:italic; color:var(--fg);
  font-size:clamp(1.4rem,.9rem + 1.4vw,2.2rem); line-height:1.3; letter-spacing:-.025em;
}
.town:hover{ color:var(--accent) }
.town i{ font-style:normal; color:var(--accent) }
/* Every town as visible text, never a hidden keyword list. */
.towns{
  margin:15px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 0;
  font-size:.95rem; color:var(--fg-3);
}
.towns li + li::before{ content:'·'; margin:0 9px; color:var(--fg-4) }
.map{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--edge); background:var(--panel) }
.map iframe{ display:block; width:100%; aspect-ratio:4/3; min-height:330px; border:0; filter:grayscale(.3) contrast(1.03) }
.map figcaption{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:13px 16px; border-top:1px solid var(--edge) }
.map figcaption b{ display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:.98rem; color:var(--fg) }
.map figcaption b svg{ color:var(--accent) }
.map figcaption span{ font-size:.86rem; color:var(--fg-3) }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:clamp(24px,3vw,42px) clamp(30px,4vw,64px) }
.qa{ position:relative; padding-top:17px }
.qa h3{ margin:0 0 7px; font-size:1.1rem; line-height:1.22; letter-spacing:-.015em }
.qa p{ margin:0; font-size:.96rem; line-height:1.6; color:var(--dark-3) }

/* ── the booking band ────────────────────────────────────────────────────── */
.book{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); gap:clamp(16px,2vw,26px); align-items:start }
.formwrap{ background:#fff; border-radius:var(--radius); padding:clamp(22px,2.6vw,34px); border:1px solid var(--edge-lt) }
.form{ display:grid; gap:13px }
.form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:13px }
.fld{ display:grid; gap:5px }
.fld > span{ font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dark-2) }
/* 16px flat, never a rem below it: anything under 16px makes iOS zoom on focus */
.fld input,.fld select,.fld textarea{
  font:inherit; font-size:16px; color:var(--dark); background:#fff;
  border:1px solid rgba(26,25,23,.22); border-radius:var(--radius); padding:12px 13px; width:100%;
}
/* appearance:none takes the native arrow off with the native styling, so the
   mark has to be drawn back on: without it the control is a text input as far
   as the eye is concerned. Same chevron as the icon set, at the same weight,
   as a data URI so it costs no request. */
.fld select{
  padding-right:40px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1.4 1.4L6.5 6.5l5.1-5.1' fill='none' stroke='%231D1B17' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.fld select:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1.4 1.4L6.5 6.5l5.1-5.1' fill='none' stroke='%239C7314' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.fld textarea{ resize:vertical }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--accent-ink); box-shadow:0 0 0 3px rgba(231,194,92,.35); outline:none }
.fld.is-bad input{ border-color:#c0392b }
.fine{ margin:0; font-size:.82rem; line-height:1.55; color:var(--dark-3) }
.fine a{ color:var(--accent-deep); font-weight:600 }
.thanks{ display:grid; gap:9px; justify-items:start }
.thanks__c{ display:grid; place-items:center; width:44px; height:44px; border-radius:99px; background:var(--accent); color:var(--ink) }
.thanks h3{ font-size:1.3rem; letter-spacing:-.02em }
.thanks p{ margin:0; color:var(--dark-3); font-size:.96rem }
.thanks p a{ color:var(--accent-deep); font-weight:600 }
.thanks button{ background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--accent-deep); text-decoration:underline; text-underline-offset:4px; cursor:pointer }

.aside{ background:var(--panel-2); color:var(--fg); border-radius:var(--radius); padding:clamp(22px,2.6vw,34px); position:relative; overflow:hidden }
/* The mark alone, never the lockup: a wide lockup bled into a corner is a thin
   strip, the mark is a shape. */
.aside__mascot{ right:-26px; top:-30px; width:190px; height:auto; opacity:.1; pointer-events:none; transform:rotate(8deg) }
.aside > *{ position:relative }
.aside > .aside__mascot{ position:absolute }
.aside__live{
  margin:0 0 4px; display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}
.aside__live i{ width:7px; height:7px; border-radius:99px; background:#5aa46a }
.aside__tel{
  display:inline-block; margin:7px 0 4px; font-family:var(--disp); font-weight:700;
  font-variant-numeric:tabular-nums; font-size:clamp(1.7rem,1.1rem + 1.8vw,2.5rem);
  line-height:1.06; letter-spacing:-.025em;
}
.aside__note{ margin:0 0 19px; font-size:.9rem; color:var(--fg-3) }
.aside__acts{ display:grid; gap:9px; margin-bottom:21px }
.aside .facts{ margin:0 }
.aside .facts > div{ grid-template-columns:minmax(0,92px) minmax(0,1fr); padding:11px 0; font-size:.9rem }
.aside .facts dd{ color:var(--fg-3); font-size:.9rem }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{ background:var(--panel); color:var(--fg-3); padding:clamp(50px,5.4vw,76px) 0 0; overflow:hidden }
.foot__in{ padding-inline:var(--gut) }
.foot__cols{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:clamp(26px,3vw,48px) }
.foot__cols h2{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 13px; line-height:1.4 }
.foot__cols a{ display:block; margin:0 0 8px; font-size:.88rem }
.foot__brand img{ width:min(100%,230px); height:auto; margin-bottom:17px }
.foot__tag{ margin:0 0 10px; font-family:var(--disp); font-weight:700; font-size:1.06rem; line-height:1.25; letter-spacing:-.015em; color:var(--fg); max-width:22ch }
.foot__brand p:last-child{ margin:0; font-size:.88rem; line-height:1.55; max-width:32ch }
.foot__nap p{ margin:0 0 8px; font-size:.88rem; line-height:1.5 }
.foot__nap a{ display:block; width:fit-content }
.foot__legal{
  max-width:var(--max); margin:clamp(30px,3.4vw,44px) auto 0; display:flex; flex-wrap:wrap;
  gap:8px 26px; justify-content:space-between; padding:17px 0; border-top:1px solid var(--edge); font-size:.79rem;
}
.foot__legal p{ margin:0 }

/* The closing move. The name at the full measure, clipped by the bottom of the
   page so it is cut by the floor it stands on. Set in the wordmark's own heavy
   italic. The divisor is the tuning knob: twelve characters of a wide face, so
   it runs low. Alpha stays between .07 and .09 or it stops being a watermark. */
.foot__sig{ width:min(100% - var(--gut) * 2,1420px); margin:.5rem auto 0; line-height:.9; overflow:hidden }
.foot__sig span{
  display:block; text-align:center; white-space:nowrap; font-family:var(--sig);
  font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:calc(min(100vw - var(--gut) * 2,1420px) / 7.35);
  letter-spacing:-.035em; color:rgba(242,241,238,.075); transform:translateY(.1em);
}

/* ── the sticky mobile call bar ──────────────────────────────────────────── */
.callbar,.callbar__pad{ display:none }

/* ── the estimate dialog ─────────────────────────────────────────────────── */
/* A real <dialog>, so the focus trap, the Escape key, the inert background and
   the return of focus to whatever opened it are the browser's job rather than
   another two hundred lines here. Where <dialog> is missing the links are left
   alone and scroll to the booking band, which carries the same form. */
.bookdlg{
  width:min(560px,calc(100vw - 2rem));
  max-height:min(88svh,900px);
  padding:0; border:0; border-radius:var(--radius);
  background:var(--paper); color:var(--dark);
  box-shadow:0 30px 80px rgba(8,8,7,.62);
}
.bookdlg::backdrop{ background:rgba(8,8,7,.74) }
/* The scroll lock, as a selector rather than as state. Setting overflow on open
   and clearing it on close means trusting the `close` event to arrive for every
   way a dialog can be dismissed, and a lock left behind by an event that never
   fired is a page that can no longer be scrolled at all. This stops matching
   the instant the dialog closes, whichever way it closed. Where `:has` is not
   supported the page simply scrolls behind the modal, which is a blemish
   rather than a trap. */
body:has(.bookdlg[open]){ overflow:hidden }
.bookdlg__in{ position:relative; padding:clamp(24px,4vw,36px) }
.bookdlg h2{ margin:0 0 10px; padding-right:46px; font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem); line-height:1.08; letter-spacing:-.025em }
.bookdlg__lede{ margin:0 0 clamp(18px,2.4vw,24px); font-size:.97rem; line-height:1.6; color:var(--dark-3) }
.bookdlg__tel{ margin:15px 0 0; font-size:.93rem; color:var(--dark-3) }
.bookdlg__close{
  position:absolute; top:clamp(12px,1.6vw,18px); right:clamp(12px,1.6vw,18px); z-index:1;
  display:grid; place-items:center; width:40px; height:40px; padding:0; cursor:pointer;
  border:1px solid var(--edge-lt); border-radius:var(--radius);
  background:transparent; color:var(--dark-2);
}
.bookdlg__close:hover{ background:var(--dark); border-color:var(--dark); color:var(--paper) }
@keyframes ra-dlg{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.bookdlg[open]{ animation:ra-dlg .3s var(--e-out) }

/* ── the lightbox ────────────────────────────────────────────────────────── */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(8,8,7,.95); display:grid; place-items:center; padding:clamp(16px,4vw,48px) }
.lb__fig{ margin:0; max-width:min(1100px,100%); display:grid; gap:12px; justify-items:center }
.lb__fig img{ max-height:78svh; width:auto; border-radius:var(--radius) }
.lb__fig figcaption{ font-family:var(--disp); font-weight:700; font-size:.98rem; color:var(--fg); text-align:center }
.lb button{ position:absolute; background:rgba(18,17,16,.6); border:1.5px solid rgba(242,241,238,.32); color:var(--fg); border-radius:var(--radius); cursor:pointer; line-height:1 }
.lb button:hover{ background:var(--fg); color:var(--dark) }
.lb__close{ top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); width:46px; height:46px; font-size:1.7rem }
.lb__nav{ top:50%; transform:translateY(-50%); width:46px; height:64px; font-size:2rem }
.lb__nav--prev{ left:clamp(8px,2vw,22px) }
.lb__nav--next{ right:clamp(8px,2vw,22px) }

/* ── entrance ────────────────────────────────────────────────────────────── */
/* Content is visible by default. Nothing starts at opacity 0. The entrance is a
   16px translate that JS arms and then releases, with a failsafe, so a stranded
   block is fully readable rather than invisible. */
.js .rv{ transform:translateY(16px); transition:transform .7s var(--e-out) }
.js .rv.in{ transform:none }
@media (prefers-reduced-motion:reduce){ .js .rv{ transform:none } }

/* ── narrow ──────────────────────────────────────────────────────────────── */
@media (max-width:1060px){
  .hdr{ --hud-tall:78px; --hud-short:62px; --mark-tall:42px; --mark-short:36px }
  /* With no JS the menu cannot open, so the links stay out in the bar instead */
  .js .hdr__nav,.js .hdr__tel{ display:none !important }
  .js .hdr__burger{ margin-left:auto; display:flex; align-items:center; gap:9px; flex:none }
  .hdr__nav{ flex-wrap:wrap; white-space:normal; justify-content:flex-end }
  .hero__card{ display:none }
  .hero__ghost{ display:flex }

  /* The extra band height is a desktop fix. On a phone the band is already
     narrow enough that the clip reads, and at 72vh it would eat the screen. */
  .vband{ min-height:clamp(300px,48vh,470px) }
  .vband--tall{ min-height:clamp(340px,56vh,540px) }

    .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--ink);
    border-top:1px solid var(--edge); padding:10px 10px calc(16px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:2fr 3fr; gap:8px; box-shadow:0 -8px 24px rgba(8,8,7,.45);
    transition:transform .42s var(--e-out),opacity .28s ease,visibility 0s linear .42s;
  }
  /* The band the bar lands on, so it never crops the footer wordmark. */
  .callbar__pad{ display:block; height:calc(82px + env(safe-area-inset-bottom)); background:var(--ink) }
  /* Visibility, not just opacity: an offstage bar must leave the tab order. */
  .js .callbar{ transform:translateY(115%); opacity:0; pointer-events:none; visibility:hidden }
  .js .callbar.is-here{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition:transform .42s var(--e-out),opacity .28s ease,visibility 0s }
  .callbar .btn{ font-size:.94rem; padding:14px 10px }
}
@media (max-width:640px){
  .hero__eyebrow{ font-size:.66rem; letter-spacing:.15em }
  .svc__d{ display:none }
  .lb__nav{ width:40px; height:54px }
}
@media (max-width:390px){
  .hdr{ --mark-tall:36px; --mark-short:32px }
  .hdr__burger .btn{ padding-inline:13px }
}