/* ============================================================================
 * Living Waters — widget component library  (handle: lw-widgets)
 * Depends on: lw-tokens
 *
 * Ported from the client-approved mockup (mockups/index.html) and made
 * widget-agnostic. Anything here can appear on any page.
 *
 * ⚠️ NAMESPACE: templates.css loads AFTER this file and declares it as a
 * dependency. Any class name reused there silently overrides the widget of the
 * same name site-wide. Before naming a class there, grep this file.
 * ========================================================================== */

/* ---------------------------------------------------------------- Layout -- */
.lw-section{ position:relative; padding-block:clamp(72px,11vw,var(--lw-s9)); }
.lw-section--flush{ padding-block:0; }
.lw-wrap{ max-width:var(--lw-maxw); margin-inline:auto; padding-inline:var(--lw-gut); }
.lw-wrap--narrow{ max-width:var(--lw-maxw-narrow); margin-inline:auto; padding-inline:var(--lw-gut); }
.lw-wrap--full{ width:100%; }

.lw-rule{ height:1px; background:var(--lw-line); border:0; margin:0; }
.lw-wavewrap{ line-height:0; opacity:.75; color:var(--lw-blue); }
.lw-wave{ display:block; width:100%; height:auto; }

.lw-grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
}
.lw-on-dark .lw-grain{ mix-blend-mode:soft-light; }

/* ------------------------------------------------------------ Typography -- */
.lw-h-xl,.lw-h-lg,.lw-h-md,.lw-h-sm{
  font-family:var(--lw-display); font-weight:400; margin:0;
  font-variation-settings:'SOFT' 0,'WONK' 1; color:var(--lw-ink);
}
.lw-h-xl{ font-size:var(--lw-h-xl); line-height:.96; letter-spacing:-.035em; }
.lw-h-lg{ font-size:var(--lw-h-lg); line-height:1.02; letter-spacing:-.03em; }
.lw-h-md{ font-size:var(--lw-h-md); line-height:1.1;  letter-spacing:-.025em; }
.lw-h-sm{ font-size:var(--lw-h-sm); line-height:1.2;  letter-spacing:-.018em; }
.lw-h-xl em,.lw-h-lg em,.lw-h-md em,.lw-h-sm em{
  font-style:italic; color:var(--lw-green-dk); font-variation-settings:'SOFT' 0,'WONK' 1;
}

.lw-lede{ font-size:var(--lw-lede); line-height:1.58; color:var(--lw-ink-soft); margin:0; }
.lw-body-lg{ font-size:var(--lw-body-lg); line-height:1.68; color:var(--lw-ink-soft); }
.lw-small{ font-size:14px; line-height:1.6; color:var(--lw-muted); }
.lw-tiny{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--lw-faint); font-weight:500; }

.lw-eyebrow{
  font-family:var(--lw-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lw-green-dk);
  display:block; line-height:1.7; margin:0;
}
/* Block flow, not flex — a flex eyebrow wraps into two columns on narrow
   screens instead of reading as one sentence. */
.lw-eyebrow::before{
  content:""; display:inline-block; width:26px; height:1px;
  background:currentColor; opacity:.6; vertical-align:middle;
  margin-right:13px; margin-bottom:2px;
}
.lw-eyebrow--solo::before{ display:none; }

.lw-head{ --lw-head-mx:left; }
.lw-head__h{ margin:22px 0 0; }
.lw-head .lw-lede{ margin-top:var(--lw-s3); max-width:56ch; }
.lw-head[style*="center"] .lw-head__h,
.lw-head[style*="center"] .lw-lede{ margin-inline:auto; }

/* --- The gold fill-in system ------------------------------------------------
   Every fact only the client can supply is written in [brackets]. Highlighted
   for editors, invisible styling for the public. */
.lw-fill{ position:relative; }
.lw-show-fills .lw-fill{
  color:var(--lw-amber);
  box-shadow:inset 0 -1px 0 var(--lw-amber-rule);
}
/* There is deliberately no `.lw-on-dark` variant here any more. Both values are
   tokens, and every dark context redefines them in tokens.css — which is the
   only way the KNOCKED-OUT HEADER could be covered, since it is dark by virtue
   of `:has()` and carries no ground class of its own. A `[phone]` in the header
   pill over the immersive hero was #8A6318 on dark green: about 1.6:1. */

/* --------------------------------------------------------------- Buttons -- */
.lw-btn{
  --bg:var(--lw-green-dk); --fg:#fff;
  display:inline-flex; align-items:center; gap:12px;
  background:var(--bg); color:var(--fg);
  font-family:var(--lw-sans); font-size:15px; font-weight:500; letter-spacing:-.005em;
  padding:16px 26px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; position:relative;
  transition:transform .5s var(--lw-ease), background .35s ease, color .35s ease, box-shadow .5s var(--lw-ease);
  will-change:transform;
}
.lw-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(16,48,46,.5); color:var(--fg); }
.lw-btn .lw-arw{ transition:transform .5s var(--lw-ease); }
.lw-btn:hover .lw-arw{ transform:translateX(5px); }
.lw-btn--green:hover{ background:var(--lw-green-dr); }
.lw-btn--ink{ --bg:var(--lw-ink); }
.lw-btn--white{ --bg:#fff; --fg:var(--lw-ink); }
.lw-btn--ghost{
  --bg:transparent; --fg:var(--lw-ink);
  border-color:var(--lw-line-strong); box-shadow:var(--lw-shadow-sm);
}
.lw-btn--ghost:hover{ border-color:var(--lw-ink); background:transparent; }

/* ⚠️ ASTRA BUTTON-FILL GUARD.
   Astra styles every <button> with background:var(--ast-global-color-1) on
   :hover/:focus/:active — and an element keeps focus after a click, so it stays
   filled. Class+pseudo (0,2,0) beats Astra's (0,1,1). Any NEW custom <button>
   on this site needs the same three lines. */
.lw-btn:hover,.lw-btn:focus,.lw-btn:active,.lw-btn:focus-visible,
button.lw-btn:hover,button.lw-btn:focus,button.lw-btn:active{
  background:var(--bg); color:var(--fg); box-shadow:0 14px 34px -14px rgba(16,48,46,.5);
}
.lw-btn:focus-visible{ outline:2px solid var(--lw-green-dk); outline-offset:3px; }

.lw-ulink{
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  font-weight:500; font-size:15px; position:relative; padding-bottom:3px;
  color:var(--lw-green-dk);
}
.lw-ulink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--lw-ease);
}
.lw-ulink:hover::after{ transform:scaleX(1); transform-origin:left; }
.lw-ulink .lw-arw{ transition:transform .5s var(--lw-ease); }
.lw-ulink:hover .lw-arw{ transform:translateX(4px); }

.lw-actions{ margin-top:var(--lw-s4); display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ---------------------------------------------------------------- Reveal -- */
.lw-rv{ opacity:0; transition:opacity var(--lw-dur) var(--lw-ease), transform var(--lw-dur) var(--lw-ease), clip-path 1.1s var(--lw-ease); }
[data-lw-pattern="up"]    .lw-rv{ transform:translateY(26px); }
[data-lw-pattern="scale"] .lw-rv{ transform:scale(.965); }
[data-lw-pattern="clip"]  .lw-rv{ clip-path:inset(0 0 100% 0); opacity:1; }
.lw-rv.is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
/* Animation gate: if JS never runs, nothing is ever hidden. */
html:not(.lw-js) .lw-rv{ opacity:1 !important; transform:none !important; clip-path:none !important; }

/* -------------------------------------------------------------- The house -- */
.lw-house{ width:100%; height:auto; display:block; }
.lw-draw{
  stroke:var(--lw-ink); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.9s var(--lw-ease);
}
.lw-draw.lw-thin{ stroke-width:1; opacity:.42; }
.is-drawn .lw-draw{ stroke-dashoffset:0; }
.lw-pane{ fill:var(--lw-amber-lit); opacity:0; transition:opacity 1s ease; }
.is-drawn .lw-pane{ opacity:.5; }
.is-drawn .lw-w1{ transition-delay:1.5s; }
.is-drawn .lw-w2{ transition-delay:1.65s; }
.is-drawn .lw-w3{ transition-delay:1.9s; }
.is-drawn .lw-w4{ transition-delay:2.1s; }
.lw-glow{ fill:var(--lw-amber-lit); opacity:0; transition:opacity 1.4s ease 2.1s; }
.is-drawn .lw-glow{ opacity:.13; }

/* ------------------------------------------------------------------ Hero -- */
.lw-hero{
  --lw-edge:max(0px, calc((100% - var(--lw-maxw)) / 2));
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden; padding-top:120px;
  background:
    radial-gradient(120% 80% at 78% 88%, rgba(12,132,166,.09), transparent 62%),
    radial-gradient(90% 70% at 10% 4%, rgba(36,144,120,.10), transparent 60%);
  background-color:var(--lw-paper);
}
.lw-hero__grid{
  max-width:var(--lw-maxw); margin-inline:auto; width:100%; padding-inline:var(--lw-gut);
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1.22fr);
  gap:var(--lw-s4); align-items:end; position:relative; z-index:3; flex:1;
}
.lw-hero__copy{ padding-bottom:clamp(40px,7vh,92px); max-width:560px; }
.lw-hero__copy .lw-eyebrow{ font-size:11px; letter-spacing:.16em; }
.lw-hero__copy h1{ margin:22px 0 0; }
.lw-hero__art{
  position:relative; align-self:end; width:100%;
  margin-right:calc((var(--lw-gut) + var(--lw-edge)) * -1); margin-bottom:-1px;
}
.lw-hero__sidewalk{ position:relative; z-index:4; height:1px; background:var(--lw-line); width:100%; }
.lw-hero__sidewalk::after{ content:""; position:absolute; left:0; right:0; top:14px; height:1px; background:var(--lw-line-soft); }
.lw-hero__foot{
  position:relative; z-index:5; width:100%; max-width:var(--lw-maxw); margin-inline:auto;
  padding:26px var(--lw-gut) 22px;
  display:grid; grid-template-columns:1fr auto; gap:var(--lw-s4); align-items:center;
}
.lw-hero__meta{ display:flex; gap:var(--lw-s4); flex-wrap:wrap; align-items:center; }
.lw-hero__meta span{ font-size:13px; color:var(--lw-muted); display:flex; align-items:center; gap:9px; }
.lw-hero__meta span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--lw-blue); opacity:.65; }
.lw-scrollcue{ display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--lw-faint); }
.lw-scrollcue i{ display:block; width:1px; height:26px; background:linear-gradient(var(--lw-faint),transparent); animation:lw-cue 2.4s var(--lw-ease) infinite; }
@keyframes lw-cue{
  0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}
}

/* -------------------------------------------------- Hero B — immersive ---- */
/* One of the client's own photographs, full-bleed, with the copy knocked out
   over it. Three planes, all driven by CSS custom properties that widgets.js
   writes — so with JS off, reduced motion on, or the file failing to load, the
   hero is a correctly-composed still photograph rather than a broken one.
   Version A is untouched: everything here is behind .lw-hero--immersive. */
