/* ===========================================================
   ANCHOR & ARBOR — Home Management for the North Shore
   Luxury editorial brand film. Navy and forest own the page.
   =========================================================== */

:root{
  --navy:#0F2131;
  --navy-2:#0A1826;
  --forest:#2F3E37;
  --sea:#A8B8B0;
  --salt:#E7ECEC;
  --taupe:#C8B9A6;
  --gold:#B08D57;
  --gold-lt:#C9A876;
  --gold-dk:#7A5A2A;   /* clears 4.5:1 on ivory / ivory-2 for informational text */
  --ivory:#F7F4EF;
  --ivory-2:#EFEBE4;

  --ink:#0F2131;
  --ink-2:#40505E;
  --ink-gold:#1A1206;   /* type on the gold fill */
  --err:#E9B49F;        /* clay, on dark */
  --err-bd:#E0A08A;

  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --gut:clamp(1.25rem,5vw,5rem);
  --max:78rem;

  /* Vertical scale. Three tiers, not one interval: the page has to be able
     to say "this one matters more" with space alone.
     anchor = the three moments that lead · major = standard section
     quiet  = supporting section, deliberately tighter */
  --sp-anchor:clamp(5.5rem,12vw,10.5rem);
  --sp-major:clamp(4.5rem,10vw,9rem);
  --sp-quiet:clamp(3.25rem,7vw,6rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:var(--salt);
  padding:.9rem 1.4rem;font-size:.92rem;text-decoration:none;
}
.skip:focus{left:1rem;top:1rem}

/* Focus: dark ring on light grounds, gold on dark grounds.
   #C9A876 on ivory is ~1.9:1 and fails the 3:1 non-text floor. */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}
.skip:focus-visible,
.hero :focus-visible,
.who :focus-visible,
.rel :focus-visible,
.thread :focus-visible,
.relief :focus-visible,
.area :focus-visible,
.start :focus-visible,
.file :focus-visible,
.foot :focus-visible,
.nav :focus-visible{
  outline-color:var(--gold-lt);
}

/* Light type on a saturated ground needs compensating on all three
   perceptual axes, not just contrast ratio. Montserrat 300 reversed out
   of navy is the combination that fails older readers even when the
   ratio passes. */
.who p,.rel__body p,.relief__p,.file__txt p,.start__intro p,.area__body p,
.who__col p,.start__pts li,.foot__col p,.sheet__v,.sheet__foot{
  font-weight:400;
  letter-spacing:.004em;
  line-height:1.75;
}

/* ── shared type ────────────────────────────────────────── */
.h2{
  font-family:var(--serif);
  font-size:clamp(1.9rem,1.15rem + 2.6vw,3.5rem);
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--ink);
}
.h2--light{color:var(--salt)}
/* Three voices, not one. A page that opens every section at the same size
   never tells the reader which section matters. */
.h2--lg{
  font-size:clamp(2.15rem,1.2rem + 3.4vw,4.25rem);
  line-height:1.08;letter-spacing:-.018em;
}
.h2--sm{
  font-size:clamp(1.6rem,1.1rem + 1.7vw,2.5rem);
  line-height:1.2;letter-spacing:-.008em;
}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1.05rem + .95vw,1.85rem);
  line-height:1.42;
  letter-spacing:-.005em;
}

/* label device: sits BESIDE content at desktop, after it on small screens */
.sec__note,.sec__sub{color:var(--ink-2)}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  --bg:transparent;--fg:var(--salt);--bd:currentColor;text-wrap:nowrap;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;min-height:3.5rem;padding:.95rem 2.1rem;
  font-family:var(--sans);font-size:.84rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  color:var(--fg);background:var(--bg);
  border:1px solid var(--bd);border-radius:0;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
  overflow:hidden;isolation:isolate;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gold);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .55s var(--ease);
}
.btn--gold{--bg:var(--gold);--fg:var(--ink-gold);--bd:var(--gold)}
.btn--gold::after{background:var(--gold-lt);transform-origin:left center}
.btn--gold:hover::after,.btn--gold:focus-visible::after{transform:scaleX(1)}
.btn--ghost{--bg:transparent;--fg:var(--salt);--bd:rgba(231,236,236,.45)}
.btn--ghost:hover,.btn--ghost:focus-visible{--bd:var(--salt)}
.btn--ghost::after{background:rgba(231,236,236,.1)}
.btn--ghost:hover::after,.btn--ghost:focus-visible::after{transform:scaleX(1)}
.btn--sm{min-height:2.9rem;padding:.7rem 1.4rem;font-size:.8rem;letter-spacing:.13em}
.btn--full{width:100%}
.btn:active{transform:translateY(1px)}

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:clamp(.85rem,1.5vw,1.25rem);
  transition:background .6s var(--ease),border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(15,33,49,.93);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(176,141,87,.24);
}
.nav.is-hidden{transform:translateY(-102%)}
.nav{transition:transform .6s var(--ease),background .6s var(--ease),border-color .6s var(--ease)}

