/* ============================================================
   Clearmatter — Home
   Brand system tokens. No invented colors, no invented fonts.
   ============================================================ */

/* Metric-matched fallbacks — occupy the same space as the web fonts so
   there's zero layout shift when Cormorant/Inter finish loading. */
@font-face{font-family:"Cormorant Garamond Fallback: Georgia";src:local('Georgia');font-display:swap;ascent-override:104.5482%;descent-override:32.4733%;size-adjust:88.3803%;}
@font-face{font-family:"Cormorant Garamond Fallback: Times New Roman";src:local('Times New Roman'),local('TimesNewRomanPSMT');font-display:swap;ascent-override:95.2728%;descent-override:29.5923%;line-gap-override:0%;size-adjust:96.9846%;}
@font-face{font-family:"Inter Fallback";src:local('Arial'),local('ArialMT');font-display:swap;ascent-override:90.4365%;descent-override:22.518%;line-gap-override:0%;size-adjust:107.1194%;}

:root{
  /* Primary */
  --white:#FFFFFF;
  --linen:#F2F2F0;
  --dune:#D4B896;
  --forest:#2D6A4F;
  --slate:#333330;
  --midnight:#0A0A09;
  /* Supporting */
  --fern:#7DB99A;
  --grove:#1A3D2E;
  --greige:#BCBAB4;
  --iron:#666664;

  --serif:'Cormorant Garamond', 'Cormorant Garamond Fallback: Georgia', 'Cormorant Garamond Fallback: Times New Roman', Georgia, 'Times New Roman', serif;
  --sans:'Inter', 'Inter Fallback', Arial, system-ui, -apple-system, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, monospace;

  --maxw:1280px;
  --gutter:clamp(24px, 6vw, 120px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Accordion-section drift texture opacity (shared by home Coaching + subpage
     challenges via .svc__drift). Was .5; reduced per motif-system review. */
  --drift-opacity:.35;

  /* Page-differentiation grounds (anti-change-blindness): Coaching challenges = grove,
     Consulting challenges = fern tint. The tint is fern lightened over linen to at most
     30% fern strength. Text on the tint is forest/grove/slate (iron only while the tint
     stays <=30%); never fern or greige on the tint. */
  --fern-tint:#DCE8DF;
  /* Hero-seam ("dash") per subpage */
  --dash-coaching:var(--grove);
  --dash-consulting:var(--forest);
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;background:var(--linen);}
#root{background:var(--linen);}
/* Skip-to-content: first Tab stop on every page; hidden until focused, then a
   forest pill in the top-left that jumps focus to <main id="main">. */
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-150%);background:var(--forest);color:var(--linen);padding:10px 16px;border-radius:6px;z-index:2000;font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none;transition:transform .15s;}
.skip-link:focus{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none;}}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--slate);
  background:var(--linen);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--forest);color:var(--linen);}

/* Visible keyboard focus, sitewide (WCAG 2.4.7). Forest on light grounds; a
   linen override keeps the ring visible on the dark sections. */
:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
.svc--coaching :focus-visible,.through :focus-visible,.close-cta :focus-visible,.ftr :focus-visible{outline-color:var(--linen);}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none;}

/* ---- type helpers ---- */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:.005em;}
.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--forest);
}
.lede{
  font-size:clamp(18px,2vw,21px);
  line-height:1.6;
  color:var(--iron);
  font-weight:400;
}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
section{position:relative;}
/* offset hash-anchor jumps for the fixed header (in-page + cross-page deep links) */
:target{scroll-margin-top:88px;}

/* ============================================================
   Header
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding-block:20px;
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.hdr.scrolled{
  background:rgba(242,242,240,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding-block:14px;
  border-bottom:1px solid rgba(188,186,180,.5);
}
.hdr__logo{display:block;}
/* Optical centering: "clearmatter" is all-lowercase, so its visual mass (x-height body)
   sits ~16.5% below the wordmark's geometric center, making a box-centered logo read low
   next to the nav. Lift it by that fraction so its ink centroid matches the nav text's.
   translateY(%) is relative to the img's own height, so it auto-scales with the 34px->30px
   shrink on scroll. */
