/* ==========================================================================
   4:8 Financial — design system (round 2: off-white, editorial, premium)
   Brand accents are exact logo colors, used sparingly.
   ========================================================================== */

:root{
  /* --- ink --- */
  --ink:        #22301a;   /* deep forest, body headings */
  --ink-soft:   #4a5543;
  --muted:      #74786c;
  --forest:     #1f3318;   /* dark sections: one step greener than #1d2915 (round 8, "more color") */
  --forest-2:   #2a4220;
  --forest-3:   #35532a;

  /* --- surfaces (off-white, not cream) --- */
  --paper:      #fafaf7;   /* page */
  --paper-warm: #f3f3ef;   /* alternate section */
  --paper-deep: #ebebe5;
  --band:       #f3f3ef;
  --white:      #ffffff;
  --rule:       #e2e1da;   /* hairlines */
  --rule-strong:#cfcec5;
  --tint-sage:  #eef3e3;   /* logo green at ~10% on paper: the one tinted band (round 8) */

  /* --- brand accents (exact logo) --- */
  --accent:       #f7a31f;
  --accent-deep:  #b86f08; /* AA on light for small text */
  --accent-light: #ffc983;
  --brand:        #96c93f;
  --brand-deep:   #4a7a1c; /* was #5f8a28 (3.9:1, hard to read); now AA on paper */
  --brand-ink:    #4a7a1c;
  --brand-light:  #d9ecac;
  --brown:        #6b4a2e;

  /* legacy pastel tokens now neutral (keeps older markup premium) */
  --clay-light:  #f6f4ee;
  --sage-light:  #f3f5ee;
  --plum-light:  #f5f2ee;
  --navy-light:  #efefea;

  /* --- type --- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 2px;
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 72px;

  --ease: cubic-bezier(.16,1,.3,1);      /* expo out */
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .35s;
  --dur: .7s;
  --dur-slow: 1.1s;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--accent); color: var(--forest); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; color:inherit; }
input, textarea{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4,h5{
  margin:0; font-family: var(--font-display); font-weight:500;
  line-height:.95; letter-spacing:-0.02em; color: var(--ink);
}
p{ margin:0; }
svg{ display:block; }
:focus-visible{ outline: 2px solid var(--accent-deep); outline-offset: 3px; }

.container{ width:100%; max-width: var(--container); margin:0 auto; padding:0 var(--gutter); }

/* ==========================================================================
   Type
   ========================================================================== */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family: var(--font-body); font-weight:600;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.eyebrow::before{ content:''; width:32px; height:1px; background: var(--accent); flex:none; }
.eyebrow .idx{ color: var(--ink); font-variant-numeric: tabular-nums; }
.eyebrow.on-dark{ color: rgba(250,250,247,.62); }
.eyebrow.green::before{ background: var(--brand); }
.eyebrow.green{ color: var(--muted); }

.italic-accent{ font-style:italic; color: var(--accent); }
.italic-brand{ font-style:italic; color: var(--brand-deep); }
/* small italic accents need the AA-safe tone */
p .italic-accent, li .italic-accent{ color: var(--accent-deep); }

.display-xl{ font-size: clamp(3rem, 8vw, 7.5rem); line-height:.9; letter-spacing:-0.03em; }
.display-lg{ font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height:.92; letter-spacing:-0.025em; }
.display-md{ font-size: clamp(2.2rem, 4.2vw, 3.9rem); line-height:.96; }
.display-sm{ font-size: clamp(1.5rem, 2.2vw, 2rem); line-height:1.05; letter-spacing:-0.01em; }

.lede{
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 38em;
  line-height:1.7;
}
.small{ font-size:.86rem; color: var(--muted); }

[data-new-copy]{ background:none; }

/* split-text reveal (JS wraps words; text is in HTML regardless) */
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.12em; margin-bottom:-.12em; }
.split .w > span{ display:inline-block; }

/* ==========================================================================
   Buttons + links
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.75em;
  padding: 1.05em 1.9em; min-height:48px;
  border-radius: 100px;
  font-weight:600; font-size:.9rem; letter-spacing:.01em;
  border:1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform .5s var(--ease);
  position:relative;
}
.btn::after{
  content:''; width:14px; height:10px; flex:none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover::after{ transform: translateX(4px); }
.btn-primary{ background: var(--forest); color: var(--paper); }
.btn-primary:hover{ background: var(--brand-deep); }
.btn-accent{ background: var(--accent); color: var(--forest); }
.btn-accent:hover{ background: var(--paper); color: var(--forest); }
.btn-outline{ background:transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-outline.on-dark{ border-color: rgba(250,250,247,.3); color: var(--paper); }
.btn-outline.on-dark:hover{ background: var(--paper); color: var(--forest); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em; font-weight:600; font-size:.92rem;
  padding:.3em 0; position:relative; min-height:44px;
}
.link-arrow::before{
  content:''; position:absolute; left:0; right:0; bottom:.55em; height:1px; background: currentColor;
  transform-origin: right; transform: scaleX(.35); opacity:.5;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.link-arrow:hover::before{ transform-origin:left; transform: scaleX(1); opacity:1; }

.magnetic{ display:inline-block; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding: 22px var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform .6s var(--ease), background .4s ease, border-color .4s ease, padding .4s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(250,250,247,.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rule);
  padding-top:14px; padding-bottom:14px;
}
.site-header.is-hidden{ transform: translateY(-100%); }
.brand{ display:flex; align-items:center; z-index:620; flex:none; }
.brand img{ height:40px; width:auto; }

.main-nav{ display:none; }
.nav-list{ display:flex; align-items:center; gap: clamp(1.2rem, 2.2vw, 2.4rem); }
.nav-list > li > a{
  font-size:.84rem; font-weight:500; letter-spacing:.01em;
  padding:.5em 0; position:relative; color: var(--ink-soft); white-space:nowrap;
  transition: color .3s ease;
}
.nav-list > li > a::after{
  content:''; position:absolute; left:0; right:0; bottom:.1em; height:1px; background: var(--ink);
  transform: scaleX(0); transform-origin:right; transition: transform .6s var(--ease);
}
.nav-list > li > a:hover{ color: var(--ink); }
.nav-list > li > a:hover::after{ transform: scaleX(1); transform-origin:left; }
.nav-list > li > a[aria-current="page"]{ color: var(--ink); }
.nav-list > li > a[aria-current="page"]::after{ transform: scaleX(1); background: var(--accent); }

/* Right side of the header: contact line on top, Risk Analysis + Client Login below (Asher's feedback, 2026-10-15) */
.nav-utility{ display:none; flex-direction:column; align-items:flex-end; gap:.45rem; }
.nav-contact{ display:flex; align-items:center; gap:1.1rem; }
.nav-contact a{
  font-size:.74rem; font-weight:500; color: var(--ink-soft); letter-spacing:.01em;
  position:relative; transition: color .3s ease;
}
.nav-contact a + a::before{
  content:''; position:absolute; left:-.6rem; top:50%; width:1px; height:.8em; transform:translateY(-50%);
  background: var(--rule-strong);
}
.nav-contact a:hover{ color: var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:1.4rem; }
.nav-actions a{
  font-size:.8rem; font-weight:600; color: var(--ink-soft);
  display:inline-flex; align-items:center; min-height:40px;
  transition: color .3s ease, background .3s ease;
}
.nav-actions a:hover{ color: var(--ink); }
.nav-actions .login{
  font-size:.9rem; padding: .7em 1.7em; min-height:46px; border-radius:100px;
  background: var(--accent); color: var(--forest); font-weight:700;
}
.nav-actions .login:hover{ background: var(--forest); color: var(--paper); }

.menu-toggle{
  display:flex; align-items:center; gap:.7em; background:none; border:none; z-index:620;
  font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink); min-height:44px; min-width:44px; justify-content:center; padding:0;
}
.menu-toggle .bars{ width:24px; height:10px; position:relative; }
.menu-toggle .bars span{
  position:absolute; left:0; width:100%; height:1.5px; background: currentColor;
  transition: transform .5s var(--ease), opacity .3s ease, top .5s var(--ease);
}
.menu-toggle .bars span:nth-child(1){ top:0; }
.menu-toggle .bars span:nth-child(2){ display:none; }
.menu-toggle .bars span:nth-child(3){ top:8px; }
.nav-open .menu-toggle{ color: var(--paper); }
.nav-open .menu-toggle .bars span:nth-child(1){ top:4px; transform: rotate(45deg); }
.nav-open .menu-toggle .bars span:nth-child(3){ top:4px; transform: rotate(-45deg); }
.nav-open .brand img{ filter: brightness(0) invert(1); opacity:.95; }

.mobile-menu{
  position:fixed; inset:0; z-index:600;
  background: var(--forest); color: var(--paper);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 7rem var(--gutter) 2.6rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
  overflow-y:auto;
}
.nav-open .mobile-menu{ clip-path: inset(0 0 0 0); }
.mobile-menu ul{ display:flex; flex-direction:column; }
.mobile-menu li{ overflow:hidden; }
.mobile-menu a{
  font-family: var(--font-display); font-size: clamp(2.2rem, 10vw, 3.2rem); font-weight:500; line-height:1.15;
  display:block; padding:.12em 0; color: var(--paper);
  transform: translateY(100%); transition: transform .8s var(--ease), color .3s ease;
}
.nav-open .mobile-menu a{ transform:none; }
.nav-open .mobile-menu li:nth-child(2) a{ transition-delay:.05s; }
.nav-open .mobile-menu li:nth-child(3) a{ transition-delay:.1s; }
.nav-open .mobile-menu li:nth-child(4) a{ transition-delay:.15s; }
.nav-open .mobile-menu li:nth-child(5) a{ transition-delay:.2s; }
.nav-open .mobile-menu li:nth-child(6) a{ transition-delay:.25s; }
.nav-open .mobile-menu li:nth-child(7) a{ transition-delay:.3s; }
.mobile-menu a:hover, .mobile-menu a:focus{ color: var(--accent); }
.mobile-menu .mobile-utility{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(250,250,247,.14);
  display:flex; gap:.7rem 1.4rem; flex-wrap:wrap; align-items:center;
}
.mobile-menu .mobile-utility a{
  font-family: var(--font-body); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transform:none; padding:.6em 0; color: rgba(250,250,247,.8);
}

