/* ============================================================
   GREEN LION LANDSCAPE — "The Estate Folio"
   Dark editorial gallery: hairlines, framed photography,
   roman-numeral chapters, couture serif display.
   Palette follows the Green Lion Landscape Branding Guide:
     Gunmetal #0f232b · Charcoal #173a48 · Paynes Grey #4d626d
     Dark Moss Green #385d0d · Apple Green #9abd25 · Olivine #b4c684 / #a0b76f
     Cambridge Blue #7d9182
   Type: Cormorant Garamond (display) · Alegreya Sans (body) · IBM Plex Mono (folio marks)
   ============================================================ */

:root{
  --night:      #0f232b;
  --night-2:    #143039;
  --night-3:    #173a48;
  --pine:       #385d0d;
  --pine-soft:  #4a7714;
  --accent:       #9abd25;
  --accent-bright:#b4c684;
  --accent-dim:   rgba(154,189,37,.38);
  --accent-line:  rgba(154,189,37,.28);
  --ivory:      #eff2ea;
  --ivory-2:    #e3e8db;
  --ink:        #0f232b;
  --t-hi:       #f4f7f0;   /* headings on dark */
  --t-body:     #c2cec4;   /* body on dark */
  --t-dim:      #7d9182;

  --ff-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --ff-body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --ff-mono: "IBM Plex Mono", "Menlo", "Consolas", monospace;

  --step-0: clamp(1.02rem, .96rem + .3vw, 1.14rem);
  --step-1: clamp(1.2rem, 1.05rem + .8vw, 1.65rem);
  --step-2: clamp(1.7rem, 1.4rem + 1.6vw, 2.6rem);
  --step-3: clamp(2.3rem, 1.7rem + 3vw, 4rem);
  --step-4: clamp(3rem, 2rem + 5.4vw, 6.2rem);

  --wrap: 1240px;
  --r: 16px;       /* photograph corner radius */
  --r-sm: 10px;

  /* fine topo contours — seamless islands, very quiet */
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%239abd25' stroke-width='.8'%3E%3Cpath d='M85 62c38-18 92-10 104 18s-16 52-58 56-84-6-92-30 8-26 46-44z'/%3E%3Cpath d='M97 76c30-13 68-8 77 12s-13 38-45 41-62-4-68-21 6-19 36-32z'/%3E%3Cpath d='M110 91c21-9 44-6 50 7s-9 25-31 27-41-3-45-14 5-13 26-20z'/%3E%3Cpath d='M300 260c44-20 96-6 104 26s-24 58-70 60-88-14-92-42 14-24 58-44z'/%3E%3Cpath d='M312 276c34-15 68-5 74 18s-18 42-52 44-64-10-67-30 11-17 45-32z'/%3E%3Cpath d='M324 292c23-10 42-3 46 12s-12 27-34 28-40-7-42-19 8-11 30-21z'/%3E%3Cpath d='M74 320c26-12 60-8 66 10s-12 34-40 36-54-5-58-20 6-14 32-26z'/%3E%3Cpath d='M318 84c28-12 60-6 66 12s-14 32-42 34-52-6-56-20 4-14 32-26z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--t-body);
  background:var(--night);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
h1,h2,h3{font-family:var(--ff-display);font-weight:400;line-height:1.05;margin:0 0 .4em;color:var(--t-hi);text-wrap:balance}
h4{font-family:var(--ff-body);margin:0 0 .4em;color:var(--t-hi)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--accent-bright)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--ink);padding:.7rem 1.2rem;z-index:400;font-weight:700}
.skip-link:focus{left:12px;top:12px}

/* thin luxury scrollbar */
html{scrollbar-color:var(--pine) var(--night)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--night)}
::-webkit-scrollbar-thumb{background:#2c4a10;border-radius:6px;border:2px solid var(--night)}
::-webkit-scrollbar-thumb:hover{background:var(--pine)}
::selection{background:rgba(154,189,37,.35);color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.2rem,4.5vw,3rem)}

/* apple-green italic accent inside headings */
.gild{font-style:italic;color:var(--accent-bright)}
.on-ivory .gild{color:#385d0d}

/* chapter heading: big roman numeral + title + italic tail */
.ch-head{margin-bottom:clamp(2.2rem,5vw,3.6rem);position:relative}
.ch-head .no{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:clamp(3.4rem,7vw,6rem);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px var(--accent-dim);
  display:block;
  margin-bottom:-.28em;
  margin-left:-.04em;
  pointer-events:none;
}
.ch-head h2{font-size:var(--step-3);max-width:22ch}
.ch-head .tail{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:var(--step-1);
  color:var(--t-dim);
  display:block;
  margin-top:.2em;
}
.on-ivory .ch-head .no{-webkit-text-stroke-color:rgba(56,93,13,.4)}
.on-ivory .ch-head .tail{color:#4d626d}

/* hairline rules */
.rule{border:0;border-top:1px solid var(--accent-line);margin:0}

/* folio caption under/over images */
.cap{
  font-family:var(--ff-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--t-dim);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-top:.55rem;
  border-top:1px solid var(--accent-line);
  margin-top:.65rem;
}
.cap .r{color:var(--accent-dim)}

/* framed photograph — rounded, inset accent hairline, no card box */
.frame{position:relative;margin:0}
.frame img{width:100%;object-fit:cover;border-radius:var(--r)}
.frame::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(154,189,37,.5);
  border-radius:calc(var(--r) - 7px);
  pointer-events:none;
}
.frame--quiet::after{border-color:rgba(154,189,37,.28)}

/* ============================================================
   BUTTONS — quiet luxury, real pressed state
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  min-height:50px;
  min-width:44px;
  padding:.9em 2.1em;
  font-family:var(--ff-body);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  color:var(--ink);
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--r-sm);
  box-shadow:0 3px 0 rgba(56,93,13,.9);
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .12s ease, background-color .18s ease, color .18s ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 rgba(56,93,13,.9)}
.btn:focus-visible{outline:2px solid var(--t-hi);outline-offset:3px}
.btn--ghost{
  background:transparent;
  color:var(--accent-bright);
  border:1px solid var(--accent-dim);
  box-shadow:0 3px 0 rgba(56,93,13,.4);
}
.btn--ghost:hover{background:rgba(154,189,37,.12);color:var(--accent-bright);border-color:var(--accent)}
.btn--pine{
  background:var(--pine);
  border-color:var(--pine);
  color:#f2f6ec;
  box-shadow:0 3px 0 #24400c;
}
.btn--pine:hover{background:var(--pine-soft);border-color:var(--pine-soft)}
.on-ivory .btn--ghost{color:#385d0d;border-color:rgba(56,93,13,.5);box-shadow:0 3px 0 rgba(56,93,13,.25)}
.on-ivory .btn--ghost:hover{background:rgba(56,93,13,.08)}
/* quiet text link */
.tlink{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.1rem;
  color:var(--accent-bright);
  text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  padding-bottom:2px;
}
.tlink:hover{border-bottom-color:var(--accent-bright)}

/* ============================================================
   HEADER — hairline strip + split nav around centered mark
   ============================================================ */
.hd-strip{
  border-bottom:1px solid rgba(154,189,37,.18);
  background:var(--night);
}
.hd-strip .wrap{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-block:.45rem;
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.16em;
  color:var(--t-dim);
}
.hd-strip a{color:var(--accent-dim);text-decoration:none}
.hd-strip a:hover{color:var(--accent-bright)}
.hd{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(15,35,43,.92);
  border-bottom:1px solid rgba(154,189,37,.22);
}
@supports (backdrop-filter:blur(0)){ .hd{background:rgba(15,35,43,.86);backdrop-filter:blur(8px)} }
.hd .wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  min-height:78px;
  gap:clamp(1rem,2.6vw,2.4rem);
  position:relative;
}
.hd-nav{display:flex;gap:clamp(.9rem,2.2vw,2rem);align-items:center;justify-self:end}
.hd-nav--r{justify-content:flex-end}
.hd-nav a{
  font-family:var(--ff-body);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#cdd6c0;
  text-decoration:none;
  padding:.4rem 0;
  border-bottom:1px solid transparent;
}
.hd-nav a:hover{color:var(--accent-bright)}
.hd-nav a[aria-current="page"]{color:var(--accent-bright);border-bottom-color:var(--accent)}
.hd-nav .hd-cta{
  color:var(--ink);
  background:var(--accent);
  white-space:nowrap;
  padding:.62rem 1.2rem;
  border-radius:8px;
  border-bottom:0;
  box-shadow:0 2px 0 rgba(56,93,13,.9);
}
.hd-nav .hd-cta:hover{background:var(--accent-bright);color:var(--ink)}
.hd-nav .hd-cta:active{transform:translateY(2px);box-shadow:none}
/* the crest: large at the top of the page, hanging over the content edge;
   shrinks into the bar once the visitor scrolls (.hd--compact via JS) */
/* Horizontal lockup, left of the nav. Two stacked copies cross-fade: the full
   lockup at rest, and the same artwork without the strap-line once the bar
   shrinks on scroll — at that size the strap-line is unreadable anyway. Both
   sit at the same width, so the wordmark never jumps. */