.hdr__logo img{display:block;height:34px;width:auto;transform:translateY(-16.5%);transition:transform .5s var(--ease);}
.hdr.scrolled .hdr__logo img{transform:translateY(-16.5%) scale(0.882);}

/* nav is optically centered against the wordmark via the bar's align-items:center + the lift above */
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,32px);}
.nav__link{
  font-size:14px;font-weight:450;letter-spacing:.01em;color:var(--slate);
  position:relative;padding:4px 0;transition:color .3s var(--ease);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--forest);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__link:hover{color:var(--forest);}
.nav__link:hover::after{transform:scaleX(1);}
.nav__link--active{color:var(--forest);}
.nav__link--active::after{transform:scaleX(1);}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;
  cursor:pointer;border:none;background:none;
  transition:gap .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn i{font-size:1.15em;transition:transform .35s var(--ease);}
.btn:hover i{transform:translateX(4px);}

.btn--solid{
  background:var(--forest);color:var(--linen);
  padding:13px 22px;border-radius:2px;
}
.btn--solid:hover{background:var(--grove);}
.btn--lg{padding:16px 30px;font-size:15px;border-radius:2px;}
.btn--ghost{
  border:1px solid var(--forest);color:var(--forest);
  padding:12px 21px;border-radius:2px;
}
.btn--ghost:hover{background:var(--forest);color:var(--linen);}
.btn--text{color:var(--forest);}

.nav__cta{display:inline-flex;white-space:nowrap;}

/* hamburger */
.burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:none;background:none;cursor:pointer;color:var(--slate);
}
.burger i{font-size:26px;}

/* mobile sheet */
.sheet{
  position:fixed;inset:0;z-index:70;background:var(--linen);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(96px,20vw,120px) var(--gutter) var(--gutter);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.sheet.open{opacity:1;visibility:visible;transform:none;}
.sheet__mark{position:absolute;top:18px;left:var(--gutter);height:44px;width:auto;}
.sheet__nav{display:flex;flex-direction:column;gap:6px;}
.sheet__link{
  position:relative;
  font-family:var(--serif);font-size:clamp(34px,9vw,52px);font-weight:400;
  color:var(--iron);padding:6px 0 6px 42px;transition:color .3s var(--ease);
}
.sheet__link:hover{color:var(--forest);}
/* Current page: forest (AA on linen, 5.7:1), bolder weight, and a small leading
   arrow — softened iron siblings let it pop harder. */
.sheet__link--active{color:var(--forest);font-weight:600;}
.sheet__link--active::before{
  content:"\2192";position:absolute;left:0;top:50%;transform:translateY(-50%);
  color:var(--forest);font-family:var(--sans);font-size:24px;font-weight:600;line-height:1;
}
.sheet__cta{margin-top:38px;}

/* ============================================================
   Section scrollspy — Treatment A (opt-in via the sectionSpy tweak)
   Fixed sub-bar pinned under the header (JS sets `top` to the live header
   height); hidden until the hero scrolls away. Full-width surface, content
   centered on the shared .wrap gutter. Renders only when a page opts in, so
   nothing here affects the live pages while the tweak is off.
   ============================================================ */
.spy-bar{
  position:fixed;left:0;right:0;top:64px;z-index:50;
  background:rgba(242,242,240,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(188,186,180,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), visibility .7s;
}
.spy-bar.is-on{opacity:1;visibility:visible;transform:none;}
.spy-bar__inner{
  display:flex;align-items:center;gap:16px;height:46px;
  overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;
}
.spy-bar__inner::-webkit-scrollbar{display:none;}
.spy-bar__lead{
  flex:none;white-space:nowrap;
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--iron);
}
.spy-bar__list{display:flex;gap:2px;list-style:none;margin:0;padding:0;}
.spy-bar__list a{
  display:inline-block;white-space:nowrap;
  font-size:13px;letter-spacing:.01em;color:var(--iron);
  padding:6px 12px;border-bottom:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.spy-bar__list a:hover{color:var(--slate);}
.spy-bar__list a[aria-current]{color:var(--forest);border-bottom-color:var(--forest);}
@media (prefers-reduced-motion:reduce){.spy-bar{transition:none;}}
/* Mobile: a horizontal scrollable strip of pills (not hidden) */
@media (max-width:640px){
  .spy-bar__lead{display:none;}
  .spy-bar__inner{gap:8px;height:44px;}
  .spy-bar__list{gap:8px;}
  .spy-bar__list a{border:0;border-bottom:2px solid transparent;border-radius:0;padding:6px 8px;}
  .spy-bar__list a[aria-current]{background:none;border-bottom-color:var(--forest);}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  min-height:0;display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(clamp(140px,15vw,208px) + 50px) calc(clamp(96px,11vw,152px) + 50px);overflow:hidden;background:var(--linen);
}
.hero .wrap{width:100%;}
.hero__inner{max-width:980px;}
.hero.center .hero__inner{margin-inline:auto;text-align:center;}
.hero.center .hero__sub{margin-inline:auto;}
.hero__mark{height:clamp(30px,5.6vw,62px);width:auto;margin-bottom:clamp(16px,2.4vw,28px);}
.hero.center .hero__mark{margin-inline:auto;}
.hero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,9vw,92px);
  line-height:1.04;letter-spacing:-.014em;color:var(--midnight);
  margin:0;text-wrap:balance;
}
.hero__title .ln{display:block;}
.hero__title .ln > span{display:block;}
.hero__title .b{
  font-weight:600;color:var(--forest);
}
.hero__sub{
  margin:clamp(18px,2.4vw,28px) 0 0;max-width:46ch;
  font-size:clamp(18px,2.1vw,22px);line-height:1.55;color:var(--iron);font-weight:400;
}