.lw-hero--immersive{
  background-color:var(--lw-deep);
  padding-top:clamp(120px,14vh,168px);
  perspective:1200px;
  perspective-origin:50% 42%;
  isolation:isolate;
  --lw-scrim-l:.80; --lw-scrim-b:.74;   /* overwritten by the scrim modifier */
}
.lw-hero--immersive.lw-hero--nobg{ background-color:var(--lw-paper); }

.lw-hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* The photograph's own plane. Inset past the edges so a few degrees of tilt
   never exposes the ground behind it. */
.lw-hero__plane{
  position:absolute; inset:-7%;
  transform-style:preserve-3d;
  transform:
    translate3d(0, var(--lw-hero-y, 0px), 0)
    rotateX(var(--lw-hero-rx, 0deg))
    rotateY(var(--lw-hero-ry, 0deg));
}
[data-lw-hero3d="1"] .lw-hero__plane{ will-change:transform; }

/* (0,2,1), for the same reason as the media frames above — see §8 #20. */
.lw-hero__plane > img.lw-hero__bgimg{
  position:absolute; inset:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center;
  display:block;
}
.lw-hero--focal-top    .lw-hero__plane > img.lw-hero__bgimg{ object-position:center 20%; }
.lw-hero--focal-bottom .lw-hero__plane > img.lw-hero__bgimg{ object-position:center 80%; }
.lw-hero--focal-left   .lw-hero__plane > img.lw-hero__bgimg{ object-position:20% center; }
.lw-hero--focal-right  .lw-hero__plane > img.lw-hero__bgimg{ object-position:80% center; }

/* The warm grade — identical treatment to the media band, decision #29. */
.lw-hero__grade{
  position:absolute; inset:0;
  background-color:#C8873A;
  mix-blend-mode:soft-light; opacity:.14;
}
.lw-hero__bg:has(.lw-hero__grade) .lw-hero__bgimg{ filter:saturate(.92) contrast(.98); }

/* The legibility scrim, in two parts. White type over a photograph is only
   accessible because of it, and the three strengths are the control — not an
   opacity an editor can drag to zero.
   This layer handles only what is fixed to the FRAME: darkening under the
   transparent header, and under the credential strip at the foot. */
.lw-hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top,
      rgba(7,47,44,var(--lw-scrim-b)) 0%,
      rgba(7,47,44,0) 40%),
    linear-gradient(to bottom, rgba(7,47,44,.24) 0%, rgba(7,47,44,0) 20%);
}

/* ⚠️ THE VEIL BEHIND THE TEXT IS ANCHORED TO THE COPY, NOT TO THE VIEWPORT.
   It was a left-weighted percentage gradient across the whole frame, which is
   correct at 1512 and wrong at 1900: the copy is centred inside a 1320px
   content box, so the wider the window the further from the left edge the text
   sits — and by 1900px the lede was sitting in the middle of the picture, over
   sunlit ferns, where a gradient that faded out at 68% of the VIEWPORT had
   already reached zero. The text was unreadable and the scrim control could not
   fix it, because the scrim was in the wrong place.
   Anchoring it to .lw-hero__copy means it tracks the content box at every
   width, and the right-hand side of the photograph stays close to true colour —
   which is the whole point of version B. It also rides the copy's own transform,
   so it stays put under the text while the two planes move. */
.lw-hero--immersive .lw-hero__copy{ position:relative; }
.lw-hero--immersive .lw-hero__copy::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-12vh -58% -10vh -48vw;
  background:linear-gradient(to right,
    rgba(7,47,44,var(--lw-scrim-l)) 0%,
    rgba(7,47,44,var(--lw-scrim-l)) 78%,
    rgba(7,47,44,calc(var(--lw-scrim-l) * .45)) 89%,
    rgba(7,47,44,0) 100%);
}
/* The right of the frame is deliberately left almost untouched. The photograph
   is the client's own house and the point of version B is that you can see it —
   a scrim over the whole frame turns a real porch into a green wash, which is
   this widget's most likely failure. */
.lw-hero--scrim-soft    { --lw-scrim-l:.66; --lw-scrim-b:.48; }
.lw-hero--scrim-standard{ --lw-scrim-l:.80; --lw-scrim-b:.58; }
.lw-hero--scrim-strong  { --lw-scrim-l:.90; --lw-scrim-b:.72; }

/* A single soft highlight that follows the pointer. Pointer devices only, and
   quiet enough that it reads as light on glass rather than as an effect. */
.lw-hero__glare{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(40% 48% at var(--lw-gx,50%) var(--lw-gy,40%),
    rgba(255,255,255,.11), transparent 70%);
  transition:opacity .7s var(--lw-ease);
}
@media (hover:hover) and (pointer:fine){
  .lw-hero--immersive:hover .lw-hero__glare{ opacity:1; }
}

/* The copy rides its own plane, nearer the viewer and moving against the
   photograph. Text gets a wide, very soft shadow — it does nothing visible on
   the scrim and saves the headline where the frame is brightest. */
.lw-hero--immersive .lw-hero__grid{ z-index:3; transform-style:preserve-3d; }
.lw-hero--immersive .lw-hero__copy{
  transform:
    translate3d(0, var(--lw-hero-cy, 0px), 0)
    rotateX(var(--lw-hero-crx, 0deg))
    rotateY(var(--lw-hero-cry, 0deg));
}
[data-lw-hero3d="1"] .lw-hero__copy{ will-change:transform; }
.lw-hero__grid--solo{ grid-template-columns:minmax(0,1fr); }
.lw-hero__grid--solo .lw-hero__copy{
  max-width:min(760px,92%);
  padding-bottom:clamp(48px,9vh,116px);
}
.lw-hero--immersive .lw-hero__h,
.lw-hero--immersive .lw-hero__lede{ text-shadow:0 1px 30px rgba(7,47,44,.42); }
.lw-hero--immersive .lw-hero__lede{ max-width:600px; }
.lw-hero--immersive .lw-hero__meta span::before{ background:var(--lw-mint); opacity:.9; }
.lw-hero--immersive .lw-hero__foot{
  border-top:1px solid var(--lw-line-dark);
  margin-top:auto;
}

/* Narrow screens: the copy fills the width, so a left-weighted scrim protects
   nothing — the headline and the lede sit over whatever the middle of the
   frame happens to be, and on this porch that is its brightest part. The veil
   has to be even and it has to be heavier than the desktop one. There is no
   arrangement that keeps both the full photograph and readable body text in a
   390px column; the text wins. */
@media (max-width:860px){
  /* The copy fills the width here, so a veil anchored to it has nothing to
     anchor against — it would simply be the whole frame. The global one takes
     over, even and heavier. */
  .lw-hero--immersive .lw-hero__copy::before{ display:none; }
  .lw-hero__scrim{
    background:linear-gradient(to top,
      rgba(7,47,44,calc(var(--lw-scrim-b) + .26)) 0%,
      rgba(7,47,44,calc(var(--lw-scrim-b) + .12)) 58%,
      rgba(7,47,44,.30) 100%);
  }
  .lw-hero__plane{ inset:-3%; }
  .lw-hero__grid--solo .lw-hero__copy{ max-width:none; }
  .lw-hero--immersive .lw-hero__h,
  .lw-hero--immersive .lw-hero__lede{ text-shadow:0 1px 22px rgba(7,47,44,.55); }
}

@media (prefers-reduced-motion:reduce){
  .lw-hero__plane,
  .lw-hero--immersive .lw-hero__copy{ transform:none !important; }
  .lw-hero__glare{ display:none; }
}

/* ------------------------------------------------------------- Page hero -- */
/* The section is flush and the hero owns its own rhythm: an interior hero has to
   clear the FIXED header, and that clearance belongs to the hero rather than to
   every section on the page. */
.lw-section--phero{ padding-block:0; }
.lw-phero{ padding-block:clamp(120px,16vh,200px) clamp(48px,7vw,96px); }
/* `balance` stops a display headline ending on a one-word line. Unsupported
   browsers simply wrap normally — there is no fallback to write. */
.lw-phero .lw-h-xl,.lw-phero .lw-h-lg,.lw-phero .lw-h-md{ margin:22px 0 0; text-wrap:balance; }
.lw-phero__lede{ margin-top:var(--lw-s3); max-width:58ch; }
.lw-phero .lw-actions{ margin-top:var(--lw-s4); }
/* A second call block further down the page has no header to clear, so it takes
   the ordinary section rhythm instead. */
.lw-phero--mid{ padding-block:clamp(72px,11vw,var(--lw-s9)); }

.lw-phero__grid--split{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(32px,5vw,var(--lw-s7)); align-items:center;
}
.lw-phero__media{ margin:0; }
.lw-phero__media .lw-media__frame{
  border-radius:var(--lw-radius-lg); aspect-ratio:5/4;
}

/* The fact strip. Reads as a row of things you could check rather than as
   marketing, so: no cards, no shadows, one hairline above it. */
.lw-phero__facts{
  list-style:none; margin:clamp(40px,5vw,var(--lw-s6)) 0 0; padding:var(--lw-s3) 0 0;
  border-top:1px solid var(--lw-line);
  display:flex; flex-wrap:wrap; gap:14px clamp(24px,4vw,var(--lw-s5));
}
.lw-phero__facts li{
  display:flex; gap:10px; align-items:baseline;
  font-size:14px; color:var(--lw-ink-soft);
}
.lw-phero__facts .lw-icon{ flex:none; color:var(--lw-green-dk); transform:translateY(2px); }

/* ------------------------------------------------------------- Call card -- */
/* Used by the page hero and the enquiry section. The number is the largest
   thing in it on purpose — on /referrals it IS the page. */
.lw-call{
  margin-top:var(--lw-s4); padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);
  border:1px solid var(--lw-line-strong); border-radius:var(--lw-radius-lg);
  background-color:var(--lw-paper-2); display:inline-block; max-width:100%;
}
.lw-on-dark .lw-call{ background-color:rgba(255,255,255,.05); }
.lw-call__lbl{
  margin:0; display:flex; align-items:center; gap:9px;
  font-family:var(--lw-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lw-green-dk);
}
.lw-call__num{
  display:inline-block; margin-top:8px; text-decoration:none;
  font-family:var(--lw-display); font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.05; letter-spacing:-.035em; color:var(--lw-ink);
  border-bottom:1px solid var(--lw-line-strong); padding-bottom:4px;
  transition:border-color .4s ease;
}
a.lw-call__num:hover,a.lw-call__num:focus-visible{ border-bottom-color:var(--lw-green); }
.lw-call__who{
  margin:12px 0 0; font-family:var(--lw-sans); font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lw-muted);
}
.lw-call__mail{ margin:10px 0 0; font-size:14px; }
.lw-call__mail a{ color:var(--lw-green-dk); text-decoration:none; border-bottom:1px solid var(--lw-line-strong); }
.lw-call__mail a:hover,.lw-call__mail a:focus-visible{ border-bottom-color:var(--lw-green); }
.lw-call__note{ margin:12px 0 0; font-size:14px; color:var(--lw-ink-soft); max-width:44ch; }
.lw-call .lw-ulink{ margin-top:14px; }