.hd-mark{
  position:relative;
  display:block;
  width:clamp(232px,25vw,340px);
  height:100%;
  min-height:78px;
  border-bottom:0;
  transition:width .45s cubic-bezier(.33,0,.15,1);
}
.hd-mark img{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:auto;
  transform:translateY(-50%);
  z-index:6;
  transition:opacity .35s ease;
}
.hd-mark__tight{opacity:0}
.hd--compact .hd-mark{width:clamp(196px,20vw,268px)}
.hd--compact .hd-mark__full{opacity:0}
.hd--compact .hd-mark__tight{opacity:1}
/* services dropdown */
.hd-drop{position:relative;align-self:stretch;display:flex;align-items:center}
.hd-drop__caret{font-size:.6em;color:var(--accent-dim);margin-left:.45em;letter-spacing:0}
.hd-drop::after{ /* hover bridge across the gap */
  content:"";
  position:absolute;
  top:100%;left:0;right:0;height:14px;
}
.hd-drop__panel{
  position:absolute;
  top:calc(100% + 12px);
  left:-1.2rem;
  min-width:480px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.05rem 2rem;
  padding:1.2rem 1.5rem 1.3rem;
  background:rgba(9,21,26,.97);
  border:1px solid rgba(154,189,37,.3);
  border-radius:14px;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s .22s;
  z-index:260;
}
.hd-drop:hover .hd-drop__panel,
.hd-drop:focus-within .hd-drop__panel{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .22s ease, transform .22s ease;
}
.hd-drop__panel a{
  font-family:var(--ff-display);
  font-size:1.08rem;
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none;
  color:#dfe5d4;
  text-decoration:none;
  padding:.42rem 0;
  border-bottom:1px solid rgba(154,189,37,.1);
  white-space:nowrap;
}
.hd-drop__panel a:hover{color:var(--accent-bright)}
.hd-drop__panel a.hd-drop__all{
  grid-column:1/-1;
  font-style:italic;
  color:var(--accent-bright);
  border-bottom:0;
  padding-top:.7rem;
}
@media (prefers-reduced-motion: reduce){
  .hd-drop__panel{transition:none}
}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--accent-dim);
  color:var(--accent-bright);
  font-family:var(--ff-body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.22em;
  padding:.7rem 1.1rem;
  cursor:pointer;
  min-height:44px;
}
.nav-toggle:hover{background:rgba(154,189,37,.1)}

/* drawer */
.drawer{display:none;position:fixed;inset:0;z-index:300;background:var(--night);color:#fff;padding:1.4rem;overflow:auto}
.drawer.open{display:block}
.drawer::before{content:"";position:fixed;inset:0;background-image:var(--topo);opacity:.1;pointer-events:none}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.4rem}
.drawer__top img{width:min(232px,58vw);height:auto}
.drawer__close{background:none;border:1px solid var(--accent-dim);color:var(--accent-bright);font-family:var(--ff-body);font-weight:700;letter-spacing:.2em;font-size:.7rem;padding:.7rem 1rem;cursor:pointer;min-height:44px}
.drawer__links{list-style:none;margin:0 0 2.4rem;padding:0;position:relative;counter-reset:dlink}
.drawer__links > li > a{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  font-family:var(--ff-display);
  font-size:clamp(2rem,8vw,2.8rem);
  color:var(--t-hi);
  text-decoration:none;
  padding:.4em 0;
  border-bottom:1px solid rgba(154,189,37,.18);
}
.drawer__links > li > a::before{
  counter-increment:dlink;
  content:counter(dlink, decimal-leading-zero);
  font-size:.42em;
  font-style:italic;
  color:var(--accent-dim);
  min-width:2.2em;
}
.drawer__links > li > a[aria-current="page"]{color:var(--accent-bright)}
.drawer__sub{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.1rem 1.2rem;
  padding:.5rem 0 1rem 2.6rem;
}
.drawer__sub a{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--t-dim);
  text-decoration:none;
  padding:.28rem 0;
  display:block;
}
.drawer__sub a:hover{color:var(--accent-bright)}
@media (max-width:420px){.drawer__sub{grid-template-columns:1fr}}
.drawer__ctas{display:grid;gap:1rem;position:relative}

/* ============================================================
   AMBIENT — drifting fine topo + slow glow (paused offscreen)
   ============================================================ */
.ambient{position:relative;overflow:hidden}
.ambient > .wrap, .amb-content{position:relative;z-index:3}
.ambient__topo{
  position:absolute;inset:0;
  width:calc(100% + 420px);
  background-image:var(--topo);
  background-repeat:repeat;
  opacity:.1;
  pointer-events:none;
  animation:topo-drift 120s linear infinite;
  z-index:1;
}
.ambient__glow{
  position:absolute;inset:-30%;
  background:
    radial-gradient(40% 46% at 24% 28%, rgba(154,189,37,.10), transparent 70%),
    radial-gradient(46% 52% at 76% 74%, rgba(47,90,46,.38), transparent 72%);
  pointer-events:none;
  animation:glow-shift 60s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes topo-drift{from{transform:translateX(0)}to{transform:translateX(-420px)}}
@keyframes glow-shift{from{transform:translate(0,0) scale(1)}to{transform:translate(3%,2.5%) scale(1.06)}}
.motion-paused .ambient__topo,.motion-paused .ambient__glow,
.is-offscreen .ambient__topo,.is-offscreen .ambient__glow{animation-play-state:paused}

/* ============================================================
   HERO — the folio cover (full-bleed, hairline-framed)
   ============================================================ */
.hero--cover{
  position:relative;
  overflow:hidden;
  background:var(--night);
  min-height:min(calc(100svh - 118px), 940px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img, .hero__bg video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:62% 58%;
}
.hero__pause{
  position:absolute;
  right:clamp(24px,3vw,40px);
  bottom:clamp(22px,3vw,38px);
  z-index:5;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--accent-dim);
  background:rgba(6,17,21,.55);
  color:var(--accent-bright);
  font-size:.7rem;
  cursor:pointer;
  transition:background .2s;
}
.hero__pause:hover{background:rgba(154,189,37,.2)}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,17,21,.95) 0%, rgba(6,17,21,.66) 30%, rgba(6,17,21,.16) 58%, rgba(6,17,21,0) 72%),
    linear-gradient(96deg, rgba(6,17,21,.88) 0%, rgba(6,17,21,.52) 34%, rgba(6,17,21,.1) 58%, rgba(6,17,21,0) 70%),
    linear-gradient(to bottom, rgba(6,17,21,.55), rgba(6,17,21,0) 16%);
}
.hero__framelines{
  position:absolute;
  inset:clamp(10px,1.8vw,24px);
  border:1px solid rgba(154,189,37,.42);
  border-radius:calc(var(--r) + 6px);
  z-index:2;
  pointer-events:none;
}
.hero__plateno{
  position:absolute;
  top:clamp(26px,3.4vw,44px);
  right:clamp(26px,3.4vw,44px);
  z-index:3;
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.24em;
  color:rgba(244,241,230,.9);
  background:rgba(6,17,21,.5);
  padding:.45rem .8rem;
}
.hero__content{
  position:relative;z-index:3;
  width:100%;
  padding-top:clamp(4.5rem,12vh,8rem);
}
.hero__folio{
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.3em;
  color:rgba(220,195,137,.85);
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1.8rem;
}
.hero__folio::before{content:"";width:56px;height:1px;background:var(--accent-dim)}
.hero--cover h1{
  font-size:clamp(3rem, 1.8rem + 6.2vw, 6.6rem);
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.02;
  margin-bottom:.22em;
  text-shadow:0 2px 30px rgba(6,17,21,.55);
}
.hero__sub{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:var(--step-1);
  color:#cfd6c2;
  max-width:38ch;
  margin-bottom:2rem;
  line-height:1.4;
  text-shadow:0 1px 18px rgba(6,17,21,.6);
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:clamp(2.2rem,5vh,3.4rem)}
.hero__cred{
  list-style:none;
  margin:0;
  padding:1.1rem 0 clamp(1.6rem,3.4vw,2.6rem);
  border-top:1px solid rgba(154,189,37,.35);
  display:flex;
  flex-wrap:wrap;
  gap:1rem clamp(1.6rem,4vw,3.6rem);
  align-items:baseline;
}
.hero__cred li{display:flex;align-items:baseline;gap:.7rem}
.hero__cred .k{font-family:var(--ff-display);font-size:1.25rem;color:var(--accent-bright);white-space:nowrap}
.hero__cred .v{font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.16em;color:#7d9182;white-space:nowrap}
.hero__cred .tel{margin-left:auto}
.hero__cred .tel a{
  font-family:var(--ff-display);
  font-size:1.25rem;
  color:var(--t-hi);
  text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  white-space:nowrap;
}
.hero__cred .tel a:hover{color:var(--accent-bright)}

/* ============================================================
   FILMSTRIP — drag/momentum marquee slider (frameless stills)
   ============================================================ */
.fieldbook{background:var(--night);padding-block:clamp(2rem,4vw,3rem) clamp(2.6rem,5vw,4rem);overflow:hidden;border-top:1px solid rgba(154,189,37,.16)}
.fieldbook__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;
  margin-bottom:1.6rem;flex-wrap:wrap;
}
.fieldbook__head h2{
  font-size:var(--step-1);
  font-style:italic;
  color:var(--t-dim);
  margin:0;
}
.fieldbook__controls{display:flex;gap:.5rem}
.fb-btn{
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--accent-dim);
  background:transparent;
  color:var(--accent-bright);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s, transform .1s;
}
.fb-btn:hover{background:rgba(154,189,37,.12)}
.fb-btn:active{transform:scale(.94)}
.fb-btn svg{width:17px;height:17px}
.fieldbook__viewport{cursor:grab;touch-action:pan-y;overflow:hidden}
.fieldbook__viewport.dragging{cursor:grabbing}
.fieldbook__track{display:flex;gap:12px;list-style:none;margin:0;padding:0;width:max-content;will-change:transform}
.fb-card{flex:none;width:clamp(220px,24vw,320px);user-select:none}
.fb-card figure{margin:0}
.fb-card img{aspect-ratio:4/3;object-fit:cover;width:100%;pointer-events:none;filter:saturate(.96);border-radius:var(--r-sm)}
.fb-card figcaption{
  display:flex;justify-content:space-between;gap:.6rem;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;color:var(--t-dim);
  padding-top:.5rem;
  border-top:1px solid rgba(154,189,37,.2);
  margin-top:.55rem;
}
.fb-card figcaption .no{color:var(--accent-dim);font-style:normal}