/* faint wave / arc motifs */
.motif{position:absolute;pointer-events:none;}
.motif svg{display:block;width:100%;height:100%;}
.hero__motif{inset:auto -6% 0 -6%;height:32%;opacity:.4;z-index:0;}
.hero__rings{
  inset:0 -2% 0 auto;width:46%;max-width:720px;opacity:.85;z-index:0;
  -webkit-mask-image:linear-gradient(to right, transparent, transparent 12%, #000 38%);
          mask-image:linear-gradient(to right, transparent, transparent 12%, #000 38%);
}
.hero__rings svg{width:100%;height:100%;}
.hero__inner{position:relative;z-index:1;}

/* hero actions */
.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(24px,3vw,38px);
}
.hero.center .hero__actions{justify-content:center;}
.hero__more{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--forest);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease);
}
.hero__more i{transition:transform .35s var(--ease);}
.hero__more:hover{border-color:var(--forest);}
.hero__more:hover i{transform:translateY(3px);}

/* gentle ambient drift on the wave motif */
.motif .drift{will-change:transform;}
.hero__rings .rings{will-change:transform;transform-origin:100% 50%;}
@media (prefers-reduced-motion:no-preference){
  .hero__motif .drift{animation:drift 46s var(--ease) infinite alternate;}
  .through__motif .drift{animation:drift2 62s var(--ease) infinite alternate;}
  .hero__motif{transform-origin:50% 100%;animation:breathe 9s ease-in-out infinite;will-change:opacity,transform;}
  .hero__rings .rings{animation:ringdrift 80s ease-in-out infinite alternate;}
}
@keyframes drift{from{transform:translateX(0);}to{transform:translateX(-30px);}}
@keyframes drift2{from{transform:translateX(0);}to{transform:translateX(26px);}}
@keyframes breathe{
  0%,100%{opacity:.38;transform:scaleY(1);}
  50%{opacity:.46;transform:scaleY(1.015);}
}
@keyframes ringdrift{
  from{transform:scale(1) translateX(0);}
  to{transform:scale(1.05) translateX(-1.6%);}
}

/* shared inline link */
.link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--forest);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:gap .35s var(--ease), border-color .35s var(--ease);
}
.link i{transition:transform .35s var(--ease);}
.link:hover{border-color:var(--forest);}
.link:hover i{transform:translateX(5px);}

/* ============================================================
   Welcome (who I am)
   ============================================================ */