/* -------------------------------------------------------------- Link rows -- */
.lw-rows{ border-top:1px solid var(--lw-line); }
.lw-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--lw-s3); align-items:center;
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--lw-line);
  text-decoration:none; position:relative; overflow:hidden; color:inherit;
}
.lw-row::before{
  content:""; position:absolute; left:calc(var(--lw-gut) * -1); right:calc(var(--lw-gut) * -1);
  top:0; bottom:0; background:var(--lw-paper); transform:scaleY(0); transform-origin:bottom;
  transition:transform .6s var(--lw-ease); z-index:0;
}
.lw-row:hover::before{ transform:scaleY(1); transform-origin:top; }
.lw-row > *{ position:relative; z-index:1; }
.lw-row__num{ font-family:var(--lw-display); font-size:13px; color:var(--lw-faint); width:28px; font-variant-numeric:tabular-nums; }
.lw-row__txt{ display:flex; flex-direction:column; gap:4px; }
.lw-row__txt b{
  font-family:var(--lw-display); font-weight:400;
  font-size:clamp(1.35rem,2.9vw,2.05rem); letter-spacing:-.025em; line-height:1.12;
  transition:transform .6s var(--lw-ease); transform-origin:left;
}
.lw-row:hover .lw-row__txt b{ transform:translateX(8px); }
.lw-row__txt small{ font-size:14px; color:var(--lw-muted); transition:transform .6s var(--lw-ease) .04s; transform-origin:left; }
.lw-row:hover .lw-row__txt small{ transform:translateX(8px); }
.lw-row__go{ display:flex; align-items:center; gap:11px; font-size:14px; font-weight:500; color:var(--lw-green-dk); white-space:nowrap; }
.lw-row__go i{
  display:grid; place-items:center; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--lw-line);
  transition:background .5s var(--lw-ease), border-color .5s ease, transform .5s var(--lw-ease);
}
.lw-row:hover .lw-row__go i{ background:var(--lw-green-dk); border-color:var(--lw-green-dk); transform:rotate(-45deg); color:#fff; }

/* --------------------------------------------------------- Dot comparison -- */
.lw-dots{ display:grid; grid-template-columns:1fr; gap:var(--lw-s5); max-width:420px; margin-left:auto; width:100%; }
.lw-dotcard .lw-dotcard__lab{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--lw-line);
}
.lw-dotcard__t{ font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.lw-dotcard__n{ font-family:var(--lw-display); font-size:clamp(2rem,4vw,3.1rem); line-height:1; letter-spacing:-.04em; }
.lw-dotgrid{ display:grid; grid-template-columns:repeat(18,1fr); gap:clamp(5px,1.2vw,9px); }
.lw-dotgrid i{
  aspect-ratio:1; border-radius:50%; display:block; background:var(--lw-ink); opacity:.16;
  transform:scale(0); transition:transform .5s var(--lw-ease);
}
.lw-dotgrid.is-on i{ transform:scale(1); }
.lw-dotcard--mine .lw-dotcard__n{ color:var(--lw-green-dk); }
.lw-dotcard--mine .lw-dotgrid i{ background:var(--lw-green); opacity:1; box-shadow:0 3px 9px -3px rgba(36,144,120,.75); }
.lw-dotcard__note{ margin-top:16px; font-size:13.5px; color:var(--lw-muted); }

/* ------------------------------------------------------------ Ruled list -- */
.lw-rlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--lw-line); }
.lw-rlist li{
  padding:20px 0; border-bottom:1px solid var(--lw-line);
  font-family:var(--lw-display); font-size:clamp(1.15rem,2.1vw,1.55rem); letter-spacing:-.02em;
  line-height:1.24; display:flex; gap:20px; align-items:baseline;
  transition:padding-left .55s var(--lw-ease);
}
.lw-rlist li:hover{ padding-left:14px; }
.lw-rlist li::before{
  content:""; width:16px; height:1px; background:var(--lw-blue); flex:none;
  transform:translateY(-6px); transition:width .55s var(--lw-ease);
}
.lw-rlist li:hover::before{ width:26px; }
/* min-width:0 so a long unbroken run inside the line can still wrap rather than
   forcing the flex row wider than its container. */
.lw-rlist__t{ min-width:0; }

.lw-note{
  margin-top:var(--lw-s4); padding:var(--lw-s4); border-left:2px solid var(--lw-green);
  background:linear-gradient(90deg,rgba(36,144,120,.07),transparent 80%);
  background-color:transparent; /* gradients are background-IMAGES — always give a floor */
}
.lw-note p{ font-family:var(--lw-display); font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1.28; letter-spacing:-.02em; margin:0; }
.lw-note p + p{ margin-top:10px; color:var(--lw-green-dk); }

/* ------------------------------------------------------------- Long rows -- */
.lw-longs{ margin-top:clamp(40px,6vw,var(--lw-s6)); display:grid; gap:var(--lw-s5); }
.lw-long{
  display:grid; grid-template-columns:88px 1fr minmax(0,1fr);
  gap:clamp(24px,4vw,var(--lw-s6)); padding-top:var(--lw-s4);
  border-top:1px solid var(--lw-line); align-items:start;
}
.lw-long__idx{
  font-family:var(--lw-display); font-size:clamp(2.6rem,5vw,4.2rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1px var(--lw-faint); letter-spacing:-.05em;
}
.lw-long h3{ max-width:12ch; }
.lw-long__txt p + p{ margin-top:14px; }
.lw-pull{
  margin-top:var(--lw-s3); font-family:var(--lw-display);
  font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.3; letter-spacing:-.02em;
  color:var(--lw-green-dk); font-style:italic;
  padding-left:20px; border-left:2px solid rgba(36,144,120,.3);
}

/* -------------------------------------------------------------- Stat bars -- */
.lw-bignum{
  font-family:var(--lw-display); font-size:clamp(6rem,17vw,14rem); line-height:.78;
  letter-spacing:-.055em; color:var(--lw-ink); display:flex; align-items:flex-start;
}
.lw-bignum__cur{ font-size:.34em; color:var(--lw-green-lt); transform:translateY(.40em); margin-right:-.07em; }
.lw-bignum small{
  font-family:var(--lw-sans); font-size:11.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--lw-muted); align-self:flex-end;
  transform:translateY(-.95em); margin-left:28px; line-height:1.7; max-width:88px;
}
.lw-bars{ margin-top:clamp(48px,7vw,var(--lw-s7)); border-top:1px solid var(--lw-line); }
.lw-bar{ padding:var(--lw-s3) 0; border-bottom:1px solid var(--lw-line); }
.lw-bar__top{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--lw-s3); margin-bottom:14px; flex-wrap:wrap; }
.lw-bar__name{ font-family:var(--lw-display); font-size:clamp(1.1rem,1.9vw,1.45rem); letter-spacing:-.02em; color:var(--lw-ink); }
.lw-bar__vals{ display:flex; gap:20px; align-items:baseline; font-variant-numeric:tabular-nums; }
.lw-bar__pd{ font-family:var(--lw-display); font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.03em; color:var(--lw-ink); }
.lw-bar__pm{ font-size:13px; color:var(--lw-muted); }
.lw-bar__track{ height:6px; background:rgba(16,48,46,.09); border-radius:99px; overflow:hidden; }
.lw-on-dark .lw-bar__track{ background:rgba(255,255,255,.09); }
.lw-bar__fill{ height:100%; width:0; border-radius:99px; background:rgba(16,48,46,.24); transition:width 1.5s var(--lw-ease); }
.lw-on-dark .lw-bar__fill{ background:rgba(255,255,255,.24); }
.lw-bar--mine .lw-bar__fill{ background:linear-gradient(90deg,var(--lw-green),var(--lw-green-lt)); background-color:var(--lw-green); }

/* ------------------------------------------------------------ Fact cards -- */
.lw-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(48px,7vw,var(--lw-s7));
  background:var(--lw-line); border:1px solid var(--lw-line);
}
.lw-fact{ background-color:var(--lw-paper); padding:clamp(24px,3vw,var(--lw-s4)); }
.lw-on-dark .lw-fact{ background-color:var(--lw-deep); }
.lw-fact__n{ font-family:var(--lw-display); font-size:clamp(2.2rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.04em; color:var(--lw-ink); }
.lw-fact__n u{ text-decoration:none; color:var(--lw-green-dk); }
.lw-fact p{ margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--lw-ink-soft); }

/* -------------------------------------------------------------- Timeline -- */
.lw-tl{ border-top:1px solid var(--lw-line); }
.lw-tlrow{
  display:grid; grid-template-columns:104px 1fr; gap:var(--lw-s3);
  align-items:baseline; padding:18px 0; border-bottom:1px solid var(--lw-line-soft);
}
.lw-tlrow__t{ font-family:var(--lw-display); font-size:1.05rem; color:var(--lw-blue-dk); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.lw-tlrow__e{ font-size:16.5px; color:var(--lw-ink-soft); }
.lw-tlrow--night{
  background:linear-gradient(90deg,rgba(7,47,44,.045),transparent);
  background-color:transparent;
  margin-inline:calc(var(--lw-s3) * -1); padding-inline:var(--lw-s3); border-bottom:0;
}
.lw-tlrow--night .lw-tlrow__t,.lw-tlrow--night .lw-tlrow__e{ color:var(--lw-ink); font-weight:500; }

/* ---------------------------------------------------------- Availability -- */
.lw-avail{
  display:grid; grid-template-columns:1fr auto; gap:var(--lw-s5); align-items:center;
  padding:clamp(32px,4.5vw,var(--lw-s5));
  border:1px solid var(--lw-line); border-radius:var(--lw-radius);
  background:linear-gradient(135deg,rgba(12,132,166,.06),rgba(36,144,120,.05));
  background-color:var(--lw-paper-2);
  position:relative; overflow:hidden;
}
.lw-avail::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--lw-blue); }
.lw-stamp{ display:inline-flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--lw-blue-dk); font-weight:600; }
.lw-stamp i{ width:7px; height:7px; border-radius:50%; background:var(--lw-blue); }
.lw-stamp--stale{ color:#9A3412; }
.lw-stamp--stale i{ background:#9A3412; }
.lw-rooms{ margin-top:22px; display:flex; gap:var(--lw-s5) var(--lw-s6); flex-wrap:wrap; }
.lw-room{ display:flex; flex-direction:column; gap:4px; }
.lw-room__n{ font-family:var(--lw-display); font-size:clamp(2.2rem,4vw,3rem); line-height:1; letter-spacing:-.04em; }
.lw-room__l{ font-size:13px; color:var(--lw-muted); letter-spacing:.02em; }
.lw-room__l b{ display:block; font-weight:500; color:var(--lw-ink); font-size:15px; margin-top:2px; }

/* --------------------------------------------------------------- CTA band -- */
.lw-cta{ text-align:center; position:relative; overflow:hidden; }
.lw-cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 110%,rgba(36,144,120,.35),transparent 65%);
}
.lw-cta > *{ position:relative; z-index:1; }
.lw-cta .lw-head__h{ max-width:18ch; margin-inline:auto; }
.lw-cta .lw-lede{ max-width:56ch; margin-inline:auto; }
.lw-callbig{
  display:inline-flex; align-items:baseline; gap:16px; margin-top:var(--lw-s5);
  text-decoration:none; font-family:var(--lw-display);
  font-size:clamp(2rem,5.6vw,4rem); letter-spacing:-.04em; color:var(--lw-ink);
  position:relative; padding-bottom:10px;
}
.lw-callbig::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--lw-line-strong); transition:background .4s ease; }
.lw-callbig:hover::after{ background:var(--lw-green); }
.lw-callbig__who{ font-family:var(--lw-sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--lw-muted); }
.lw-badge{
  margin-top:var(--lw-s4); display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:var(--lw-ink-soft);
  border:1px solid var(--lw-line-strong); padding:9px 18px; border-radius:999px;
}