@media (min-width: 1180px){
  .main-nav{ display:block; }
  .nav-utility{ display:flex; }
  .menu-toggle{ display:none; }
  .mobile-menu{ display:none; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
main{ padding-top: 0; }
main > section:first-child:not(.hero):not(.hero2){ padding-top: clamp(9rem, 16vw, 13rem) !important; }
main > section:first-child:not(.hero):not(.hero2) h1{ font-size: clamp(3rem, 7.4vw, 6.8rem); line-height:.9; letter-spacing:-0.03em; max-width: 14ch; }

.section{ padding: clamp(5rem, 11vw, 10rem) 0; position:relative; }
.section-tight{ padding: clamp(3.5rem, 7vw, 6rem) 0; }

.section-dark{ background: var(--forest); color: var(--paper); }
.section-dark h1, .section-dark h2, .section-dark h3{ color: var(--paper); }
.section-dark .lede{ color: rgba(250,250,247,.72); }
.section-dark .italic-accent{ color: var(--accent); }

.band{
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  border-radius: var(--radius);
}
.band.green{ border-left-color: var(--brand); }
.band.dark{ background: var(--forest-2); border-color: transparent; color: var(--paper); border-left-color: var(--accent); }

.card{
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 24px 60px -30px rgba(29,41,21,.22); }
.card.green{ border-top-color: var(--brand); }
.card.brown{ border-top-color: var(--brown); }

.grid{ display:grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-6{ grid-template-columns: repeat(6,1fr); }
@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-6{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 620px){
  .grid-2, .grid-3, .grid-6{ grid-template-columns: 1fr; }
}

/* reveal (visible without JS) */
.reveal{ opacity:1; transform:none; }
.js-anim .reveal{ opacity:0; transform: translateY(36px); }
.js-anim .reveal.is-in{ opacity:1; transform:none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }

/* triad tints — neutral surface + colored rule */
.triad-avoid{ background: var(--white); color: var(--brown); border-left-color: var(--brown); }
.triad-embrace{ background: var(--white); color: var(--brand-deep); border-left-color: var(--brand); }
.triad-engage{ background: var(--white); color: var(--accent-deep); border-left-color: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--forest); color: rgba(250,250,247,.78); padding: clamp(5rem,9vw,8rem) 0 2.4rem; }
.footer-cta{ padding-bottom: clamp(3.5rem,7vw,6rem); margin-bottom: 3rem; border-bottom:1px solid rgba(250,250,247,.12); display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-end; justify-content:space-between; }
.footer-cta h2{ color: var(--paper); font-size: clamp(2.6rem, 6.5vw, 6rem); line-height:.92; letter-spacing:-0.03em; max-width: 12ch; }
.footer-grid{ display:grid; gap:2.4rem; grid-template-columns: 1.4fr 1fr 1fr; margin-bottom:3rem; }
.site-footer h5{ color: rgba(250,250,247,.5); font-family: var(--font-body); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; margin-bottom:1.2em; }
.site-footer a{ color: rgba(250,250,247,.86); transition: color .3s ease; }
.site-footer a:hover{ color: var(--accent); }
.footer-links li{ margin-bottom:.7em; font-size:.95rem; }
.footer-brand{ font-family: var(--font-display); font-size:2rem; margin-bottom:.6em; color: var(--paper); letter-spacing:-0.01em; }
.footer-brand .n{ color: var(--accent); }
.footer-brand .f{ color: var(--brand); }
.footer-legal{ border-top:1px solid rgba(250,250,247,.12); padding-top:1.8rem; font-size:.76rem; color: rgba(250,250,247,.5); line-height:1.75; }
.footer-legal p{ margin-bottom:.9em; max-width: 110ch; }
.footer-placeholder{ display:inline-block; margin-top:.4em; padding:.3em .6em; border:1px dashed rgba(247,163,31,.6); color: var(--accent-light); border-radius:2px; font-weight:600; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns:1fr; gap:2rem; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.field{ margin-bottom:1.6rem; position:relative; }
.field label{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); margin-bottom:.4em; }
.field input, .field textarea{
  width:100%; padding:.7em 0; border:none; border-bottom:1px solid var(--rule-strong); border-radius:0;
  background: transparent; color: var(--ink); min-height:44px; font-size:1.05rem;
  transition: border-color .4s ease;
}
.field textarea{ min-height:130px; resize:vertical; }
/* Paul 2026-10-24: a fixed question on a form (Resonate), shown as text rather than a typing line */
.field-fixed .ff-label{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); margin-bottom:.5em; }
.field-fixed .ff-q{ font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height:1.3; color: var(--ink); }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color: var(--ink); }
.field.invalid input, .field.invalid textarea{ border-bottom-color:#a3361f; }
.field-error{ display:none; color:#a3361f; font-size:.78rem; margin-top:.4em; }
.field.invalid .field-error{ display:block; }
.honeypot-field{ position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-success{ display:none; }
.form-success.is-visible{ display:block; }
.form-body.is-hidden{ display:none; }

.skip-link{ position:absolute; left:-9999px; background:var(--forest); color:var(--paper); padding:.8em 1.2em; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center{ text-align:center; }
.mt-1{ margin-top:1rem; } .mt-2{ margin-top:2rem; } .mt-3{ margin-top:3.2rem; }
.mb-1{ margin-bottom:1rem; } .mb-2{ margin-bottom:2rem; } .mb-3{ margin-bottom:3rem; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.flex{ display:flex; } .flex-wrap{ flex-wrap:wrap; } .gap-1{ gap:1rem; } .gap-2{ gap:2rem; }
.center{ align-items:center; } .between{ justify-content:space-between; }

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

/* ==========================================================================
   HOME — editorial hero
   ========================================================================== */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
  padding: 8.5rem 0 clamp(2rem, 4vw, 3rem);
}
.hero-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem;
  font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color: var(--muted);
  margin-bottom: auto; padding-bottom: 3rem;
}
.hero-top .verse{ display:flex; gap:14px; align-items:center; }
.hero-top .verse::before{ content:''; width:32px; height:1px; background: var(--accent); }

.hero-headline{
  font-size: clamp(3.6rem, 11.2vw, 11rem);
  line-height:.86; letter-spacing:-0.035em;
  margin: 0 0 clamp(2.2rem, 4vw, 3.4rem) -0.04em;
}
.hero-headline .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-headline .line > span{ display:inline-block; }
.cycle{
  display:inline-flex; position:relative; overflow:hidden; vertical-align:top;
  padding: 0 .06em .1em 0; margin-bottom:-.1em;
}
.cycle-word{ font-style:italic; color: var(--accent); white-space:nowrap; display:inline-block; }
.cycle-word + .cycle-word{ position:absolute; left:0; top:0; }
.js-anim .cycle-word:not(.is-shown){ visibility:hidden; }
.no-js .cycle-word:not(:first-child){ display:none; }
.cycle-dot{ color: var(--ink); }

.hero-foot{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(2rem,5vw,6rem);
  align-items:end; padding-top: clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--rule);
}
.hero-sub{ font-size: clamp(1.02rem, 1.2vw, 1.15rem); color: var(--ink-soft); line-height:1.7; max-width: 34em; }
.hero-actions{ margin-top:2rem; display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center; }

.virtue-index{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 2.4rem;
  counter-reset: v;
}
.virtue-index li{
  position:relative; display:flex; align-items:baseline; gap:1rem;
  padding: .62rem 0; border-bottom:1px solid var(--rule);
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--muted); transition: color .6s var(--ease);
}
.virtue-index li .n{ font-family: var(--font-body); font-size:.66rem; font-weight:600; letter-spacing:.16em; color: var(--rule-strong); transition: color .6s var(--ease); font-variant-numeric: tabular-nums; }
.virtue-index li::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background: var(--accent); transform: scaleX(0); transform-origin:left;
}
.virtue-index li.is-active{ color: var(--ink); font-style:italic; }
.virtue-index li.is-active .n{ color: var(--accent-deep); }
.virtue-index li.is-active::after{ animation: vprog var(--vhold, 3.2s) linear forwards; }
@keyframes vprog{ to{ transform: scaleX(1); } }
.virtue-caption{ margin-top:1rem; font-size:.78rem; color: var(--muted); font-style:italic; font-family: var(--font-display); font-size:1rem; }

.scroll-cue{
  position:absolute; right: var(--gutter); top: 50%;
  writing-mode: vertical-rl; font-size:.64rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color: var(--muted);
  display:flex; align-items:center; gap:14px;
}
.scroll-cue::after{ content:''; width:1px; height:64px; background: linear-gradient(var(--muted), transparent); animation: cue 2.4s var(--ease-in-out) infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:0; } }

@media (max-width: 980px){
  .hero-foot{ grid-template-columns:1fr; }
  .scroll-cue{ display:none; }
}
@media (max-width: 560px){
  .hero{ padding-top: 7rem; }
  .hero-headline{ font-size: clamp(3.3rem, 16vw, 5rem); }
  .virtue-index{ column-gap: 1.4rem; }
  .virtue-index li{ font-size:1rem; padding:.5rem 0; gap:.6rem; }
  .hero-top{ padding-bottom:2rem; }
  .hero-top .loc{ display:none; }
}

/* statement: words light up on scroll */
.statement{ padding: clamp(6rem, 13vw, 12rem) 0; }
.statement-text{ max-width: 24ch !important;
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2rem, 4.4vw, 4.1rem); line-height:1.08; letter-spacing:-0.02em;
  color: var(--ink); max-width: 22ch;
}
.statement-text em{ color: var(--accent); }
.js-anim .statement .sw{ opacity:.14; transition: opacity .3s linear; }
.statement-meta{ display:flex; justify-content:space-between; gap:2rem; align-items:flex-end; flex-wrap:wrap; margin-top: clamp(2.5rem,5vw,4rem); }

/* thread */
.thread-seam{ width:100%; height:90px; display:block; }
.thread-seam path{ stroke: var(--brand); stroke-width:1.25; fill:none; stroke-linecap:round; vector-effect: non-scaling-stroke; }
.thread-wrap{ position:relative; }

/* ==========================================================================
   "What is your money for?"
   ========================================================================== */