.welcome{background:var(--white);padding-block:clamp(72px,11vw,128px);}
.welcome__grid{
  display:grid;grid-template-columns:1fr minmax(0,436px);
  gap:clamp(40px,6vw,96px);align-items:center;
}
.welcome__eye{display:block;margin-bottom:22px;}
.welcome__h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5vw,62px);line-height:1.04;
  color:var(--slate);margin:0 0 clamp(26px,3vw,36px);
  letter-spacing:-.012em;text-wrap:balance;
}
.welcome__name{color:var(--forest);}
.welcome__body{display:flex;flex-direction:column;gap:1.05em;max-width:54ch;}
.welcome__body p{margin:0;color:var(--slate);}
.welcome__link{margin-top:clamp(28px,3vw,38px);}
.welcome__photo{
  aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--linen);
}
.welcome__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
/* mobile-only circular bio avatar beside the name (hidden on desktop) */
.welcome__head .welcome__avatar{display:none;}
@media (max-width:840px){
  /* Tablet: keep the full side portrait, top-aligned with the copy, in a
     narrower column (mirrors the About hero). */
  .welcome__grid{grid-template-columns:1fr minmax(0,300px);gap:clamp(32px,4.5vw,60px);align-items:start;}
  .welcome__body{max-width:none;}
}
@media (max-width:768px){
  /* Mobile: hide the side portrait; the name sits left with a circular photo to
     its right, body full-width below (mirrors the About hero). */
  .welcome__grid{grid-template-columns:1fr;gap:0;align-items:start;}
  .welcome__photo{display:none;}
  .welcome__body{max-width:none;}
  .welcome__head{display:flex;align-items:center;gap:clamp(16px,4vw,24px);margin-bottom:clamp(24px,4vw,32px);}
  .welcome__head .welcome__h{margin:0;order:1;flex:0 1 auto;min-width:0;font-size:clamp(40px,11vw,52px);line-height:1.02;}
  .welcome__head .welcome__greet{display:block;}
  .welcome__head .welcome__avatar{
    display:block;order:2;flex:0 0 auto;align-self:center;
    width:clamp(96px,28vw,128px);height:clamp(96px,28vw,128px);
    aspect-ratio:1/1;max-width:none;
    border-radius:50%;object-fit:cover;object-position:center 18%;background:var(--greige);
  }
}

/* ============================================================
   Service blocks (coaching / consulting)
   ============================================================ */
.svc{padding-block:clamp(72px,11vw,132px);position:relative;overflow:hidden;}
.svc .wrap{position:relative;z-index:1;}
.svc--coaching{background:var(--grove);}
/* Accordion-section drift texture: forest parallel lines behind every
   challenges/accordion section (home Coaching + subpage challenges).
   Opacity is one knob shared sitewide — see --drift-opacity. */
.svc__drift{top:0;right:0;bottom:0;left:auto;width:min(64%,940px);opacity:var(--drift-opacity);z-index:0;}
/* fill the full height of the Coaching block at every viewport — the width-driven
   intrinsic height was clipping short on narrow (mobile) widths */
.svc__drift svg{width:100%;height:100%;}
/* Consulting-section Align band (exploration): a low, full-width run of the
   Consulting page's motif. Threads cross at the left and resolve into calm
   parallels toward the right, fading upward so it never reaches the text or
   accordion. Forest on linen. Density + optional dune accent are Tweak-driven. */