/* ------------------------------------------------------------------ FAQ -- */
/* Native <details>. No JS, no ARIA of our own, and Chrome's Ctrl+F finds text
   inside a closed panel. A family reading this at 11pm on a hospital phone
   should not lose an answer to a script that failed to load. */
.lw-faq{ border-top:1px solid var(--lw-line); }
.lw-faq__i{ border-bottom:1px solid var(--lw-line); }
.lw-faq__q{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--lw-s3);
  padding:clamp(20px,2.6vw,28px) 0; cursor:pointer; list-style:none;
  font-family:var(--lw-display); font-size:clamp(1.12rem,1.9vw,1.45rem);
  line-height:1.28; letter-spacing:-.018em; color:var(--lw-ink);
}
.lw-faq__q::-webkit-details-marker{ display:none; }
.lw-faq__q:focus-visible{ outline:2px solid var(--lw-green-dk); outline-offset:4px; }

/* The +/− is drawn with pseudo-elements, never a background-image: Elementor's
   lazy-load ships `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) *
   {background-image:none!important}`, which would silently erase it below the
   fold. `*` does not match pseudo-elements. */
.lw-faq__mark{ position:relative; flex:none; width:16px; height:16px; align-self:center; }
.lw-faq__mark::before,
.lw-faq__mark::after{
  content:""; position:absolute; left:0; top:50%; width:16px; height:1.5px;
  background:var(--lw-green-dk); transition:transform .45s var(--lw-ease);
}
.lw-faq__mark::after{ transform:rotate(90deg); }
.lw-faq__i[open] .lw-faq__mark::after{ transform:rotate(0deg); }
.lw-faq__a{
  padding:0 0 clamp(22px,3vw,32px); max-width:68ch;
  color:var(--lw-ink-soft); font-size:var(--lw-body-lg); line-height:1.62;
}
.lw-faq__a p{ margin:0 0 14px; }
.lw-faq__a p:last-child{ margin-bottom:0; }
.lw-faq__tail{ margin:var(--lw-s4) 0 0; max-width:56ch; color:var(--lw-ink-soft); }
.lw-faq__tail + .lw-actions{ margin-top:var(--lw-s3); }

/* --------------------------------------------------------- Enquiry form -- */
/* The phone route sits beside the form with equal weight, not under it as an
   afterthought. Most of this audience would rather talk to somebody, and
   pretending otherwise costs placements. */
.lw-formsec{
  --lw-gapc:48px;
  display:grid; grid-template-columns:1.12fr .88fr; gap:var(--lw-gapc);
  align-items:start; margin-top:clamp(32px,4vw,var(--lw-s5));
}
.lw-formsec--solo{ grid-template-columns:minmax(0,640px); }

.lw-form{ display:block; }
.lw-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lw-field{ margin:0 0 var(--lw-s3); }
.lw-field__l{
  display:block; margin-bottom:8px;
  font-family:var(--lw-sans); font-size:12.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--lw-muted);
}
.lw-field__req{ color:var(--lw-green-dk); margin-left:4px; }
.lw-field__i{
  display:block; width:100%; box-sizing:border-box;
  font-family:var(--lw-sans); font-size:16px; color:var(--lw-ink);
  background-color:var(--lw-white); border:1px solid var(--lw-line-strong);
  border-radius:var(--lw-radius); padding:13px 15px; line-height:1.4;
  transition:border-color .3s ease, box-shadow .3s ease;
}
/* Astra pins height:40px on inputs. Ours are taller by design, and a textarea
   must not inherit it at all. */
.lw-field__i,
textarea.lw-field__i{ height:auto; min-height:0; }
input.lw-field__i{ height:50px; }
textarea.lw-field__i{ resize:vertical; min-height:132px; }
.lw-field__i::placeholder{ color:var(--lw-faint); }
.lw-field__i:focus{
  outline:none; border-color:var(--lw-green-dk);
  box-shadow:0 0 0 3px rgba(36,144,120,.16);
}
.lw-on-dark .lw-field__i{
  background-color:rgba(255,255,255,.06); border-color:var(--lw-line-strong); color:#fff;
}

.lw-form .lw-btn{ margin-top:var(--lw-s1); }
.lw-form__note{
  margin:var(--lw-s3) 0 0; padding:14px 16px; font-size:14px;
  border:1px solid var(--lw-line-strong); border-radius:var(--lw-radius);
  background-color:var(--lw-paper-2); color:var(--lw-ink);
}
.lw-form__fine{ margin:var(--lw-s3) 0 0; font-size:13px; color:var(--lw-muted); max-width:52ch; }

.lw-formsec__a{ display:grid; gap:var(--lw-s3); }
.lw-formsec__route{
  padding:clamp(22px,3vw,32px);
  border:1px solid var(--lw-line-strong); border-radius:var(--lw-radius-lg);
  background-color:var(--lw-paper-2);
}
.lw-on-dark .lw-formsec__route{ background-color:rgba(255,255,255,.05); }
.lw-formsec__routeh{
  margin:0 0 6px; font-family:var(--lw-display);
  font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.02em; color:var(--lw-ink);
}
.lw-formsec__route .lw-ulink{ margin-top:16px; }
.lw-formsec__card{
  padding-top:var(--lw-s3); border-top:1px solid var(--lw-line);
  font-size:14px; color:var(--lw-ink-soft);
}
.lw-formsec__card p{ margin:0; line-height:1.6; }
.lw-formsec__cardh{
  margin:0 0 8px; font-family:var(--lw-sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lw-green-dk);
}

/* ---------------------------------------------------------------- Prose -- */
/* Most of this site is components. Three or four passages are not — the money
   explanation, the licensing explanation, what the first week is like — and
   those are the ones people read to the end. They get a measure and a rhythm. */
.lw-prose{ margin-top:clamp(28px,3.4vw,var(--lw-s5)); }
.lw-section > .lw-wrap > .lw-prose:first-child{ margin-top:0; }
.lw-prose__b{ color:var(--lw-ink-soft); }
.lw-prose__b > p{ margin:0 0 1.05em; }
.lw-prose__b > p:last-child{ margin-bottom:0; }
.lw-prose__b strong{ color:var(--lw-ink); font-weight:600; }
.lw-prose__b em{ font-family:var(--lw-display); font-style:italic; color:var(--lw-ink); }
.lw-prose__b .lw-rlist{ margin:1.2em 0; }

.lw-prose--read .lw-prose__b,
.lw-prose--read .lw-prose__pull,
.lw-prose--read .lw-prose__src{ max-width:68ch; }
.lw-prose--two .lw-prose__b{ columns:2; column-gap:clamp(32px,4vw,var(--lw-s6)); }
.lw-prose--two .lw-prose__b > p{ break-inside:avoid; }

.lw-prose--lg .lw-prose__b{ font-size:var(--lw-lede); line-height:1.55; color:var(--lw-ink); }
.lw-prose--md .lw-prose__b{ font-size:var(--lw-body-lg); line-height:1.66; }
.lw-prose--sm .lw-prose__b{ font-size:14px; line-height:1.62; color:var(--lw-muted); }

/* The pull-out is ruled, not quoted. This design has no quotation marks in it
   anywhere, and adding one here to signal "important" would be the first. */
.lw-prose__pull{
  margin:clamp(28px,3.4vw,var(--lw-s5)) 0 0; padding-left:clamp(20px,2.4vw,28px);
  border-left:2px solid var(--lw-green);
  font-family:var(--lw-display); font-size:clamp(1.2rem,2.1vw,1.6rem);
  line-height:1.32; letter-spacing:-.02em; color:var(--lw-ink);
}
.lw-prose__src{
  margin:var(--lw-s4) 0 0; padding-top:var(--lw-s2);
  border-top:1px solid var(--lw-line);
  font-size:12.5px; line-height:1.55; color:var(--lw-muted);
}
.lw-prose .lw-actions{ margin-top:var(--lw-s4); }

/* ------------------------------------------------------------ Homes grid -- */
.lw-hgrid{
  --lw-cols:3;
  display:grid; grid-template-columns:repeat(var(--lw-cols),minmax(0,1fr));
  gap:clamp(24px,3vw,var(--lw-s4));
  margin-top:clamp(32px,4vw,var(--lw-s5));
}
.lw-hcard{ margin:0; }
.lw-hcard__link{
  display:block; text-decoration:none; color:inherit; height:100%;
  border:1px solid var(--lw-line); border-radius:var(--lw-radius-lg);
  overflow:hidden; background-color:var(--lw-paper-2);
  transition:border-color .45s var(--lw-ease), transform .45s var(--lw-ease);
}
.lw-on-dark .lw-hcard__link{ background-color:rgba(255,255,255,.04); }
.lw-hcard__link:hover{ border-color:var(--lw-green); transform:translateY(-3px); }
.lw-hcard__link:focus-visible{ outline:2px solid var(--lw-green-dk); outline-offset:3px; }
.lw-hcard__frame{
  position:relative; overflow:hidden; width:100%; aspect-ratio:4/3;
  background-color:var(--lw-paper); display:grid; place-items:center;
}
/* No photograph is better than the wrong photograph — but the frame keeps its
   shape so the grid does not reflow the day the shoot lands. */
.lw-hcard__nophoto{
  font-family:var(--lw-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lw-faint);
}
.lw-hcard__body{ padding:clamp(20px,2.4vw,26px); }
.lw-hcard__h{
  margin:0; font-family:var(--lw-display); font-size:clamp(1.25rem,2vw,1.6rem);
  line-height:1.18; letter-spacing:-.022em; color:var(--lw-ink);
}
.lw-hcard__addr{ margin:8px 0 0; font-size:14px; color:var(--lw-muted); }
.lw-hcard .lw-stamp{ margin-top:14px; }
.lw-hcard__suits{ margin:14px 0 0; font-size:14.5px; line-height:1.55; color:var(--lw-ink-soft); }
.lw-hcard__lic{
  margin:14px 0 0; font-family:var(--lw-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lw-faint);
}
.lw-hcard .lw-ulink{ margin-top:18px; }

/* ------------------------------------------------------------------ Team -- */
/* The year is the largest thing in the row on purpose. Everything this business
   claims about itself is a claim about retention, and this is the only place a
   stranger can check it. */