.nav__in{
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.nav__brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex:none;padding-block:.4rem;min-height:44px}
.nav__mark{width:auto;height:clamp(2rem,3.4vw,2.6rem)}
.nav__lock{display:flex;flex-direction:column;gap:.18rem}
.nav__name{
  font-family:var(--serif);color:var(--salt);white-space:nowrap;
  font-size:clamp(.95rem,1.5vw,1.15rem);letter-spacing:.19em;line-height:1;
}
.nav__desc{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;
  color:var(--gold-lt);line-height:1;font-weight:500;
}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2vw,2.2rem);position:relative}
.nav__links > a:not(.btn){
  color:var(--salt);text-decoration:none;font-size:.84rem;font-weight:400;white-space:nowrap;
  letter-spacing:.13em;text-transform:uppercase;position:relative;padding-block:.4rem;
  opacity:.86;transition:opacity .4s var(--ease);
}
.nav__links > a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold-lt);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links > a:not(.btn):hover{opacity:1}
.nav__links > a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta-long{display:inline}
.nav__cta-short{display:none}

/* The section menu. Native <details>: keyboard-operable and Esc-free
   without a line of JS, and it degrades to an open list if CSS fails. */
/* Anchored to .nav__links, not to the narrow summary: a 13rem panel
   right-aligned to a 60px label runs off the left edge of the screen. */
.nav__menu{position:static;display:none}
.nav__menu summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.5rem .2rem;white-space:nowrap;
  color:var(--salt);font-size:.8rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.nav__menu summary::-webkit-details-marker{display:none}
.nav__menu summary::after{
  content:"";width:.5rem;height:.5rem;border-right:1px solid var(--gold-lt);
  border-bottom:1px solid var(--gold-lt);transform:translateY(-2px) rotate(45deg);
  transition:transform .35s var(--ease);
}
.nav__menu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.nav__menu ul{
  position:absolute;right:0;top:calc(100% + .55rem);z-index:20;
  min-width:13rem;padding:.4rem 0;
  background:rgba(10,24,38,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(176,141,87,.32);
}
.nav__menu ul a{
  display:block;padding:.85rem 1.2rem;min-height:44px;
  color:var(--salt);text-decoration:none;
  font-size:.86rem;letter-spacing:.05em;font-weight:300;
  border-bottom:1px solid rgba(231,236,236,.1);
}
.nav__menu ul li:last-child a{border-bottom:0}
.nav__menu ul a:hover{background:rgba(231,236,236,.07);color:var(--gold-lt)}

@media (max-width:960px){
  .nav__links > a:not(.btn){display:none}
  .nav__menu{display:block}
  /* Below the desktop breakpoint the header is the only route to the form,
     so it must not hide itself on the one gesture people actually use. */
  .nav.is-hidden{transform:none}
}
@media (max-width:600px){
  .nav__in{gap:.75rem}
  .nav__mark{height:2rem}
  .nav__brand{gap:.6rem}
  /* The mark carries the brand alone here. Wordmark + menu + action do not
     fit 390px together, and the action is the one that has to survive. */
  .nav__name{display:none}
  /* The descriptor is dropped rather than set at ~7.7px: an illegible
     lockup line is worse than no lockup line, and the wordmark carries
     the brand on its own at this width. */
  .nav__desc{display:none}
  .nav__cta-long{display:none}
  .nav__cta-short{display:inline}
  .btn--sm{padding:.62rem .95rem;font-size:.78rem;letter-spacing:.07em;min-height:2.75rem;white-space:nowrap}
  /* Tracking absorbs the width here, not size: this rail names the service
     area, and ~10px is below the reading floor for this audience. */
  .hero__rail{font-size:.72rem;letter-spacing:.1em;padding-block:.95rem}
  .hero__rail>span:first-child{white-space:nowrap}
}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding-block:clamp(5.5rem,12svh,10rem) clamp(3.5rem,7svh,8rem);
  background:var(--navy-2);isolation:isolate;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transform:scale(1.14);
  animation:heroSettle 2.6s var(--ease) .15s forwards;
}
@keyframes heroSettle{to{transform:scale(1)}}

.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(10,24,38,.84) 0%,rgba(10,24,38,.6) 34%,rgba(10,24,38,.16) 64%,rgba(10,24,38,.34) 100%),
    linear-gradient(to bottom,rgba(10,24,38,.6) 0%,rgba(10,24,38,.06) 32%,rgba(10,24,38,.42) 76%,rgba(10,24,38,.86) 100%);
}
@media (max-width:760px){
  .hero__media img{object-position:72% center}
  .hero__scrim{
    background:linear-gradient(to bottom,rgba(10,24,38,.7) 0%,rgba(10,24,38,.42) 26%,rgba(10,24,38,.72) 62%,rgba(10,24,38,.92) 100%);
  }
}