.svc__align{top:auto;left:0;right:0;bottom:0;height:clamp(150px,18vw,240px);z-index:0;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 18%,transparent 88%);
          mask-image:linear-gradient(to top,#000 0%,#000 18%,transparent 88%);}
.svc__align svg{width:100%;height:100%;display:block;}
.svc__align--quiet{opacity:.07;}
.svc__align--present{opacity:.13;}
/* Coaching on dark grove — recolor contents for the dark surface */
.svc--coaching .svc__label{color:var(--fern);}
.svc--coaching .svc__h{color:var(--linen);}
.svc--coaching .svc__body p{color:var(--greige);}
.svc--coaching .eyebrow{color:var(--fern);}
.svc--coaching .link{color:var(--fern);}
.svc--coaching .link:hover{border-color:var(--fern);}
.svc--coaching .chal{border-top-color:rgba(125,185,154,.28);}
.svc--coaching .chal__item{border-bottom-color:rgba(125,185,154,.28);}
.svc--coaching .chal__t{color:var(--linen);}
.svc--coaching .chal__item.open .chal__t,
.svc--coaching .chal__head:hover .chal__t{color:var(--fern);}
.svc--coaching .chal__mark{border-color:rgba(125,185,154,.45);color:var(--fern);}
.svc--coaching .chal__item.open .chal__mark{background:var(--fern);border-color:var(--fern);color:var(--grove);}
.svc--coaching .chal__panel p{color:var(--greige);}
.svc--coaching .chal__link{color:var(--fern);}
.svc--coaching .chal__link:hover{border-color:var(--fern);}

/* Consulting challenges — light fern-tint ground (page-differentiation: Coaching = grove,
   Consulting = fern tint). Base .chal styling already suits a light ground (slate title,
   forest hover/open, forest open-mark, iron panel body — iron is OK at this <=30% tint).
   Only the greige hairlines are recolored off the tint. Drift is not rendered here (drift =
   dark accordions only) and focus-visible falls through to the default light-section forest ring. */
.chalsec--tint{background:var(--fern-tint);}
.chalsec--tint .chal{border-top-color:rgba(45,106,79,.22);}
.chalsec--tint .chal__item{border-bottom-color:rgba(45,106,79,.22);}
.chalsec--tint .chal__mark{border-color:rgba(45,106,79,.45);color:var(--forest);}
.svc--consulting{background:var(--linen);}

.svc__grid{
  display:grid;grid-template-columns:minmax(0,320px) 1fr;
  gap:clamp(36px,6vw,90px);align-items:start;
}
.svc__label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--iron);font-weight:500;}
.svc__h{
  font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.4vw,64px);
  line-height:1.0;color:var(--midnight);margin:12px 0 26px;letter-spacing:-.012em;
}
.svc__body{max-width:60ch;}
.svc__body p{font-size:clamp(17px,1.5vw,19px);line-height:1.66;color:var(--slate);margin:0 0 22px;}
.svc__body p:last-child{margin-bottom:0;}
.svc__extra{margin-top:clamp(44px,6vw,68px);}
.svc__extra-eye{display:block;margin-bottom:22px;}
/* main service CTA, centered under the challenges accordion (was getting lost beside the heading) */
.svc__explore{display:flex;justify-content:center;margin-top:clamp(34px,5vw,52px);}

/* challenge accordion */
.chal{border-top:1px solid rgba(188,186,180,.6);}
.chal__item{border-bottom:1px solid rgba(188,186,180,.6);}
.chal__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  text-align:left;background:none;border:none;cursor:pointer;
  padding:24px 0;font-family:var(--sans);
}
.chal__t{
  font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.4vw,27px);
  line-height:1.22;color:var(--slate);letter-spacing:-.005em;
  transition:color .3s var(--ease);
}
.chal__item.open .chal__t,.chal__head:hover .chal__t{color:var(--forest);}
.chal__mark{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--iron);color:var(--forest);
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chal__mark i{font-size:18px;}
.chal__item.open .chal__mark{background:var(--forest);border-color:var(--forest);color:var(--linen);}
.chal__panel{
  overflow:hidden;max-height:0;opacity:0;visibility:hidden;
  transition:max-height .5s var(--ease), opacity .4s var(--ease), padding .5s var(--ease), visibility 0s .5s;
}
.chal__item.open .chal__panel{max-height:360px;opacity:1;padding-bottom:26px;visibility:visible;transition-delay:0s;}
.chal__panel p{margin:0;max-width:60ch;font-size:16px;line-height:1.62;color:var(--iron);}
.chal__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--forest);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.chal__link i{font-size:15px;transition:transform .3s var(--ease);}
.chal__link:hover{border-color:var(--forest);}
.chal__link:hover i{transform:translateX(4px);}

/* ============================================================
   Through-line (high contrast)
   ============================================================ */
