/* ==========================================================================
   Watershed Holding Company — site stylesheet
   All color values are from the WHC brand system. Do not introduce hex
   values outside the custom properties declared below.
   ========================================================================== */

/* --- Optional licensed webfonts -------------------------------------------
   Orpheus and Avenir Next LT Pro are licensed faces and are NOT bundled.
   The fallbacks below (Georgia / system sans) are deliberate and look correct.
   If you license the webfonts, drop the files into /fonts and uncomment:

@font-face { font-family:"Orpheus Pro"; src:url("../fonts/OrpheusPro-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Orpheus Pro"; src:url("../fonts/OrpheusPro-Medium.woff2")  format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Avenir Next LT Pro"; src:url("../fonts/AvenirNextLTPro-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Avenir Next LT Pro"; src:url("../fonts/AvenirNextLTPro-Demi.woff2")    format("woff2"); font-weight:600; font-display:swap; }
   ------------------------------------------------------------------------- */

:root{
  /* Core palette — read from the logo artwork */
  --navy:        #394D78;
  --sage:        #96B196;
  --snowmelt:    #8DC2DF;
  --glacier:     #D2EBF0;
  --mist:        #B1CBD8;

  /* Ramps, where needed */
  --navy-300:    #828FAA;
  --navy-400:    #5D6E91;
  --navy-600:    #2E3E60;
  --navy-700:    #222E48;
  --sage-400:    #829982;
  --sage-600:    #5A6A5A;   /* sage text on light grounds */
  --snowmelt-600:#557486;   /* snowmelt text on light grounds */
  --mist-600:    #606E75;
  --mist-700:    #4C575D;
  --mist-100:    #D5E3EA;
  /* Eyebrows and small caps on navy. Sage 300 is only 3.60:1 on navy — and
     3.14:1 once the map ground screen-blends the field to #405683 — so small
     type there uses Sage 100, which holds 5.42:1 and still reads green. */
  --sage-on-navy:#D6E1D6;
  --sage-200:    #B6C9B6;

  /* Derived */
  --deep-sage:   #3D5C3D;
  --ink:         #171F30;
  --paper:       #FBFBF9;

  /* Type */
  --font-display:"Orpheus Pro", Orpheus, Georgia, "Times New Roman", serif;
  --font-text:   "Avenir Next LT Pro", "Avenir Next", Avenir, system-ui, -apple-system,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --measure:     74ch;
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  /* Was clamp(4.5rem,10vw,8.5rem) — 136px top and bottom, so 272px of empty
     paper wherever two light sections met. Still generous, no longer a gap you
     scroll through. */
  --section-y:   clamp(3.25rem, 6.5vw, 6rem);

  /* Nav height is derived, not chosen. Clear space is 1X on all four sides,
     where X is the wordmark height — 105.2/301.7, or 0.349, of the lockup
     height. At 73px the lockup is 235px wide (well clear of the 180px minimum)
     and 1X is 26px, so 73 + 26 + 26 = 125.
     The nav shrinks to the previous size once you scroll, which keeps the big
     lockup at rest without spending a quarter of the viewport on it forever.
     58px still renders 187px wide, so the compact state is legal too. */
  --logo-h:         73px;
  --nav-h:         125px;
  --logo-h-compact: 58px;
  --nav-h-compact:  98px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; height:auto; display:block; }

/* --- Layout --------------------------------------------------------------- */

.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:820px; }

section{ position:relative; }
.section{ padding-block:var(--section-y); }
.section--navy{ background:var(--navy); color:#fff; }
.section--rule{ border-top:1px solid rgba(57,77,120,.14); }

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; color:var(--navy); margin:0; }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{ color:#fff; }

h1{ font-size:clamp(2.4rem,5.6vw,4.15rem); line-height:1.08; letter-spacing:-.015em; }
h2{ font-size:clamp(1.95rem,3.9vw,3rem);   line-height:1.14; letter-spacing:-.01em; }
h3{ font-size:clamp(1.2rem,1.9vw,1.5rem);  line-height:1.25; }

p{ margin:0 0 1.1em; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

a{ color:var(--navy); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--navy-600); }
.section--navy a{ color:var(--glacier); }

strong{ font-weight:600; }

.eyebrow{
  font-family:var(--font-text);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--sage-600);
  margin:0 0 1.15rem;
  max-width:none;
}
.section--navy .eyebrow{ color:var(--sage-on-navy); }

