/* Holistic Helpers Development Center — coming soon
   Palette sampled from the logo artwork. Type: Fraunces + Inter, self-hosted. */

@font-face{
  font-family:'Fraunces';
  src:url('../fonts/Fraunces-var.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/Inter-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
/* Metric-matched fallbacks so the swap does not shift layout. */
@font-face{
  font-family:'Fraunces Fallback';src:local('Georgia');
  size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';src:local('Arial');
  size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%;
}

:root{
  --forest:#14452F;
  --leaf:#3F7D3A;
  --purple:#6B2FA0;
  --teal:#1B6E86;
  --cream:#FBF7EF;
  --sand:#F0E9DC;
  --stone:#D9D2C6;
  --ink:#14201B;
  --on-photo:#fff;
  --cta-bg:#14452F;
  --cta-fg:#FBF7EF;
  --cta-bg-hover:#3F7D3A;
  --focus:#1B6E86;
  --error:#B3261E;

  --serif:'Fraunces','Fraunces Fallback',Georgia,serif;
  --sans:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;

  --s--1:clamp(.875rem,.83rem + .19vw,1rem);
  --s-0:clamp(1rem,.93rem + .30vw,1.1875rem);
  --s-2:clamp(1.75rem,1.36rem + 1.66vw,2.75rem);
  --s-3:clamp(2.25rem,1.42rem + 3.52vw,4.5rem);

  --r:.6rem;
  --gutter:clamp(1.25rem,4vw,4.5rem);

  /* driven by JS, only read under .is-live */
  --veil-o:0;--veil-b:0px;--copy-o:1;--copy-y:0px;
  --photo-s:1;--wm-o:1;--wm-y:0px;--s2-o:0;--s2-y:48px;
  --mark-o:0;--mark-s:.92;--tag-o:0;--tag-y:24px;
  --form-o:0;--form-y:24px;--fine-o:0;--fine-y:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.hhdc-body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:var(--s-0);line-height:1.5;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cream);color:var(--ink);padding:.9rem 1.4rem;border-radius:var(--r);
  font:500 var(--s--1)/1 var(--sans);
}
.skip:focus{left:1rem;top:1rem;}

:where(a,button,input):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:4px;
}

/* honeypot — off-screen, not display:none, so bots still see it */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;z-index:20;
  top:clamp(.75rem,2vw,1.6rem);left:clamp(.75rem,2vw,1.6rem);right:clamp(.75rem,2vw,1.6rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .5rem .5rem 1.1rem;border-radius:var(--r);
  background:color-mix(in srgb,var(--cream) 90%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--forest) 8%,transparent),
             0 2px 40px rgb(20 32 27 / .10);
  transition:opacity .26s ease,visibility .26s ease,transform .26s ease;
}
body[data-scrolled="down"] .nav{opacity:0;visibility:hidden;transform:translateY(-.7rem);}
.nav__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);min-width:0;}
.nav__mark{width:38px;height:38px;flex:none;}
.nav__name{display:flex;flex-direction:column;line-height:1.05;min-width:0;}
.nav__name b{font:600 .95rem/1.1 var(--serif);font-variation-settings:'SOFT' 40,'opsz' 20;letter-spacing:-.01em;}
.nav__name span{
  font:500 .60rem/1.1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-top:.18rem;
}
.nav__cta{
  flex:none;display:inline-flex;align-items:center;height:2.6rem;padding:0 1.15rem;
  border-radius:.45rem;background:var(--cta-bg);color:var(--cta-fg);
  font:500 var(--s--1)/1 var(--sans);text-decoration:none;letter-spacing:-.01em;
  transition:background-color .24s ease;
}
.nav__cta:hover{background:var(--cta-bg-hover);}

/* ================================================================
   BASE = static, stacked, fully readable. No JavaScript required.
   If the script is blocked or throws, this is what visitors get:
   two readable sections and a working form. Effect is opt-in below.
   ================================================================ */
.hero{position:relative;width:100%;}
.hero__track{width:100%;}
.scene{position:relative;width:100%;min-height:100svh;}
.scene--2{background:var(--cream);}