/* ---------- quiet background patterns (pure CSS, zero weight) ---------- */
.pat-linen{
  background-image:
    repeating-linear-gradient(0deg, rgba(154,189,37,.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(154,189,37,.03) 0 1px, transparent 1px 5px);
}
.pat-stripe{
  background-image:repeating-linear-gradient(45deg, rgba(154,189,37,.035) 0 1px, transparent 1px 11px);
}
.pat-dots{
  background-image:radial-gradient(rgba(154,189,37,.07) 1px, transparent 1.4px);
  background-size:24px 24px;
}
.on-ivory.pat-graph{
  background-image:
    repeating-linear-gradient(0deg, rgba(15,35,43,.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(15,35,43,.045) 0 1px, transparent 1px 26px);
}

/* ============================================================
   SERVICES INDEX — editorial ledger rows + sticky stage
   ============================================================ */
.svc{background:var(--night-2);padding-block:clamp(3.4rem,7vw,6rem);
  position:relative;
  overflow:hidden;
  background-image:repeating-linear-gradient(0deg, rgba(154,189,37,.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(154,189,37,.03) 0 1px, transparent 1px 5px)}
.svc > .wrap{position:relative;z-index:2}

/* skewed kinetic type wall behind the gatefold — decorative, near-transparent */
.svc__wall{
  position:absolute;
  inset:-6% -2%;
  z-index:1;
  pointer-events:none;
  user-select:none;
}
.svc__wall-tilt{
  transform:rotate(-4deg) scale(1.14);
  display:grid;
  gap:0;
  height:100%;
  align-content:center;
}
.svc__wall .tw-row{margin-block:-.05em}
.svc__wall .tw-row--wall span{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(4rem,10vw,8.5rem);
  line-height:.94;
  padding-right:.5em;
  color:transparent;
  -webkit-text-stroke:1px rgba(154,189,37,.17);
}
.svc__wall .tw-row--wall-solid span{
  -webkit-text-stroke:0;
  color:rgba(154,189,37,.07);
}
.svc__wall .tw-row__track{animation-duration:80s}
.svc__wall .tw-row--rev .tw-row__track{animation-name:tw-r;animation-duration:95s}
@keyframes tw-r{from{transform:translateX(-25%)}to{transform:translateX(0)}}
.svc.is-offscreen .tw-row__track{animation-play-state:paused}
/* the gatefold: eight photo slats that breathe open on hover/focus */
.slats{
  display:flex;
  gap:10px;
  height:clamp(420px, 58vh, 560px);
  margin-bottom:1.8rem;
}
.slat{
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  border-radius:var(--r);
  text-decoration:none;
  transition:flex-grow .55s cubic-bezier(.35,0,.15,1);
  outline-offset:3px;
}
.slat__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.85) brightness(.52);
  transform:scale(1.04);
  transition:filter .55s ease, transform .7s ease;
}
.slat::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,17,21,.88) 0%, rgba(6,17,21,.25) 42%, rgba(6,17,21,.05) 70%);
  transition:opacity .4s;
}
.slat:hover, .slat:focus-visible{flex-grow:4.6}
.slat:hover .slat__img, .slat:focus-visible .slat__img{filter:saturate(1) brightness(.86);transform:scale(1)}
.slat__no{
  position:absolute;
  top:14px;left:16px;
  z-index:3;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--accent-bright);
}
.slat__vert{
  position:absolute;
  left:50%;bottom:20px;
  transform:translateX(-50%);
  z-index:3;
  writing-mode:vertical-rl;
  rotate:180deg;
  font-family:var(--ff-display);
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  letter-spacing:.04em;
  color:#e9ecdd;
  white-space:nowrap;
  max-height:calc(100% - 70px);
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .3s;
}
.slat__info{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:3;
  padding:1.3rem 1.4rem 1.2rem;
  display:grid;
  gap:.25rem;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .4s ease .12s, transform .45s ease .12s;
  pointer-events:none;
}
.slat:hover .slat__vert, .slat:focus-visible .slat__vert{opacity:0}
.slat:hover .slat__info, .slat:focus-visible .slat__info{opacity:1;transform:none}
.slat__name{
  font-family:var(--ff-display);
  font-size:clamp(1.3rem,2vw,1.8rem);
  line-height:1.1;
  color:var(--t-hi);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.slat__hint{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:.98rem;
  color:#c9d1bc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.slat__go{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1rem;
  color:var(--accent-bright);
  margin-top:.35rem;
}
@media (prefers-reduced-motion: reduce){
  .slat, .slat__img, .slat__info, .slat__vert{transition:none}
}
.svc__more{margin-top:1.6rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}

/* ============================================================
   SELECTED WORKS — editorial spreads
   ============================================================ */
.works{background:var(--night);padding-block:clamp(3.4rem,7vw,6rem);background-image:radial-gradient(rgba(154,189,37,.045) 1px, transparent 1.4px);background-size:26px 26px}
.spread{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.6vw,2rem);
  align-items:end;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.spread:last-of-type{margin-bottom:0}
.spread__img{grid-column:1/9;position:relative}
.spread__img img{aspect-ratio:16/9.6;object-fit:cover}
.spread__txt{grid-column:9/13;padding-bottom:.4rem}
.spread--rev .spread__img{grid-column:5/13;order:2}
.spread--rev .spread__txt{grid-column:1/5;order:1}
.spread__no{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:2.4rem;
  color:transparent;
  -webkit-text-stroke:1px var(--accent-dim);
  display:block;
  line-height:1;
  margin-bottom:.6rem;
}
.spread__txt h3{font-size:var(--step-2);margin-bottom:.35em}
.spread__txt .it{font-family:var(--ff-display);font-style:italic;color:var(--t-dim);font-size:1.05rem;display:block;margin-bottom:.9em;line-height:1.45}
.spread__txt p{font-size:.95rem;margin-bottom:1.2em}

/* ============================================================
   IVORY CHAPTER — transparent pricing (paper interlude)
   ============================================================ */
.on-ivory{background:var(--ivory);color:#173a48}
.on-ivory h2,.on-ivory h3{color:var(--ink)}
.pricing{padding-block:clamp(3.4rem,7vw,6rem);position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(0deg, rgba(15,35,43,.04) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(15,35,43,.04) 0 1px, transparent 1px 26px)}
.pricing::before{ /* pine lion watermark on the paper chapter */
  content:"";
  position:absolute;
  right:-60px;bottom:-30px;
  width:min(40vw,480px);
  aspect-ratio:496/284;
  background:url("../img/head-lion-moss.svg") no-repeat center/contain;
  opacity:.055;
  pointer-events:none;
}
.pricing > .wrap{position:relative;z-index:2}
.pricing__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2.4rem,5vw,4.4rem);
  align-items:start;
}
.pricing__intro p{max-width:44ch}
.price-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(15,35,43,.5)}
.price-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.4rem 2rem;
  align-items:baseline;
  padding:1.3rem .1rem 1.2rem;
  border-bottom:1px solid rgba(15,35,43,.22);
}
.price-row .t{font-family:var(--ff-display);font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--ink);line-height:1.1}
.price-row .d{font-family:var(--ff-display);font-style:italic;font-size:.98rem;color:#4d626d;grid-column:1;line-height:1.4}
.price-row .amt{
  grid-column:2;grid-row:1;
  font-family:var(--ff-display);
  font-size:clamp(1.7rem,2.8vw,2.4rem);
  color:#385d0d;
  white-space:nowrap;
}
.price-row .amt small{font-size:.5em;font-style:italic;letter-spacing:.02em;color:#4d626d}
.price-row .rng{
  grid-column:2;grid-row:2;
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.12em;
  color:#4d626d;
  justify-self:end;
}
.pricing__note{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1.05rem;
  color:#4d626d;
  margin-top:1.4rem;
}
.pricing__ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}

/* ============================================================
   PROCESS — four stations on a hairline
   ============================================================ */
.process{background:var(--night-2);padding-block:clamp(3.4rem,7vw,6rem);background-image:repeating-linear-gradient(45deg, rgba(154,189,37,.035) 0 1px, transparent 1px 11px)}
.route{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1.4rem,3vw,2.6rem);
  position:relative;
  counter-reset:sta;
}
.route::before{
  content:"";
  position:absolute;
  top:11px;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, var(--accent-dim) 0 62%, transparent 62%);
  background-size:14px 1px;
}
.route li{position:relative;padding-top:2.2rem}
.route li::before{
  counter-increment:sta;
  content:counter(sta, decimal-leading-zero);
  position:absolute;
  top:0;left:0;
  font-family:var(--ff-display);
  font-style:italic;
  color:var(--accent-bright);
  background:var(--night-2);
  padding-right:.8rem;
  line-height:1.4;
}
.route h3{font-size:1.5rem;margin-bottom:.35em}
.route p{font-size:.93rem;color:var(--t-body);margin:0}
.process__proof{
  margin-top:clamp(2.6rem,5vw,4rem);
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,4fr);
  gap:clamp(1.4rem,3vw,2.4rem);
  align-items:end;
}
.process__proof .frame img{aspect-ratio:21/9;object-fit:cover}
.process__proof .side{font-family:var(--ff-display);font-style:italic;font-size:var(--step-1);color:var(--t-dim);line-height:1.4}

/* ============================================================
   QUOTES — large italics
   ============================================================ */