.purpose-layout{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem,6vw,7rem); align-items:start; }
.purpose-grid{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem; }
.purpose-chip{
  display:inline-flex; align-items:center; gap:.6rem;
  background: transparent; border:1px solid var(--rule-strong); border-radius:100px;
  padding: .85rem 1.3rem; min-height:48px;
  font-weight:500; font-size:.95rem; color: var(--ink);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.purpose-chip .pc-icon{ width:18px; height:18px; stroke-width:1.4; }
.purpose-chip:hover{ border-color: var(--ink); transform: translateY(-2px); }
.purpose-chip[aria-pressed="true"]{ background: var(--forest); border-color: var(--forest); color: var(--paper); }
.purpose-chip[aria-pressed="true"] svg{ stroke: var(--accent); }

.purpose-result{ margin-top:0; }
.purpose-services{ display:flex; flex-direction:column; border-top:1px solid var(--rule); counter-reset: ps; }
.purpose-service{
  counter-increment: ps;
  display:flex; align-items:baseline; gap:1.4rem;
  padding: 1.15rem 0; border-bottom:1px solid var(--rule);
  font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.8rem); color: var(--rule-strong);
  transition: color .7s var(--ease), padding .7s var(--ease);
}
.purpose-service::before{ content: counter(ps, decimal-leading-zero); font-family: var(--font-body); font-size:.66rem; letter-spacing:.16em; font-weight:600; color: var(--rule-strong); transition: color .7s var(--ease); }
.purpose-services.is-idle .purpose-service{ color: var(--ink); }
.purpose-services.is-idle .purpose-service::before{ color: var(--muted); }
.purpose-service.is-match{ color: var(--ink); padding-left: .8rem; font-style: italic; }
.purpose-service.is-match::before{ color: var(--accent-deep); }
.purpose-note{ margin-top:1.4rem; font-size:.92rem; color: var(--muted); }
@media (max-width: 900px){ .purpose-layout{ grid-template-columns:1fr; } }

/* ==========================================================================
   Services index (home)
   ========================================================================== */
.svc-index{ border-top:1px solid var(--rule); counter-reset: svc; }
.svc-row{
  counter-increment: svc;
  display:grid; grid-template-columns: 5rem minmax(0,1fr) minmax(0,1fr) 2rem; gap:1.6rem; align-items:center;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) 0; border-bottom:1px solid var(--rule);
  position:relative; transition: padding .7s var(--ease);
}
.svc-row::before{ content: counter(svc, decimal-leading-zero); font-size:.7rem; font-weight:600; letter-spacing:.16em; color: var(--muted); }
.svc-row h3{ font-size: clamp(1.7rem, 3.2vw, 2.9rem); transition: transform .7s var(--ease), color .5s ease; }
.svc-row p{ color: var(--ink-soft); font-size:.95rem; max-width: 34em; }
.svc-row .arr{ width:22px; height:22px; justify-self:end; opacity:.35; transition: transform .7s var(--ease), opacity .5s ease; }
.svc-row::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background: var(--ink);
  transform: scaleX(0); transform-origin:left; transition: transform .9s var(--ease);
}
.svc-row:hover::after{ transform: scaleX(1); }
.svc-row:hover h3{ transform: translateX(.6rem); }
.svc-row:hover h3 em, .svc-row:hover h3{ color: var(--ink); }
.svc-row:hover .arr{ opacity:1; transform: translateX(4px) rotate(-45deg); }
@media (max-width: 800px){
  .svc-row{ grid-template-columns: 2.6rem minmax(0,1fr); }
  .svc-row p{ grid-column: 2; }
  .svc-row .arr{ display:none; }
}

/* ==========================================================================
   BRI teaser triad (dark)
   ========================================================================== */
.triad-cols{ display:grid; grid-template-columns: repeat(3,1fr); border-top:1px solid rgba(250,250,247,.14); margin-top: clamp(3rem,6vw,5rem); }
.triad-col{ padding: 2rem 2rem 0 0; }
.triad-col + .triad-col{ padding-left:2rem; border-left:1px solid rgba(250,250,247,.14); }
.triad-col .t-n{ font-size:.66rem; letter-spacing:.2em; font-weight:600; color: rgba(250,250,247,.45); }
.triad-col h3{ font-size: clamp(2rem, 3.4vw, 3rem); margin:.6rem 0 .5rem; }
.triad-col .t-tag{ font-family: var(--font-display); font-style:italic; font-size:1.2rem; }
.triad-col.avoid .t-tag{ color:#c9a27e; }
.triad-col.embrace .t-tag{ color: var(--brand); }
.triad-col.engage .t-tag{ color: var(--accent); }
.triad-col p{ color: rgba(250,250,247,.66); font-size:.95rem; margin-top:.8rem; max-width: 26em; }
@media (max-width: 780px){
  .triad-cols{ grid-template-columns:1fr; }
  .triad-col, .triad-col + .triad-col{ padding: 1.6rem 0; border-left:none; border-bottom:1px solid rgba(250,250,247,.14); }
}

/* ==========================================================================
   How we work — pinned horizontal (dark)
   ========================================================================== */
.timeline-pin{ position:relative; }
.timeline-track{ display:flex; }
.timeline-step{
  flex: 0 0 min(80vw, 460px); padding: 2.4rem 2.6rem 2.6rem 0; margin-right: 2.6rem;
  border-top:1px solid rgba(250,250,247,.18);
  transition: border-color .6s ease;
}
.timeline-step .num{ font-family: var(--font-display); font-size: clamp(4rem, 7vw, 6.5rem); line-height:1; color: rgba(250,250,247,.16); transition: color .8s var(--ease); letter-spacing:-0.03em; }
.timeline-step.is-active{ border-top-color: var(--accent); }
.timeline-step.is-active .num{ color: var(--accent); }
.timeline-step h3{ color: var(--paper); }
.timeline-step p{ color: rgba(250,250,247,.7) !important; }
.timeline-rail{ position:relative; height:1px; background: rgba(250,250,247,.14); margin: 0 0 3rem; overflow:hidden; }
.timeline-rail-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--accent); }
.timeline-viewport{ overflow:hidden; }
.timeline-viewport.no-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.timeline-viewport.no-scroll::-webkit-scrollbar{ display:none; }
/* light-section variant (other pages) */
.section:not(.section-dark) .timeline-step{ border-top-color: var(--rule); }
.section:not(.section-dark) .timeline-step .num{ color: var(--rule-strong); }
.section:not(.section-dark) .timeline-step.is-active .num{ color: var(--accent-deep); }
.section:not(.section-dark) .timeline-step h3{ color: var(--ink); }
.section:not(.section-dark) .timeline-step p{ color: var(--ink-soft) !important; }

/* ==========================================================================
   Team
   ========================================================================== */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,2.6vw,2.4rem); }
.team-card{ background:transparent; border-radius:0; overflow:visible; border:none; }
.team-photo{ aspect-ratio: 4/5; overflow:hidden; background: var(--paper-deep); border-radius: var(--radius); }
.team-photo img{
  width:100%; height:100%; object-fit:cover; object-position: 50% 20%;
  filter: grayscale(1) contrast(1.02); transform: scale(1.02);
  transition: filter 1s var(--ease), transform 1.4s var(--ease);
}
.team-card:hover .team-photo img{ filter: grayscale(0); transform: scale(1.06); }
.team-info{ padding: 1.2rem 0 0; }
.team-info h3{ font-size: clamp(1.5rem,2vw,1.8rem); margin-bottom:.25em; }
.team-title{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); margin-bottom:.8em; }
.team-contact{ font-size:.9rem; display:flex; flex-direction:column; gap:.25em; }
.team-contact a{ color: var(--ink); border-bottom:1px solid var(--rule-strong); align-self:flex-start; }
.team-contact a:hover{ border-bottom-color: var(--ink); }
.team-bio{ margin-top:1em; font-size:.95rem; color: var(--ink-soft); line-height:1.65; }
@media (max-width: 980px){ .team-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   BRI dot field
   ========================================================================== */
.dotfield-wrap{ position:relative; background: var(--white); border:1px solid var(--rule); border-radius: var(--radius); padding: clamp(1rem,2.5vw,2rem); }
.dotfield{ width:100%; aspect-ratio:16/9; max-height:440px; }
.dotfield circle{ transition: fill .7s var(--ease), opacity .7s var(--ease), r .7s var(--ease); fill: #c9c8bf; opacity:.9; }
.dotfield.lens-avoid .dot{ opacity:.12; }
.dotfield.lens-avoid .dot-avoid{ fill: var(--brown); opacity:.85; r:3.2; }
.dotfield.lens-embrace .dot{ opacity:.12; }
.dotfield.lens-embrace .dot-embrace{ fill: var(--brand-deep); opacity:1; r:7.5; }
.dotfield.lens-engage .dot{ opacity:.12; }
.dotfield.lens-engage .dot-engage{ fill: var(--accent); opacity:1; animation: dotEngagePulse 1.8s ease-in-out infinite; }
@keyframes dotEngagePulse{ 0%,100%{ r:6; } 50%{ r:8.5; } }
@media (prefers-reduced-motion: reduce){ .dotfield.lens-engage .dot-engage{ animation:none; r:7.5; } }

.lens-caption{ display:block; margin-top:1.4rem; }
.lens-captions.js-ready .lens-caption{ display:none; }
.lens-captions.js-ready .lens-caption.is-active{ display:block; }
.lens-tabs{ display:flex; gap:.6rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.lens-tab{
  padding:.75em 1.4em; border-radius:100px; border:1px solid var(--rule-strong); background:transparent;
  font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; min-height:44px;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.lens-tab:hover{ border-color: var(--ink); }
.lens-tab[aria-selected="true"]{ background: var(--forest); color: var(--paper); border-color: var(--forest); }
.illustration-note{ font-size:.78rem; color: var(--muted); font-style:italic; margin-top:.8rem; }

/* ==========================================================================
   What We Do accordion
   ========================================================================== */
.services-accordion{ border-top:1px solid var(--rule); }
.service-panel{ border-bottom:1px solid var(--rule); }
.service-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: clamp(1.5rem,2.6vw,2.2rem) 0; background:none; border:none; text-align:left; min-height:44px;
}
.service-head h3{ font-size: clamp(1.7rem, 3.2vw, 2.8rem); display:flex; align-items:center; gap:.8em; transition: transform .7s var(--ease); }
.service-head:hover h3{ transform: translateX(.5rem); }
.service-icon{ width:30px; height:30px; flex:none; color: var(--accent-deep); stroke-width:1.3; }
.service-plus{ width:18px; height:18px; position:relative; flex:none; }
.service-plus::before, .service-plus::after{ content:''; position:absolute; background: var(--ink); transition: transform .6s var(--ease), opacity .4s ease; }
.service-plus::before{ top:50%; left:0; width:100%; height:1px; }
.service-plus::after{ left:50%; top:0; width:1px; height:100%; }
.service-panel[aria-expanded="true"] .service-plus::after{ transform: rotate(90deg); opacity:0; }
.service-body{ overflow:hidden; }
.services-accordion.js-ready .service-body{ max-height:0; transition: max-height .8s var(--ease); }
.services-accordion.js-ready .service-panel[aria-expanded="true"] .service-body{ max-height:800px; }
.service-body-inner{ padding: 0 0 2.4rem calc(30px + .8em); display:grid; grid-template-columns: 1fr 1fr; gap:2.4rem; }
.service-list li{ padding:.55em 0; border-bottom:1px solid var(--rule); color: var(--ink-soft); font-size:.98rem; }
.service-list li::before{ content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background: var(--accent); margin-right:.9em; vertical-align:middle; }
.service-panel:nth-child(3n+2) .service-icon{ color: var(--brand-deep); }
.service-panel:nth-child(3n+2) .service-list li::before{ background: var(--brand); }
.service-panel:nth-child(3n) .service-icon{ color: var(--brown); }
.service-panel:nth-child(3n) .service-list li::before{ background: var(--brown); }
@media (max-width: 700px){ .service-body-inner{ grid-template-columns:1fr; gap:1rem; padding-left:0; } }

.who-list li{ padding:1em 0 1em 2rem; position:relative; font-size:1.05rem; color: var(--ink-soft); border-bottom:1px solid var(--rule); }
.who-list li::before{ content:''; position:absolute; left:0; top:1.55em; width:14px; height:1px; background: var(--accent); }

.value-card h3{ margin-bottom:1rem; font-size: clamp(1.6rem,2.2vw,2rem); }
.value-card .vc-label{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--brand-deep); margin-top:1.3rem; margin-bottom:.4rem; }
.value-card .vc-label.avoid{ color: var(--brown); }
.value-card p{ font-size:.95rem; color: var(--ink-soft); line-height:1.65; }

.risk-disclosure{ font-size:.76rem; color: var(--muted); line-height:1.75; }
.risk-disclosure + .risk-disclosure{ margin-top:1em; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); align-items:start; }
@media (max-width: 860px){ .two-col{ grid-template-columns:1fr; } }

.map-embed{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--rule); filter: grayscale(.85) contrast(1.05); transition: filter .8s var(--ease); }
.map-embed:hover{ filter:none; }
.map-embed iframe{ width:100%; height:360px; border:0; display:block; }