.scene__bg{position:absolute;inset:0;overflow:clip;}
.scene__bg img{
  width:100%;height:100%;object-fit:cover;
  object-position:64% 46%;transform-origin:64% 46%;
}
/* Directional, forest-tinted scrim anchored to the copy. A flat wash would
   flatten the photograph, and a black scrim over warm tones goes muddy. */
.scene__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,
      color-mix(in srgb,var(--forest) 74%,transparent) 0%,
      color-mix(in srgb,var(--forest) 36%,transparent) 38%,
      transparent 74%),
    linear-gradient(to right,
      color-mix(in srgb,var(--forest) 50%,transparent) 0%,
      color-mix(in srgb,var(--forest) 12%,transparent) 42%,
      transparent 62%);
}

.scene__inner{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  padding:clamp(6.5rem,12vh,9.5rem) var(--gutter) clamp(1.5rem,4vh,3rem);
}

.hero__copy{max-width:42rem;color:var(--on-photo);}
.hero__copy h1{
  margin:0;font-family:var(--serif);font-size:var(--s-3);font-weight:400;
  font-variation-settings:'SOFT' 40,'WONK' 0,'opsz' 100;
  line-height:1.06;letter-spacing:-.022em;text-wrap:balance;
  text-shadow:0 1px 26px rgb(20 32 27 / .42);
}
.hero__copy p{
  margin:1.15rem 0 0;max-width:33rem;font-size:var(--s-0);
  color:color-mix(in srgb,var(--on-photo) 92%,transparent);
  text-shadow:0 1px 18px rgb(20 32 27 / .38);
}

.cta{
  display:inline-flex;align-items:center;gap:.85rem;
  margin-top:1.9rem;min-height:3.25rem;padding:0 1.5rem;
  border:0;border-radius:var(--r);background:var(--cream);color:var(--ink);
  font:500 var(--s--1)/1 var(--sans);letter-spacing:-.01em;text-decoration:none;
  cursor:pointer;transition:background-color .24s ease;
}
.cta:hover{background:var(--stone);}
.cta__dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--purple);flex:none;}
.cta__arrow{width:1rem;height:1rem;flex:none;margin-left:.3rem;}

/* Only meaningful inside the pinned hero, over the photograph. */
.wordmark,.veil,.hint{display:none;}

/* ---------------- scene 2 ---------------- */
.scene--2 .scene__inner{
  align-items:center;justify-content:center;text-align:center;padding-inline:var(--gutter);
}
.s2{display:flex;flex-direction:column;align-items:center;max-width:38rem;width:100%;}
.s2__mark{width:clamp(76px,11vw,128px);height:auto;}
.s2__eyebrow{
  margin:1.4rem 0 0;font:500 .72rem/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
}
.s2__tagline{
  margin:.85rem 0 0;font-family:var(--serif);font-weight:400;
  font-variation-settings:'SOFT' 40,'opsz' 60;
  font-size:var(--s-2);line-height:1.12;letter-spacing:-.02em;
  color:var(--forest);text-wrap:balance;
}
.s2__tagline i{font-style:italic;color:var(--purple);}
.s2__lead{
  margin:1rem 0 0;max-width:30rem;font-size:var(--s--1);
  color:color-mix(in srgb,var(--ink) 74%,transparent);
}