.through{
  background:var(--midnight);color:var(--linen);
  padding-block:clamp(96px,16vw,190px);overflow:hidden;
}
.through.grove{background:var(--grove);}
.through__motif{inset:-10% -5% auto -5%;height:60%;opacity:.16;z-index:0;}
.through .wrap{position:relative;z-index:1;}
.through__eye{color:var(--fern);}
.through__quote{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,5.6vw,58px);line-height:1.12;letter-spacing:-.01em;
  max-width:24ch;margin:26px 0 0;color:var(--linen);
}
.through__quote span{display:block;}
/* Cap the main quote line so it breaks: "Every problem has a" /
   "person at the heart of it." (measured window 19.1–21.8ch). The
   italic sub-line keeps its own width below. */
.through__quote > span:first-child{max-width:20.5ch;}
.through__quote-2{
  color:var(--fern);font-style:italic;font-weight:400;
  font-size:.62em;line-height:1.24;max-width:40ch;margin-top:.5em;
}
.through__foot{
  margin-top:clamp(44px,6vw,72px);max-width:78ch;text-wrap:balance;
  font-size:clamp(16px,1.8vw,19px);line-height:1.65;color:var(--greige);
}

/* three commitments */
.commit{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px);
  margin-top:clamp(48px,7vw,84px);
  padding-top:clamp(40px,5vw,60px);border-top:1px solid rgba(125,185,154,.28);
}
.commit__no{
  font-family:var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size:12px;letter-spacing:.14em;color:var(--fern);
}
.commit__t{
  font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,36px);
  line-height:1.05;color:var(--linen);margin:14px 0 12px;letter-spacing:-.006em;
}
.commit__b{margin:0;font-size:15px;line-height:1.62;color:var(--greige);}

/* ============================================================
   Close / CTA
   ============================================================ */
.cta{background:var(--white);padding-block:clamp(80px,12vw,150px);}
.cta__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.86fr);
  gap:clamp(40px,6vw,86px);align-items:stretch;
}
.cta__block{
  text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;
}
.cta__photo{
  margin:0;border-radius:6px;overflow:hidden;background:var(--dune);
  min-height:460px;
}
.cta__photo img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:sepia(.22) saturate(1.18) brightness(1.02) contrast(1.02);
}
.cta__mark{height:66px;width:auto;margin-bottom:14px;}
.cta__title{
  font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.6vw,72px);
  line-height:1.02;letter-spacing:-.012em;color:var(--midnight);margin:0;
}
.cta__lede{
  margin:0;
  font-size:clamp(17px,1.5vw,19px);line-height:1.66;color:var(--slate);max-width:46ch;
}
.cta__lede:first-of-type{margin-top:clamp(22px,2.6vw,30px);}
.cta__lede--2{margin-top:clamp(15px,1.7vw,19px);margin-bottom:clamp(30px,3.6vw,42px);}
.cta__write{
  margin-top:20px;background:none;border:0;cursor:pointer;padding:4px 0;
  font-family:inherit;font-size:15px;color:var(--iron);
  border-bottom:1px solid rgba(90,95,90,.32);transition:color .2s,border-color .2s;
}
.cta__write:hover{color:var(--forest);border-color:var(--forest);}
/* closing sign-off — the tagline's one featured appearance */
.signoff{
  margin-top:clamp(64px,9vw,124px);
  padding-top:clamp(52px,6vw,88px);
  border-top:1px solid rgba(188,186,180,.5);
  text-align:center;
}
.signoff__line{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,7vw,76px);line-height:1.02;letter-spacing:-.018em;
  color:var(--midnight);text-wrap:balance;
}
.signoff__line.b{font-weight:600;color:var(--forest);}
.cta__note{max-width:720px;}