.lede{
  font-size:clamp(1.09rem,1.55vw,1.3rem);
  line-height:1.55;
  color:var(--navy-700);
}
.section--navy .lede{ color:var(--glacier); }

.small{ font-size:.875rem; line-height:1.55; color:var(--mist-700); }
.section--navy .small{ color:var(--mist); }

.rule-sage{ width:44px; height:2px; background:var(--sage-400); border:0; margin:0 0 1.4rem; }
.section--navy .rule-sage{ background:var(--sage); }

/* --- Skip link ----------------------------------------------------------- */

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:.7rem 1.1rem; font-size:.9rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--snowmelt-600); outline-offset:3px; border-radius:2px; }
.section--navy :focus-visible,.hero :focus-visible{ outline-color:var(--snowmelt); }

/* --- Navigation ---------------------------------------------------------- */

.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  transition:height .22s ease;
  display:flex; align-items:center;
  background:rgba(251,251,249,.93);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(57,77,120,.12);
}
.nav__inner{ display:flex; align-items:center; gap:2rem; width:100%; }

/* Clear space = 1X on all four sides, X = wordmark height ≈ 0.349 × lockup
   height. At --logo-h 58px that is 20px, which is what the padding below buys.
   The nav's own bottom border counts as a rule, so it has to clear it too. */
.nav__logo{ display:block; flex:0 0 auto; padding:0 26px 0 0; margin-right:auto; }
.nav__logo .logo-lockup{ height:var(--logo-h); width:auto; transition:height .22s ease; }
.nav__logo .logo-icon{ display:none; height:48px; width:auto; }

/* Compact state, applied by site.js once the page has scrolled past the hero's
   first screenful. Both sizes clear the 180px lockup minimum. */
.nav.is-compact{ height:var(--nav-h-compact); }
.nav.is-compact .nav__logo .logo-lockup{ height:var(--logo-h-compact); }
@media (prefers-reduced-motion:reduce){
  .nav,.nav__logo .logo-lockup{ transition:none; }
}

/* Below the lockup's 180px minimum width, the rule is to switch to the icon
   rather than shrink the lockup further. */
@media (max-width:560px){
  :root{ --nav-h:88px; --nav-h-compact:88px; }
  .nav__logo .logo-lockup{ display:none; }
  .nav__logo .logo-icon{ display:block; }
}