.hours-table{ margin-top:1rem; font-size:.95rem; }
.hours-table div{ display:flex; justify-content:space-between; padding:.6em 0; border-bottom:1px solid var(--rule); }

.community-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,1.6rem); }
.community-card{ background: var(--white); border:1px solid var(--rule); border-top:2px solid var(--brand); border-radius: var(--radius); padding: clamp(1.6rem,2.6vw,2.4rem); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.community-card:hover{ transform: translateY(-4px); box-shadow: 0 24px 60px -30px rgba(29,41,21,.22); }
.community-card:nth-child(2n){ border-top-color: var(--accent); }
@media (max-width: 700px){ .community-grid{ grid-template-columns:1fr; } }

.crs-box{ background: var(--white); border:1px solid var(--rule); border-top:2px solid var(--brand); border-radius: var(--radius); padding: clamp(2rem,4vw,3.2rem); text-align:center; }

/* quote block */
.pull-quote{ font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 3rem); line-height:1.12; letter-spacing:-0.015em; color: var(--ink); }
.pull-quote cite{ display:block; margin-top:1.4rem; font-family: var(--font-body); font-style:normal; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); }

/* round 2 additions */
.hero-inner{ display:flex; flex-direction:column; flex:1; }
.split .w{ padding-right:.05em; margin-right:-.05em; }
.team-grid.four{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .team-grid.four{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .team-grid.four{ grid-template-columns: 1fr 1fr; gap:1rem; } .team-grid.four .team-info h3{ font-size:1.2rem; } }
a.team-card{ display:block; color:inherit; }
#howWeWork{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding: clamp(4rem,9vh,7rem) 0; overflow:hidden; }
@media (max-width: 900px){ #howWeWork{ min-height:0; padding: clamp(5rem,11vw,7rem) 0; } }
.site-footer .btn-accent, .site-footer .btn-accent:hover{ color: var(--forest); }

/* ==========================================================================
   ROUND 3: less template, more editorial (taste pass)
   ========================================================================== */

h1, h2, h3{ text-wrap: balance; }
p{ text-wrap: pretty; }
.btn:active{ transform: translateY(1px) scale(.985); }

/* quiet blocks replace the left-rule "banner" boxes */
.band, .band.green, .band.dark{ background:none; border:none; padding:0; border-radius:0; }


/* media slot (photo / video to come) */
.media-slot{
  position:relative; overflow:hidden; border-radius: var(--radius);
  background: radial-gradient(120% 90% at 20% 10%, #33462a 0%, var(--forest) 60%, #141d0f 100%);
  color: rgba(250,250,247,.55);
  display:flex; align-items:flex-end; padding: 1.4rem;
}
.media-slot img, .media-slot video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-slot .slot-note{ font-size:.78rem; line-height:1.5; max-width: 26ch; position:relative; }
.media-slot .slot-note strong{ display:block; color: rgba(250,250,247,.85); font-weight:600; margin-bottom:.2em; }

/* ---------- HOME HERO: asymmetric split ---------- */
.hero2{ min-height:100svh; display:flex; align-items:center; padding: 7.5rem 0 4rem; }
.hero2 > .container{ width:100%; }
.hero2-grid{ display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2rem,5vw,5rem); align-items:end; }
.hero2 h1{ font-size: clamp(3.2rem, 7.6vw, 7.4rem); line-height:.95; letter-spacing:-0.035em; padding-bottom:.08em; }
.hero2 h1 em{ color: var(--accent); }
.hero2 .sub{ margin-top: 2rem; font-size: clamp(1.02rem,1.2vw,1.15rem); color: var(--ink-soft); max-width: 30em; line-height:1.7; }
.hero2 .actions{ margin-top: 2.2rem; display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center; }
.hero2 .media-slot{ aspect-ratio: 4/5; max-height: 72vh; }
@media (max-width: 900px){
  .hero2{ min-height:0; padding-top:7rem; }
  .hero2-grid{ grid-template-columns:1fr; }
  .hero2 .media-slot{ aspect-ratio: 4/3; max-height:none; }
}

/* ---------- statement tweak ---------- */
.statement{ padding-top: clamp(4rem,9vw,8rem); }
.statement-meta{ align-items:flex-end; }

/* ---------- services: sticky side heading + grouped grid ---------- */
.svc2{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2.5rem,6vw,7rem); align-items:start; }
.svc2-head{ position:sticky; top: 7rem; }
.svc2-head h2{ margin-bottom:1.6rem; }
.svc2-group + .svc2-group{ margin-top: clamp(3rem,6vw,4.5rem); }
.svc2-group > .g{ font-family: var(--font-display); font-style:italic; font-size:1.25rem; color: var(--muted); margin-bottom:1.4rem; padding-bottom:.8rem; border-bottom:1px solid var(--rule); }
.svc2-items{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 2.4rem; }
.svc2-item h3{ font-size: clamp(1.55rem,2.3vw,2.1rem); line-height:1.05; margin-bottom:.6rem; transition: color .4s ease; }
.svc2-item p{ color: var(--ink-soft); font-size:.95rem; line-height:1.65; }
.svc2-item a{ display:block; transition: transform .6s var(--ease); }
.svc2-item a:hover{ transform: translateX(6px); }
.svc2-item a:hover h3{ color: var(--brand-deep); }
@media (max-width: 900px){
  .svc2{ grid-template-columns:1fr; }
  .svc2-head{ position:static; }
}
@media (max-width: 560px){ .svc2-items{ grid-template-columns:1fr; gap:1.8rem; } }

/* ---------- BRI (dark): pinned heading + stacked approaches ---------- */
.bri2{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2.5rem,6vw,7rem); align-items:start; }
.bri2-head{ position:sticky; top: 7rem; }
.bri2-head .lede{ margin-top:1.6rem; }
.bri2-head .btn{ margin-top:2rem; }
/* Paul 2026-10-24: the Resonate Score link beside the button */
.bri2-go{ display:flex; flex-wrap:wrap; align-items:center; gap: 1rem 2rem; margin-top:2rem; }
.bri2-go .btn{ margin-top:0; }
.bri2-go .link-arrow{ color: var(--paper); }
.approach{ padding: clamp(2.2rem,5vw,3.6rem) 0; }
.approach + .approach{ border-top:1px solid rgba(250,250,247,.12); }
.approach .word{ font-family: var(--font-display); font-size: clamp(3.4rem, 8vw, 7rem); line-height:.95; letter-spacing:-0.035em; color: var(--paper); padding-bottom:.05em; }
.approach .tag{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.3rem,2vw,1.7rem); margin-top:.6rem; }
.approach.avoid .tag{ color:#d0ad8a; }
.approach.embrace .tag{ color: var(--brand); }
.approach.engage .tag{ color: var(--accent); }
.approach p.body{ color: rgba(250,250,247,.68); margin-top:.9rem; max-width: 30em; }
.js-anim .approach{ opacity:.28; transition: opacity .9s var(--ease); }
.js-anim .approach.is-lit{ opacity:1; }
@media (max-width: 900px){ .bri2{ grid-template-columns:1fr; } .bri2-head{ position:static; } }

/* ---------- team strip (horizontal scroll-snap) ---------- */
.strip-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom: clamp(2rem,4vw,3rem); flex-wrap:wrap; }
.strip-nav{ display:flex; gap:.6rem; }
.strip-nav button{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--rule-strong); background:transparent;
  display:grid; place-items:center; transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .2s ease;
}
.strip-nav button:hover{ background: var(--forest); border-color: var(--forest); color: var(--paper); }
.strip-nav button:active{ transform: scale(.94); }
.strip-nav svg{ width:18px; height:18px; }
.team-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns: clamp(220px, 22vw, 300px); gap: clamp(1rem,2vw,1.6rem);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding: 0 var(--gutter) 1rem; margin: 0 calc(var(--gutter) * -1);
  scroll-padding-left: var(--gutter);
}
.team-strip::-webkit-scrollbar{ display:none; }
.team-strip .team-card{ scroll-snap-align:start; }
.team-strip .team-card:nth-child(even){ margin-top: 2.5rem; }
@media (max-width: 560px){ .team-strip{ grid-auto-columns: 70vw; } .team-strip .team-card:nth-child(even){ margin-top:0; } }

/* ---------- process line ---------- */
.process{ max-width: 760px; position:relative; margin-top: clamp(2.5rem,5vw,4rem); padding-left: clamp(2.4rem,5vw,4rem); }
.process-rail{ position:absolute; left:0; top:.9rem; bottom:.4rem; width:1px; background: var(--rule); }
.process-rail i{ position:absolute; inset:0; background: var(--accent); transform-origin:top; transform: scaleY(0); }
.no-js .process-rail i{ transform:none; }
.step{ position:relative; padding-bottom: clamp(2.6rem,5vw,4rem); }
.step:last-child{ padding-bottom:0; }
.step::before{ content:""; position:absolute; left: calc(clamp(2.4rem,5vw,4rem) * -1 - 4px); top:.9rem; width:9px; height:9px; border-radius:50%; background: var(--paper); border:1px solid var(--rule-strong); transition: background .5s ease, border-color .5s ease; }
.step.is-lit::before{ background: var(--accent); border-color: var(--accent); }
.step h3{ font-size: clamp(2.4rem,5vw,4rem); line-height:1; letter-spacing:-0.03em; }
.step p{ color: var(--ink-soft); margin-top:.7rem; max-width: 34em; font-size:1.05rem; }