.hero__body{
  width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
}
.hero__h{
  font-family:var(--serif);color:var(--salt);
  font-size:clamp(2.75rem,1.35rem + 7vw,5.6rem);
  line-height:1.02;letter-spacing:-.028em;
  margin-bottom:clamp(1.1rem,2.4vw,1.7rem);
}
.hero__lede{
  font-family:var(--serif);color:var(--salt);
  font-size:clamp(1.25rem,1.05rem + .95vw,1.85rem);
  line-height:1.4;letter-spacing:-.005em;max-width:26ch;
  margin-bottom:clamp(1.1rem,2.2vw,1.6rem);
}
.hero__p{
  max-width:44ch;color:rgba(231,236,236,.82);
  font-size:clamp(.98rem,.93rem + .3vw,1.08rem);
  line-height:1.68;margin-bottom:clamp(1.8rem,3.4vw,2.6rem);
}
.hero__act span{display:flex;flex-wrap:wrap;gap:.9rem}

/* line-mask reveal */
/* The mask clips at its own box, so a tight-leading serif loses its
   descenders (the g in "managed"). Pad the mask, pull the space back
   with a matching negative margin, and push the hidden state past the
   larger box so no sliver shows before the reveal. */
.ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.ln>span{display:block}
.ln>span{transform:none;opacity:1}
.js .ln>span{transform:translateY(125%);opacity:0}
.js .hero .ln>span{animation:lnUp 1.25s var(--ease) forwards}
.hero__h .ln:nth-child(1)>span{animation-delay:.45s}
.hero__h .ln:nth-child(2)>span{animation-delay:.58s}
.hero__lede>span{animation-delay:.72s}
.hero__p{animation:none}
.hero__p>span{animation-delay:.86s}
.hero__act>span{animation-delay:1s}
@keyframes lnUp{to{transform:translateY(0);opacity:1}}

.hero__rail{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:1.15rem var(--gut);
  border-top:1px solid rgba(176,141,87,.3);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(231,236,236,.82);font-weight:400;
  opacity:0;animation:fadeIn 1.2s var(--ease) 1.15s forwards;
}
.hero__rail i{font-style:normal;color:var(--gold-lt);padding-inline:.35rem}
.hero__rail-mid{flex:1;height:1px;background:rgba(176,141,87,.3)}
@media (max-width:720px){
  .hero__rail>span:last-child{display:none}
  .hero__rail-mid{display:block}
}
@keyframes fadeIn{to{opacity:1}}

.hero__scroll{
  position:absolute;left:50%;bottom:5.2rem;z-index:3;
  width:1px;height:clamp(2.5rem,5vh,3.6rem);
  background:rgba(231,236,236,.25);overflow:hidden;
  opacity:0;animation:fadeIn 1.2s var(--ease) 1.4s forwards;
}
.hero__scroll span{
  position:absolute;inset:0;display:block;background:var(--gold-lt);
  animation:scrollCue 2.4s var(--ease-io) infinite;
}
@keyframes scrollCue{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}
@media (max-height:680px),(max-width:560px){.hero__scroll{display:none}}

/* Short viewports are mostly zoomed desktops, not phones. Pull the display
   ramp down so the primary action stays above the fold at 200%. */
@media (max-height:680px){
  .hero{min-height:0;padding-block:clamp(3.6rem,9svh,7rem) clamp(1.8rem,4svh,4rem)}
  .hero__h{font-size:clamp(2rem,1rem + 4.2vw,3.5rem);margin-bottom:.55rem}
  .hero__lede{font-size:clamp(1.02rem,.95rem + .45vw,1.25rem);margin-bottom:.6rem;max-width:30ch}
  .hero__p{font-size:.9rem;line-height:1.45;margin-bottom:1rem;max-width:54ch}
  .btn{min-height:2.9rem;padding:.65rem 1.4rem}
  .hero__rail{display:none}
}
/* Below this the viewport is a heavily zoomed desktop. The supporting
   paragraph steps aside so the promise and the action both fit: the same
   sentences open "We take care of the home" one screen down. */
@media (max-height:540px){
  .hero__p{display:none}
}