/* contact form */
.form{
  background:var(--white);border:1px solid rgba(188,186,180,.6);border-radius:4px;
  padding:clamp(26px,3vw,40px);
  box-shadow:0 36px 80px -56px rgba(10,10,9,.45);
  display:flex;flex-direction:column;gap:18px;
}
.form .eyebrow{margin-bottom:2px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field > span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--iron);font-weight:500;}
.field input,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--slate);
  background:var(--linen);border:1px solid rgba(188,186,180,.7);border-radius:2px;
  padding:12px 14px;transition:border-color .3s var(--ease), background .3s var(--ease);resize:vertical;
}
.field input:focus,.field textarea:focus{border-color:var(--forest);background:var(--white);}
.field input::placeholder,.field textarea::placeholder{color:var(--iron);}
.form__submit{align-self:flex-start;margin-top:4px;}
.form-note{font-size:13px;line-height:1.55;color:var(--iron);margin:-2px 0 10px;}
.form-note a{color:inherit;text-decoration:underline;}
.form--done{align-items:center;text-align:center;gap:14px;}
.form--done i{font-size:42px;color:var(--forest);line-height:1;}
.form--done h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4vw,40px);color:var(--midnight);margin:0;letter-spacing:-.01em;}
.form--done p{margin:0;color:var(--iron);font-size:16px;line-height:1.6;max-width:38ch;}
.form--done .btn{margin-top:8px;}
.form-done__foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px;}
.form-done__email{color:var(--forest);border-bottom:1px solid rgba(45,106,79,.4);font-size:14px;line-height:1.5;}
.form-done__email:hover{border-bottom-color:var(--forest);}
.form-done__foot .btn{align-self:center;justify-content:center;}
.form-error{margin:0;color:var(--slate);font-size:14px;line-height:1.5;}
.form-error a{color:var(--forest);border-bottom:1px solid rgba(45,106,79,.4);}
.form-error a:hover{border-bottom-color:var(--forest);}

/* chat overlay */
.form--bare{background:none;border:none;box-shadow:none;padding:0;}
.chat-ov{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(10,10,9,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease), visibility .35s;
}
.chat-ov.open{opacity:1;visibility:visible;}
.chat-modal{
  position:relative;width:min(560px,100%);background:var(--white);border-radius:6px;
  padding:clamp(30px,4vw,50px);box-shadow:0 50px 120px -40px rgba(10,10,9,.6);
  transform:translateY(14px) scale(.98);transition:transform .4s var(--ease);
  max-height:90vh;overflow:auto;
}
.chat-ov.open .chat-modal{transform:none;}
.chat-close{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border:none;background:none;cursor:pointer;
  color:var(--iron);display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.chat-close:hover{background:var(--linen);color:var(--forest);}
.chat-close i{font-size:22px;}
.chat-modal__title{
  font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.2vw,38px);line-height:1.08;
  color:var(--midnight);margin:10px 0 24px;letter-spacing:-.008em;
  /* Fits one line where there's room; when it must wrap, balance splits it
     cleanly at the clause ("Tell me what's" / "going on.") instead of
     orphaning the last word. */
  max-width:26ch;text-wrap:balance;
}

/* ============================================================
   Footer
   ============================================================ */
/* Page canvas is grove (set on html) so the iOS safe-area / home-indicator zone
   below the footer never shows the linen body background as a white bar. The
   footer absorbs that zone too, so its content clears the home indicator. */
.ftr{background:var(--grove);color:var(--greige);padding-block:clamp(44px,6vw,64px) calc(32px + env(safe-area-inset-bottom));box-shadow:0 100vh 0 100vh var(--grove);}
.ftr__top{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px 24px;
  padding-bottom:clamp(20px,2.6vw,28px);
}
/* right of the wordmark row: CTA + social, held on one vertically-centered line */
.ftr__utility{display:flex;align-items:center;gap:clamp(20px,2.4vw,28px);}
.ftr__cta{
  border:1px solid rgba(125,185,154,.4);color:var(--fern);
  font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.ftr__cta:hover{background:var(--fern);color:var(--grove);border-color:var(--fern);}
.ftr__logo img{height:48px;width:auto;}
.ftr__tag{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--fern);margin:0;}
.ftr__nav{
  display:flex;justify-content:flex-start;flex-wrap:wrap;gap:14px 36px;
  padding-block:clamp(18px,2.4vw,24px);
  border-top:1px solid rgba(125,185,154,.22);
  border-bottom:1px solid rgba(125,185,154,.22);
}
.ftr__nav a{
  font-size:15px;color:var(--greige);transition:color .3s var(--ease);
}
.ftr__nav a:hover{color:var(--white);}
.ftr__social{display:flex;align-items:center;gap:12px;}
.ftr__social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(125,185,154,.4);color:var(--fern);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ftr__social-link i{font-size:22px;}
.ftr__social-link:hover{background:var(--fern);color:var(--grove);border-color:var(--fern);}
.ftr__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:20px;font-size:13px;
}
.ftr__bottom .iron{color:var(--greige);}
/* Quiet, muted legal link (Privacy) — same size and greige as the copyright it
   sits beside; a hairline underline for affordance, brightening to white on
   hover/focus. Greige on grove is ~6.2:1 (AA). */