/* ---------- centered quote ---------- */
.quote-full{ text-align:center; }
.quote-full blockquote{ margin:0 auto; max-width: 20ch; font-family: var(--font-display); font-size: clamp(2.2rem,5vw,4.4rem); line-height:1.05; letter-spacing:-0.02em; }
.quote-full cite{ display:block; margin-top:1.6rem; font-style:normal; font-size:.9rem; color: var(--muted); }
.quote-full .lede{ margin: 2.4rem auto 0; text-align:center; }
.quote-full .link-arrow{ margin-top:1.4rem; }

/* ---------- What We Do: sticky index + full detail ---------- */
.wwd{ display:grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: clamp(2.5rem,6vw,7rem); align-items:start; }
.wwd-index{ position:sticky; top:7rem; }
.wwd-index a{ display:block; font-family: var(--font-display); font-size: clamp(1.3rem,1.8vw,1.6rem); color: var(--rule-strong); padding:.35rem 0; transition: color .5s var(--ease), transform .6s var(--ease); }
.wwd-index a:hover{ color: var(--ink); }
.wwd-index a.is-active{ color: var(--ink); transform: translateX(8px); font-style:italic; }
.wwd-sec{ padding-bottom: clamp(3.5rem,7vw,6rem); scroll-margin-top: 7rem; }
.wwd-sec h2{ font-size: clamp(2.4rem,4.6vw,4.2rem); }
.wwd-sec .tag{ font-family: var(--font-display); font-style:italic; font-size:1.3rem; color: var(--muted); margin-top:.6rem; }
.wwd-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2.6rem; margin-top: 2rem; }
.wwd-list li{ position:relative; padding-left:1.4rem; color: var(--ink-soft); line-height:1.55; }
.wwd-list li::before{ content:""; position:absolute; left:0; top:.72em; width:.7rem; height:1px; background: var(--accent); }
.wwd-sec.c-green .wwd-list li::before{ background: var(--brand); }
.wwd-sec.c-brown .wwd-list li::before{ background: var(--brown); }
@media (max-width: 900px){ .wwd{ grid-template-columns:1fr; } .wwd-index{ display:none; } }
@media (max-width: 560px){ .wwd-list{ grid-template-columns:1fr; } }

/* ---------- editorial rows (BRI approaches / values) ---------- */
.rows > *{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(1.5rem,4vw,5rem); padding: clamp(2.2rem,4.5vw,3.4rem) 0; }
.rows > * + *{ border-top:1px solid var(--rule); }
.rows h3{ font-size: clamp(2rem,3.6vw,3.2rem); line-height:1; padding-bottom:.05em; }
.rows .tag{ font-family: var(--font-display); font-style:italic; font-size:1.3rem; margin-top:.5rem; color: var(--muted); }
.rows .pair{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.rows .lbl{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-bottom:.5rem; }
.rows p{ color: var(--ink-soft); line-height:1.65; }
.rows .c-brown h3{ color: var(--brown); } .rows .c-green h3{ color: var(--brand-deep); } .rows .c-orange h3{ color: var(--accent-deep); }
@media (max-width: 800px){ .rows > *{ grid-template-columns:1fr; } .rows .pair{ grid-template-columns:1fr; gap:1.2rem; } }

/* ---------- community ---------- */
.stat{ font-family: var(--font-display); font-size: clamp(4.5rem, 13vw, 11rem); line-height:.85; letter-spacing:-0.04em; color: var(--brand-deep); }
.cause-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem,4vw,3.4rem) clamp(2rem,5vw,5rem); }
.cause a{ display:block; }
.cause h3{ font-size: clamp(1.6rem,2.6vw,2.3rem); line-height:1.1; display:inline; background-image: linear-gradient(currentColor,currentColor); background-size: 0% 1px; background-repeat:no-repeat; background-position: 0 100%; transition: background-size .8s var(--ease); }
.cause a:hover h3{ background-size:100% 1px; }
.cause p{ color: var(--ink-soft); margin-top:.7rem; max-width: 32em; }
@media (max-width: 700px){ .cause-grid{ grid-template-columns:1fr; } }

/* ---------- verse (about) ---------- */
.verse-block{ max-width: 26ch; font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.8rem); line-height:1.12; letter-spacing:-0.015em; color: var(--ink); }
.verse-block em{ color: var(--accent); }
.verse-ref{ margin-top:1.6rem; color: var(--muted); font-size:.9rem; }
.team-strip{ margin-right: calc((100vw - 100%) / -2); padding-right: var(--gutter); }

.process-wrap{ display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(2.5rem,6vw,7rem); align-items:start; }
.process-media{ position:sticky; top:7rem; aspect-ratio:4/5; margin-top: clamp(2.5rem,5vw,4rem); }
@media (max-width: 900px){ .process-wrap{ grid-template-columns:1fr; } .process-media{ position:static; aspect-ratio:4/3; } }
.wwd-index a{ color:#9c9e93; }
.stat{ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* round 4: first section flows straight into a plain second section */
main > section:first-child + .section:not([style]):not(.section-dark),
main > section:first-child + .section-tight:not([style]){ padding-top:0 !important; }
.site-header.is-scrolled{ -webkit-backdrop-filter:none; backdrop-filter:none; background: rgba(250,250,247,.96); }
html{ scroll-behavior:auto; } .wwd-index a{ cursor:pointer; }
/* hero faces: the real team, up front */
.faces{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.5rem,1vw,.8rem); }
.faces li{ aspect-ratio: 1/1; overflow:hidden; border-radius: var(--radius); background: var(--paper-deep); }
.faces li:nth-child(3n+2){ transform: translateY(1.4rem); }
.faces img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; filter: grayscale(1); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.faces li:hover img{ filter:none; transform: scale(1.05); }
.faces-note{ margin-top: 2.4rem; font-size:.88rem; color: var(--muted); }
@media (max-width: 900px){ .faces li:nth-child(3n+2){ transform:none; } .faces-note{ margin-top:1rem; } }
/* about: facts + founder */
.facts{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,4vw,4rem); border-top:1px solid var(--rule); padding-top: clamp(2rem,4vw,3rem); }
.fact .n{ font-family: var(--font-display); font-size: clamp(3.6rem,8vw,7rem); line-height:.9; letter-spacing:-0.03em; color: var(--brand-deep); font-variant-numeric: lining-nums; font-feature-settings:"lnum" 1; }
.fact .l{ margin-top:.8rem; color: var(--ink-soft); max-width: 18em; }
.founder{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(2.5rem,6vw,6rem); align-items:center; }
.founder-photo{ aspect-ratio:4/5; }
.founder-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
@media (max-width: 800px){ .facts{ grid-template-columns:1fr; } .founder{ grid-template-columns:1fr; } }
main > section:first-child:not(.hero2){ padding-bottom: clamp(2.5rem,5vw,4rem); }
.local-line{ font-family: var(--font-display); font-size: clamp(1.7rem,3.2vw,2.8rem); line-height:1.15; letter-spacing:-0.015em; max-width: 30ch; color: var(--ink); border-top:1px solid var(--rule); padding-top: clamp(2rem,4vw,3rem); }

/* ==========================================================================
   ROUND 6: more photography, less empty air
   ========================================================================== */
/* tighter vertical rhythm (was up to 10rem / 12rem per side) */
.section{ padding: clamp(4.5rem, 9vw, 8rem) 0; }
.statement{ padding-bottom: clamp(4.5rem, 9vw, 8rem); }

/* full-bleed photo band */
.photo-band{ position:relative; overflow:hidden; height: clamp(320px, 52vw, 680px); background: var(--forest); }
.photo-band img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; }
.photo-band figcaption{
  position:absolute; left: var(--gutter); bottom: clamp(1.2rem,2.5vw,2rem);
  font-family: var(--font-display); font-style:italic; font-size: clamp(1.1rem,1.6vw,1.4rem);
  color: var(--paper); text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.photo-band.short{ height: clamp(260px, 38vw, 520px); }

/* quote set over a photo */
.quote-photo{ position:relative; overflow:hidden; color: var(--paper); padding: clamp(7rem,14vw,12rem) 0; }
.quote-photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quote-photo::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,29,15,.55) 0%, rgba(20,29,15,.68) 100%); z-index:1; }
.quote-photo > .container{ position:relative; z-index:2; }
.quote-photo blockquote, .quote-photo h2{ color: var(--paper); }
.quote-photo cite{ color: rgba(250,250,247,.72); }
.quote-photo .lede{ color: rgba(250,250,247,.85); }
.quote-photo .link-arrow{ color: var(--paper); }
.quote-photo cite{ font-family: var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
/* mobile menu: keep the logo + close button above the open menu (was covered, so the menu could not be closed) */
.nav-open .site-header{ z-index:700; background:transparent; border-bottom-color:transparent; transform:none; }

/* ---------- round 7: contact "what happens next" + FAQ ---------- */
.next-steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.6rem,4vw,4rem); counter-reset: ns; }
.next-steps li{ counter-increment: ns; border-top:1px solid var(--rule); padding-top:1.4rem; }
.next-steps li::before{ content: counter(ns); display:block; font-family: var(--font-display); font-size: clamp(2.6rem,4vw,3.6rem); line-height:1; color: var(--accent); margin-bottom:.9rem; font-variant-numeric: lining-nums; font-feature-settings:"lnum" 1; }
.next-steps h3{ font-size: clamp(1.6rem,2.4vw,2.1rem); margin-bottom:.6rem; }
.next-steps p{ color: var(--ink-soft); max-width: 28em; }
@media (max-width: 800px){ .next-steps{ grid-template-columns:1fr; } }

.faq-wrap{ display:grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: clamp(2rem,6vw,7rem); align-items:start; }
.faq-wrap > div:first-child{ position:sticky; top:7rem; }
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding: 1.35rem 0; min-height:44px;
  font-family: var(--font-display); font-size: clamp(1.35rem,2vw,1.75rem); line-height:1.2; color: var(--ink);
  transition: color .3s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:14px; height:14px;
  background: linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat;
  transition: transform .5s var(--ease);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq summary:hover{ color: var(--brand-deep); }