/* ── section heads ──────────────────────────────────────── */
.sec__head{
  display:grid;grid-template-columns:1fr auto;
  gap:1.5rem 3rem;align-items:end;
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(15,33,49,.3);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.sec__note{font-size:.92rem;text-align:right;max-width:26ch}
.sec__head--c{grid-template-columns:1fr;text-align:center;justify-items:center;border-bottom:0}
.sec__head--c .sec__sub{max-width:52ch;text-align:center;margin-top:1.2rem}
@media (max-width:720px){
  .sec__head{grid-template-columns:1fr}
  .sec__note{text-align:left}
}

/* ── what we do: an editorial index, not a card grid ────── */
.what{background:var(--ivory);padding-block:var(--sp-major)}
.what .sec__head{border-bottom:0;margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.idx{border-top:1px solid rgba(15,33,49,.16)}
.idx__i{
  display:grid;
  grid-template-columns:clamp(2.6rem,4vw,3.4rem) minmax(9rem,15rem) minmax(0,1fr);
  gap:clamp(1rem,2.6vw,2.6rem);
  align-items:baseline;
  padding-block:clamp(1.5rem,2.8vw,2.4rem);
  border-bottom:1px solid rgba(15,33,49,.16);
}
.idx__ico{color:var(--gold);align-self:start;line-height:0}
.idx__ico svg{width:clamp(1.6rem,2.1vw,1.95rem);height:auto}
.idx__n{
  font-family:var(--serif);
  font-size:clamp(1.2rem,.98rem + .78vw,1.6rem);
  line-height:1.24;letter-spacing:-.01em;color:var(--ink);
}
.idx__d{font-size:clamp(.95rem,.9rem + .2vw,1.02rem);line-height:1.68;color:var(--ink-2);max-width:56ch}
@media (max-width:820px){
  .idx__i{
    grid-template-columns:clamp(2.2rem,7vw,2.8rem) minmax(0,1fr);
    gap:.6rem 1.1rem;align-items:start;
  }
  .idx__n{grid-column:2}
  .idx__d{grid-column:2;margin-top:.35rem}
}

/* ── who ────────────────────────────────────────────────── */
.who{background:var(--forest);color:var(--salt)}
.who__grid{
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);
  align-items:stretch;
}
.who__fig{margin:0;position:relative;min-height:clamp(24rem,52vw,44rem);overflow:hidden}
.who__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.who__txt{
  padding:clamp(3rem,7vw,7rem) clamp(1.25rem,5vw,5.5rem);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,4vw,3.2rem);
}
.who__txt .h2{color:var(--salt)}
.who__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3vw,3rem)}
.who__col h3{
  font-family:var(--sans);font-size:.84rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--taupe);
  margin-bottom:1rem;line-height:1.55;
  padding-top:1.1rem;border-top:1px solid rgba(200,185,166,.35);
}
.who__col p{font-size:1rem;line-height:1.72;color:rgba(231,236,236,.82)}
@media (max-width:1000px){
  .who__grid{grid-template-columns:1fr}
  .who__fig{min-height:clamp(20rem,62vw,30rem)}
}
@media (max-width:620px){.who__cols{grid-template-columns:1fr}}

/* ── a relationship first: a short forest statement band ── */
.rel{background:var(--forest);color:var(--salt);padding-block:var(--sp-quiet)}
.rel__body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,5rem);align-items:start;
}
.rel__h{margin-bottom:0}
.rel__body p{
  color:rgba(231,236,236,.84);max-width:46ch;
  font-size:clamp(1rem,.95rem + .3vw,1.1rem);line-height:1.72;
  padding-top:.5rem;position:relative;
}
.rel__body p::before{
  content:"";display:block;width:clamp(2.2rem,4vw,3.2rem);height:1px;
  background:var(--gold);margin-bottom:clamp(1.2rem,2.2vw,1.8rem);
}
.js .rel__body p::before{
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) .2s;
}
.rel.in .rel__body p::before{transform:scaleX(1)}
@media (max-width:820px){
  .rel__body{grid-template-columns:1fr;gap:1.6rem}
}

/* ── what it looks like: the service shown working ──────────
   The one component that borrows an outside grammar (a message
   thread). Bubbles carry a radius because that is what makes them
   read as messages; everything around them stays square, so the
   exception is contained to the component. */
.thread{background:var(--forest);color:var(--salt);padding-block:var(--sp-major)}
.thread__grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.thread__txt{display:flex;flex-direction:column;gap:1.4rem;max-width:44ch}
.thread__txt p{color:rgba(231,236,236,.84)}

.chat{margin:0;display:flex;flex-direction:column;gap:.9rem}
.chat__cap{
  order:2;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe);font-weight:500;
}
.chat__card{
  background:var(--ivory);color:var(--ink);
  padding:clamp(1.2rem,2.6vw,1.9rem);
  box-shadow:0 18px 48px rgba(10,24,38,.28);
}
.chat__head{
  display:flex;align-items:center;gap:.85rem;
  padding-bottom:1rem;margin-bottom:1.3rem;
  border-bottom:1px solid rgba(15,33,49,.16);
}
.chat__mark{height:2.1rem;width:auto}
.chat__who{display:flex;flex-direction:column;gap:.2rem;line-height:1.1}
.chat__who b{font-family:var(--serif);font-weight:400;font-size:1.05rem;letter-spacing:.06em}
.chat__who i{
  font-style:normal;font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-dk);font-weight:500;
}
.chat__log{display:flex;flex-direction:column;gap:.7rem}
.msg{
  max-width:86%;padding:.85rem 1.1rem;
  font-size:clamp(.95rem,.9rem + .2vw,1.02rem);
  line-height:1.55;font-weight:400;
}
.msg--them{
  align-self:flex-start;background:var(--ivory-2);color:var(--ink);
  border-radius:14px 14px 14px 3px;
}
.msg--us{
  align-self:flex-end;background:var(--navy);color:var(--salt);
  border-radius:14px 14px 3px 14px;
}
@media (max-width:900px){
  .thread__grid{grid-template-columns:1fr;gap:2.4rem}
  .msg{max-width:92%}
}