.lw-team{ margin-top:clamp(32px,4vw,var(--lw-s5)); border-top:1px solid var(--lw-line); }
.lw-person{
  display:grid; grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(20px,3vw,var(--lw-s5)); align-items:start;
  padding:clamp(24px,3vw,var(--lw-s4)) 0; border-bottom:1px solid var(--lw-line);
}
.lw-person__t{ min-width:96px; }
.lw-person__yr{
  display:block; font-family:var(--lw-display); font-size:clamp(2.6rem,5vw,4rem);
  line-height:.92; letter-spacing:-.045em; color:var(--lw-green-dk);
}
.lw-person__yrl{
  display:block; margin-top:6px; font-family:var(--lw-sans); font-size:11.5px;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lw-muted);
}
.lw-person__frame{
  position:relative; overflow:hidden; width:clamp(96px,12vw,150px); aspect-ratio:4/5;
  border-radius:var(--lw-radius-lg); background-color:var(--lw-paper-2);
}
.lw-person__frame > img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
}
.lw-person__n{
  margin:0; font-family:var(--lw-display); font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.15; letter-spacing:-.024em; color:var(--lw-ink);
}
.lw-person__r{
  margin:8px 0 0; font-family:var(--lw-sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lw-green-dk);
}
.lw-person__note{ margin:14px 0 0; font-size:var(--lw-body-lg); line-height:1.6; color:var(--lw-ink-soft); max-width:56ch; }

/* --------------------------------------------------------------- Updates -- */
/* A ruled list, not a card grid. Three posts in a card grid look like an empty
   shop, and cards would demand a featured image for every entry — photography
   this site does not have and will not fake. */
.lw-posts{ margin-top:clamp(32px,4vw,var(--lw-s5)); border-top:1px solid var(--lw-line); }
.lw-post{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(20px,3vw,var(--lw-s5)); align-items:baseline;
  padding:clamp(20px,2.6vw,30px) 0; border-bottom:1px solid var(--lw-line);
  text-decoration:none; color:inherit;
  transition:padding-left .5s var(--lw-ease);
}
.lw-post:hover{ padding-left:12px; }
.lw-post:focus-visible{ outline:2px solid var(--lw-green-dk); outline-offset:3px; }
.lw-post__d{
  min-width:112px; font-family:var(--lw-sans); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lw-muted);
}
.lw-post__b{ display:block; min-width:0; }
.lw-post__t{
  display:block; font-family:var(--lw-display); font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.24; letter-spacing:-.02em; color:var(--lw-ink);
}
.lw-post__x{ display:block; margin-top:8px; font-size:15px; line-height:1.55; color:var(--lw-ink-soft); max-width:68ch; }
.lw-post__go{ color:var(--lw-green-dk); flex:none; transition:transform .5s var(--lw-ease); }
.lw-post:hover .lw-post__go{ transform:translateX(5px); }

/* ------------------------------------------------------------- Statement -- */
/* One sentence, a whole section, and nothing else in it. A button here turns a
   pause into an advertisement. */
.lw-stmt--ruled{ padding-top:clamp(28px,3.4vw,var(--lw-s5)); border-top:1px solid var(--lw-line); }
.lw-stmt .lw-eyebrow{ margin-bottom:20px; }
.lw-stmt__t{
  margin:0; max-width:20em; font-family:var(--lw-display);
  line-height:1.08; letter-spacing:-.032em; color:var(--lw-ink);
  text-wrap:balance;
}
.lw-stmt[style*="center"] .lw-stmt__t{ margin-inline:auto; }
.lw-stmt__a{
  margin:var(--lw-s3) 0 0; font-family:var(--lw-sans); font-size:12.5px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lw-muted);
}

/* --------------------------------------------------------- Editor notice -- */


.lw-editor-notice{
  border:1px dashed var(--lw-line-strong); border-radius:var(--lw-radius);
  padding:14px 16px; font-size:13px; color:var(--lw-muted);
  background-color:rgba(36,144,120,.05); margin:8px 0;
}

/* ------------------------------------------------------------ Responsive -- */
@media (max-width:1080px){
  .lw-hero__grid{ grid-template-columns:1fr; gap:var(--lw-s4); }
  .lw-hero__copy{ padding-bottom:var(--lw-s2); max-width:none; }
  .lw-hero__art{ max-width:640px; margin-inline:auto; width:100%; }
  .lw-scrollcue{ display:none; }
  .lw-hero__foot{ grid-template-columns:1fr; }
  .lw-long{ grid-template-columns:56px 1fr; gap:var(--lw-s3) var(--lw-s4); }
  .lw-long__txt{ grid-column:1/-1; }
  .lw-long h3{ max-width:none; }
  .lw-dots{ margin-left:0; }
  .lw-phero__grid--split{ grid-template-columns:1fr; }
  .lw-phero__media .lw-media__frame{ aspect-ratio:16/9; }
  .lw-formsec{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .lw-facts{ grid-template-columns:1fr; }
  .lw-phero{ padding-block:clamp(96px,14vh,140px) clamp(40px,6vw,64px); }
  .lw-phero__facts{ gap:12px var(--lw-s3); }
  .lw-prose--two .lw-prose__b{ columns:1; }
  .lw-hgrid{ --lw-cols:2; }
  .lw-person{ grid-template-columns:auto minmax(0,1fr); }
  .lw-person__frame{ grid-row:span 2; }
  .lw-post{ grid-template-columns:minmax(0,1fr) auto; }
  .lw-post__d{ grid-column:1/-1; min-width:0; }
  .lw-avail{ grid-template-columns:1fr; align-items:start; }
  .lw-row{ grid-template-columns:auto 1fr; gap:16px; }
  .lw-row__go{ grid-column:2; margin-top:8px; }
}
@media (max-width:620px){
  .lw-hero{ padding-top:96px; min-height:auto; }
  .lw-hero__foot{ gap:10px; }
  .lw-hero__meta{ gap:6px var(--lw-s3); }
  .lw-hero__meta span{ font-size:12.5px; }
  .lw-row__num{ display:none; }
  .lw-row{ grid-template-columns:1fr; }
  .lw-row__go{ grid-column:1; }
  .lw-tlrow{ grid-template-columns:78px 1fr; gap:14px; }
  .lw-tlrow--night{ margin-inline:0; padding-inline:0; background:none; border-top:1px solid var(--lw-ink); }
  .lw-bignum small{ display:none; }
  .lw-btn{ padding:15px 22px; }
  .lw-long{ grid-template-columns:1fr; }
  .lw-long__idx{ font-size:2.4rem; }
  .lw-hgrid{ --lw-cols:1; }
  .lw-person{ grid-template-columns:1fr; gap:16px; }
  .lw-person__frame{ grid-row:auto; }
  .lw-person__t{ min-width:0; }
}
@media (max-width:380px){ :root{ --lw-gut:16px; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .lw-rv{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .lw-draw{ stroke-dashoffset:0 !important; }
  .lw-pane{ opacity:.5 !important; }
  .lw-dotgrid i{ transform:scale(1) !important; }
}

/* ============================================================================
 * HEADER / MOBILE MENU / FOOTER
 * ========================================================================== */
.lw-hdr{
  position:relative; z-index:800; width:100%;
  border-bottom:1px solid transparent;
  transition:background-color .5s var(--lw-ease), box-shadow .5s var(--lw-ease), border-color .5s ease;
}
.lw-hdr--sticky{ position:fixed; top:0; left:0; right:0; }
.admin-bar .lw-hdr--sticky{ top:32px; }
@media (max-width:782px){ .admin-bar .lw-hdr--sticky{ top:46px; } }
.lw-hdr--over{ background-color:transparent; }
.lw-hdr:not(.lw-hdr--over){ background-color:var(--lw-paper); border-bottom-color:var(--lw-line); }
.lw-hdr.is-stuck{
  background-color:rgba(246,244,239,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--lw-line);
}
.lw-hdr__in{
  max-width:var(--lw-maxw); margin-inline:auto; padding-inline:var(--lw-gut);
  height:84px; display:flex; align-items:center; gap:var(--lw-s4);
  transition:height .5s var(--lw-ease);
}
.lw-hdr.is-stuck .lw-hdr__in{ height:68px; }
.lw-brand{ display:flex; align-items:center; flex:none; text-decoration:none; }
.lw-brand img{ display:block; transition:height .5s var(--lw-ease); }
.lw-hdr.is-stuck .lw-brand img{ height:36px !important; }
.lw-brand__text{ font-family:var(--lw-display); font-size:1.5rem; letter-spacing:-.02em; color:var(--lw-ink); }
/* Compounded onto the element selector: `.lw-brand img{display:block}` above is
   (0,1,1) and would otherwise show BOTH logos at once. Same family of bug as
   §8 #20. */
.lw-brand img.lw-brand__knock{ display:none; }

/* --- Knockout header over a dark hero -------------------------------------
   The header is one Header-Footer template shared by every page, so it cannot
   know what it is sitting on. The hero states it instead: a deep-ground page
   hero and the immersive homepage hero both emit `.lw-knock`, and `:has()`
   lets the header react to a section that comes AFTER it in the DOM. The
   marker is deliberately generic — it was `.lw-phero--knock` until the
   immersive hero needed the same behaviour, and a second widget keying off
   another widget's BEM modifier is how a shared namespace goes wrong.
   Deliberately CSS rather than JS — `is-stuck` is
   already JS-driven, and a visitor with a failed script must not be left with a
   dark logo on a dark ground. */
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-brand__std{ display:none; }
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-brand__knock{ display:block; }
/* Knocked out over a photograph rather than over a flat dark section, so the
   header also carries the light placeholder tokens — nothing else here does. */
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck){
  --lw-amber:#E3B45F;
  --lw-amber-rule:rgba(227,180,95,.42);
}

/* --- The header's own ground, over a PHOTOGRAPH only ----------------------
   A transparent header is right over a flat deep section: the logo and the nav
   sit on one colour and read cleanly. Over the immersive hero they sit on
   ferns, white siding and a lit window — legible, once the contrast was fixed,
   but reading as text floating on a picture rather than as a header.
   So the immersive hero emits a SECOND marker, `.lw-knock--photo`, and only
   that one asks for this. `/referrals` keeps the approved transparent header
   over its flat dark hero, untouched.
   The treatment is the dark twin of `.is-stuck` — same blur, same idiom — so
   scrolling reads as one bar changing colour rather than two different bars. */
body:has(.lw-knock--photo) .lw-hdr--over:not(.is-stuck){
  background-color:rgba(7,47,44,.34);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:rgba(255,255,255,.13);
}
/* .82 white measured 3.9:1 against the brightest part of the hero photograph
   behind the right-hand end of the nav. Small text, so it needs 4.5. */
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-nav a,
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-nav__list a{ color:rgba(255,255,255,.92); }
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-nav a:hover{ color:#fff; }
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-nav a::after,
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-nav__list a::after{ background:var(--lw-mint); }
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-phone{
  color:#fff; background-color:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28);
}
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-phone:hover{
  background-color:rgba(255,255,255,.16); border-color:var(--lw-mint);
}
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-phone__dot{ background:var(--lw-mint); }
/* `.lw-phone__lab` sets its own colour, so it does NOT inherit the #fff above —
   "a person answers" stayed muted grey on a dark ground and was unreadable on
   /referrals from the day that page shipped. Found on the immersive hero. */
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-phone__lab{ color:rgba(255,255,255,.72); }
/* The burger keeps its light pill on a dark ground — a white pill with white
   bars would be an invisible control. Only the pill gets more opaque. */
body:has(.lw-knock) .lw-hdr--over:not(.is-stuck) .lw-burger{ background-color:rgba(255,255,255,.9); }

.lw-nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.lw-nav a,.lw-nav__list a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--lw-ink-soft);
  position:relative; padding:4px 0; transition:color .3s ease; white-space:nowrap;
}
.lw-nav__list{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.lw-nav a::after,.lw-nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--lw-green);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--lw-ease);
}
.lw-nav a:hover{ color:var(--lw-ink); }
.lw-nav a:hover::after,.lw-nav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