.faq-a{ padding: 0 0 1.6rem; max-width: 40em; }
.faq-a p{ color: var(--ink-soft); line-height:1.7; }
.faq-a p + p{ margin-top:.8rem; }
.faq-placeholder{ display:inline-block; padding:.3em .6em; border:1px dashed var(--accent-deep); color: var(--accent-deep); border-radius:2px; font-weight:600; font-size:.88rem; }
@media (max-width: 860px){ .faq-wrap{ grid-template-columns:1fr; } .faq-wrap > div:first-child{ position:static; } }

/* ==========================================================================
   ROUND 8 (2026-10-01): home button, warmer color, phone-native pass
   ========================================================================== */

/* ---------- home button: header (all sizes) + footer ---------- */
.ico-home{ width:18px; height:18px; flex:none; }
.nav-list > li > a.nav-home{ display:inline-flex; align-items:center; gap:.45em; }
.nav-list > li > a.nav-home .ico-home{ width:16px; height:16px; margin-top:-2px; }
.header-actions{ display:flex; align-items:center; gap:.35rem; z-index:620; }
@media (min-width: 1180px){ .header-actions{ display:none; } } /* empty on desktop; it was still taking a header gap */
.home-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:44px; padding: 0 .95rem 0 .8rem; border-radius:100px;
  border:1px solid var(--rule-strong); background: transparent; color: var(--ink);
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.home-btn .ico-home{ color: var(--ink); }
.home-btn:hover{ background: var(--forest); border-color: var(--forest); color: var(--paper); }

.nav-open .home-btn{ color: var(--paper); border-color: rgba(250,250,247,.3); background: transparent; }
.nav-open .home-btn .ico-home{ color: var(--accent); }
.menu-toggle{ padding: 0 .4rem 0 .6rem; }
@media (min-width: 1180px){ .home-btn{ display:none; } }
@media (max-width: 359px){ .home-btn span, .menu-toggle .mt-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .home-btn{ width:44px; padding:0; } }