/* ── the relief: quote plate over interior ─────────────── */
.relief{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(28rem,72vh,46rem);
  display:flex;align-items:center;
  padding-block:var(--sp-anchor);
  background:var(--navy-2);
}
.relief__media{position:absolute;inset:-12% 0;z-index:-2}
.relief__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.relief__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(10,24,38,.95) 0%,rgba(10,24,38,.88) 38%,rgba(10,24,38,.55) 68%,rgba(10,24,38,.4) 100%),
    linear-gradient(to bottom,rgba(10,24,38,.35),rgba(10,24,38,.1) 40%,rgba(10,24,38,.45));
}
.quote,.quote p{
  font-family:var(--serif);color:var(--salt);
  font-size:clamp(1.6rem,1.05rem + 2.5vw,3rem);
  line-height:1.26;letter-spacing:-.014em;font-weight:400;
}
.quote{margin:0;max-width:min(38rem,92%)}
.quote::before{
  content:"";display:block;width:clamp(2.5rem,5vw,4rem);height:1px;
  background:var(--gold);margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.relief.in .quote::before{transform:scaleX(1)}

/* ── process ────────────────────────────────────────────── */
.proc{background:var(--ivory-2);padding-block:var(--sp-major)}
.proc .sec__head{border-bottom:0;margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.steps{display:grid;gap:0}
.step{
  display:grid;grid-template-columns:clamp(4rem,9vw,9rem) 1fr;
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.8rem,3.2vw,2.8rem);
  border-top:1px solid rgba(15,33,49,.16);
  align-items:start;
}
.step:last-child{border-bottom:1px solid rgba(15,33,49,.16)}
.step__n{
  font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.5rem);
  color:var(--gold-dk);font-weight:500;letter-spacing:.06em;line-height:1.3;padding-top:.15rem;
}
.step__c{max-width:64ch;display:flex;flex-direction:column;gap:.9rem}
.step__c h3{
  font-family:var(--serif);
  font-size:clamp(1.35rem,1.1rem + .9vw,2rem);
  line-height:1.2;letter-spacing:-.012em;
}
.step__c p{color:var(--ink-2)}
.step__aside{
  font-size:.92rem;line-height:1.6;color:var(--ink-2);
  padding-left:1.1rem;border-left:1px solid var(--gold);opacity:.92;
}
@media (max-width:560px){
  .step{grid-template-columns:1fr;gap:.7rem}
  .step__n{font-size:.96rem}
}