.nav__links{ display:flex; align-items:center; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:.845rem; font-weight:500; letter-spacing:.035em;
  color:var(--navy-700); text-decoration:none; padding-block:.4rem;
  border-bottom:1px solid transparent;
}
.nav__links a:hover{ color:var(--navy); border-bottom-color:var(--sage-400); }
.nav__links a.btn,
.nav__links a.btn:hover{ color:#fff; border-bottom-color:transparent; }

.nav__toggle{
  display:none; background:none; border:1px solid rgba(57,77,120,.25);
  border-radius:2px; padding:.45rem .7rem; color:var(--navy); cursor:pointer;
  font-family:var(--font-text); font-size:.8rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:940px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid rgba(57,77,120,.14);
    padding:.5rem var(--gutter) 1.1rem;
    box-shadow:0 18px 34px -22px rgba(23,31,48,.3);
  }
  .nav__links[hidden]{ display:none; }
  .nav__links li{ border-top:1px solid rgba(57,77,120,.09); }
  .nav__links a{ display:block; padding:.85rem 0; font-size:.95rem; border-bottom:0; }
  .nav__links .btn{ margin-top:.9rem; text-align:center; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn{
  display:inline-block;
  font-family:var(--font-text);
  font-size:.86rem; font-weight:600; letter-spacing:.045em;
  line-height:1.2;
  padding:.82rem 1.5rem;
  border:1px solid var(--navy);
  border-radius:2px;
  background:var(--navy); color:#fff;
  text-decoration:none; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{ background:var(--navy-600); border-color:var(--navy-600); color:#fff; }

.btn--ghost{ background:transparent; color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:#fff; }

.btn--on-dark{ background:#fff; border-color:#fff; color:var(--navy); }
.btn--on-dark:hover{ background:var(--glacier); border-color:var(--glacier); color:var(--navy-700); }

.btn--ghost-on-dark{ background:transparent; border-color:rgba(210,235,240,.55); color:#fff; }
.btn--ghost-on-dark:hover{ background:rgba(210,235,240,.14); border-color:var(--glacier); color:#fff; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem; }

/* --- Hero ---------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:min(88vh,860px);
  display:flex; align-items:flex-end;
  background:var(--navy-700);
  overflow:hidden;
}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 58%;
  filter:saturate(88%);
}
/* Navy 700 scrim, strongest at the type edge and falling away from it — the
   photography spec's gradient treatment. Two layers: vertical for the type
   block, horizontal because the type is left-aligned and the canyon's brightest
   rock face sits on the left edge. Measured, not guessed: verify.py hides the
   glyphs, samples the lightest background pixel each text box crosses, and
   fails the build under 4.5:1 for the small caps. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(34,46,72,.50) 0%, rgba(34,46,72,.26) 34%, rgba(34,46,72,0) 78%),
    linear-gradient(to top, rgba(34,46,72,.86) 0%, rgba(34,46,72,.70) 48%, rgba(34,46,72,.34) 78%, rgba(34,46,72,.20) 100%);
}
.hero__inner{ position:relative; z-index:2; padding-block:clamp(3.5rem,9vw,6.5rem); width:100%; }
.hero h1{ color:#fff; max-width:19ch; text-wrap:balance; }
/* fit-content so the box hugs the small caps. As a full-width block it stretched
   across the bright water on the right of the photograph, which made the
   measured contrast far worse than anything a reader actually sees. */
.hero .eyebrow{ color:var(--sage-on-navy); width:fit-content; max-width:100%; }
/* At .20em the hero eyebrow wraps on a phone and orphans "STATES". Tightening
   the tracking keeps it on one line; it is the only place the brand's +0.20em
   is relaxed, and only under 430px. */
@media (max-width:430px){
  .hero .eyebrow{ letter-spacing:.13em; font-size:.69rem; }
}
.hero__sub{
  margin-top:1.6rem; max-width:56ch;
  font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.55;
  color:var(--glacier);
}
.hero__credit{
  position:absolute; right:var(--gutter); bottom:.7rem; z-index:2;
  font-size:.66rem; letter-spacing:.06em; color:rgba(210,235,240,.5);
}

/* --- Two-column split ---------------------------------------------------- */

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(2rem,6vw,5.5rem); align-items:start; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:2.2rem; } }

/* --- Values -------------------------------------------------------------- */

/* Explicit tracks, not auto-fit: at these type sizes auto-fit gave three
   columns and left Determination stranded on a row of its own. */
.values{
  list-style:none; margin:4.4rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.7rem 2.4rem;
}
/* Four across is the point of this row, so it holds down to 760px with the
   type easing back rather than collapsing to two. Windows display scaling puts
   a lot of laptops around 850–1000 CSS px, which is exactly where the old
   1020px breakpoint was dropping it to two columns. */
@media (max-width:1020px){
  .values{ gap:2.2rem 1.9rem; }
  .values h3{ font-size:1.24rem; }
  .values p{ font-size:.97rem; }
}
@media (max-width:760px){ .values{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem 2.6rem; } }
@media (max-width:480px){ .values{ grid-template-columns:1fr; gap:1.9rem; } }

/* Introduces the values row without competing with the section eyebrow above. */
.values-label{ margin:4rem 0 0; }
.values-label + .values{ margin-top:1.5rem; }
.values h3{ font-size:clamp(1.34rem,1.7vw,1.5rem); margin-bottom:.6rem; }
.values p{ font-size:1.04rem; line-height:1.55; color:var(--mist-700); margin:0; }
.values li{ border-top:3px solid var(--sage-400); padding-top:1.35rem; }

/* --- About: the two commitments ------------------------------------------ */
/* A two-up rather than a third and fourth paragraph — the section was reading
   as a wall of text. Left rule distinguishes it from .values above. */
.points{
  list-style:none; margin:3.6rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2.3rem 3.2rem;
}
.points li{ border-left:3px solid var(--sage-400); padding:.15rem 0 .15rem 1.6rem; }
.points h3{ font-size:clamp(1.24rem,1.6vw,1.4rem); margin-bottom:.6rem; }
.points p{ font-size:1.02rem; line-height:1.62; color:var(--navy-700); margin:0; }

/* --- Approach pillars ---------------------------------------------------- */

.pillars-label{ margin:3.8rem 0 .2rem; }
.pillars{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.pillars li{
  display:grid; grid-template-columns:4.6rem minmax(0,1fr);
  gap:0 1.6rem;
  padding-block:2.05rem;
  border-top:1px solid rgba(210,235,240,.24);
}
.pillars li:last-child{ border-bottom:1px solid rgba(210,235,240,.24); }
.pillars__num{
  font-family:var(--font-display); font-size:1.55rem; line-height:1.1;
  color:var(--sage-200);
}
.pillars h3{ font-size:1.32rem; margin-bottom:.55rem; }
.pillars p{ color:var(--glacier); font-size:1rem; margin:0; max-width:62ch; }
@media (max-width:620px){
  .pillars li{ grid-template-columns:1fr; gap:.55rem; }
  .pillars__num{ font-size:1.15rem; }
}

/* Hydrological map ground — the signature graphic, 8–18% opacity behind text */
.map-ground{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.map-ground img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:118%; min-height:118%; width:auto; max-width:none;
  opacity:.13;
  mix-blend-mode:screen;
}

/* --- Criteria table ------------------------------------------------------ */

.criteria{ margin:3.4rem 0 0; }
.criteria__row{
  display:grid; grid-template-columns:12.5rem minmax(0,1fr);
  gap:.3rem 2.2rem;
  padding-block:1.55rem;
  border-top:1px solid rgba(57,77,120,.16);
}
.criteria__row:last-of-type{ border-bottom:1px solid rgba(57,77,120,.16); }
.criteria__key{
  font-size:.72rem; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:var(--sage-600); padding-top:.32rem;
}
.criteria__val{ font-size:1.06rem; color:var(--ink); margin:0; }
.criteria__val em{ display:block; font-style:normal; font-size:.9rem; color:var(--mist-700); margin-top:.4rem; }
@media (max-width:700px){
  .criteria__row{ grid-template-columns:1fr; gap:.5rem; }
  .criteria__key{ padding-top:0; }
}

.aside-note{
  margin-top:3rem; padding:1.7rem 1.9rem;
  background:var(--mist-100); border-left:3px solid var(--snowmelt);
  border-radius:2px;
}
.aside-note h3{ font-size:1.1rem; margin-bottom:.5rem; }
.aside-note p{ font-size:.95rem; color:var(--navy-700); margin:0; }

/* --- Bio ----------------------------------------------------------------- */

.bio{
  margin-top:3.8rem; padding-top:2.6rem;
  border-top:1px solid rgba(57,77,120,.16);
  display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
@media (max-width:700px){ .bio{ grid-template-columns:1fr; } }

/* 240 x 300 rather than 200 x 250: two body lines taller (2 x 16px x 1.6 = 51px)
   and proportionally wider, so the 4:5 crop is unchanged. */
.bio__portrait{
  width:240px; max-width:100%; aspect-ratio:4/5;
  background:var(--mist-100);
  border-radius:2px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.bio__portrait img{ width:100%; height:100%; object-fit:cover; }
.bio__portrait span{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mist-600); padding:1rem; }
.bio__name{ font-size:1.45rem; margin-bottom:.15rem; }
.bio__role{
  font-size:.72rem; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:var(--sage-600); margin:0 0 1.15rem;
}

/* --- Field Notes cards --------------------------------------------------- */

.notes{
  list-style:none; margin:3.4rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:1.6rem;
}
/* auto-fit rather than auto-fill so two briefs fill the row instead of leaving a
   dead third column — and a single brief gets a sensible width rather than
   stretching the full measure. */
.notes:has(> :only-child){ grid-template-columns:minmax(0,min(560px,100%)); }
.note-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid rgba(57,77,120,.15);
  border-top:3px solid var(--navy);
  border-radius:2px;
  padding:1.7rem 1.75rem 1.55rem;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.note-card:hover{ border-color:rgba(57,77,120,.34); box-shadow:0 14px 30px -20px rgba(23,31,48,.32); transform:translateY(-2px); }
.note-card__meta{
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-600); margin:0 0 .8rem;
}
.note-card__meta .dot{ color:var(--mist); }
.note-card h3{ font-size:1.28rem; line-height:1.22; margin-bottom:.6rem; }
.note-card h3 a{ text-decoration:none; color:inherit; }
.note-card h3 a:hover{ text-decoration:underline; text-decoration-color:var(--sage-400); }
.note-card p{ font-size:.94rem; color:var(--mist-700); margin:0 0 1.3rem; }
.note-card__more{
  margin-top:auto; font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--snowmelt-600); text-decoration:none;
}
.note-card__more:hover{ color:var(--navy); text-decoration:underline; }
.note-card--empty{ border-top-color:var(--mist); background:transparent; }

/* --- Forms --------------------------------------------------------------- */

.field{ margin-bottom:1.25rem; }
.field label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-700); margin-bottom:.45rem;
}
.field .req{ color:var(--snowmelt-600); }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--font-text); font-size:1rem; line-height:1.5;
  color:var(--ink); background:#fff;
  border:1px solid rgba(57,77,120,.3); border-radius:2px;
  padding:.72rem .85rem;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--navy); box-shadow:0 0 0 3px rgba(141,194,223,.32); outline:none;
}
.field textarea{ min-height:118px; resize:vertical; }
.field__hint{ font-size:.8rem; color:var(--mist-700); margin:.4rem 0 0; }

.form-status{ margin-top:1rem; font-size:.9rem; }
.form-status[data-state="error"]{ color:#8A3A3A; }
.form-status[data-state="ok"]{ color:var(--deep-sage); }

/* Signup band */
.signup{
  margin-top:3.2rem;
  background:var(--navy);
  color:#fff;
  border-radius:2px;
  padding:clamp(1.9rem,4vw,2.9rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3.2rem); align-items:center;
}
@media (max-width:820px){ .signup{ grid-template-columns:1fr; } }
.signup h3{ color:#fff; font-size:clamp(1.4rem,2.4vw,1.85rem); margin-bottom:.6rem; }
.signup p{ color:var(--glacier); font-size:.95rem; margin:0; }
.signup form{ display:flex; gap:.7rem; flex-wrap:wrap; }
.signup input[type="email"]{
  flex:1 1 210px; min-width:0;
  border-color:rgba(210,235,240,.4);
  background:rgba(251,251,249,.97);
}
.signup .form-status{ flex:1 1 100%; color:var(--glacier); margin-top:.2rem; }
.signup .form-status[data-state="ok"]{ color:var(--sage-on-navy); }
.signup .form-status[data-state="error"]{ color:#F0C4C4; }
.signup label.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Contact panel */
.contact__panel{
  background:#fff; border:1px solid rgba(57,77,120,.15); border-radius:2px;
  padding:clamp(1.6rem,3.5vw,2.3rem);
}
.contact__direct{ list-style:none; margin:2rem 0 0; padding:0; }
.contact__direct li{ padding-block:1.05rem; border-top:1px solid rgba(57,77,120,.14); }
.contact__direct li:first-child{ border-top:0; padding-top:0; }
.contact__direct .k{
  font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-600); display:block; margin-bottom:.3rem;
}
.contact__direct a{ font-size:1.02rem; }

.calendly-cue{
  margin-top:1.6rem; padding:1.25rem 1.4rem;
  background:var(--mist-100); border-radius:2px;
  font-size:.9rem; color:var(--navy-700);
}
.calendly-cue p{ margin:0 0 .9rem; font-size:.9rem; }

/* Thank-you / scheduling state, revealed after the contact form submits */
.scheduler[hidden]{ display:none; }
.scheduler{ margin-top:1.5rem; }
.scheduler__head{ margin-bottom:1.2rem; }
.calendly-inline-widget{ min-width:280px; height:640px; }

/* --- Photographic watermark --------------------------------------------- */
/* A whole run of pale sections in a row reads as unfinished rather than calm.
   This puts one image behind the Contact section at very low strength, with the
   paper colour feathered back over the top and bottom 22% so the section edges
   don't show a hard photographic seam. */

.section--watermark{ position:relative; isolation:isolate; }
.section--watermark > .wrap{ position:relative; z-index:1; }

.watermark{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.watermark img{
  width:100%; height:100%; object-fit:cover; object-position:50% 60%;
  opacity:.07;
  filter:grayscale(65%) contrast(92%);
}
.watermark::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,
    var(--paper) 0%, rgba(251,251,249,0) 22%,
    rgba(251,251,249,0) 78%, var(--paper) 100%);
}

/* --- Footer -------------------------------------------------------------- */

.footer{ background:var(--navy-700); color:var(--mist); padding-block:clamp(3rem,6vw,4.5rem); }
.footer__top{ display:flex; flex-wrap:wrap; gap:2.4rem 3rem; align-items:flex-start; justify-content:space-between; }
/* 78px tall → 252px wide. Same 25% step up as the nav lockup. */
.footer__logo{ display:block; padding:0 28px 28px 0; }
.footer__logo .logo-lockup{ height:78px; width:auto; }
.footer__logo .logo-icon{ display:none; }
.footer__nav{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.7rem; }
.footer__nav a{ font-size:.85rem; color:var(--mist); text-decoration:none; }
.footer__nav a:hover{ color:#fff; text-decoration:underline; }
.footer__meta{
  margin-top:3rem; padding-top:1.6rem;
  border-top:1px solid rgba(210,235,240,.16);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  font-size:.78rem; color:rgba(210,235,240,.66);
}
.footer__meta p{ margin:0; max-width:none; }
.footer__meta a{ color:rgba(210,235,240,.8); }

/* --- Field Notes article page ------------------------------------------- */

.note-hero{ background:var(--navy); color:#fff; padding-block:clamp(3.2rem,7vw,5.2rem); position:relative; overflow:hidden; }
.note-hero h1{ color:#fff; font-size:clamp(2rem,4.3vw,3.2rem); max-width:26ch; }
.note-hero__meta{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-on-navy); margin:0 0 1.15rem;
}
.note-hero__meta .dot{ color:rgba(210,235,240,.5); }
.note-hero__sub{ margin-top:1.4rem; color:var(--glacier); font-size:1.1rem; max-width:60ch; }

.article{ padding-block:clamp(3rem,6vw,4.5rem); }
.article__body{ max-width:70ch; }
.article__body h2{ font-size:clamp(1.4rem,2.4vw,1.85rem); margin:2.6rem 0 .8rem; }
.article__body h3{ font-size:1.2rem; margin:2rem 0 .6rem; }
.article__body p{ font-size:1.06rem; line-height:1.68; margin-bottom:1.25em; }
.article__body ul,.article__body ol{ font-size:1.06rem; line-height:1.68; padding-left:1.35rem; margin:0 0 1.25em; max-width:70ch; }
.article__body li{ margin-bottom:.5em; }
.article__body blockquote{
  margin:2rem 0; padding:.2rem 0 .2rem 1.5rem;
  border-left:3px solid var(--sage-400);
  font-family:var(--font-display); font-size:1.2rem; line-height:1.5; color:var(--navy);
}
.article__body a{ text-decoration-color:var(--sage-400); }
.article__body sup a{ text-decoration:none; font-weight:600; padding-inline:.1em; }

.footnotes{
  margin-top:3.2rem; padding-top:1.7rem;
  border-top:1px solid rgba(57,77,120,.18);
  max-width:70ch;
}
.footnotes h2{ font-size:.72rem !important; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:var(--sage-600); font-family:var(--font-text); margin:0 0 1rem !important; }
.footnotes ol{ font-size:.86rem; line-height:1.55; color:var(--mist-700); padding-left:1.25rem; margin:0; }
.footnotes li{ margin-bottom:.6em; }
.footnotes a{ color:var(--snowmelt-600); }

.article__foot{
  margin-top:3.2rem; padding-top:1.8rem; border-top:1px solid rgba(57,77,120,.18);
  display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center;
  max-width:70ch;
}
.article__foot .small{ margin:0; }

/* --- Print --------------------------------------------------------------- */

@media print{
  :root{ --section-y:1.2rem; }
  *{ print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  body{ background:#fff; font-size:11pt; line-height:1.5; }
  .nav,.nav__toggle,.hero__credit,.signup,.btn,.btn-row,form,.calendly-cue,.scheduler,
  .watermark{ display:none !important; }
  .hero{ min-height:0; }
  h1,h2,h3{ break-after:avoid; }
  .note-card,.criteria__row,.pillars li,.values li,.footnotes li{ break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#4C575D; }
}