.footer-bar{ display:flex; flex-wrap:wrap; gap:.7rem; margin: 0 0 2.2rem; }
.foot-btn{
  display:inline-flex; align-items:center; gap:.55em; min-height:46px; padding:.55em 1.2em .55em 1em;
  border:1px solid rgba(250,250,247,.24); border-radius:100px; color: var(--paper) !important;
  font-weight:600; font-size:.9rem; transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.foot-btn svg{ width:18px; height:18px; flex:none; }
.foot-btn:hover{ background: var(--paper); color: var(--forest) !important; border-color: var(--paper); }

/* mobile menu: quick actions; start from the top so nothing is cut off on short phones */
.mobile-menu{ justify-content:flex-start; padding-top: calc(6.2rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.mobile-menu > nav{ margin-top:auto; }
.mobile-menu a[aria-current="page"]{ color: var(--accent); font-style: italic; }
.mobile-menu .mobile-quick{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 1.8rem; }
.mobile-menu .mobile-quick a{
  font-family: var(--font-body); font-size:.9rem; font-weight:600; line-height:1; transform:none;
  display:inline-flex; align-items:center; gap:.55em; padding: .85em 1.2em; border-radius:100px;
  border:1px solid rgba(250,250,247,.25); color: var(--paper);
}
.mobile-menu .mobile-quick a:first-child{ background: var(--accent); border-color: var(--accent); color: var(--forest); }
.nav-open .mobile-menu li:nth-child(8) a{ transition-delay:.35s; }
.nav-open .mobile-menu li:nth-child(9) a{ transition-delay:.4s; }
@media (max-height: 700px){ .mobile-menu a{ font-size: clamp(1.9rem, 8.4vw, 2.6rem); } }

/* ---------- a little more color (round 8) ----------
   Restrained on purpose: people in full color, one sage band, a readable green,
   and dark sections one step greener. No glows, dots, or new accents. */
.site-header.is-scrolled{ background: rgba(250,250,247,.96); }
/* page intros: a faint sage fade at the very top, so the page isn't flat off-white */
.hero2, main > section:first-child:not(.hero2):not(.section-dark){
  background: linear-gradient(180deg, var(--tint-sage) 0%, var(--paper) 72%);
}
main > section:first-child:not(.hero2):not(.section-dark) + .section:not([style]):not(.section-dark),
main > section:first-child:not(.hero2):not(.section-dark) + .section-tight:not([style]){ background: var(--paper); }
.bg-sage{ background: var(--tint-sage) !important; }
/* people in full color (grayscale read as black and white, and phones have no hover) */
.team-photo img, .faces img{ filter:none; }
.map-embed{ filter:none; }
.team-title{ color: var(--brand-deep); }

/* ---------- phone-native pass ---------- */
html{ -webkit-tap-highlight-color: rgba(150,201,63,.18); }
body{ overflow-x: clip; }
a, button, summary, label{ touch-action: manipulation; }
.site-header{ padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.container{ padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.site-footer{ padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 760px){
  body{ font-size:16.5px; }
  .site-header{ padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: 12px; }
  .site-header.is-scrolled{ padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; box-shadow: 0 8px 24px -20px rgba(29,41,21,.5); }
  .brand img{ height:34px; }
  .section{ padding: clamp(3.6rem, 13vw, 5rem) 0; }
  .statement{ padding: 3.4rem 0 3.8rem; }
  .lede{ font-size: 1.04rem; line-height:1.65; }
  .btn{ min-height:52px; }
  .hero2{ padding-top: 6.4rem; padding-bottom: 3rem; }
  .hero2 h1{ font-size: clamp(2.9rem, 13.5vw, 4.2rem); }
  .hero2 .sub{ margin-top: 1.3rem; }
  .faces-note{ font-size:.82rem; }
  main > section:first-child:not(.hero):not(.hero2){ padding-top: calc(6.6rem + env(safe-area-inset-top, 0px)) !important; }
  main > section:first-child:not(.hero):not(.hero2) h1{ font-size: clamp(2.7rem, 12.5vw, 4rem); }
  .display-md{ font-size: clamp(2rem, 9vw, 2.6rem); }
  .display-lg{ font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .statement-text{ font-size: clamp(1.75rem, 7.6vw, 2.3rem); }
  .approach{ padding: 1.8rem 0; }
  .approach .word{ font-size: clamp(2.8rem, 14vw, 3.8rem); }
  .step h3{ font-size: clamp(2rem, 9vw, 2.6rem); }
  .process{ padding-left: 2rem; }
  .step::before{ left: -2.3rem; }
  .quote-full blockquote{ font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .quote-photo{ padding: 5rem 0; }
  .footer-cta{ gap:1.4rem; padding-bottom: 2.8rem; margin-bottom: 2.4rem; }
  .footer-cta h2{ font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2rem 1.4rem; }
  .footer-grid > div:first-child{ grid-column: 1 / -1; }
  .footer-links li{ margin-bottom:0; }
  .footer-links a{ display:inline-flex; align-items:center; min-height:40px; font-size:.94rem; }
  .footer-bar .foot-btn{ flex:1 1 0; justify-content:center; }
  .team-grid{ gap: 2.4rem; }
  .team-info h3{ font-size: 1.7rem; }
  .team-contact a{ padding: .35em 0; }
  .map-embed iframe{ height: 280px; }
  .field input, .field textarea{ font-size: 16px; }
  .hours-table div{ padding:.75em 0; }
  .faq summary{ font-size: 1.3rem; padding: 1.15rem 0; }
}
@media (max-width: 380px){
  .hero2 h1{ font-size: 2.75rem; }
  .footer-grid{ grid-template-columns: 1fr; }
}
/* larger phones in landscape: keep the menu usable */
@media (max-height: 500px) and (orientation: landscape){
  .mobile-menu{ padding-top: 4.6rem; }
  .mobile-menu a{ font-size: 1.7rem; }
}

/* team: Zac Tornfish (round 8) */
.team-where{ font-size:.9rem; color: var(--ink-soft); }
.faces-zac{ border-bottom:1px solid var(--rule-strong); }
.faces-zac:hover{ border-bottom-color: var(--ink); }

/* ---------- Form CRS viewer (round 8) ---------- */
.crs-meta{ color: var(--muted); font-size:.92rem; }
.crs-actions{ display:flex; flex-wrap:wrap; gap: 1rem 1.6rem; align-items:center; }
.crs-viewer-wrap{ padding: 0 0 clamp(4rem, 8vw, 7rem); }
.crs-viewer{ background: var(--paper-deep); border:1px solid var(--rule); border-radius: var(--radius); }
.crs-toolbar{ position:sticky; top: calc(var(--header-m, 64px) + env(safe-area-inset-top, 0px)); z-index:5; display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.55rem .7rem .55rem 1rem; background: rgba(250,250,247,.97); border-bottom:1px solid var(--rule); transition: top .6s var(--ease); }
.hdr-hidden .crs-toolbar{ top:0; }
@media (min-width: 1180px){ .crs-toolbar{ top:0; } }
.crs-page{ font-size:.82rem; font-weight:600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.crs-zoom{ display:flex; gap:.35rem; }
.crs-tb{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:40px; padding:0 .8rem; border-radius:100px; border:1px solid var(--rule-strong); background: transparent; color: var(--ink); font-size:1rem; font-weight:600; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.crs-tb:hover{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.crs-fit{ font-size:.78rem; min-width:56px; }
.crs-tb-dl{ font-size:.82rem; }
.crs-pages{ padding: clamp(.6rem, 2.5vw, 1.6rem); display:flex; flex-direction:column; align-items:center; gap: clamp(.6rem, 2vw, 1.2rem); min-height: 50vh; }
.crs-viewer.is-zoomed .crs-pages{ overflow-x:auto; align-items:flex-start; -webkit-overflow-scrolling: touch; }
.crs-sheet{ position:relative; background:#fff; box-shadow: 0 1px 2px rgba(29,41,21,.12); flex:none; max-width:none; }
.crs-sheet canvas{ display:block; }
.crs-loading{ padding: 4rem 1rem; color: var(--muted); }
.crs-object{ width:100%; height: 80vh; border:0; background:#fff; }
.crs-fallback{ padding: 2rem; }
.textLayer{ position:absolute; inset:0; overflow:hidden; line-height:1; text-align:initial; opacity:1; transform-origin:0 0; z-index:2; }
.textLayer span, .textLayer br{ color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; }
.textLayer ::selection{ background: rgba(150,201,63,.35); }
.textLayer .endOfContent{ display:block; position:absolute; inset:100% 0 0; z-index:-1; cursor:default; user-select:none; }
@media (max-width: 760px){
  .crs-viewer-wrap .container{ padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .crs-actions .btn{ width:100%; }
}

/* contact quick actions: the site's own pill buttons (round 8) */
.quick-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.quick-actions .btn{ padding-left:1.5em; padding-right:1.5em; }
.quick-actions .btn::after{ display:none; }
@media (max-width: 760px){ .quick-actions{ display:grid; grid-template-columns: 1fr 1fr; } .quick-actions .btn:first-child{ grid-column: 1 / -1; } }
#contact-form{ scroll-margin-top: 6rem; }

/* What We Do: on phones the side index becomes a swipeable sticky bar */
@media (max-width: 900px){
  .wwd-index{
    display:flex !important; position:sticky; top: calc(var(--header-m, 62px) + env(safe-area-inset-top, 0px)); z-index:40;
    gap:.45rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin: 0 calc(var(--gutter) * -1) 1.6rem; padding: .7rem var(--gutter);
    background: rgba(250,250,247,.97); border-bottom:1px solid var(--rule);
    transition: top .6s var(--ease);
  }
  .wwd-index::-webkit-scrollbar{ display:none; }
  .hdr-hidden .wwd-index{ top: 0; }
  .wwd-index a, .wwd-index a.is-active{
    flex:none; font-family: var(--font-body); font-size:.82rem; font-weight:600; font-style:normal; color: var(--ink-soft);
    padding:.55em 1em; border-radius:100px; border:1px solid var(--rule-strong); background: var(--white); transform:none; white-space:nowrap;
  }
  .wwd-index a.is-active{ background: var(--forest); border-color: var(--forest); color: var(--paper); }
    .wwd-sec{ scroll-margin-top: 8rem; }
}

/* Team: on phones, bios open on tap so ten people fit in a comfortable scroll */
.bio-more{ display:none; }
@media (max-width: 760px){
  .js-anim .team-bio.is-clamped{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .bio-more{ display:inline-flex; align-items:center; gap:.4em; margin-top:.5rem; min-height:40px; padding:0; background:none; border:none; font-weight:700; font-size:.88rem; color: var(--brand-ink); }
  .bio-more::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
  .bio-more[aria-expanded="true"]::after{ transform: rotate(-135deg) translateY(-1px); }
}
.nav-utility a{ white-space:nowrap; }
.nav-list > li > a{ display:inline-flex; align-items:center; }
.nav-list{ gap: clamp(1rem, 1.7vw, 2.2rem); }
@media (min-width: 1180px) and (max-width: 1319px){ .nav-contact .email{ display:none; } }
@media (min-width: 1180px) and (max-width: 1399px){ .nav-utility .risk, .nav-contact .addr{ display:none; } .nav-list{ gap: 1.15rem; } .site-header{ gap: 1.4rem; } }

/* ---------- Zac Tornfish easter egg (round 8b) ---------- */
.zac-egg .team-photo{ cursor:pointer; }
.zac-egg .team-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 65%);
  transform: translateX(-120%); transition: transform 1.2s var(--ease);
}
.zac-egg .team-photo:hover::after, .zac-egg .team-photo:focus-visible::after{ transform: translateX(120%); }
.zac-egg .team-photo:hover img, .zac-egg .team-photo:focus-visible img{ animation: zacBob 2.6s ease-in-out infinite; }
@keyframes zacBob{ 0%,100%{ transform: scale(1.04) translateY(0); } 50%{ transform: scale(1.05) translateY(-5px); } }
.zac-bubbles{ position:absolute; left:34%; bottom:30%; width:30%; height:55%; pointer-events:none; }
.zac-bubbles i{ position:absolute; bottom:0; width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.25); opacity:0; }
.zac-bubbles i:nth-child(1){ left:20%; } .zac-bubbles i:nth-child(2){ left:45%; width:6px; height:6px; } .zac-bubbles i:nth-child(3){ left:62%; width:10px; height:10px; } .zac-bubbles i:nth-child(4){ left:35%; width:5px; height:5px; }
.zac-egg .team-photo:hover .zac-bubbles i, .zac-egg .team-photo:focus-visible .zac-bubbles i, .zac-burble .zac-bubbles i{ animation: zacBubble 2.2s ease-in infinite; }
.zac-burble .zac-bubbles i{ animation-iteration-count: 1; }
.zac-bubbles i:nth-child(2){ animation-delay:.45s !important; } .zac-bubbles i:nth-child(3){ animation-delay:.9s !important; } .zac-bubbles i:nth-child(4){ animation-delay:1.3s !important; }
@keyframes zacBubble{ 0%{ opacity:0; transform: translate(0,0); } 15%{ opacity:1; } 100%{ opacity:0; transform: translate(6px,-140px); } }
.zac-note{ margin-top:.8rem; font-family: var(--font-display); font-style:italic; font-size:1.2rem; color: var(--brand-deep); }

.zac-canvas{ position:fixed; inset:0; z-index:900; pointer-events:none; transition: opacity .5s ease; }
.zac-canvas.is-leaving{ opacity:0; }
.zac-tint{ position:fixed; inset:0; z-index:899; pointer-events:none; -webkit-backdrop-filter: blur(1.2px) saturate(1.25); backdrop-filter: blur(1.2px) saturate(1.25); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.zac-drain{
  position:fixed; z-index:901; left:50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%); opacity:0; transition: transform .6s var(--ease), opacity .4s ease;
  min-height:46px; padding:0 1.4em; border-radius:100px; border:1px solid rgba(250,250,247,.5);
  background: rgba(29,41,21,.82); color: var(--paper); font-weight:600; font-size:.88rem;
}
.zac-drain.is-on{ transform: translate(-50%, 0); opacity:1; }
.zac-drain:hover{ background: var(--paper); color: var(--forest); }
.zac-flooding .zq{ transition:none !important; animation:none !important; will-change: transform; }
.zac-flooding .zw, .zac-flooding .zc{ display:inline-block; }
.zac-flooding .zw{ white-space:nowrap; }
.zac-flooding .split .w{ overflow:visible; }
.zac-flooding .zac-egg .team-photo img{ animation:none; }
.zac-flooding .zac-egg .team-photo::after{ display:none; }
#main.zac-shake{ animation: zacShake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes zacShake{ 10%,90%{ transform: translate3d(-1px,0,0); } 20%,80%{ transform: translate3d(3px,1px,0); } 30%,50%,70%{ transform: translate3d(-5px,-1px,0); } 40%,60%{ transform: translate3d(5px,1px,0); } }

/* ---------- Team fun mode + "Click me" bubble (round 9, 2026-10-12; assets/js/team-fun.js) ---------- */
.team-card.has-bubble{ position:relative; }
.team-photo{ position:relative; }
.fun-card .team-photo{ cursor:pointer; }
.fun-card .team-photo:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
/* the other photo sits on top, hidden until the glimmer passes over it */
.team-photo img.fun-over{ position:absolute; inset:0; clip-path: polygon(0 0, 0 0, 0 0, 0 0); pointer-events:none; }
.fun-sheen{
  position:absolute; inset:0; pointer-events:none; transform: translateX(-130%) skewX(-10deg);
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.28) 54%, rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light;
}
.fun-pop .team-photo{ animation: funPop .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes funPop{ 0%{ transform: scale(1); } 40%{ transform: scale(.965); } 100%{ transform: scale(1); } }

/* speech bubble */
.fun-bubble{
  position:absolute; z-index:3; top: -.9rem; right: .9rem; pointer-events:none;
  padding: .5em 1em; border-radius:100px; white-space:nowrap;
  background: var(--forest); color: var(--paper); font-size:.82rem; font-weight:700; letter-spacing:.01em;
  box-shadow: 0 6px 18px rgba(20,32,14,.22);
  opacity:0; transform: translateY(8px) scale(.8); transform-origin: 18% 100%;
  transition: opacity .25s ease, transform .45s cubic-bezier(.3,1.7,.5,1);
}
.fun-bubble::after{
  content:""; position:absolute; left:18%; bottom:-6px; width:12px; height:12px;
  background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0;
}
.has-bubble:has(.team-photo:hover) .fun-bubble, .has-bubble:has(.team-photo:focus-visible) .fun-bubble{
  opacity:1; transform: translateY(0) scale(1); animation: funBob 2.4s ease-in-out .5s infinite;
}
.is-fun .fun-bubble{ background: var(--accent); color: var(--forest); }
@keyframes funBob{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-4px) rotate(-1.5deg); } }
.zac-flooding .fun-bubble{ display:none; }
@media (prefers-reduced-motion: reduce){
  .fun-bubble{ transition: opacity .2s ease; transform:none; }
  .has-bubble .fun-bubble{ animation:none !important; }
  .fun-pop .team-photo{ animation:none; }
}
/* Zac 3D layer (assets/js/zac-3d.js): above the 2D water canvas, below the "Drain the tank" button */
.zac-3d{ position:fixed; inset:0; z-index:900; pointer-events:none; transition: opacity .5s ease; }
.zac-3d.is-leaving{ opacity:0; }

/* ==========================================================================
   Round 20 (2026-10-19): bigger logo, home video hero (tinted, curtain)
   ========================================================================== */
/* logo about twice as big at the top of every page, back to normal once scrolled */
.site-header .brand img{ height: 80px; width:auto; transition: height .45s var(--ease); }
.site-header.is-scrolled .brand img{ height: 40px; }
@media (max-width: 1179px){ .site-header .brand img{ height: 54px; } .site-header.is-scrolled .brand img{ height: 38px; } }
@media (max-width: 480px){ .site-header .brand img{ height: 42px; } .site-header.is-scrolled .brand img{ height: 34px; } }
/* the hero headline rises in on load (it sits outside the scroll-triggered heading reveal) */
@keyframes vheroIn{ from{ opacity:0; transform: translateY(28px); } to{ opacity:1; transform:none; } }
.js-anim .vhero h1{ animation: vheroIn 1.1s var(--ease) .15s both; }
.js-anim .vhero .sub{ animation: vheroIn 1.1s var(--ease) .35s both; }
.js-anim .vhero .actions{ animation: vheroIn 1.1s var(--ease) .5s both; }
@media (prefers-reduced-motion: reduce){ .js-anim .vhero h1, .js-anim .vhero .sub, .js-anim .vhero .actions{ animation:none; } }
/* make room for it on narrower desktops: address, then email, step back to the footer and menu */
@media (min-width: 1180px) and (max-width: 1599px){ .nav-contact .addr{ display:none; } }
@media (min-width: 1180px) and (max-width: 1439px){ .nav-contact .email{ display:none; } .nav-list{ gap: 1.1rem; } }

/* header over the home video: clear, white logo and links, until scrolled (site.js adds is-scrolled) */
.site-header.on-video:not(.is-scrolled) .brand img{ content: url("../img/logo-white.png"); }
.site-header.on-video:not(.is-scrolled) .nav-list a, .site-header.on-video:not(.is-scrolled) .nav-contact a,
.site-header.on-video:not(.is-scrolled) .nav-actions .risk, .site-header.on-video:not(.is-scrolled) .menu-toggle,
.site-header.on-video:not(.is-scrolled) .home-btn{ color:#fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.site-header.on-video:not(.is-scrolled) .nav-contact a{ border-color: rgba(255,255,255,.35); }
.site-header.on-video:not(.is-scrolled) .bars span{ background:#fff; }

main > section.vhero.vhero:first-child{ padding:0 !important; }
.vhero{ position:relative; height:100svh; }
.vhero .stick{ position:fixed; inset:0 0 auto 0; height:100svh; overflow:hidden; z-index:0; }
.vhero .frame{ position:absolute; inset:0; overflow:hidden; background: var(--forest); will-change: transform; }
.vhero video, .vhero .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vhero .poster{ transition: opacity .8s var(--ease); }
.vhero.is-playing .poster{ opacity:0; }
.vhero .shade{ position:absolute; inset:0; background: rgba(10,18,8,.46); pointer-events:none; }
.vhero .copy{ position:absolute; left:0; right:0; bottom: clamp(3rem, 11vh, 8rem); z-index:2; color:#fff; }
.vhero h1{ font-size: clamp(3.2rem, 7.6vw, 7.4rem); line-height:.95; letter-spacing:-.035em; color:#fff; margin:0; }
.vhero h1 em{ color: var(--accent); }
.vhero .sub{ margin-top:1.4rem; font-size: clamp(1.02rem,1.2vw,1.18rem); line-height:1.65; max-width:32em; color: rgba(255,255,255,.9); }
.vhero .actions{ margin-top:2rem; display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; }
.vhero .link-arrow{ color:#fff; border-color: rgba(255,255,255,.6); }
.vhero .cue{ position:absolute; left:50%; bottom:22px; z-index:2; transform:translateX(-50%); width:22px; height:36px;
  border:1.5px solid rgba(255,255,255,.7); border-radius:12px; transition: opacity .4s ease; }
.vhero .cue::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:#fff;
  animation: vheroCue 1.8s ease-in-out infinite; }
@keyframes vheroCue{ 0%{ opacity:0; transform:none; } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(10px); } }
.vhero-sentinel{ position:absolute; left:0; right:0; bottom:0; height:1px; }
/* the page slides up over the video like a curtain */
.after{ position:relative; z-index:2; background: var(--paper); border-radius: 28px 28px 0 0; box-shadow: 0 -30px 60px -30px rgba(10,20,8,.35); }
.after + .site-footer, main:has(.after) + .site-footer{ position:relative; z-index:2; }
.faces-band{ padding: clamp(3.5rem,7vw,5.5rem) 0 0; }
/* round 23 (Lucas): two rows, the advisors bigger on top and the office team below, nothing in between;
   each face opens that person's page, and the one line under them goes to the team page */
.faces-band .faces{ display:grid; gap: clamp(.5rem,1.1vw,1rem); margin-inline:auto; max-width: 980px; }
.faces-band .faces-adv{ grid-template-columns: repeat(4, 1fr); }
.faces-band .faces-off{ grid-template-columns: repeat(6, 1fr); max-width: 1200px; margin-top: clamp(.5rem,1.1vw,1rem); } /* with Zac; wider than the advisors' row on purpose (Lucas) */
.faces-band .faces li{ transform:none !important; }
.faces-band .faces a{ display:block; width:100%; height:100%; }
.faces-band .faces a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.faces-band .faces-note{ margin-top: 1.4rem; text-align:center; }
.faces-all{ color: var(--ink-soft); border-bottom:1px solid var(--rule-strong); padding-bottom:.15em; transition: color .3s var(--ease), border-color .3s var(--ease); }
.faces-all:hover{ color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 760px){ .faces-band .faces-off{ max-width:none; } .vhero .copy{ bottom: clamp(4rem, 12vh, 6rem); } }
/* phones: advisors 2 x 2 (bigger), office team and Zac 3 x 2 (smaller), so the advisors stay the larger photos (Lucas) */
@media (max-width: 560px){ .faces-band .faces-adv{ grid-template-columns: repeat(2, 1fr); } .faces-band .faces-off{ grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce){ .vhero .cue::after{ animation:none; } }
.site-header.on-video:not(.is-scrolled) .home-btn{ border-color: rgba(255,255,255,.55); }
.site-header.on-video:not(.is-scrolled) .home-btn svg, .site-header.on-video:not(.is-scrolled) .home-btn svg path{ color:#fff; fill:#fff; }
/* round 24 (2026-10-20): photos on home "Everything, under one roof" (one wide, two narrower), BRI intro photo */
.photo-trio{ display:grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: clamp(240px, 27vw, 420px); gap: clamp(.5rem,1.1vw,1rem); margin-top: clamp(3rem,6vw,5rem); }
.photo-trio figure{ margin:0; }
@media (max-width: 760px){
  .photo-trio{ grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .photo-trio figure{ aspect-ratio: 1; }
  .photo-trio figure:first-child{ grid-column: 1 / -1; aspect-ratio: 4/3; }
}
.bri-intro{ grid-template-columns: minmax(0,6fr) minmax(0,5fr); }
@media (max-width: 860px){ .bri-intro{ grid-template-columns:1fr; } }

/* 2026-10-23: phones play the 9:16 hero cut (hero-video.js adds .is-tall); a touch more tint keeps the words clear */
.vhero.is-tall .shade{ background: rgba(10,18,8,.5); }

/* 2026-11-02: Facebook and Instagram (Paul's note). Header: two small icons after the contact line; footer and menu: round buttons */
.nav-social{ display:inline-flex; align-items:center; gap:.7rem; position:relative; }
.nav-social::before{ content:''; position:absolute; left:-.6rem; top:50%; width:1px; height:.8em; transform:translateY(-50%); background: var(--rule-strong); }
.nav-contact .nav-social a.soc{ display:inline-flex; width:16px; height:16px; }
.nav-contact .nav-social a.soc::before{ content:none; }
.nav-contact .nav-social svg{ width:16px; height:16px; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a.soc, .mobile-menu .mobile-utility a.soc{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
  border:1px solid rgba(250,250,247,.24); border-radius:100px; color: var(--paper);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.footer-social a.soc:hover{ background: var(--paper); color: var(--forest); border-color: var(--paper); }
.footer-social svg, .mobile-menu .mobile-utility a.soc svg{ width:20px; height:20px; }
/* the header icons only where they fit beside the email/address (they are always in the footer and the menu) */
@media (min-width: 1180px) and (max-width: 1259px), (min-width: 1440px) and (max-width: 1799px){ .nav-social{ display:none; } }

/* 2026-11-12: the hero's logo loop (hero-video.js builds .vh-logo). An off-white canvas over the whole hero, the logo on it,
   and a copy of both with a hole where the colon's top dot is, for the zoom. The headline sits under the canvas, unchanged. */
.vhero .vh-wash{ position:absolute; inset:0; z-index:3; background: var(--paper); opacity:0; pointer-events:none; }
.vhero .vh-flat{ position:absolute; left:0; top:0; z-index:4; display:none; transform-origin:0 0; pointer-events:none; will-change: transform; }
.vhero .vh-flat svg{ display:block; width:100%; height:100%; overflow:visible; }
.vhero .vh-zoom{ position:absolute; inset:0; z-index:4; display:none; width:100%; height:100%; pointer-events:none; }
.vhero .vh-zoom .vh-paper{ fill: var(--paper); }
/* while the canvas is up the header is dark on light (on-video is off) and its own logo steps out, so one logo shows */
.site-header .brand img{ transition: height .45s var(--ease), opacity .35s linear; }
.site-header.on-canvas:not(.is-scrolled) .brand img{ opacity:0; }
/* the curtain's shadow reaches up into the hero: fine over the dark video, a grey band on the off-white canvas */
.after{ transition: box-shadow .45s linear; }
.vhero.on-canvas ~ .after{ box-shadow:none; }
/* 2026-11-12, phones (Lucas): bars above and below the hero on iPhone, and no mouse-wheel hint on a touch screen.
   The pinned hero was as tall as the SMALL viewport, so the strip under Safari's toolbar showed the page behind it; it is now as tall
   as the LARGE one, with the words lifted by the difference so they stay where they were. Safari also tints its own bars from the
   pinned element's background: dark over the video, the paper colour while the logo canvas is up. */
.vhero .stick{ background: var(--forest); }
/* (the pinned hero stays dark even under the logo canvas: Safari is slow to re-read it, see tint() in hero-video.js) */
/* Safari colours the strip under its toolbar from the page's own background as it stands at first paint (simulator tests, 2026-11-12),
   so the home page is dark from the stylesheet, not from the script; the script only turns it back to paper once the page scrolls on */
html:has(.vhero), html:has(.vhero) body{ background: var(--forest); }
html.vh-away, html.vh-away body{ background: var(--paper); }
@supports (height: 100lvh){
  /* Worked out in the iPhone simulator (iOS 27 Safari, 2026-11-12; test pages were in /tmp/herosim on the MacBook):
     - innerHeight and 100svh are 714, 100lvh 754, safe-area insets 0, and the page is still drawn for about 60 more points under the
       floating toolbar. So the SECTION is 100lvh plus --vh-extra on touch screens, or the next section shows under the toolbar.
     - The PINNED picture stays 100svh. Any taller and Safari paints the strip under its toolbar the paper colour; at 100svh the strip
       takes the page's dark background, the same as the status bar, so the hero sits between two matching dark bars. */
  .vhero{ --vh-extra: 0px; }
  @media (hover: none) and (pointer: coarse){ .vhero{ --vh-extra: 96px; } }
  .vhero{ height: calc(100lvh + var(--vh-extra)); }
}
@media (max-width: 760px), (hover: none){ .vhero .cue{ display:none; } }
/* the two invisible strips Safari reads its bar colours from (hero-video.js sets their background-color; see the note there).
   12px and opaque as far as Safari is concerned; the transparent mask hides them from people. */
/* z-index: Safari reads the HIGHEST fixed element at an edge. The closed phone menu (.mobile-menu, z 600, forest, only clipped away) was
   winning at the top and turning the status bar dark on every page; the strips sit above it, and step out while the menu is open. */
.vh-edge{ position:fixed; left:0; right:0; height:12px; z-index:9990; pointer-events:none; background-color: var(--forest);
  -webkit-mask-image: linear-gradient(transparent, transparent); mask-image: linear-gradient(transparent, transparent); }
.vh-edge.t{ top:0; } .vh-edge.b{ bottom:0; }
html.vh-away .vh-edge, .nav-open .vh-edge{ display:none; }