/* ── what we do: intro passage above the index ──────────── */
.what__intro{
  max-width:62ch;display:flex;flex-direction:column;gap:1.4rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.what__intro p:not(.lede){color:var(--ink-2)}

/* ── the relief: supporting copy under the quote ────────── */
.relief__body{display:flex;flex-direction:column;gap:1.4rem}
.relief__p{
  max-width:46ch;color:rgba(231,236,236,.84);
  font-size:clamp(1rem,.95rem + .3vw,1.1rem);line-height:1.7;
}
.relief__p--sig{
  font-family:var(--serif);font-style:italic;color:var(--gold-lt);
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.45;
  padding-top:.4rem;
}

/* ── inline CTA: converts at the persuasion peaks, in the page's
      own hairline language rather than a competing button ──────────── */
.inline-cta{margin-top:clamp(1.6rem,3vw,2.4rem)}
.inline-cta a{
  display:inline-flex;align-items:center;gap:.75rem;
  min-height:44px;padding:.55rem 0;
  font-family:var(--sans);font-size:.84rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  color:var(--gold-lt);
}
.inline-cta a::after{
  content:"";width:clamp(3rem,6vw,4.5rem);height:1px;background:var(--gold);
  transform:scaleX(.66);transform-origin:left center;
  transition:transform .5s var(--ease);
}
.inline-cta a:hover::after{transform:scaleX(1)}
.inline-cta--light a{color:var(--gold-lt)}

/* ── assessments: passage beside the checked list ───────── */
.assess{background:var(--ivory);padding-block:var(--sp-quiet)}
.assess__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.assess__txt{display:flex;flex-direction:column;gap:1.4rem;max-width:52ch}
.assess__txt p:not(.lede){color:var(--ink-2)}
/* No rules here: the record sheet two sections down owns the ruled-list
   language, so this reads as a scope list instead of a second ledger. */
.checks{display:flex;flex-wrap:wrap;gap:.7rem}
.checks li{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.05rem .62rem .85rem;
  border:1px solid rgba(15,33,49,.2);
  font-size:clamp(.94rem,.9rem + .2vw,1rem);
  line-height:1.35;color:var(--ink);
}
.checks li::before{
  content:"";flex:none;width:.42rem;height:.42rem;
  background:var(--gold);transform:rotate(45deg);
}
@media (max-width:860px){
  .assess__grid{grid-template-columns:1fr;gap:2.5rem}
}

/* ── your home file: navy field, record on the right ────── */
.file{background:var(--navy);color:var(--salt);padding-block:var(--sp-anchor)}
.file__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.file__txt{display:flex;flex-direction:column;gap:1.5rem;max-width:50ch}
.file__txt .lede--light{color:var(--salt)}
.file__txt p:not(.lede){color:rgba(231,236,236,.8)}
/* The record sheet. The one component on the page that reads as a
   document rather than a passage — the differentiator, treated as one. */
.sheet{
  border:1px solid rgba(200,185,166,.42);
  background:rgba(10,24,38,.55);
}
.sheet__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.1rem,2.2vw,1.6rem);
  border-bottom:1px solid rgba(200,185,166,.42);
  background:rgba(231,236,236,.045);
}
.sheet__ttl{
  font-size:.8rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe);
}
.sheet__mark{height:1.5rem;width:auto;opacity:.85}
.sheet__rows{padding:.3rem clamp(1.1rem,2.2vw,1.6rem)}
.sheet__rows li{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.35rem clamp(.8rem,2vw,1.6rem);
  padding:.9rem 0;
  border-bottom:1px dashed rgba(231,236,236,.18);
}
.sheet__rows li:last-child{border-bottom:0}
.sheet__k{
  flex:none;font-family:var(--serif);color:var(--salt);
  font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);line-height:1.3;
  min-width:9.5rem;
}
.sheet__v{
  font-size:.9rem;line-height:1.5;color:rgba(231,236,236,.66);font-weight:300;
}
.sheet__foot{
  padding:.9rem clamp(1.1rem,2.2vw,1.6rem);
  border-top:1px solid rgba(200,185,166,.42);
  background:rgba(231,236,236,.045);
  font-size:.9rem;line-height:1.5;color:rgba(231,236,236,.7);
}
@media (max-width:420px){.sheet__k{min-width:0}}
@media (max-width:860px){
  .file__grid{grid-template-columns:1fr;gap:2.5rem}
}

/* ── why people use us ──────────────────────────────────── */
.why{background:var(--ivory-2);padding-block:var(--sp-quiet)}
.why__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.why__txt{display:flex;flex-direction:column;gap:1.5rem;max-width:56ch}
.why__txt .h2{margin-bottom:.4rem}
.why__txt p:not(.lede){color:var(--ink-2)}
.why__pts{border-top:1px solid rgba(15,33,49,.16)}
.why__pts li{
  display:flex;flex-direction:column;gap:.45rem;
  padding:1.3rem 0;border-bottom:1px solid rgba(15,33,49,.16);
}
.why__pts b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.1rem,.98rem + .5vw,1.35rem);line-height:1.3;color:var(--ink);
}
.why__pts span{font-size:.96rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:860px){
  .why__grid{grid-template-columns:1fr;gap:2.5rem}
}

/* ── craft / brand as object ────────────────────────────── */
.craft{background:var(--ivory);padding-block:var(--sp-quiet)}
.gal{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(.8rem,1.6vw,1.6rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.gal__i{margin:0;display:flex;flex-direction:column;gap:1rem}
.gal__i--wide{grid-column:1 / -1}
.gal__i img{
  width:100%;height:100%;object-fit:cover;
  aspect-ratio:16/10;background:var(--ivory-2);
}
.gal__i--wide img{aspect-ratio:21/9}
.gal__i figcaption{
  font-size:.92rem;line-height:1.6;color:var(--ink-2);
  padding-left:1rem;border-left:1px solid var(--gold);
}
@media (max-width:680px){
  .gal{grid-template-columns:1fr}
  .gal__i img,.gal__i--wide img{aspect-ratio:4/3}
}

/* ── service area ───────────────────────────────────────── */
.area{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(30rem,80vh,48rem);
  display:flex;align-items:flex-end;
  padding-block:var(--sp-anchor);
  background:var(--navy-2);
}
.area__media{position:absolute;inset:-12% 0;z-index:-2}
.area__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.area__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,24,38,.94) 8%,rgba(10,24,38,.55) 48%,rgba(10,24,38,.3) 100%);
}
.area__body{max-width:min(var(--max),100%)}
.area__body p{max-width:56ch;color:rgba(231,236,236,.84);margin-top:1.6rem}
.area__places{
  max-width:none;display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem)!important;
  padding-top:1.5rem;border-top:1px solid rgba(176,141,87,.35);
}
.area__places span{
  font-family:var(--serif);color:var(--gold-lt);
  font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:.1em;
}