.quotes{background:var(--night);padding-block:clamp(3.4rem,7vw,6rem);position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(154,189,37,.06) 1px, transparent 1.4px);background-size:24px 24px}
.quotes::before{ /* flowing lion watermark */
  content:"";
  position:absolute;
  right:-4%;top:8%;
  width:min(46vw,560px);
  aspect-ratio:496/284;
  background:url("../img/head-lion-apple.svg") no-repeat right top / auto 100%;
  opacity:.06;
  pointer-events:none;
}
.quotes > .wrap{position:relative;z-index:2}
.note{margin:0 0 clamp(2.6rem,5vw,4rem);max-width:56rem}
.note:last-of-type{margin-bottom:0}
.note--right{margin-left:auto;text-align:right}
.note blockquote{
  margin:0;
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem,1.05rem + 1.6vw,2rem);
  line-height:1.45;
  color:#e6e9da;
}
.note blockquote p::before{content:"“";color:var(--accent-dim)}
.note blockquote p::after{content:"”";color:var(--accent-dim)}
.note figcaption{
  margin-top:1.1rem;
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  color:var(--t-dim);
}
.note figcaption b{color:var(--accent-bright);font-weight:500}
.quotes__foot{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;color:var(--t-dim);margin-top:2.6rem}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{background:var(--night-2);border-top:1px solid rgba(154,189,37,.16);border-bottom:1px solid rgba(154,189,37,.16)}
.trust__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.trust__cell{
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.8rem);
  border-left:1px solid rgba(154,189,37,.14);
}
.trust__cell:first-child{border-left:0;padding-left:0}
.trust__cell .k{font-family:var(--ff-display);font-size:1.45rem;color:var(--accent-bright);display:block;margin-bottom:.3rem;line-height:1.15}
.trust__cell .v{font-size:.88rem;color:var(--t-body)}
.trust__cell a{color:var(--accent-bright)}
.trust__cell a[href^="tel:"]{white-space:nowrap}

/* ============================================================
   SEND-OFF MARQUEE — single elegant serif row
   ============================================================ */
.sendoff{
  background:var(--night);
  padding-block:clamp(2.4rem,5vw,4rem);
  overflow:hidden;
  position:relative;
  border-top:1px solid rgba(154,189,37,.14);
}
.tw-row{white-space:nowrap;overflow:hidden}
.tw-row__track{display:inline-flex;align-items:baseline;will-change:transform;animation:tw-l 60s linear infinite}
.tw-row span{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:1.15;
  padding-right:.6em;
  color:var(--t-hi);
}
.tw-row span i{font-style:italic;color:transparent;-webkit-text-stroke:1px var(--accent);padding-inline:.12em}
@keyframes tw-l{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.motion-paused .tw-row__track,.sendoff.is-offscreen .tw-row__track,.footer.is-offscreen .tw-row__track{animation-play-state:paused}
.typewall__pause{
  position:absolute;
  top:.9rem;right:clamp(1rem,4vw,3rem);
  z-index:5;
  background:transparent;
  border:1px solid var(--accent-dim);
  color:var(--accent-bright);
  font-family:var(--ff-mono);
  font-size:.58rem;
  letter-spacing:.18em;
  padding:.6rem .9rem;
  cursor:pointer;
  min-height:40px;
}
.typewall__pause:hover{background:rgba(154,189,37,.1)}

/* ============================================================
   CTA PANEL — the invitation
   ============================================================ */
.cta-panel{background:var(--night);padding-block:clamp(3.4rem,7vw,6rem)}
.cta-panel__card{
  border-radius:var(--r);
  border:1px solid rgba(154,189,37,.3);
  padding:clamp(2.2rem,6vw,4.4rem);
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(2rem,4vw,3.6rem);
  align-items:center;
  overflow:hidden;
}
.cta-panel__card::after{
  content:"";
  position:absolute;inset:10px;
  border:1px solid rgba(154,189,37,.16);
  border-radius:calc(var(--r) - 6px);
  pointer-events:none;
}
.cta-panel__card h2{font-size:var(--step-3);max-width:18ch}
.cta-panel__card .it{font-family:var(--ff-display);font-style:italic;color:var(--t-dim);font-size:var(--step-1);display:block;margin-top:.4em;line-height:1.4}
.cta-panel__card::before{
  content:"";
  position:absolute;
  right:-30px;bottom:-36px;
  width:min(38vw,420px);
  aspect-ratio:496/284;
  background:url("../img/head-lion-apple.svg") no-repeat center/contain;
  opacity:.07;
  pointer-events:none;
}
.cta-panel__actions{display:grid;gap:1rem;position:relative;z-index:3}
.cta-panel__actions .btn{width:100%}
.cta-panel__note{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;color:var(--t-dim);text-align:center;margin:0}

/* ============================================================
   FOOTER — the colophon
   ============================================================ */
.footer{background:var(--night);position:relative;overflow:hidden;border-top:1px solid rgba(154,189,37,.2)}
.footer__lead{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
  gap:clamp(2.4rem,5vw,4.5rem);
  padding-block:clamp(3.2rem,7vw,5.5rem) clamp(2.6rem,5vw,4rem);
  position:relative;z-index:3;
}
.footer__logo{display:inline-block;margin-bottom:1.5rem;border-bottom:0}
.footer__logo img{width:min(300px,86%);height:auto;display:block}
.footer__ethos{font-size:.95rem;line-height:1.75;max-width:38ch;color:var(--t-body);margin:0 0 1.7rem}
.footer__proof{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.55rem .7rem;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-dim);
}
.footer__proof li{border:1px solid rgba(154,189,37,.26);border-radius:999px;padding:.5em 1.05em;white-space:nowrap}
.footer h3{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:1.15rem;
  color:var(--accent-bright);
  margin:0 0 1.2rem;
}
.footer__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;font-size:.92rem}
.footer a{color:#d5dcc9;text-decoration:none;border-bottom:1px solid transparent}
.footer a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-dim)}
.footer__person{padding:.85rem 0;border-top:1px solid rgba(154,189,37,.14);display:grid;gap:.2rem;justify-items:start}
.footer__role{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--t-dim)}
.footer__tel{font-family:var(--ff-display);font-weight:300;font-size:clamp(1.3rem,2vw,1.55rem);color:var(--t-hi)}
.footer__who{font-family:var(--ff-display);font-style:italic;font-size:.9rem;color:var(--t-dim)}
.footer__mail{display:inline-block;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(154,189,37,.14);font-size:.92rem;width:100%}
.footer__social{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
.footer__social span{color:var(--accent-dim)}
.footer__seal{display:flex;align-items:center;gap:1.6rem;position:relative;z-index:3;padding-inline:clamp(1.2rem,4vw,3rem)}
.footer__seal-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(154,189,37,.35))}
.footer__seal-line:last-child{background:linear-gradient(90deg,rgba(154,189,37,.35),transparent)}
.footer__seal img{height:34px;opacity:.92}
.footer__towns{
  text-align:center;margin-inline:auto;margin-block:0;padding-block:1.7rem 0;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--t-dim);position:relative;z-index:3;
}
.footer__sig{
  margin-top:1.6rem;
  border-top:1px solid rgba(154,189,37,.16);
  padding-block:1.3rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.14em;color:var(--t-dim);
  position:relative;z-index:3;
}
.footer__sig a{color:var(--t-dim)}
.footer__sig a:hover{color:var(--accent-bright)}

/* ============================================================
   INNER PAGES — folio pageheads
   ============================================================ */
.pagehead{background:var(--night);position:relative;overflow:hidden}
.ws-logo{width:min(400px,78vw);height:auto;display:block;margin-bottom:1.7rem}
.pagehead__inner{
  padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3.4rem);
  position:relative;z-index:3;
}
.pagehead h1{font-size:var(--step-4);font-weight:300;max-width:16ch;margin-bottom:.15em}
.pagehead .it{font-family:var(--ff-display);font-style:italic;font-size:var(--step-1);color:var(--t-dim);display:block;line-height:1.4;max-width:40ch}
.pagehead__meta{
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  color:var(--t-dim);
  display:grid;
  gap:.7rem;
  justify-items:end;
  text-align:right;
  padding-bottom:.6rem;
}
.pagehead__meta .fol{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:2.2rem;
  color:transparent;
  -webkit-text-stroke:1px var(--accent-dim);
  letter-spacing:0;
}
.pagehead__art{position:relative;z-index:3;padding-bottom:clamp(2.4rem,5vw,4rem)}
.pagehead__art .frame img{aspect-ratio:21/8.4;object-fit:cover}
.pagehead__ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}

/* --- services page: ledgers --- */
.ledger{background:var(--night);padding-block:clamp(3rem,6vw,5rem);
  background-image:repeating-linear-gradient(0deg, rgba(154,189,37,.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(154,189,37,.025) 0 1px, transparent 1px 5px)}
.ledger:nth-of-type(even){background:var(--night-2)}
.svc-row{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(154,189,37,.16);
  align-items:center;
}
.svc-row:first-of-type{border-top:0;padding-top:0}
.svc-row--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.svc-row--rev .svc-row__txt{order:2}
.svc-row--rev .frame{order:1}
.svc-row .frame img{aspect-ratio:16/10;object-fit:cover}
.svc-row__txt h3{font-size:var(--step-2);margin-bottom:.2em}
.svc-row__txt .it{font-family:var(--ff-display);font-style:italic;color:var(--t-dim);font-size:1.02rem;display:block;margin-bottom:1em;line-height:1.45}
.svc-row__txt p{font-size:.95rem;max-width:52ch}

/* --- portfolio: folio plates --- */
.plates{background:var(--night);padding-block:clamp(3rem,6vw,5rem)}
.plates:nth-of-type(even){background:var(--night-2)}
.duo{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1rem,2.6vw,2rem);
  align-items:start;
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.duo--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.duo .frame:first-child img{aspect-ratio:4/2.9;object-fit:cover}
.duo .frame:last-child img{aspect-ratio:4/3.6;object-fit:cover}
.duo--rev .frame:first-child img{aspect-ratio:4/3.6}
.duo--rev .frame:last-child img{aspect-ratio:4/2.9}
.plates__note{
  font-family:var(--ff-display);font-style:italic;
  font-size:1.05rem;color:var(--t-dim);
  max-width:52ch;margin-top:1.6rem;
}
.strip4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.4rem);margin-top:clamp(1.6rem,3vw,2.4rem)}
.strip4 .frame img{aspect-ratio:1/1;object-fit:cover}

