/* ===========================================================
   Percy — Concept 1: "Goodnight / Cozy Home"
   =========================================================== */

:root{
  /* Night greens */
  --pine:        #1F3D2F;
  --pine-deep:   #15301F;
  --pine-deeper: #0F2419;

  /* Cream / beige */
  --cream:       #F3E9D8;
  --cream-2:     #EFE3CE;
  --cream-3:     #F7F0E2;

  /* Accents */
  --mint:        #8FCFAF;
  --mint-soft:   #B9E2CC;
  --amber:       #E8B98A;
  --terracotta:  #D98C5F;

  /* Ink / text */
  --ink:         #14241B;
  --ink-soft:    #3C5145;
  --on-pine:     #F3E9D8;
  --on-pine-soft:#C7D8CC;

  /* Functional */
  --line-cream:  rgba(20,36,27,.10);
  --line-pine:   rgba(243,233,216,.14);
  --shadow-soft: 0 18px 40px -22px rgba(15,36,25,.45);
  --shadow-card: 0 10px 30px -18px rgba(15,36,25,.35);
  --glow-amber:  0 0 60px 12px rgba(232,185,138,.45);

  /* Radii */
  --r-xs: 10px;  --r-sm: 16px;  --r-md: 22px;  --r-lg: 32px;
  --r-xl: 44px;  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;
}

/* -------- Reset / base -------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; font-family:var(--font-display); text-wrap:balance; }
p{ margin:0; }

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

.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--mint); color:var(--pine-deep);
  padding:10px 18px; border-radius:var(--r-pill); font-weight:700;
}
.skip-link:focus{ left:12px; }

:where(a,button,input,[tabindex]):focus-visible{
  outline:3px solid var(--mint); outline-offset:3px; border-radius:6px;
}

/* -------- Typography helpers -------- */
.eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--terracotta);
  margin-bottom:var(--s-4);
}
.section--pine .eyebrow,
.section--pine-deep .eyebrow,
.hero .eyebrow{ color:var(--mint); }
.eyebrow--center{ text-align:center; }

.section__title{
  font-size:clamp(2rem,4vw,3.1rem); font-weight:600; line-height:1.1;
  letter-spacing:-.01em;
}
.section__lead{
  font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.6;
  color:var(--ink-soft); max-width:64ch; margin-top:var(--s-5);
}
.section--pine .section__lead,
.section--pine-deep .section__lead{ color:var(--on-pine-soft); }
.section__lead--center{ margin-inline:auto; max-width:56ch; }

/* -------- Buttons -------- */
.btn{
  font-family:var(--font-body); font-weight:700; font-size:1rem;
  border-radius:var(--r-pill); padding:14px 26px; line-height:1;
  display:inline-flex; gap:8px; align-items:center; border:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease,
             color .2s ease, border-color .2s ease, filter .2s ease;
  cursor:pointer;
}
.btn--primary{
  background:var(--mint); color:var(--pine-deep);
  box-shadow:0 10px 24px -12px rgba(143,207,175,.8);
}
.btn--primary:hover{
  transform:translateY(-2px); filter:brightness(1.04);
  box-shadow:0 14px 30px -12px rgba(143,207,175,.95);
}
.btn--ghost{
  background:transparent; color:var(--on-pine);
  border:1.5px solid var(--line-pine);
}
.btn--ghost:hover{ border-color:var(--mint); color:var(--mint); }
.section--cream .btn--ghost,
.section--cream2 .btn--ghost{ color:var(--ink); border-color:var(--line-cream); }
.btn__moon{ flex:none; }

/* ===========================================================
   NAV
   =========================================================== */
.site-header{ position:sticky; top:0; z-index:50; }
.nav{
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  background:transparent;
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:var(--s-4) var(--gutter);
  display:flex; align-items:center; gap:var(--s-5);
}
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand__mark{
  width:34px; height:34px; color:var(--mint); display:inline-flex;
  filter:drop-shadow(0 0 6px rgba(143,207,175,.5));
}
.brand__mark svg{ width:100%; height:100%; }
.brand__word{
  font-family:var(--font-display); font-weight:600; font-size:1.45rem;
  letter-spacing:-.01em; color:var(--on-pine);
}

.nav__menu{
  margin-left:auto; display:flex; align-items:center; gap:var(--s-6);
}
.nav__links{ display:flex; gap:var(--s-5); align-items:center; }
.nav__links a{
  font-weight:600; font-size:.98rem; color:var(--on-pine);
  position:relative; padding:4px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-2px; height:2px;
  background:var(--mint); border-radius:2px; transition:left .25s ease, right .25s ease;
}
.nav__links a:hover{ color:var(--mint); }
.nav__links a:hover::after{ left:0; right:0; }
.nav__ctas{ display:flex; gap:var(--s-3); align-items:center; }
.nav__ctas .btn{ padding:11px 20px; font-size:.95rem; }