/* ── lead capture ───────────────────────────────────────── */
.start{background:var(--navy);color:var(--salt);padding-block:var(--sp-major)}
.start__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.start__intro p{color:rgba(231,236,236,.8);margin-top:1.6rem;max-width:44ch}
.start__pts{margin-top:2.2rem;display:grid;gap:.9rem}
.start__pts li{
  position:relative;padding-left:1.7rem;font-size:1rem;
  color:rgba(231,236,236,.8);line-height:1.6;
}
.start__pts li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.7rem;height:1px;background:var(--gold);
}

.form{display:flex;flex-direction:column;gap:1.3rem;position:relative}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f{display:flex;flex-direction:column;gap:.55rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.f label{
  font-size:.95rem;font-weight:500;letter-spacing:.01em;
  color:rgba(231,236,236,.92);
}
.opt{letter-spacing:.01em;color:rgba(231,236,236,.62);font-weight:300;font-size:.86rem}

.f input,.f textarea,.f select{
  width:100%;font-family:var(--sans);font-size:1rem;font-weight:300;
  color:var(--salt);background:rgba(231,236,236,.09);
  border:1px solid rgba(231,236,236,.5);border-radius:0;
  padding:.95rem 1.1rem;min-height:3.4rem;
  transition:border-color .35s var(--ease),background .35s var(--ease);
  appearance:none;
}
.f textarea{min-height:7rem;resize:vertical;line-height:1.65}
.f input::placeholder,.f textarea::placeholder{color:rgba(231,236,236,.42)}
.f input:hover,.f textarea:hover,.f select:hover{border-color:rgba(231,236,236,.72)}
.f input:focus,.f textarea:focus,.f select:focus{
  border-color:var(--gold-lt);background:rgba(231,236,236,.13);outline:none;
}
.f input:focus-visible,.f textarea:focus-visible,.f select:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}

.sel{position:relative;display:block}
.sel select{padding-right:3rem;cursor:pointer}
.sel select option{background:var(--navy);color:var(--salt)}
.sel svg{
  position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;color:var(--gold-lt);pointer-events:none;
}

.f.is-bad input,.f.is-bad select{border-color:var(--err-bd)}
.err{font-size:.92rem;line-height:1.5;color:var(--err)}
.err::before{content:"↳ ";opacity:.7}

.form__fine{font-size:.92rem;line-height:1.6;color:rgba(231,236,236,.68)}
.btn__s{display:none}
.form.is-sending .btn__t{opacity:.5}
.form.is-sending .btn__s{
  display:block;width:1rem;height:1rem;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--ink-gold) 30%,transparent);border-top-color:var(--ink-gold);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.ok[hidden]{display:none}
.ok{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:1rem;background:var(--navy);
  border:1px solid rgba(176,141,87,.4);padding:clamp(2rem,4vw,3rem);
}
.ok h3{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--salt)}
.ok p{color:rgba(231,236,236,.8)}
.ok a{color:var(--gold-lt)}
@media (max-width:900px){
  .start__grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .f-row{grid-template-columns:1fr}
}