.lw-hdr__cta{ display:flex; align-items:center; gap:14px; flex:none; margin-left:auto; }
.lw-nav + .lw-hdr__cta{ margin-left:0; }
.lw-phone{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  border:1px solid var(--lw-line); border-radius:999px; padding:9px 16px;
  font-size:14px; font-weight:500; color:var(--lw-ink);
  background-color:rgba(255,255,255,.5);
  transition:border-color .4s ease, background-color .4s ease;
}
.lw-phone:hover{ border-color:var(--lw-green); background-color:#fff; }
.lw-phone__dot{ width:7px; height:7px; border-radius:50%; background:var(--lw-green); flex:none; position:relative; }
.lw-phone__dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--lw-green); opacity:0; animation:lw-ping 2.6s var(--lw-ease) infinite;
}
@keyframes lw-ping{ 0%{transform:scale(.6);opacity:.9} 70%,100%{transform:scale(1.5);opacity:0} }
.lw-phone__lab{ color:var(--lw-muted); font-weight:400; }
.lw-phone__ico{ display:none; color:var(--lw-green-dk); }

.lw-burger{
  display:none; width:44px; height:44px; padding:0; min-width:0;
  border:1px solid var(--lw-line); background-color:rgba(255,255,255,.5);
  border-radius:999px; cursor:pointer; place-items:center;
}
.lw-burger span{
  display:block; width:17px; height:1.5px; background:var(--lw-ink);
  margin:3.5px auto; transition:transform .45s var(--lw-ease), opacity .3s ease;
}
/* Astra button-fill guard — see the note in the button block above. */
.lw-burger:hover,.lw-burger:focus,.lw-burger:active{ background-color:#fff; box-shadow:none; }
.lw-menu-open .lw-burger span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.lw-menu-open .lw-burger span:nth-child(2){ opacity:0; }
.lw-menu-open .lw-burger span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

.lw-mobmenu{
  position:fixed; inset:0; z-index:790; background-color:var(--lw-paper);
  padding:26px var(--lw-gut) var(--lw-s5); display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--lw-ease); overflow-y:auto;
}
.admin-bar .lw-mobmenu{ padding-top:72px; }
.lw-menu-open .lw-mobmenu{ clip-path:inset(0 0 0 0); }
.lw-mobmenu__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--lw-s4); }
.lw-mobmenu__logo{ height:40px; width:auto; max-width:none; }
.lw-mobmenu__close{
  width:38px; height:38px; padding:0; min-width:0; display:grid; place-items:center;
  border:1px solid var(--lw-line); background-color:transparent; border-radius:999px;
  cursor:pointer; color:var(--lw-ink);
}
.lw-mobmenu__close:hover,.lw-mobmenu__close:focus,.lw-mobmenu__close:active{
  background-color:#fff; color:var(--lw-ink); box-shadow:none;
}
.lw-mobmenu__nav{ display:flex; flex-direction:column; }
.lw-mobmenu__link,.lw-mobmenu__list a{
  font-family:var(--lw-display); font-size:clamp(1.7rem,7vw,2.4rem); letter-spacing:-.03em;
  text-decoration:none; color:var(--lw-ink); padding:14px 0;
  border-bottom:1px solid var(--lw-line-soft); display:block;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--lw-ease), transform .5s var(--lw-ease);
}
.lw-mobmenu__list{ list-style:none; margin:0; padding:0; }
.lw-menu-open .lw-mobmenu__link,.lw-menu-open .lw-mobmenu__list a{ opacity:1; transform:none; }
.lw-mobmenu__link:nth-child(1){ transition-delay:.10s } .lw-mobmenu__link:nth-child(2){ transition-delay:.15s }
.lw-mobmenu__link:nth-child(3){ transition-delay:.20s } .lw-mobmenu__link:nth-child(4){ transition-delay:.25s }
.lw-mobmenu__link:nth-child(5){ transition-delay:.30s } .lw-mobmenu__link:nth-child(6){ transition-delay:.35s }
.lw-mobmenu__link:nth-child(7){ transition-delay:.40s }
.lw-mobmenu__foot{ margin-top:auto; padding-top:var(--lw-s5); }
.lw-mobmenu__call{
  display:inline-block; margin-top:10px; font-family:var(--lw-display);
  font-size:clamp(1.6rem,9vw,2.4rem); letter-spacing:-.03em; color:var(--lw-ink); text-decoration:none;
  border-bottom:1px solid var(--lw-line-strong); padding-bottom:6px;
}

/* --- Hero headline line masks --- */
.lw-hero__h .lw-ln{ display:block; overflow:hidden; }
.lw-hero__h .lw-ln i{
  display:block; font-style:normal; transform:translateY(105%);
  transition:transform 1.15s var(--lw-ease);
}
.lw-hero.is-in .lw-hero__h .lw-ln i,
[data-lw-reveal="0"] .lw-hero__h .lw-ln i{ transform:none; }
.lw-hero__lede{ margin-top:var(--lw-s3); max-width:520px; }
.lw-hero__photo{ display:block; width:100%; height:auto; border-radius:var(--lw-radius); object-fit:cover; }
html:not(.lw-js) .lw-hero__h .lw-ln i{ transform:none; }
@media (prefers-reduced-motion:reduce){ .lw-hero__h .lw-ln i{ transform:none !important; } }