/* scrolled state */
.nav--scrolled{
  background:rgba(247,240,226,.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-cream);
  box-shadow:var(--shadow-card);
}
.nav--scrolled .brand__word,
.nav--scrolled .nav__links a{ color:var(--ink); }
.nav--scrolled .nav__links a:hover{ color:var(--pine); }
.nav--scrolled .btn--ghost{ color:var(--ink); border-color:var(--line-cream); }
.nav--scrolled .nav__toggle{ color:var(--pine); }

.nav__toggle{
  display:none; margin-left:auto; background:transparent; border:none;
  color:var(--mint); cursor:pointer; padding:6px; border-radius:var(--r-sm);
}
.nav__toggle svg path{ transition:transform .3s ease, opacity .3s ease; transform-origin:center; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--pine-deeper) 0%,var(--pine) 100%);
  color:var(--on-pine);
  padding-block:clamp(96px,12vw,150px) clamp(72px,10vw,128px);
  margin-top:-72px; padding-top:calc(clamp(96px,12vw,150px));
}
.hero__sky{ position:absolute; inset:0; pointer-events:none; }
.sky-star{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--mint-soft); opacity:.5;
  box-shadow:0 0 8px 2px rgba(185,226,204,.5);
  animation:twinkle 4s ease-in-out infinite; animation-delay:var(--d,0s);
}
.sky-star--sm{ width:4px; height:4px; }

.hero__grid{
  position:relative; display:grid; gap:var(--s-8); align-items:center;
  grid-template-columns:1.05fr 1fr;
}
.hero__title{
  font-size:clamp(2.6rem,6vw,4.6rem); font-weight:600; line-height:1.04;
  letter-spacing:-.01em; margin-bottom:var(--s-5);
}
.hero__title span{ display:block; color:var(--mint-soft); }
.hero__lead{
  font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.6;
  color:var(--on-pine-soft); max-width:60ch;
  border-left:3px solid var(--mint); padding-left:16px;
  margin-bottom:var(--s-6);
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-6); }
.hero__ctas--center{ justify-content:center; }

.trustline{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.trustline li,.cred-pills li{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:700; letter-spacing:.02em;
  color:var(--on-pine-soft);
  background:rgba(143,207,175,.10); border:1px solid var(--line-pine);
  padding:8px 14px; border-radius:var(--r-pill);
}
.chk{ width:16px; height:16px; flex:none; color:var(--mint); }

/* hero scene */
.hero__art{ justify-self:center; width:100%; max-width:560px; }
.hero-scene{ width:100%; height:auto; filter:drop-shadow(var(--shadow-soft)); border-radius:28px; }

/* ===========================================================
   SECTIONS
   =========================================================== */
.section{ padding-block:clamp(72px,10vw,128px); }
.section--cream{ background:var(--cream); color:var(--ink); }
.section--cream2{ background:var(--cream-2); color:var(--ink); }
.section--pine{ background:var(--pine); color:var(--on-pine); }
.section--pine-deep{ background:var(--pine-deep); color:var(--on-pine); }

.section__head{ margin-bottom:var(--s-8); max-width:740px; }
.section__head--center{ margin-inline:auto; text-align:center; }

/* -------- How it works -------- */
.howgrid{
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(3,1fr); align-items:stretch;
}
.howcard{
  position:relative;
  background:var(--cream-3); border:1px solid var(--line-cream);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:var(--s-6); transition:transform .35s ease, box-shadow .35s ease;
}
.howcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.step-chip{
  position:absolute; top:var(--s-5); right:var(--s-5);
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  color:var(--mint); background:rgba(143,207,175,.14);
  padding:4px 12px; border-radius:var(--r-pill);
}
.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:var(--r-md);
  background:rgba(232,185,138,.18); color:var(--mint);
  box-shadow:inset 0 0 18px -8px rgba(232,185,138,.7);
  margin-bottom:var(--s-4);
}
.howcard__title{ font-size:1.2rem; font-weight:600; line-height:1.25; margin-bottom:var(--s-3); }
.howcard p{ color:var(--ink-soft); }
.how-foot{
  text-align:center; margin-top:var(--s-7);
  font-size:.95rem; color:var(--ink-soft);
}