/* ── footer ─────────────────────────────────────────────── */
.foot{background:var(--navy-2);color:rgba(231,236,236,.7);padding-top:clamp(3.5rem,7vw,6rem)}
.foot__top{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(2.5rem,6vw,6rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.foot__brand{display:flex;align-items:center;gap:1rem;text-decoration:none}
.foot__brand img{height:3rem;width:auto}
.foot__name{
  display:block;font-family:var(--serif);color:var(--salt);
  font-size:1.1rem;letter-spacing:.19em;line-height:1.3;
}
.foot__desc{
  display:block;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-lt);font-weight:500;
}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.foot__col h4{
  font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:1rem;
  padding-bottom:.8rem;border-bottom:1px solid rgba(200,185,166,.22);
}
.foot__col p{font-size:.96rem;line-height:1.7}
.foot__col p a{display:inline-block;padding-block:.62rem;min-height:44px}
.foot__col a{color:rgba(231,236,236,.8);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .35s var(--ease),color .35s var(--ease)}
.foot__col a:hover{color:var(--salt);border-bottom-color:var(--gold)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  padding-block:1.5rem;border-top:1px solid rgba(231,236,236,.12);
  font-size:.84rem;letter-spacing:.06em;
}
.foot__loc i{font-style:normal;color:var(--gold);padding-inline:.5rem}
@media (max-width:860px){
  .foot__top{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr}
}

/* ── motion ─────────────────────────────────────────────────
   Three distinct behaviours, not one entrance repeated:
   1. TEXT rises from a mask.
   2. PLATES (full-bleed photography) are unveiled by a travelling
      mask and settle out of an over-scale — the film cut between
      sections, and the page's authored moment after the hero.
   3. RULES draw along their own length.
   ────────────────────────────────────────────────────────── */

/* 1. text */
.js .r-lines,.js .sec__head,.js .idx__i,.js .step,.js .area__body>*,.js .start__intro>*,.js .who__col,.js .gal__i figcaption,.js .checks li,.js .sheet__rows li,.js .why__pts li,.js .sheet__head,.js .msg{
  opacity:0;transform:translateY(1.25rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.in .r-lines,.in.r-lines,.in.sec__head,.in .idx__i,.in.step,
.in .area__body>*,.in .start__intro>*,.in .who__col,.in .gal__i figcaption,
.in .checks li,.in .sheet__rows li,.in .why__pts li,.in .sheet__head,.in .msg{
  opacity:1;transform:none;
}

/* 2. plates — mask travel + scale settle */
.js .who__fig img,.js .gal__i img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.1);
  transition:clip-path 1.35s var(--ease),transform 1.6s var(--ease);
}
.in .who__fig img,.in .gal__i img{
  clip-path:inset(0 0 0 0);transform:scale(1);
}
.js .relief__media img,.js .area__media img{
  opacity:0;transform:scale(1.09);
  transition:opacity 1.5s var(--ease),transform 1.9s var(--ease);
}
.in .relief__media img,.in .area__media img{opacity:1;transform:scale(1)}
.js .relief__scrim,.js .area__scrim{
  opacity:0;transition:opacity 1.5s var(--ease) .1s;
}
.in .relief__scrim,.in .area__scrim{opacity:1}

/* 3. rules */
.js .quote::before{
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.15s var(--ease) .25s;
}
.relief.in .quote::before{transform:scaleX(1)}
.js .area__places{
  --w:0;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:left top;
  background-size:var(--w) 1px;
  border-top:0!important;
  transition:background-size 1.25s var(--ease) .3s;
}
.in .area__places{--w:100%}

/* stagger */
.in .idx__i:nth-child(2){transition-delay:.06s}
.in .idx__i:nth-child(3){transition-delay:.12s}
.in .idx__i:nth-child(4){transition-delay:.18s}
.in .idx__i:nth-child(5){transition-delay:.24s}
.in .who__col:nth-child(2){transition-delay:.12s}
.in .gal__i:nth-child(2) img{transition-delay:.1s}
.in .gal__i:nth-child(3) img{transition-delay:.2s}
.in .area__body>*:nth-child(2){transition-delay:.1s}
.in .area__body>*:nth-child(3){transition-delay:.2s}
.in .start__intro>*:nth-child(2){transition-delay:.1s}
.in .start__intro>*:nth-child(3){transition-delay:.2s}
.in .checks li:nth-child(2),.in .sheet__rows li:nth-child(2){transition-delay:.05s}
.in .checks li:nth-child(3),.in .sheet__rows li:nth-child(3){transition-delay:.1s}
.in .checks li:nth-child(4),.in .sheet__rows li:nth-child(4){transition-delay:.15s}
.in .checks li:nth-child(5),.in .sheet__rows li:nth-child(5){transition-delay:.2s}
.in .checks li:nth-child(6),.in .sheet__rows li:nth-child(6){transition-delay:.25s}
.in .checks li:nth-child(7),.in .sheet__rows li:nth-child(7){transition-delay:.3s}
.in .msg:nth-child(2){transition-delay:.12s}
.in .msg:nth-child(3){transition-delay:.24s}
.in .msg:nth-child(4){transition-delay:.36s}
.in .why__pts li:nth-child(2){transition-delay:.09s}
.in .why__pts li:nth-child(3){transition-delay:.18s}
.in .why__pts li:nth-child(4){transition-delay:.27s}
.in .r-lines:nth-child(2){transition-delay:.1s}
.in .r-lines:nth-child(3){transition-delay:.2s}

/* ── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero__media img{transform:none;animation:none}
  .ln>span{transform:none;opacity:1;animation:none}
  .hero__rail,.hero__scroll{opacity:1;animation:none}
  .r-lines,.sec__head,.idx__i,.step,.area__body>*,.start__intro>*,.who__col,
  .gal__i figcaption,.who__fig img,.gal__i img,.relief__media img,.area__media img,
  .relief__scrim,.area__scrim,.checks li,.sheet__rows li,.why__pts li,.sheet__head,.msg{
    opacity:1;transform:none;clip-path:none;
  }
  .area__places{background-size:100% 1px}
  .rel__body p::before{transform:scaleX(1)}
  .quote::before{transform:scaleX(1)}
  [data-parallax]{transform:none!important}
}