.form{margin-top:1.9rem;width:100%;max-width:31rem;display:flex;flex-wrap:wrap;gap:.55rem;}
.form > label[for="hhdc-email"]{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.form input[type=email]{
  flex:1 1 15rem;min-width:0;min-height:3.25rem;padding:0 1.15rem;
  border:0;border-radius:var(--r);
  background:color-mix(in srgb,var(--cream) 94%,transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--forest) 16%,transparent);
  font:400 var(--s--1)/1 var(--sans);color:var(--ink);
}
.form input[type=email]::placeholder{color:color-mix(in srgb,var(--ink) 52%,transparent);}
.form input[type=email]:focus-visible{box-shadow:inset 0 0 0 2px var(--focus);}
.form button{
  flex:none;min-height:3.25rem;padding:0 1.6rem;border:0;border-radius:var(--r);
  background:var(--cta-bg);color:var(--cta-fg);
  font:500 var(--s--1)/1 var(--sans);letter-spacing:-.01em;
  cursor:pointer;transition:background-color .24s ease;
}
.form button:hover{background:var(--cta-bg-hover);}
.form button[disabled]{opacity:.6;cursor:wait;}
.form__msg{
  flex:1 0 100%;margin:.2rem 0 0;font-size:var(--s--1);
  color:var(--forest);min-height:1.3em;
}
.form__msg[data-state="error"]{color:var(--error);}
.fineprint{
  margin:1.05rem 0 0;font-size:.8rem;
  color:color-mix(in srgb,var(--ink) 58%,transparent);
}

/* ================================================================
   .is-live — the pinned scroll effect. Added by JS only at >=768px
   with no reduced-motion preference.
   ================================================================ */
.is-live .hero{min-height:200vh;min-height:200svh;overflow:clip;}
/* overflow:clip, never hidden — `hidden` creates a scroll container, and a
   scroll-container ancestor silently kills position:sticky on a descendant. */
.is-live .hero__track{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;}
.is-live .scene{position:absolute;inset:0;height:100%;min-height:0;}
.is-live .scene__inner{height:100%;min-height:0;}
/* svh for the track (constant during scroll, unlike dvh which resizes as the
   mobile URL bar collapses); lvh for the photo so it always overfills. */
.is-live .scene__bg img{height:100lvh;min-height:100%;transform:scale(var(--photo-s));}

.is-live .hero__copy{opacity:var(--copy-o);transform:translateY(var(--copy-y));}

.is-live .wordmark{
  display:block;margin-top:auto;color:var(--on-photo);
  font-family:var(--serif);font-weight:300;
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 144;
  font-size:clamp(3.2rem,12.4vw,11.5rem);
  line-height:.86;letter-spacing:-.035em;
  opacity:var(--wm-o);transform:translateY(var(--wm-y));
  text-shadow:0 2px 60px rgb(20 32 27 / .30);
  user-select:none;
}
.is-live .wordmark em{font-style:italic;font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;}

.is-live .veil{
  display:block;position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:var(--veil-o);
  background-color:color-mix(in srgb,transparent,var(--cream) 70%);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .is-live .veil{-webkit-backdrop-filter:blur(var(--veil-b));backdrop-filter:blur(var(--veil-b));}
}

.is-live .scene--2{
  z-index:4;background:none;pointer-events:none;
  opacity:var(--s2-o);transform:translateY(var(--s2-y));
}
/* .is-live sits on <html>, data-scene2 on <body> — descend, never try to match
   both on one element or the form never becomes clickable. */
.is-live body[data-scene2="live"] .scene--2{pointer-events:auto;}

.is-live .s2__mark{opacity:var(--mark-o);transform:scale(var(--mark-s));}
.is-live .s2__eyebrow,
.is-live .s2__tagline,
.is-live .s2__lead{opacity:var(--tag-o);transform:translateY(var(--tag-y));}
.is-live .form{opacity:var(--form-o);transform:translateY(var(--form-y));}
.is-live .fineprint{opacity:var(--fine-o);transform:translateY(var(--fine-y));}

.is-live .hint{
  display:flex;position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);
  z-index:5;align-items:center;gap:.5rem;
  font:500 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-photo) 78%,transparent);
  pointer-events:none;transition:opacity .3s ease;
}
.hint__line{
  display:block;width:1px;height:26px;background:currentColor;opacity:.5;
  animation:hhdc-drift 2.1s ease-in-out infinite;transform-origin:top;
}
@keyframes hhdc-drift{0%,100%{transform:scaleY(.35);opacity:.25}50%{transform:scaleY(1);opacity:.7}}

@media (max-width:767px){
  .nav__name span{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .hint__line{animation:none;}
  *{transition-duration:.01ms!important;}
}