/* -------- 80% proof -------- */
.proof__grid{
  display:grid; gap:var(--s-8); align-items:center;
  grid-template-columns:1fr 1fr;
}
.proof__stat{ position:relative; }
.proof__wave{
  position:absolute; top:30%; left:-5%; width:110%; height:90px;
  z-index:0; animation:wave-drift 14s linear infinite;
}
.bignum{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(4rem,12vw,8rem); line-height:.9;
  color:var(--amber); text-shadow:var(--glow-amber);
}
.proof__statline{
  position:relative; z-index:1;
  font-size:clamp(1.35rem,2.4vw,1.8rem); font-weight:600; line-height:1.2;
  color:var(--on-pine); margin-top:var(--s-3);
}
.proof__caption{ position:relative; z-index:1; color:var(--on-pine-soft); margin-top:var(--s-4); font-size:.95rem; }
.proof__copy p{ color:var(--on-pine-soft); }
.cred-pills{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-block:var(--s-5); }
.cred-pills li{ background:transparent; border:1px solid var(--mint); color:var(--on-pine); }
.proof__cleared{ font-size:.9rem; color:var(--on-pine-soft); font-weight:600; }
.proof__cleared--center{ text-align:center; margin-top:var(--s-7); }

/* -------- Vignettes -------- */
.vignettes{
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.vignette{
  background:var(--cream-3); border:1px solid var(--line-cream);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:var(--s-4); transition:transform .35s ease, box-shadow .35s ease;
}
.vignette:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.vignette:hover .scene-zzz,
.vignette:hover .scene-star{ animation-duration:2.2s; }
.mini{ width:100%; height:auto; border-radius:var(--r-md); }
.vignette__cap{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin-top:var(--s-3); padding-inline:6px;
}
.vignette__name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); }
.vignette__mood{ font-size:.82rem; font-weight:700; color:var(--mint); letter-spacing:.03em; }

/* -------- Industries -------- */
.industries{ margin-top:var(--s-9); text-align:center; }
.tags{ display:flex; flex-wrap:wrap; gap:var(--s-3); justify-content:center; }
.tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cream-3); border:1px solid var(--mint);
  color:var(--ink); font-weight:600; font-size:.92rem;
  padding:9px 18px; border-radius:var(--r-pill);
  transition:background .25s ease;
}
.tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mint); }
.tag:hover{ background:rgba(143,207,175,.18); }

/* -------- Investors -------- */
.investors{
  display:flex; flex-wrap:wrap; gap:var(--s-6); justify-content:center; align-items:center;
  background:rgba(243,233,216,.05); border:1px solid var(--line-pine);
  border-radius:var(--r-xl); padding:var(--s-7) var(--s-6);
}
.inv{
  display:inline-flex; align-items:center; gap:var(--s-3);
  min-height:64px; padding:var(--s-4) var(--s-5);
}
.inv--text,.inv--stack{
  border:1px solid var(--line-pine); border-radius:var(--r-lg);
  background:rgba(243,233,216,.04);
}
.inv__ts{
  height:36px; width:auto; opacity:.95; transition:opacity .25s ease;
  /* cream-svg main wordmark has no fill (renders dark); force cream on dark bg */
  filter:brightness(0) saturate(100%) invert(96%) sepia(8%) saturate(420%) hue-rotate(345deg) brightness(98%);
}
.inv--logo:hover .inv__ts{ opacity:1; }
.year-chip{
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  color:var(--pine-deep); background:var(--mint);
  padding:3px 10px; border-radius:var(--r-pill);
}
.inv__word{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--on-pine); }
.inv--stack{ flex-direction:column; gap:2px; align-items:flex-start; }
.inv__mit{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--on-pine); line-height:1; }
.inv__sub{ font-size:.9rem; color:var(--on-pine-soft); font-weight:600; }

/* -------- Team -------- */
.team__grid{
  display:grid; gap:var(--s-8); align-items:center;
  grid-template-columns:300px 1fr;
}
.team__portrait{
  width:280px; max-width:100%; justify-self:center;
}
.team__portrait svg{
  width:100%; height:auto; border-radius:50%;
  box-shadow:var(--shadow-card); background:var(--cream-3);
}
.team__name{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.35rem,2.4vw,1.8rem); margin-top:var(--s-4); }
.team__name span{ color:var(--ink-soft); font-weight:400; font-size:1.1rem; }
.team__creds{ color:var(--mint); font-weight:700; font-size:.9rem; letter-spacing:.04em; margin-block:var(--s-3) var(--s-5); }
.team__bio p{ color:var(--ink-soft); max-width:60ch; }
.pullquote{
  margin:var(--s-6) 0 0; padding:0; position:relative;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.3; color:var(--ink);
  padding-left:var(--s-6);
}
.pullquote span{
  position:absolute; left:0; top:-10px;
  font-size:3rem; color:var(--terracotta); line-height:1;
}