/* --- waterscape collections --- */
.coll-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4.5vw,3.6rem) clamp(1.6rem,3.5vw,2.8rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.coll{display:grid;gap:0}
.coll .frame img{aspect-ratio:16/10;object-fit:cover}
.coll__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:1.1rem;
}
.coll__head h3{font-size:var(--step-2);margin:0}
.coll__head .amt{font-family:var(--ff-display);font-size:1.6rem;color:var(--accent-bright);white-space:nowrap}
.coll__head .amt small{font-size:.55em;font-style:italic;color:var(--t-dim)}
.coll p{font-size:.95rem;margin:.5em 0 .8em}
.coll .rng{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;color:var(--t-dim);border-top:1px solid rgba(154,189,37,.2);padding-top:.6rem}
.eco-list{list-style:none;margin:2rem 0 0;padding:0;counter-reset:eco;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,2.6rem)}
.eco-list li{position:relative;padding-left:3.4rem}
.eco-list li::before{
  content:"~";
  position:absolute;left:.2rem;top:.1rem;
  font-family:var(--ff-display);font-style:italic;
  font-size:1.6rem;color:var(--accent-dim);
}
.eco-list h3{font-size:1.4rem;margin-bottom:.25em}
.eco-list p{font-size:.93rem;margin:0}

/* --- about --- */
.duocol{background:var(--night);padding-block:clamp(3rem,6vw,5.4rem);
  background-image:repeating-linear-gradient(0deg, rgba(154,189,37,.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(154,189,37,.025) 0 1px, transparent 1px 5px)}
.duocol__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.people{background:var(--night-2);padding-block:clamp(3rem,6vw,5rem);background-image:radial-gradient(rgba(154,189,37,.06) 1px, transparent 1.4px);background-size:24px 24px}
.people__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);margin-top:1rem}
.person{border-top:1px solid var(--accent-line);padding-top:1.4rem}
.person h3{font-size:var(--step-2);margin-bottom:.15em}
.person .role{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.2em;color:var(--t-dim);display:block;margin-bottom:.9rem}
.person p{font-size:.95rem;max-width:38ch}
.person a.tel{
  font-family:var(--ff-display);
  font-size:1.7rem;
  color:var(--accent-bright);
  text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  white-space:nowrap;
}
.areas{background:var(--night);padding-block:clamp(3rem,6vw,5rem);border-top:1px solid rgba(154,189,37,.14)}
.areas__cities{
  list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;
  column-gap:0;row-gap:.6rem;
  align-items:baseline;
}
.areas__cities li{
  font-family:var(--ff-display);
  font-size:clamp(1.5rem,3vw,2.4rem);
  color:var(--t-hi);
  padding-right:.55em;
}
.areas__cities li::after{content:"·";color:var(--accent-dim);padding-left:.55em}
.areas__cities li:last-child::after{content:""}
.areas__cities li.dim{color:var(--t-dim);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.7rem)}
.faq{background:var(--night-2);padding-block:clamp(3rem,6vw,5.4rem);background-image:repeating-linear-gradient(45deg, rgba(154,189,37,.03) 0 1px, transparent 1px 11px)}
.faq details{border-bottom:1px solid rgba(154,189,37,.16)}
.faq details:first-of-type{border-top:1px solid var(--accent-line)}
.faq summary{
  font-family:var(--ff-display);
  font-size:var(--step-1);
  color:var(--t-hi);
  padding:1.1rem 3rem 1.1rem .1rem;
  cursor:pointer;
  list-style:none;
  position:relative;
}
.faq summary:hover{color:var(--accent-bright)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;right:.4rem;top:50%;
  transform:translateY(-50%);
  font-family:var(--ff-display);
  font-style:italic;
  color:var(--accent-dim);
  font-size:1.5rem;
}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 .1rem 1.5rem;max-width:64ch;color:var(--t-body);font-size:.96rem}

/* ============================================================
   CONTACT — paper forms on the dark ground
   ============================================================ */