.ftr__bottom a{color:var(--greige);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(188,186,180,.45);transition:color .3s var(--ease), text-decoration-color .3s var(--ease);}
.ftr__bottom a:hover{color:var(--white);text-decoration-color:var(--white);}
/* Nav collapses to the hamburger BEFORE the row can cramp (5 links + the
   Schedule button). Raised 900 -> 1024 and paired with white-space:nowrap on
   the labels + CTA, so the row never wraps on the way down: full nav above
   1024, hamburger at/below it, with no intermediate wrapping band. */
@media (max-width:1024px){
  .nav{display:none;}
  .burger{display:inline-flex;}
}
@media (max-width:900px){
  .svc__grid{grid-template-columns:1fr;gap:0;}
  .svc__aside{margin-bottom:8px;}
  .cta__grid{grid-template-columns:1fr;gap:30px;}
  .cta__photo{min-height:320px;order:2;}
  .commit{grid-template-columns:1fr;gap:32px;}
  .ftr__top{grid-template-columns:1fr 1fr;gap:36px;}
  .ftr__brand{grid-column:1 / -1;}
  .ftr__social{grid-column:2;justify-self:end;}
  /* Hero: as the copy widens the right-anchored rings ride under it. Ease the
     rings back and lay a linen wash behind the copy (above rings, below text) so
     they stop fighting; the wash fades right so the rings still read at the edge.
     Linen-on-linen keeps the top/bottom/left edges seamless. */
  .hero__rings{opacity:.5;}
  .hero__inner::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:-18% -4% -20% -42%;
    background:linear-gradient(90deg, var(--linen) 0%, var(--linen) 58%, rgba(242,242,240,.85) 74%, rgba(242,242,240,0) 100%);
  }
}
@media (max-width:700px){
  /* topology returns on phones — slimmer + quieter so it reads as an accent */
  .hero__rings{width:54%;right:-8%;opacity:.4;}
  /* wider rings on phones — hold the wash solid a little further before it fades */
  .hero__inner::before{background:linear-gradient(90deg, var(--linen) 0%, var(--linen) 64%, rgba(242,242,240,.85) 80%, rgba(242,242,240,0) 100%);}
  .cta__photo{display:none;}
}
@media (max-width:560px){
  .ftr__top{grid-template-columns:1fr;}
  .ftr__social{grid-column:1;justify-self:start;}
  .hero{min-height:auto;}
  .form__row{grid-template-columns:1fr;}
  /* stack the footer menu; tighter spacing + smaller type */
  .ftr__nav{flex-direction:column;gap:9px;align-items:flex-start;}
  .ftr__nav a{font-size:13px;}
}

/* ============================================================
   Reveal animation
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}

/* hero line reveal (fade-up) — gated on .js so content is visible without JS */
.js .hero__title .ln > span{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease), transform 1.1s var(--ease);}
.hero.in .hero__title .ln > span{opacity:1;transform:none;}
.hero.in .hero__title .ln:nth-child(2) > span{transition-delay:.13s;}
/* hero entrance — mark + title animate in; the two-sides intro stays static */
.js .hero__mark{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s;}
.hero.in .hero__mark{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
  .reveal,.hero__title .ln>span,.hero__mark{opacity:1 !important;transform:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* Page openings render in their final position immediately — no entrance
   animation on load. The .reveal scroll-as-you-go reveals stay unchanged. */
.hero__title .ln>span,.hero__mark,
.subhero__eye,.subhero__title,.subhero__body,
.abt-hero__title,.abt-hero__lede,.abt-hero__actions,.abt-hero__photo{opacity:1 !important;transform:none !important;transition:none !important;}
.hero.in .hero__title .ln:nth-child(2) > span{transition-delay:0s !important;}