/* -------- Contact -------- */
.section--contact{ text-align:center; }
.contact{ display:flex; flex-direction:column; align-items:center; gap:var(--s-5); }
.contact__motif{ margin-bottom:var(--s-2); }
.contact__email{ color:var(--on-pine-soft); font-weight:600; }
.contact__email a{ color:var(--mint); }
.contact__email a:hover{ text-decoration:underline; text-underline-offset:4px; }
.contact__tag{ font-size:.9rem; color:var(--on-pine-soft); }

/* -------- Footer -------- */
.footer{ position:relative; background:var(--pine-deeper); color:var(--on-pine); padding-top:var(--s-8); }
.footer__stars{ position:absolute; top:8px; left:0; right:0; height:20px; pointer-events:none; }
.footer__stars .sky-star{ top:6px; }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:var(--s-6) var(--s-8); justify-content:space-between;
  padding-block:var(--s-6) var(--s-7);
}
.footer__brand .brand__word{ color:var(--on-pine); }
.footer__tag{ color:var(--on-pine-soft); margin-top:var(--s-3); font-size:.95rem; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-5); align-items:center; }
.footer__nav a{ color:var(--on-pine-soft); font-weight:600; font-size:.95rem; }
.footer__nav a:hover{ color:var(--mint); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6); justify-content:space-between;
  border-top:1px solid var(--line-pine); padding-block:var(--s-5);
  font-size:.85rem; color:var(--on-pine-soft);
}
.footer__goodnight{ display:inline-flex; align-items:center; gap:6px; color:var(--mint); }

/* ===========================================================
   ANIMATIONS / MOTIFS
   =========================================================== */
@keyframes float-moon{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes twinkle{ 0%,100%{ opacity:.35; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.15);} }
@keyframes zzz-rise{
  0%{ opacity:0; transform:translate(0,0) rotate(-6deg);}
  20%{ opacity:.9;}
  100%{ opacity:0; transform:translate(26px,-46px) rotate(8deg);}
}
@keyframes breathe{ 0%,100%{ transform:scaleY(1);} 50%{ transform:scaleY(1.018);} }
@keyframes glow-pulse{ 0%,100%{ opacity:.85;} 50%{ opacity:1;} }
@keyframes wave-drift{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-40px);} }
@keyframes rise-in{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

/* SVG scene motion (applies to inline svg classes) */
.scene-moon{ animation:float-moon 9s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.scene-star,.scene-bulb{ animation:twinkle 4s ease-in-out infinite; animation-delay:var(--d,0s); transform-box:fill-box; transform-origin:center; }
.scene-zzz{ animation:zzz-rise 4.5s linear infinite; animation-delay:var(--d,0s); transform-box:fill-box; transform-origin:center; }
.scene-breathe{ animation:breathe 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.scene-glow{ animation:glow-pulse 6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }
.howgrid .howcard.reveal,
.vignettes .vignette.reveal{ transition-delay:var(--rd,0s); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1024px){
  .proof__grid{ grid-template-columns:1fr; }
  .team__grid{ grid-template-columns:1fr; text-align:center; }
  .team__bio p,.section__lead{ margin-inline:auto; }
  .pullquote{ text-align:left; max-width:60ch; margin-inline:auto; }
}

@media (max-width:860px){
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:var(--s-5);
    background:rgba(247,240,226,.97);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    padding:var(--s-6) var(--gutter) var(--s-7);
    box-shadow:var(--shadow-card);
    max-height:0; overflow:hidden; padding-block:0;
    transition:max-height .35s ease, padding .35s ease;
    margin-left:0;
  }
  .nav__menu.open{ max-height:520px; padding-block:var(--s-6) var(--s-7); }
  .nav__links{ flex-direction:column; align-items:stretch; gap:var(--s-4); }
  .nav__links a{ color:var(--ink); font-family:var(--font-display); font-size:1.4rem; }
  .nav__links a::after{ display:none; }
  .nav__ctas{ flex-direction:column; align-items:stretch; }
  .nav__ctas .btn{ justify-content:center; padding:14px 22px; font-size:1rem; }
  .nav__ctas .btn--ghost{ color:var(--ink); border-color:var(--line-cream); }
  .howgrid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-width:420px; }
  .hero__lead{ font-size:1.1rem; }
  .footer__inner{ flex-direction:column; }
  .vignette__cap{ padding-inline:2px; }
}

/* ===========================================================
   REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}