/* --- Footer --- */
.lw-ftr{ background-color:var(--lw-deep); color:rgba(221,234,231,.72); padding-top:clamp(56px,7vw,var(--lw-s7)); }
.lw-ftr a{ text-decoration:none; color:inherit; }
.lw-ftr__top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:var(--lw-s5);
  padding-bottom:clamp(40px,5vw,var(--lw-s6)); border-bottom:1px solid var(--lw-line-dark);
}
.lw-ftr h4{
  color:#fff; font-size:13px; font-family:var(--lw-sans); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 20px;
}
.lw-ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:15px; }
.lw-ftr ul a:hover{ color:#fff; }
.lw-ftr__logo{ background-color:#fff; border-radius:3px; padding:14px 16px; display:inline-block; max-width:230px; }
.lw-ftr__logo--light{ background-color:transparent; padding:0; }
.lw-ftr__logo img{ width:100%; height:auto; }
.lw-ftr__blurb{ margin-top:var(--lw-s3); font-size:14.5px; line-height:1.6; max-width:34ch; }
.lw-ftr__bot{
  padding:var(--lw-s3) 0 var(--lw-s5); display:flex; justify-content:space-between;
  gap:var(--lw-s3); flex-wrap:wrap; font-size:13px; color:rgba(221,234,231,.62);
}

@media (max-width:1080px){
  .lw-nav{ display:none; }
  .lw-burger{ display:grid; }
  .lw-ftr__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){ .lw-phone__lab{ display:none; } .lw-hdr__in{ gap:var(--lw-s2); } }
@media (max-width:620px){ .lw-ftr__top{ grid-template-columns:1fr; } }
@media (max-width:480px){
  .lw-phone{ padding:0; width:44px; height:44px; justify-content:center; background-color:#fff; }
  .lw-phone b,.lw-phone__dot{ display:none; }
  .lw-phone__ico{ display:block; }
}

/* ============================================================================
 * SECTION LAYOUTS — the head variants and the widget-specific pieces
 * ========================================================================== */

/* --- Split head: heading left, lede right --- */
.lw-head--split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--lw-s5) clamp(32px,5vw,var(--lw-s7));
  align-items:end;
}
.lw-head--split .lw-head__r{ padding-bottom:6px; }
.lw-head--split .lw-lede{ margin-top:0; }

/* --- Aside: head left, section content right --- */
.lw-aside{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(36px,5vw,var(--lw-s7)); align-items:start;
}
.lw-section--dots .lw-aside,
.lw-section--tl .lw-aside{ align-items:center; }
.lw-aside .lw-head{ margin-bottom:0; }
.lw-aside__l{ min-width:0; }
.lw-aside__c{ min-width:0; }

/* Sections that use a stacked head still need breathing room before content. */
.lw-section > .lw-wrap > .lw-head + *,
.lw-section > .lw-wrap > .lw-head + .lw-rows{ margin-top:clamp(32px,4vw,var(--lw-s5)); }

/* --- Dot comparison extras --- */
.lw-dots-copy{ margin-top:var(--lw-s3); }
.lw-muted-line{ color:var(--lw-faint); margin:0; }
.lw-statement{
  margin-top:var(--lw-s3); font-family:var(--lw-display);
  font-size:clamp(1.25rem,2.3vw,1.7rem); line-height:1.28; letter-spacing:-.022em;
  max-width:26ch; color:var(--lw-ink);
}
.lw-statement em{ color:var(--lw-green-dk); font-style:italic; }
.lw-dots-wrap{ margin-top:var(--lw-s5); }

/* --- Ruled list markers --- */
.lw-rlist--none li::before{ display:none; }
.lw-rlist--check li::before,
.lw-rlist--cross li::before{ display:none; }
.lw-rlist__ico{ flex:none; display:inline-grid; place-items:center; transform:translateY(3px); }
.lw-rlist--check .lw-rlist__ico{ color:var(--lw-green-dk); }
.lw-rlist--cross .lw-rlist__ico{ color:#9A3412; }

/* --- Long rows foot --- */
.lw-long-foot{
  margin-top:var(--lw-s5); padding-top:var(--lw-s4); border-top:1px solid var(--lw-line);
  display:flex; justify-content:space-between; gap:var(--lw-s3); flex-wrap:wrap; align-items:center;
}
.lw-long-foot p{ max-width:46ch; margin:0; }
.lw-long-foot .lw-actions{ margin-top:0; }

/* --- Stat bars --- */
.lw-stats-top{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,var(--lw-s7)); align-items:end;
}
.lw-bignum__note{ margin-top:var(--lw-s3); max-width:38ch; }
.lw-stats-source{ margin-top:18px; }
.lw-section--stats .lw-actions{ margin-top:clamp(40px,6vw,var(--lw-s6)); }

/* --- Availability --- */
.lw-avail__act{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.lw-avail__act .lw-actions{ margin-top:0; flex-direction:column; align-items:flex-start; }
.lw-availtable{ }
.lw-table{ width:100%; border-collapse:collapse; margin-top:var(--lw-s4); font-size:15px; }
.lw-table th{
  text-align:left; font-family:var(--lw-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lw-muted);
  padding:0 16px 12px 0; border-bottom:1px solid var(--lw-line);
}
.lw-table td{ padding:16px 16px 16px 0; border-bottom:1px solid var(--lw-line-soft); vertical-align:top; }
.lw-table td strong{ font-family:var(--lw-display); font-size:1.4rem; font-weight:400; }
.lw-table a{ color:var(--lw-green-dk); text-decoration:none; border-bottom:1px solid var(--lw-line-strong); }
.lw-table .lw-stale{ color:#9A3412; }

/* --- Comparison table --- */
/* A real <table>, kept as one. It is the object most likely to be screenshotted
   and sent to a sibling, so it has to survive being copied into an email and
   read down a column by a screen reader. On a narrow screen it scrolls inside
   its own box rather than being rebuilt as cards — cards lose the comparison,
   which is the only thing the table is for. */
.lw-ctable-scroll{
  margin-top:clamp(28px,3.4vw,var(--lw-s5));
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.lw-ctable-scroll:focus-visible{ outline:2px solid var(--lw-green-dk); outline-offset:4px; }
.lw-ctable{
  width:100%; min-width:640px; border-collapse:collapse;
  font-size:15px; line-height:1.5; text-align:left;
}
.lw-ctable thead th{
  font-family:var(--lw-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lw-muted);
  padding:0 clamp(14px,1.8vw,26px) 14px 0; border-bottom:1px solid var(--lw-line-strong);
  vertical-align:bottom;
}
.lw-ctable__corner{ width:22%; }
.lw-ctable tbody th{
  font-family:var(--lw-sans); font-size:14px; font-weight:500; color:var(--lw-muted);
  padding:18px clamp(14px,1.8vw,26px) 18px 0; border-bottom:1px solid var(--lw-line-soft);
  vertical-align:top; white-space:normal;
}
.lw-ctable td{
  padding:18px clamp(14px,1.8vw,26px) 18px 0;
  border-bottom:1px solid var(--lw-line-soft);
  vertical-align:top; color:var(--lw-ink-soft);
}
/* "Ours" gets a hairline and a heavier face, and no colour at all. A table that
   visibly argues for itself is not believed. */
.lw-ctable__mine{ color:var(--lw-ink) !important; font-weight:500; }
.lw-ctable thead th.lw-ctable__mine{ color:var(--lw-green-dk) !important; }
.lw-ctable tr > .lw-ctable__mine{ box-shadow:inset 1px 0 0 var(--lw-line-strong), inset -1px 0 0 var(--lw-line-strong); padding-left:clamp(14px,1.8vw,26px); }
.lw-ctable tbody tr:last-child > .lw-ctable__mine{ box-shadow:inset 1px 0 0 var(--lw-line-strong), inset -1px 0 0 var(--lw-line-strong), inset 0 -1px 0 var(--lw-line-strong); }
.lw-ctable__src{
  margin:var(--lw-s3) 0 0; padding-top:var(--lw-s2);
  border-top:1px solid var(--lw-line);
  font-size:12.5px; line-height:1.55; color:var(--lw-muted); max-width:80ch;
}

/* --- CTA band --- */

.lw-cta__in{ text-align:center; }
.lw-cta__in .lw-head{ text-align:center; }
.lw-cta__in .lw-head__h,.lw-cta__in .lw-lede{ margin-inline:auto; }
.lw-cta__in .lw-actions{ justify-content:center; }
.lw-callbig span:first-child{ display:inline-block; }

/* --- Editor: keep sections legible inside the canvas --- */
.elementor-editor-active .lw-hero{ min-height:auto; padding-top:60px; }

@media (max-width:1080px){
  .lw-head--split,
  .lw-aside,
  .lw-stats-top{ grid-template-columns:1fr; }
  .lw-head--split .lw-head__r{ padding-bottom:0; }
  .lw-dots{ margin-left:0; }
}
@media (max-width:820px){
  .lw-avail__act{ align-items:flex-start; }
  .lw-table{ display:block; overflow-x:auto; white-space:nowrap; }
  .lw-table td,.lw-table th{ white-space:normal; }
}

/* ============================================================================
 * ELEMENTOR / ASTRA RESET
 * Our sections own ALL their vertical rhythm — each paints its own ground and
 * sets its own padding. Elementor's container gap (20px) and per-widget
 * margin-block-end therefore show up as a strip of page background BETWEEN two
 * sections, which is very visible when both of them are dark. Measured, not
 * guessed: the container was 96px taller than the section it held.
 * ========================================================================== */
.elementor .e-con,
.elementor .e-con-inner{ --gap:0px; gap:0px; }
.elementor .e-con > .elementor-widget,
.elementor .e-con-inner > .elementor-widget{ margin-block-end:0; }
.elementor .e-con > .elementor-element:last-child{ margin-block-end:0; }

/* Astra writes `body{background-color:#fff}` in its late inline sheet, which
   outranks the child theme's 0,0,1 rule. `html body` (0,0,2) settles it without
   reaching for !important. */
html body{ background-color:var(--lw-paper); }

/* ============================================================================
 * TWO STRUCTURAL FIXES — both measured, not guessed
 * ==========================================================================
 * 1) MARGIN COLLAPSE. A section whose padding-top is set to 0 lets its first
 *    child's margin-top collapse straight OUT of it, turning inner spacing into
 *    a strip of page background between two sections. Very visible when both
 *    are dark. `display:flow-root` establishes a block formatting context and
 *    contains the margin, which is the structural fix rather than hunting down
 *    each child's margin.
 *
 * 2) ASTRA'S PAGE BACKGROUND. Astra's late inline sheet sets
 *    `.ast-plain-container, .ast-page-builder-template { background-color:
 *    var(--ast-global-color-4) }` — (0,1,0), which outranks a plain `html body`
 *    (0,0,2). Matching its class with an element gives (0,1,1) and settles it
 *    without !important.
 */
.lw-section{ display:flow-root; }

html body,
body.ast-page-builder-template,
body.ast-plain-container,
body.ast-separate-container{ background-color:var(--lw-paper); }

/* ============================================================================
 * PHOTOGRAPHY
 * ----------------------------------------------------------------------------
 * The client's shoot is a single 42-minute visit in hard midday sun. Left raw,
 * the frames sit ON the design rather than inside it: blown skies, cold blue
 * shadows, high contrast. The treatment here is correction, not decoration —
 * a fixed frame, a warm scrim toward the paper palette, a slow drift, and a
 * wipe reveal.
 * ========================================================================== */

/* ⚠️ EVERY FRAMED PHOTOGRAPH IS PINNED HERE, AND IT HAS TO BE A COMPOUND SELECTOR.
   Elementor ships `.elementor img{height:auto}` — specificity (0,1,1) — in a
   sheet that loads AFTER ours. A plain `.lw-media__img{height:100%}` is (0,1,0)
   and loses, so the image keeps its intrinsic aspect ratio, overflows the frame,
   and `object-fit`/`object-position` become no-ops because the box already
   matches the image. The symptom is not an error: a full-bleed band silently
   shows the TOP of the photograph instead of its focal crop, and a frame taller
   than its image shows a strip of empty paper underneath. `img.lw-*__img` is
   (0,2,1) and wins regardless of load order. Do not simplify these selectors. */
.lw-media__frame > img.lw-media__img,
.lw-split__frame > img.lw-split__img,
.lw-pgrid__frame > img.lw-pgrid__img{
  position:absolute; inset:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover;
}

.lw-media{ margin:0; position:relative; }

/* ⚠️ A BAND'S HEIGHT COMES FROM ITS OWN WIDTH, NOT FROM THE VIEWPORT.
   It was `height:62vh` until 2026-09-09, and on a short, wide window — a
   1900x740 laptop, which is an extremely ordinary shape — that is a 355px strip
   across 1900px: 5.4:1, a letterbox slot with the top and bottom of every
   photograph sliced off. The band looked broken and the photograph looked
   cropped, because it was.
   `aspect-ratio` ties the frame to the band's width instead, so the crop is the
   same on every screen. The editor's control is now a CAP (`max-height`), which
   is the only thing the viewport's height should ever have a say in: stopping a
   band from being taller than the screen it is on. */
.lw-media__frame{
  position:relative; overflow:hidden; width:100%;
  background-color:var(--lw-paper-2);
  aspect-ratio:var(--lw-ar, 2.55);
}
/* ⚠️ NO `min-height` HERE. `aspect-ratio` + `min-height` gives the box a
   MINIMUM WIDTH of height x ratio in intrinsic sizing, and `.lw-media__frame`
   is also the page hero's photo frame, sitting in a grid column. A 240px floor
   made that frame contribute 427px of minimum width inside a 390px phone and
   pushed /referrals 57px off the screen — reported by audit.mjs as an overflow
   in the TEXT column, which is not where the problem was. §8 #27's neighbour. */
/* A content-width or inset band is a narrower box, so the same ratio would make
   it a much shorter picture. It gets its own. */
.lw-media--wide .lw-media__frame,
.lw-media--inset .lw-media__frame{ --lw-ar:2.05; }

@media (max-width:900px){
  .lw-media__frame{ --lw-ar:1.75; }
  .lw-media--wide .lw-media__frame,
  .lw-media--inset .lw-media__frame{ --lw-ar:1.55; }
}
@media (max-width:560px){
  .lw-media__frame{ --lw-ar:1.2; }
  .lw-media--wide .lw-media__frame,
  .lw-media--inset .lw-media__frame{ --lw-ar:1.15; }
}
.lw-media__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  will-change:transform;
}
.lw-media--focal-top    .lw-media__img{ object-position:center 22%; }
.lw-media--focal-bottom .lw-media__img{ object-position:center 78%; }
.lw-media--focal-left   .lw-media__img{ object-position:22% center; }
.lw-media--focal-right  .lw-media__img{ object-position:78% center; }

/* The warm grade. Two layers: a filter that takes the edge off the midday
   saturation, and a scrim in the paper hue that ties the photograph to the
   ground it sits on. */
.lw-media__scrim{
  position:absolute; inset:0; pointer-events:none;
  background-color:#C8873A;
  mix-blend-mode:soft-light; opacity:.14;
}
.lw-media__frame:has(.lw-media__scrim) .lw-media__img,
.lw-split__frame:has(.lw-media__scrim) .lw-split__img,
.lw-pgrid__frame:has(.lw-media__scrim) .lw-pgrid__img{
  filter:saturate(.92) contrast(.98);
}

.lw-media--bleed{ width:100%; }  /* the section opts out of .lw-wrap — see the widget */
.lw-media--wide{ max-width:var(--lw-maxw); margin-inline:auto; padding-inline:var(--lw-gut); }
.lw-media--inset{ max-width:var(--lw-maxw-narrow); margin-inline:auto; padding-inline:var(--lw-gut); }
.lw-media--soft .lw-media__frame{ border-radius:var(--lw-radius-lg); }

/* Wipe reveal — the frame opens, the image inside settles from a slight
   over-scale. Both are transform/clip only, so they stay on the compositor. */
.lw-media--wipe .lw-media__frame{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--lw-ease);
}
.lw-media--wipe .lw-media__img{
  transform:scale(1.08);
  transition:transform 1.6s var(--lw-ease);
}
.is-in .lw-media--wipe .lw-media__frame,
.lw-media--wipe.is-in .lw-media__frame{ clip-path:inset(0 0 0 0); }
.is-in .lw-media--wipe .lw-media__img,
.lw-media--wipe.is-in .lw-media__img{ transform:scale(1); }
html:not(.lw-js) .lw-media--wipe .lw-media__frame{ clip-path:none; }
html:not(.lw-js) .lw-media--wipe .lw-media__img{ transform:none; }

/* Text over the image */
/* Text over photography needs a scrim that is aimed, not decorative. The porch
   frames are bright white soffit — a gentle bottom-up gradient left the headline
   unreadable. Two stacked gradients (one from the text's own corner, one from the
   base) guarantee contrast whatever the frame happens to contain. */
.lw-media__shade{
  position:absolute; inset:0; pointer-events:none;
  background-color:transparent;
  background-image:
    linear-gradient(to top, rgba(6,38,36,.78) 0%, rgba(6,38,36,.34) 38%, transparent 68%),
    linear-gradient(to right, rgba(6,38,36,.62) 0%, rgba(6,38,36,.12) 42%, transparent 66%);
}
.lw-media__frame:has(.lw-media__over--bottom-right) .lw-media__shade{
  background-image:
    linear-gradient(to top, rgba(6,38,36,.78) 0%, rgba(6,38,36,.34) 38%, transparent 68%),
    linear-gradient(to left, rgba(6,38,36,.62) 0%, rgba(6,38,36,.12) 42%, transparent 66%);
}
.lw-media__frame:has(.lw-media__over--center) .lw-media__shade{
  background-image:radial-gradient(70% 60% at 50% 50%, rgba(6,38,36,.66), rgba(6,38,36,.28) 60%, transparent 82%);
}
/* ⚠️ The measure lives on the HEADING, not on this wrapper, and it is not in
   `ch`. `ch` resolves against the element it is declared on: 24ch here was 24 ×
   the wrapper is 17px body font = 272px, while the headline inside sets at
   ~50px — so a nine-word line broke into six ragged lines. Size the overlay in
   absolute terms against the content column instead. */
.lw-media__over{
  position:absolute; z-index:2;
  max-width:min(680px, 52vw);
  padding:clamp(20px,4vw,var(--lw-s5));
  color:#fff;
  text-shadow:0 1px 24px rgba(6,38,36,.45);
}
.lw-media__over .lw-h-lg{
  font-size:clamp(1.9rem,3.4vw,3.1rem); line-height:1.06; letter-spacing:-.028em;
  text-wrap:balance;
}
.lw-media__over .lw-h-lg,
.lw-media__over .lw-eyebrow{ color:#fff; }
.lw-media__over .lw-eyebrow{ color:var(--lw-mint); }
.lw-media__over--bottom-left{
  left:max(var(--lw-gut), calc(50% - var(--lw-maxw)/2)); right:var(--lw-gut); bottom:0;
}
.lw-media__over--bottom-right{
  right:max(var(--lw-gut), calc(50% - var(--lw-maxw)/2)); left:var(--lw-gut); bottom:0; text-align:right;
}
.lw-media__over--center{ left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; }

.lw-media__cap{
  max-width:var(--lw-maxw); margin:14px auto 0; padding-inline:var(--lw-gut);
  font-size:13px; color:var(--lw-muted); letter-spacing:.01em;
}

/* --------------------------------------------------------------- Split ---- */
/* ⚠️ The custom property holds a COMPLETE value (46%), not a bare number.
   s_slider always emits `{{SIZE}}{{UNIT}}`, so a property meant to be unitless
   arrives as `46px`; `calc(46px * 1%)` is invalid and Chrome then drops the
   entire grid-template-columns declaration — the section silently collapses to
   one column with no error anywhere. */
.lw-split{
  --lw-split-text:46%;
  display:grid;
  grid-template-columns:var(--lw-split-text) minmax(0,1fr);
  gap:clamp(32px,5vw,var(--lw-s7));
  align-items:center;
}
.lw-split--left{ grid-template-columns:minmax(0,1fr) var(--lw-split-text); }
.lw-split--left .lw-split__text{ order:2; }
.lw-split--left .lw-split__media{ order:1; }

.lw-split__text > * + *{ margin-top:16px; }
.lw-split__points{ list-style:none; margin:var(--lw-s3) 0 0; padding:0; display:grid; gap:12px; }
.lw-split__points li{
  display:flex; gap:12px; align-items:baseline;
  font-size:var(--lw-body-lg); color:var(--lw-ink-soft);
}
.lw-split__points .lw-icon{ color:var(--lw-green-dk); flex:none; transform:translateY(3px); }

.lw-split__media{ position:relative; }
.lw-split__frame{ isolation:isolate; }
.lw-split__frame{
  position:relative; overflow:hidden; width:100%;
  border-radius:var(--lw-radius-lg); background-color:var(--lw-paper-2);
}
.lw-split__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lw-split--bleed.lw-split--right .lw-split__media{ margin-right:calc((50vw - var(--lw-maxw)/2 + var(--lw-gut)) * -1); }
.lw-split--bleed.lw-split--left  .lw-split__media{ margin-left:calc((50vw - var(--lw-maxw)/2 + var(--lw-gut)) * -1); }
.lw-split--bleed .lw-split__frame{ border-start-end-radius:0; border-end-end-radius:0; }
.lw-split--bleed.lw-split--left .lw-split__frame{
  border-radius:var(--lw-radius-lg); border-start-start-radius:0; border-end-start-radius:0;
}
/* Pinned to the media column, not the frame — the frame clips its overflow, so
   a chip meant to overlap the image corner has to sit outside it. */
.lw-split__badge{
  position:absolute; left:0; bottom:clamp(16px,3vw,40px); z-index:3;
  background-color:var(--lw-paper); color:var(--lw-ink);
  font-family:var(--lw-display); font-size:clamp(.95rem,1.4vw,1.15rem);
  letter-spacing:-.01em; padding:14px 20px;
  border-start-end-radius:var(--lw-radius-lg);
  max-width:22ch;
}

/* --------------------------------------------------- Photo composition ---- */
.lw-pgrid{ display:grid; gap:24px; }
.lw-pgrid__i{ margin:0; }
.lw-pgrid__frame{
  position:relative; overflow:hidden; width:100%;
  border-radius:var(--lw-radius-lg); background-color:var(--lw-paper-2);
}
/* Absolutely positioned so the image never drives the frame's height — the
   frame's aspect-ratio (or its flex stretch) does. In normal flow the image
   silently wins and every "make this frame taller" rule is ignored. */
.lw-pgrid__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--lw-ease);
}
.lw-pgrid--zoom .lw-pgrid__i:hover .lw-pgrid__img{ transform:scale(1.05); }

/* Per-frame crop, shared by every framed photograph on the site. A fixed frame
   throws away the top and bottom of a landscape photograph, so each frame says
   which part of it matters. Compounded onto the frame class to reach (0,2,1) —
   enough to survive Elementor and Astra without !important. */
.lw-media__frame.lw-f--top > img,
.lw-split__frame.lw-f--top > img,
.lw-pgrid__frame.lw-f--top > img{ object-position:center 18%; }
.lw-media__frame.lw-f--bottom > img,
.lw-split__frame.lw-f--bottom > img,
.lw-pgrid__frame.lw-f--bottom > img{ object-position:center 82%; }
.lw-media__frame.lw-f--left > img,
.lw-split__frame.lw-f--left > img,
.lw-pgrid__frame.lw-f--left > img{ object-position:20% center; }
.lw-media__frame.lw-f--right > img,
.lw-split__frame.lw-f--right > img,
.lw-pgrid__frame.lw-f--right > img{ object-position:80% center; }

/* The caption is an editorial credit line, not alt text that escaped. It gets
   the eyebrow's hairline so the composition reads as captioned rather than
   annotated, and it is pinned to the bottom of its cell so captions line up
   across the composition instead of floating at three different heights. */
.lw-pgrid__cap{
  margin:14px 0 0;
  font-family:var(--lw-sans); font-size:12.5px; line-height:1.5;
  letter-spacing:.005em; color:var(--lw-muted);
  display:flex; gap:11px; align-items:baseline;
  max-width:40ch;
}
.lw-pgrid__cap::before{
  content:""; flex:none; width:20px; height:1px; margin-top:.62em;
  background:currentColor; opacity:.45;
}

.lw-pgrid--strip{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.lw-pgrid--strip .lw-pgrid__frame{ aspect-ratio:4/5; }

.lw-pgrid--stagger{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:start; }
.lw-pgrid--stagger .lw-pgrid__frame{ aspect-ratio:4/5; }
.lw-pgrid--stagger .lw-pgrid__i:nth-child(even){ margin-top:clamp(24px,5vw,72px); }

/* Editorial: one tall frame holding the left, the rest stacked beside it.
   The earlier version spanned items by size class, which tiled to 12 columns on
   row one and then left a dead 7-column quadrant on row two — asymmetry has to
   be composed, not just unequal. */
.lw-pgrid--editorial{
  grid-template-columns:1.35fr 1fr;
  gap:clamp(16px,2.4vw,32px);
  align-items:stretch;
}
.lw-pgrid--editorial > .lw-pgrid__i:first-child{ grid-row:span 2; display:flex; flex-direction:column; height:100%; }
.lw-pgrid--editorial > .lw-pgrid__i:first-child .lw-pgrid__frame{ flex:1 1 auto; min-height:clamp(300px,34vw,540px); aspect-ratio:auto; }
.lw-pgrid--editorial > .lw-pgrid__i:not(:first-child) .lw-pgrid__frame{ aspect-ratio:16/10; }
/* A display heading with no lede beside it needs its own measure, or it sets as
   one thin 1320px line and stops reading as a heading. Not in `ch`: the display
   face has very wide lining figures, so 24ch resolves to 1075px here — `ch` is
   only a useful measure for the sans body faces. */
.lw-section--pgrid .lw-head--stacked .lw-head__h{ max-width:min(660px, 100%); }

/* A fourth or fifth frame simply continues the right-hand stack. */
.lw-pgrid--editorial > .lw-pgrid__i:nth-child(n+4){ grid-column:1 / -1; }
.lw-pgrid--editorial > .lw-pgrid__i:nth-child(n+4) .lw-pgrid__frame{ aspect-ratio:21/9; }

@media (max-width:1080px){
  .lw-split,
  .lw-split--left{ grid-template-columns:1fr; }
  .lw-split--left .lw-split__text{ order:1; }
  .lw-split--left .lw-split__media{ order:2; }
  .lw-split--bleed .lw-split__media{ margin-inline:0 !important; }
  .lw-split--bleed .lw-split__frame{ border-radius:var(--lw-radius-lg); }
}
@media (max-width:820px){
  .lw-pgrid--editorial{ grid-template-columns:1fr; }
  .lw-pgrid--editorial .lw-pgrid__i--lg,
  .lw-pgrid--editorial .lw-pgrid__i--md,
  .lw-pgrid--editorial .lw-pgrid__i--sm{ grid-column:1 / -1; margin:0; }
  .lw-pgrid--stagger .lw-pgrid__i:nth-child(even){ margin-top:0; }
  /* 21/9 is a closing vista across 1320px; across 350px it is a letterbox slot. */
  .lw-pgrid--editorial > .lw-pgrid__i:nth-child(n+4) .lw-pgrid__frame{ aspect-ratio:16/10; }
  .lw-media__over{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  .lw-media__img,.lw-split__img,.lw-pgrid__img{ transform:none !important; }
  .lw-media--wipe .lw-media__frame{ clip-path:none !important; }
}