.contactgrid{background:var(--night);padding-block:clamp(2.6rem,5vw,4.4rem);background-image:radial-gradient(rgba(154,189,37,.05) 1px, transparent 1.4px);background-size:24px 24px}
.contactgrid__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,4vw,3.4rem);align-items:start}
.formcard{
  background:var(--ivory);
  color:#173a48;
  padding:clamp(1.8rem,4vw,3rem);
  position:relative;
  border-radius:var(--r);
}
.formcard::after{content:"";position:absolute;inset:9px;border:1px solid rgba(56,93,13,.3);border-radius:calc(var(--r) - 5px);pointer-events:none}
.formcard > *{position:relative;z-index:2}
.formcard h2{color:var(--ink);font-size:var(--step-2);margin-bottom:.2em}
.form-lion{height:36px;width:auto;margin-bottom:.9rem;opacity:.92}
.formcard .lead-it{font-family:var(--ff-display);font-style:italic;color:#4d626d;font-size:1.05rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.f-field{display:grid;gap:.3rem;margin-bottom:1.35rem}
.f-field label{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#4d626d}
.f-field .req{color:#9c3a24;font-weight:400}
.f-field input,.f-field select,.f-field textarea{
  font:inherit;
  font-size:1rem;
  padding:.55rem .1rem;
  border:0;
  border-bottom:1px solid #a8b5ab;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  width:100%;
}
.f-field select{padding-left:0}
.f-field textarea{border:1px solid #a8b5ab;padding:.7rem .8rem;background:rgba(255,255,255,.5);border-radius:var(--r-sm)}
.f-field input:focus-visible,.f-field select:focus-visible,.f-field textarea:focus-visible{
  outline:2px solid #385d0d;outline-offset:2px;border-color:#385d0d;
}
fieldset.f-set{border:0;padding:0;margin:0 0 1rem}
fieldset.f-set legend{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#4d626d;padding:0 0 .5rem}
.f-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.3rem .8rem;margin:0;padding:0;list-style:none}
.f-checks label{display:flex;gap:.55rem;align-items:center;font-size:.92rem;padding:.3rem .2rem}
.f-checks input{width:1.1rem;height:1.1rem;accent-color:var(--pine)}
.f-note{font-size:.82rem;color:#4d626d;font-style:italic}
.form-msg{padding:.9rem 1.1rem;margin-bottom:1.2rem;font-weight:700;display:none;font-size:.95rem}
.form-msg.ok{display:block;background:#e2ead4;border:1px solid var(--pine);color:#2c4a10}
.form-msg.err{display:block;background:#f2ded6;border:1px solid #9c3a24;color:#712a17}
.hp-field{position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}

/* booking calendar — engraved */
.cal{border:1px solid #a8b5ab;background:rgba(255,255,255,.45);border-radius:var(--r-sm);overflow:hidden}
.cal__head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #a8b5ab;padding:.45rem .5rem}
.cal__head .m{font-family:var(--ff-display);font-size:1.15rem;color:var(--ink)}
.cal__nav{background:none;border:1px solid #a8b5ab;color:var(--ink);width:38px;height:38px;cursor:pointer;font-size:1rem}
.cal__nav:hover{background:rgba(56,93,13,.12)}
.cal__nav:disabled{opacity:.3;cursor:default}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:5px}
.cal__dow{font-family:var(--ff-mono);font-size:.55rem;letter-spacing:.1em;text-align:center;color:#4d626d;padding:.3rem 0}
.cal__day{
  aspect-ratio:1;
  border:0;background:none;border-radius:7px;
  font:inherit;font-size:.88rem;color:var(--ink);
  cursor:pointer;
}
.cal__day:hover:not(:disabled){background:rgba(56,93,13,.14)}
.cal__day:disabled{color:#9aa8a0;cursor:default}
.cal__day[aria-pressed="true"]{background:var(--pine);color:#fff;font-weight:700}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.45rem;margin-top:.7rem}
.slot{
  border:1px solid var(--pine);
  background:transparent;color:#2c4a10;
  padding:.5rem .3rem;
  font:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;min-height:44px;
  border-radius:8px;
}
.slot:hover:not(:disabled){background:rgba(47,90,46,.12)}
.slot[aria-pressed="true"]{background:var(--pine);color:#fff}
.slot:disabled{border-color:#9aa8a0;color:#9aa8a0;cursor:default;text-decoration:line-through}

.side-info{display:grid;gap:0;border:1px solid rgba(154,189,37,.3);border-radius:var(--r);overflow:hidden}
.side-card{padding:clamp(1.4rem,3vw,2rem);border-bottom:1px solid rgba(154,189,37,.18)}
.side-card:last-child{border-bottom:0;padding:0}
.side-card h3{font-family:var(--ff-display);font-style:italic;font-weight:400;font-size:1.25rem;color:var(--accent-bright);margin:0 0 .8rem}
.side-card p{color:var(--t-body);font-size:.92rem;margin-bottom:.3em}
.side-card a.tel{
  font-family:var(--ff-display);
  font-size:1.65rem;
  color:var(--t-hi);
  text-decoration:none;
  border-bottom:1px solid var(--accent-dim);
  white-space:nowrap;
}
.side-card a.tel:hover{color:var(--accent-bright)}
.side-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.92rem;color:var(--t-body)}
.side-card .frame img{aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--r-sm)}

/* ============================================================
   GALLERIES — the complete plate files
   ============================================================ */
.gallery{background:var(--night-2);padding-block:clamp(2.6rem,5vw,4rem);
  background-image:repeating-linear-gradient(0deg, rgba(154,189,37,.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(154,189,37,.025) 0 1px, transparent 1px 5px)}
.g-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-flow:dense;
  gap:clamp(.8rem,1.8vw,1.3rem);
}
.g-item{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r)}
.g-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.97);transition:transform .5s ease}
.g-item:hover img{transform:scale(1.035)}
.g-item--xl{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.g-item figcaption{
  position:absolute;
  left:12px;bottom:12px;
  font-family:var(--ff-mono);
  font-size:.55rem;
  letter-spacing:.2em;
  color:rgba(244,241,230,.85);
  background:rgba(6,17,21,.55);
  padding:.3rem .55rem;
  z-index:2;
}
.g-others{background:var(--night);padding-block:clamp(2.6rem,5vw,4rem)}
.g-others__h{
  font-size:var(--step-1);
  font-style:italic;
  color:var(--t-dim);
  font-weight:400;
  margin-bottom:1.2rem;
}
.g-others__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:.6rem 0;
  align-items:baseline;
}
.g-others__list li{padding-right:.6em}
.g-others__list li::after{content:"·";color:var(--accent-dim);padding-left:.6em}
.g-others__list li:last-child::after{content:""}
.g-others__list a{
  font-family:var(--ff-display);
  font-size:clamp(1.2rem,2vw,1.6rem);
  color:var(--t-hi);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.g-others__list a:hover{color:var(--accent-bright);border-bottom-color:var(--accent-dim)}
.g-others__list a span{font-style:italic;font-size:.72em;color:var(--t-dim)}

/* gallery index cards (portfolio page) */
.gidx{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(1rem,2.2vw,1.6rem);
}
.gidx__card{display:grid;gap:.55rem;text-decoration:none}
.gidx__card .frame{display:block}
.gidx__card img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.97);transition:filter .2s;border-radius:var(--r-sm)}
.gidx__card:hover img{filter:saturate(1.08)}
.gidx__name{
  font-family:var(--ff-display);
  font-size:1.18rem;
  color:var(--t-hi);
  line-height:1.2;
}
.gidx__card:hover .gidx__name{color:var(--accent-bright)}
.gidx__n{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.18em;color:var(--t-dim)}

/* ============================================================
   DIVIDERS — fine folio edges
   ============================================================ */
.divider{position:relative;line-height:0;margin-top:-1px;margin-bottom:-1px;z-index:2}
.divider svg{width:calc(100% + 2px);margin-left:-1px;height:clamp(30px,4.6vw,64px)}
.divider--deckle svg{height:clamp(22px,3vw,40px)}

/* service pages: what's included + gallery strip */
.inc-list{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem 1.6rem;
  border-top:1px solid var(--accent-line);
  padding-top:1.2rem;
}
.inc-list li{
  font-family:var(--ff-display);
  font-size:1.12rem;
  color:var(--t-hi);
  padding-left:1.2rem;
  position:relative;
}
.inc-list li::before{
  content:"—";
  position:absolute;left:0;
  color:var(--accent-dim);
}
.g-grid--strip{grid-template-columns:repeat(4,1fr)}
.g-grid--strip .g-item{aspect-ratio:4/3}
@media (max-width:800px){
  .inc-list{grid-template-columns:1fr}
  .g-grid--strip{grid-template-columns:1fr 1fr}
}

/* ============================================================
   LIGHTBOX — click a photograph to view it large
   ============================================================ */
.lb-zoom{cursor:zoom-in}
.lb{
  position:fixed;
  inset:0;
  z-index:500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(.8rem,4vw,3rem);
  background:rgba(6,10,6,.93);
}
.lb.open{display:flex}
.lb__fig{
  margin:0;
  position:relative;
  max-width:min(94vw,1500px);
  max-height:86vh;
  display:grid;
  justify-items:center;
  gap:.8rem;
}
.lb__img{
  max-width:100%;
  max-height:calc(86vh - 3rem);
  width:auto;height:auto;
  border-radius:var(--r);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lb__cap{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:1rem;
  color:var(--t-dim);
  text-align:center;
  max-width:70ch;
}
.lb__btn{
  position:fixed;
  z-index:501;
  width:50px;height:50px;
  border-radius:50%;
  border:1px solid var(--accent-dim);
  background:rgba(6,17,21,.65);
  color:var(--accent-bright);
  font-size:1.05rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.lb__btn:hover{background:rgba(154,189,37,.2)}
.lb__close{top:18px;right:18px}
.lb__prev{left:14px;top:50%;transform:translateY(-50%)}
.lb__next{right:14px;top:50%;transform:translateY(-50%)}
.lb__count{
  position:fixed;
  left:50%;bottom:14px;
  transform:translateX(-50%);
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  color:var(--t-dim);
}
body.lb-lock{overflow:hidden}
@media (max-width:800px){
  .lb__prev{left:6px}
  .lb__next{right:6px}
}

/* ============================================================
   SCROLL REVEALS — CSS view-timeline, quiet
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv{
      animation:rv-up 1s both;
      animation-timeline:view();
      animation-range:entry 5% entry 45%;
    }
    .rv--l{animation-name:rv-left}
    .rv--r{animation-name:rv-right}
    @keyframes rv-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
    @keyframes rv-left{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
    @keyframes rv-right{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ambient__topo,.ambient__glow,.tw-row__track{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* header only: tighten the bar before the nav collapses at 800px */
@media (max-width: 1180px){
  .hd-mark{width:clamp(206px,22vw,268px)}
  .hd--compact .hd-mark{width:clamp(178px,18vw,224px)}
  .hd-nav{gap:clamp(.7rem,1.5vw,1.15rem)}
  .hd-nav a{font-size:.7rem;letter-spacing:.14em}
  .hd-nav .hd-cta{padding:.55rem .85rem}
}
@media (max-width: 950px){
  .hd .wrap{gap:.9rem}
  .hd-mark{width:clamp(190px,20vw,214px)}
  .hd-nav{gap:.6rem}
  .hd-nav a{font-size:.66rem;letter-spacing:.1em}
  .hd-nav .hd-cta{padding:.5rem .7rem}
}

@media (max-width: 1080px){
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .hero__art .frame--inset{left:auto;right:-4%;bottom:-10%}
  .pricing__grid,.duocol__grid,.contactgrid__grid{grid-template-columns:1fr}
  .route{grid-template-columns:1fr 1fr;gap:2.2rem}
  .route::before{display:none}
  .process__proof{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr 1fr}
  .trust__cell:nth-child(3){border-left:0;padding-left:0}
  .spread__img,.spread--rev .spread__img{grid-column:1/13;order:1}
  .spread__txt,.spread--rev .spread__txt{grid-column:1/13;order:2}
  .footer__lead{grid-template-columns:1fr 1fr}
  .footer__brandcol{grid-column:1/-1}
  .coll-grid,.people__grid,.eco-list{grid-template-columns:1fr}
  .svc-row,.svc-row--rev{grid-template-columns:1fr}
  .svc-row--rev .svc-row__txt{order:1}
  .svc-row--rev .frame{order:2}
  .duo,.duo--rev{grid-template-columns:1fr}
  .pagehead__inner{grid-template-columns:1fr}
  .pagehead__meta{justify-items:start;text-align:left}
  .gidx{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 800px){
  .slats{flex-direction:column;height:auto;gap:9px}
  .slat{flex:none;height:88px}
  .slat:hover, .slat:focus-visible{flex-grow:1}
  .slat__img{filter:saturate(.9) brightness(.55);transform:none}
  .slat::after{background:linear-gradient(to right, rgba(6,17,21,.85) 30%, rgba(6,17,21,.2) 80%)}
  .slat__vert{display:none}
  .slat__info{opacity:1;transform:none;padding:0 1.1rem;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.1rem}
  .slat__go{display:none}
  .slat__no{top:50%;transform:translateY(-50%);left:auto;right:16px}

  .hd-nav{display:none}
  .hd .wrap{grid-template-columns:auto 1fr auto;min-height:64px;gap:.75rem}
  .hd-mark{width:min(208px,54vw);min-height:64px}
  .hd--compact .hd-mark{width:min(178px,46vw)}
  /* the strap-line cannot be read at phone size — show the wordmark alone */
  .hd-mark__full{opacity:0}
  .hd-mark__tight{opacity:1}
  /* services dropdown */
.hd-drop{position:relative;align-self:stretch;display:flex;align-items:center}
.hd-drop__caret{font-size:.6em;color:var(--accent-dim);margin-left:.45em;letter-spacing:0}
.hd-drop::after{ /* hover bridge across the gap */
  content:"";
  position:absolute;
  top:100%;left:0;right:0;height:14px;
}
.hd-drop__panel{
  position:absolute;
  top:calc(100% + 12px);
  left:-1.2rem;
  min-width:480px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.05rem 2rem;
  padding:1.2rem 1.5rem 1.3rem;
  background:rgba(9,21,26,.97);
  border:1px solid rgba(154,189,37,.3);
  border-radius:14px;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s .22s;
  z-index:260;
}
.hd-drop:hover .hd-drop__panel,
.hd-drop:focus-within .hd-drop__panel{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .22s ease, transform .22s ease;
}
.hd-drop__panel a{
  font-family:var(--ff-display);
  font-size:1.08rem;
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none;
  color:#dfe5d4;
  text-decoration:none;
  padding:.42rem 0;
  border-bottom:1px solid rgba(154,189,37,.1);
  white-space:nowrap;
}
.hd-drop__panel a:hover{color:var(--accent-bright)}
.hd-drop__panel a.hd-drop__all{
  grid-column:1/-1;
  font-style:italic;
  color:var(--accent-bright);
  border-bottom:0;
  padding-top:.7rem;
}
@media (prefers-reduced-motion: reduce){
  .hd-drop__panel{transition:none}
}

.nav-toggle{display:inline-flex;grid-column:3}
  .hd-strip .wrap{justify-content:center;text-align:center}
  .hd-strip .hd-strip__phone{display:none}
  .hero__art .frame--main img{aspect-ratio:4/3.4}
  .hero__art .frame--inset{display:none}
  .hero--cover h1{font-size:clamp(2.5rem, 1.3rem + 5.6vw, 3.6rem)}
  .hero--cover{min-height:calc(100svh - 108px)}
  .hero__bg img{object-position:60% 62%}
  .hero__cred{display:grid;grid-template-columns:1fr;gap:.8rem;padding-bottom:1.6rem}
  .hero__cred .tel{margin-left:0}
  .hero__plateno{top:22px;right:14px;font-size:.52rem}
  .route{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr}
  .trust__cell{border-left:0;padding-inline:0;border-top:1px solid rgba(154,189,37,.14)}
  .trust__cell:first-child{border-top:0}
  .f-row{grid-template-columns:1fr}
  .footer__lead{grid-template-columns:1fr;gap:2.4rem}
  .footer__towns{letter-spacing:.24em;text-indent:.24em}
  .strip4{grid-template-columns:1fr 1fr}
  .g-grid{grid-template-columns:1fr 1fr}
  .g-item--xl{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}
  .gidx{grid-template-columns:1fr 1fr}
  .cta-panel__card{grid-template-columns:1fr}
  .note--right{text-align:left}
      .frame::after{inset:8px}
  .pagehead__art .frame img{aspect-ratio:16/10}
}

/* ============================================================
   ACCENT SCROLLBAR — match the apple-green buttons
   ============================================================ */
html{scrollbar-color:var(--accent) var(--night)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--night)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px;border:2px solid var(--night)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-bright)}

/* ============================================================
   INSPIRATIONAL WATERSCAPES — sub-brand overlay (waterscapes.html)
   Teal + silver drawn from the Inspirational logo; the Green Lion
   header, footer, and sendoff stay apple green to frame the sub-brand.
   ============================================================ */
body.insp main{
  --accent:#5aa39a;
  --accent-bright:#7db1ac;
  --accent-dim:rgba(125,177,172,.42);
  --accent-line:rgba(125,177,172,.3);
  --pine:#2f6b64;
  --pine-soft:#3a837a;
  --night:#0a1414;
  --night-2:#0e1a1a;
  --night-3:#122121;
  --t-body:#a9c3bd;
  --t-dim:#7a948e;
  background:#0a1414;
}
body.insp main ::selection{background:rgba(125,177,172,.35)}
body.insp main .btn{box-shadow:0 3px 0 rgba(21,54,50,.95)}
body.insp main .btn:active{box-shadow:0 0 0 rgba(21,54,50,.95)}
body.insp main .btn--ghost{box-shadow:0 3px 0 rgba(21,54,50,.55)}
body.insp main .btn--ghost:hover{background:rgba(125,177,172,.12)}
body.insp main .btn--pine{box-shadow:0 3px 0 #102b28}
body.insp main .frame::after{border-color:rgba(125,177,172,.5)}
body.insp main .frame--quiet::after{border-color:rgba(125,177,172,.28)}
body.insp main .coll .rng{border-top-color:rgba(125,177,172,.25)}
body.insp main .ambient__glow{
  background:
    radial-gradient(40% 46% at 24% 28%, rgba(125,177,172,.12), transparent 70%),
    radial-gradient(46% 52% at 76% 74%, rgba(47,107,100,.34), transparent 72%);
}
body.insp .on-ivory .gild{color:#2f6b64}
body.insp .on-ivory .ch-head .tail{color:#587a74}
body.insp .on-ivory .btn--ghost{color:#2f6b64;border-color:rgba(47,107,100,.5);box-shadow:0 3px 0 rgba(47,107,100,.25)}
body.insp .on-ivory .btn--ghost:hover{background:rgba(47,107,100,.08)}

/* full waterscape range grid */
.wsf{padding-block:clamp(3.4rem,7vw,6rem);position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(125,177,172,.05) 1px, transparent 1.4px);background-size:26px 26px}
.wsf__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.wsf__card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid rgba(125,177,172,.22);
  border-radius:var(--r);overflow:hidden;
  background:rgba(125,177,172,.05);
  transform:translateY(0);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wsf__card:hover{transform:translateY(-4px);border-color:rgba(125,177,172,.6);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.wsf__card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.wsf__card > div{padding:1.05rem 1.15rem 1.25rem}
.wsf__card h3{font-family:var(--ff-display);font-weight:500;font-size:1.3rem;color:var(--t-hi);margin:0 0 .35rem}
.wsf__card p{margin:0;font-size:.85rem;color:var(--t-body);line-height:1.55}
.wsf__more{margin-top:2.4rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
@media (max-width:1000px){.wsf__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wsf__grid{grid-template-columns:1fr}}

/* ============================================================
   INSPIRATIONAL WATERSCAPES v2 — sub-brand components
   Letterspaced-caps headings + italic sans kickers echo the
   wordmark; layered wave dividers echo the logo's water bowl.
   ============================================================ */
/* sub-brand strip under the Green Lion header */
.ibar{background:#0c1f1d;border-bottom:1px solid rgba(125,177,172,.28)}
.ibar .wrap{display:flex;justify-content:space-between;align-items:center;gap:.4rem 1.6rem;flex-wrap:wrap;padding-block:.6rem}
.ibar span,.ibar a{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#7db1ac}
.ibar a{color:#a8ccc7;text-decoration:none;border-bottom:1px solid transparent}
.ibar a:hover{color:#d4e6e3;border-bottom-color:rgba(125,177,172,.5)}

/* immersive hero */
.ihero{position:relative;min-height:min(94vh,880px);display:flex;align-items:center;overflow:hidden;background:#081211}
.ihero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.8)}
.ihero__tint{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,18,17,.9),rgba(6,18,17,.42) 42%,rgba(7,19,18,.94) 92%),
  radial-gradient(62% 52% at 50% 40%,rgba(125,177,172,.14),transparent 72%)}
.ihero__inner{position:relative;z-index:2;width:100%;text-align:center;display:grid;justify-items:center;gap:0;
  padding-block:clamp(4rem,9vh,6rem) clamp(7rem,15vh,10rem)}
.ihero__logo{width:min(420px,78vw);height:auto;margin-bottom:clamp(1.6rem,3.5vh,2.6rem);
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.55))}
.ihero__kick{font-family:var(--ff-body);font-style:italic;font-weight:700;font-size:.74rem;letter-spacing:.4em;
  text-transform:uppercase;color:#7db1ac;margin:0 0 1.1rem}
.ihero__title{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.4rem);
  letter-spacing:.13em;text-transform:uppercase;line-height:1.16;color:var(--t-hi);margin:0 0 1.1rem;max-width:22ch}
.ihero__sub{font-family:var(--ff-body);font-size:1.02rem;line-height:1.7;color:#b9d0cb;margin:0 0 1.9rem;max-width:52ch}
.ihero__ctas{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.ihero__stats{list-style:none;margin:clamp(1.9rem,4vh,2.8rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 0;
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#8fb3ad}
.ihero__stats li{padding-inline:1.2em;border-left:1px solid rgba(125,177,172,.35)}
.ihero__stats li:first-child{border-left:0}
.ihero__waves{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0}
.ihero__waves svg{width:100%;height:clamp(60px,9vw,110px)}

/* layered wave divider */
.iwave svg{height:clamp(44px,6.5vw,88px)}

/* sub-brand heading system */
.ihead{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.ihead--c{text-align:center}
.ihead__kick,.ihead__kick--c{font-family:var(--ff-body);font-style:italic;font-weight:700;font-size:.72rem;
  letter-spacing:.32em;text-transform:uppercase;color:#7db1ac;margin:0 0 1.05rem;
  display:inline-flex;align-items:center;gap:.95em}
.ihead__kick::before,.ihead__kick::after{content:"";width:38px;height:9px;flex:none;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='9' viewBox='0 0 38 9'%3E%3Cpath d='M1 5 Q5.75 1 10.5 5 T20 5 T29.5 5 T39 5' fill='none' stroke='%237db1ac' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.ihead:not(.ihead--c) .ihead__kick::before{display:none}
.ihead__title{font-family:var(--ff-display);font-weight:500;font-size:clamp(1.65rem,3vw,2.7rem);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.2;color:var(--t-hi);margin:0}
.ihead--c .ihead__title{margin-inline:auto;max-width:30ch}
.ihead__tail{font-family:var(--ff-body);font-style:italic;font-size:1rem;color:var(--t-dim);
  margin:1rem 0 0;max-width:62ch;line-height:1.6}
.ihead--c .ihead__tail{margin-inline:auto}
.on-ivory .ihead__kick{color:#2f6b64}
.on-ivory .ihead__kick::before,.on-ivory .ihead__kick::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='9' viewBox='0 0 38 9'%3E%3Cpath d='M1 5 Q5.75 1 10.5 5 T20 5 T29.5 5 T39 5' fill='none' stroke='%232f6b64' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.on-ivory .ihead__title{color:var(--ink)}
.on-ivory .ihead__tail{color:#587a74}

/* manifesto + waterscape-line card */
.iintro{background:#0a1414;padding-block:clamp(3.4rem,7vw,5.6rem)}
.iintro__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.iintro__grid > div > p{color:var(--t-body);font-size:.98rem;line-height:1.75;max-width:58ch}
.icard{border:1px solid rgba(125,177,172,.32);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(125,177,172,.1),rgba(125,177,172,.02));
  padding:clamp(1.6rem,3vw,2.2rem);display:grid;gap:.35rem;justify-items:start}
.icard__kick{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:#7db1ac;margin:0 0 .5rem}
.icard__name{font-family:var(--ff-display);font-size:1.7rem;font-weight:500;color:var(--t-hi);margin:0}
.icard__tel{font-family:var(--ff-display);font-size:clamp(1.5rem,2.4vw,1.9rem);color:#7db1ac;text-decoration:none;border-bottom:1px solid rgba(125,177,172,.4)}
.icard__tel:hover{color:#a8ccc7}
.icard__mail{font-size:.9rem;color:#b9d0cb;text-decoration:none;border-bottom:1px solid transparent;margin-top:.3rem}
.icard__mail:hover{border-bottom-color:rgba(125,177,172,.5)}
.icard__note{font-family:var(--ff-body);font-style:italic;font-size:.86rem;color:var(--t-dim);margin:.7rem 0 0}

/* ecosystem band */
.ieco{background:#0f2120;padding-block:clamp(3.4rem,7vw,5.6rem);position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(125,177,172,.06) 1px,transparent 1.4px);background-size:24px 24px}
.ieco__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.ieco__grid li{border-top:2px solid rgba(125,177,172,.45);padding-top:1.1rem}
.ieco__grid h3{font-family:var(--ff-display);font-weight:500;font-size:1.28rem;color:var(--t-hi);margin:0 0 .4rem}
.ieco__grid p{font-size:.88rem;color:var(--t-body);line-height:1.6;margin:0}

/* centered pull quote */
.ipull{background:#0a1414;padding-block:clamp(3.6rem,8vw,6rem);text-align:center}
.ipull__quote{margin:0 auto;max-width:52rem}
.ipull__quote p{font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,2.7vw,2.15rem);line-height:1.45;color:var(--t-hi);margin:0}
.ipull__quote em{font-style:italic;color:#7db1ac}
.ipull__who{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:#8fb3ad;margin:1.6rem 0 0}
.ipull__second{font-family:var(--ff-body);font-style:italic;font-size:1rem;line-height:1.7;color:var(--t-dim);
  max-width:46rem;margin:2.4rem auto 0}
.ipull__second em{color:#a8ccc7}

/* final call */
.icta{background:#0d1d1c;padding-block:clamp(3.8rem,8vw,6.4rem);text-align:center;position:relative;overflow:hidden}
.icta__inner{position:relative;z-index:2}
.icta__note{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#8fb3ad;margin:1.8rem 0 0}
.wsf__more--c{justify-content:center}

@media (max-width:1000px){
  .ieco__grid{grid-template-columns:1fr 1fr}
  .iintro__grid{grid-template-columns:1fr;gap:2.4rem}
}
@media (max-width:640px){
  .ieco__grid{grid-template-columns:1fr}
  .ihero__stats li{border-left:0;padding-inline:.8em}
  .ibar .wrap{justify-content:center;text-align:center}
}

/* ============================================================
   ACCESSIBILITY LAYER — WCAG 2.1 AA (with 2.2 pickups)
   Everything below is corrective; it intentionally sits last so
   it wins over the design rules above without editing them.
   ============================================================ */

/* ---------- 2.4.7 / 1.4.11 focus indicator ----------
   The old ring was accent green on every background. On the ivory
   sections that is 1.9:1 against the paper — invisible to plenty of
   people. A two-tone ring (bright core + page-coloured halo) reads
   on photographs, on ink, and on paper alike. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(6,17,21,.92);
  border-radius:2px;
}
.on-ivory :focus-visible,
.on-ivory:focus-visible{
  outline-color:#2b4a0a;
  box-shadow:0 0 0 6px rgba(239,242,234,.95);
}
.btn:focus-visible{outline:3px solid var(--t-hi);outline-offset:2px}
.on-ivory .btn:focus-visible{outline-color:#0f232b}
/* the lightbox draws its own dark ground, so keep the dark-side ring */
.lb :focus-visible{outline-color:var(--accent);box-shadow:0 0 0 6px rgba(6,17,21,.92)}

/* 2.4.11 Focus Not Obscured — the header is sticky (79px once pinned),
   so anything focused by keyboard near the top would slide under it.
   scroll-padding on the scroller covers every scroll-into-view, focus
   included; the older per-target scroll-margin is zeroed so the two do
   not stack into a 228px gap on anchor links. */
html{scroll-padding-top:100px}
[id]{scroll-margin-top:0}

/* ---------- 2.2.2 Pause, Stop, Hide ----------
   The marquee type walls, the drifting topo/glow, the film-strip
   drift and the hero video all move on their own for longer than
   five seconds. One control in the header governs all of them and
   the choice is remembered. */
.motion-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  background:transparent;
  border:1px solid rgba(154,189,37,.42);
  color:var(--accent-bright);
  font-family:var(--ff-mono);
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.25rem .6rem;
  cursor:pointer;
  border-radius:3px;
  line-height:1;
  min-height:24px;
}
.motion-toggle:hover{background:rgba(154,189,37,.12);color:var(--t-hi)}
.motion-toggle__ic{font-size:.72em;letter-spacing:0}
.hd-strip .wrap{align-items:center}
.hd-strip__tools{display:flex;align-items:center;gap:.9rem;flex-shrink:0}

html.motion-paused .ambient__topo,
html.motion-paused .ambient__glow,
html.motion-paused .tw-row__track,
html.motion-paused .svc .tw-row__track{animation-play-state:paused!important}
html.motion-paused .rv{animation:none!important;opacity:1!important;transform:none!important}
html.motion-paused .hero__video{/* JS pauses playback; this is the visual guard */}

/* ---------- 1.4.12 Text Spacing ----------
   Nothing may clip when a reader overrides spacing. The mono
   micro-labels were the only places set to a fixed height. */
.hd-strip .wrap,.footer__sig,.hero__cred{min-height:0;height:auto}

/* ---------- 1.4.3 Contrast (minimum) ----------
   The header strip phone number was accent green at 38% alpha over
   near-black: 2.2:1. */
.hd-strip a{color:var(--accent-bright)}
.hd-strip a:hover,.hd-strip a:focus-visible{color:var(--t-hi)}

/* ---------- 2.5.8 Target Size (minimum) ----------
   The stacked footer navigation sat at 19px per link with too little
   space between rows to earn the spacing exception, so those get a
   real 24px target on every input type. The remaining dense lists are
   only tight enough to matter under a finger. */
.footer__nav a{
  display:inline-block;
  min-height:24px;
  padding-block:.15rem;
}
@media (pointer:coarse){
  .footer__social a,.footer__sig a,
  .hd-drop__panel a,.drawer__sub a,.g-others__list a{
    display:inline-block;
    min-height:24px;
    padding-block:.35rem;
  }
}

/* ---------- 3.3.1 / 3.3.3 Error Identification & Suggestion ----------
   Field-level messages, tied to the input with aria-describedby.
   Every form on this site sits inside an ivory .formcard, so these
   are toned for paper first; the dark override follows. */
.f-field .f-err,.f-set .f-err{
  display:none;
  font-family:var(--ff-body);
  font-size:.86rem;
  line-height:1.4;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:#a4210f;
  margin:.35rem 0 0;
}
.f-field .f-err::before,.f-set .f-err::before{content:"\26A0\FE0E  "}
.f-field.has-err .f-err,.f-set.has-err .f-err{display:block}
.f-field input[aria-invalid="true"],
.f-field select[aria-invalid="true"],
.f-field textarea[aria-invalid="true"]{
  border-color:#b32d16;
  box-shadow:0 1px 0 #b32d16;
}
.form-req-note{
  font-family:var(--ff-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#4d626d;
  margin:0 0 1.2rem;
}
.form-msg:empty{display:none}
.form-errsum{
  border:1px solid #b32d16;
  border-left-width:4px;
  border-radius:3px;
  padding:.9rem 1.1rem;
  margin:0 0 1.4rem;
  color:#712a17;
  background:#f6e4de;
}
.form-errsum h3{font-size:1rem;margin:0 0 .4rem;color:#8f1d0d;font-family:var(--ff-body);font-weight:700}
.form-errsum ul{margin:0;padding-left:1.2rem}
.form-errsum li{margin-bottom:.2rem}
.form-errsum a{color:#8f1d0d}
.form-errsum:empty,.form-errsum[hidden]{display:none}

/* the same messages if a form is ever placed on a dark ground */
.formcard-dark .f-err,section:not(.on-ivory) > .wrap > .f-err{color:#ffb4a8}

/* ---------- 4.1.2 the film-strip clones ----------
   Duplicated cards are decoration for the loop; they must not be
   reachable. Belt and braces alongside the tabindex JS sets. */
.fb-card[aria-hidden="true"]{pointer-events:none}

/* ---------- accessibility statement page ---------- */
.a11y{background:var(--night);padding-block:clamp(3rem,6vw,5rem)}
.a11y__body{max-width:74ch}
.a11y__body h2{font-size:var(--step-2);margin-top:2.6rem}
.a11y__body h2:first-child{margin-top:0}
.a11y__body h3{font-family:var(--ff-body);font-size:1.05rem;letter-spacing:.02em;margin-top:1.8rem}
.a11y__body ul{padding-left:1.2rem;margin:0 0 1.4em}
.a11y__body li{margin-bottom:.5em}
.a11y__body a{color:var(--accent-bright)}
.a11y__meta{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-dim);
  border-top:1px solid var(--accent-line);padding-top:1.2rem;margin-top:2.8rem;
}
.a11y__contact{
  border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
  padding:clamp(1.4rem,3vw,2.2rem);
  margin:2rem 0;
  background:var(--night-2);
}
.a11y__contact h2{margin-top:0}
.a11y__contact ul{list-style:none;padding:0}

/* ---------- 1.4.13 Content on Hover or Focus ----------
   The services drop-down must stay open while the pointer travels
   into it and must dismiss on Escape (see main.js). */
.hd-drop__panel{pointer-events:auto}

/* ---------- Windows High Contrast / forced colours ---------- */
@media (forced-colors:active){
  .btn,.nav-toggle,.motion-toggle,.fb-btn,.lb__btn{border:1px solid ButtonBorder}
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
  .hero__scrim,.ambient__topo,.ambient__glow{display:none}
  .slat__info{opacity:1}
}

/* ---------- reduced motion: extend to everything auto-moving ---------- */
@media (prefers-reduced-motion: reduce){
  .fieldbook__track{transition:none!important}
  .lb,.lb__img{transition:none!important}
  .rv{animation:none!important;opacity:1!important;transform:none!important}
}

/* 1.4.13 — Escape dismisses the services panel without moving the pointer */
.hd-drop.is-dismissed:hover .hd-drop__panel,
.hd-drop.is-dismissed:focus-within .hd-drop__panel{
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
}

/* ---------- 1.4.10 Reflow ----------
   The display headings use   to stop a last word being orphaned.
   At 320px that glued run ("A different craft.") is wider than the
   viewport and pushes the whole grid column out, so the page has to be
   scrolled sideways to read it. Allow a break when — and only when —
   there is no other way to fit the line. */
h1,h2,h3,.ihead__title,.ihead__tail,.ch-head .tail{overflow-wrap:break-word}
@media (max-width:520px){
  h1,h2,h3,.ihead__title{overflow-wrap:anywhere}
  .iintro__grid > *,.contactgrid__grid > *,.pricing__grid > *,.spread > *{min-width:0}
  .icard__mail,.footer__mail,.side-card a[href^="mailto:"]{overflow-wrap:anywhere}
}