/* ==========================================================================
   INNER COMPASS — website design system
   Built from the Inner Compass Brand Bible.
   Palette, type, components and motion below map directly to bible sections
   04 Visual Identity (mark, color, type, texture) and 05 (layout, motion).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Primary palette */
  --sage:#A3B18A;
  --deep-sage:#7E8E66;
  --dusty-rose:#E8C4CE;
  --rose:#C77B8E;
  --cream:#F2EBDD;
  --espresso:#4A3829;
  --ink:#3D2E22;
  --taupe:#8C7A68;
  --line:#DCD0BE;

  /* Secondary palette */
  --oat:#E4D9C4;
  --moss:#5C6E4A;
  --blush:#F6E9E6;
  --charcoal:#2A211A;

  /* Surfaces */
  --bg:var(--cream);
  --bg-alt:var(--oat);
  --bg-dark:var(--espresso);
  --bg-darker:var(--charcoal);

  /* Type */
  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Quicksand', 'Trebuchet MS', Verdana, sans-serif;

  /* Rhythm */
  --radius-pill:999px;
  --radius-sm:4px;
  --container:1180px;
  --container-narrow:760px;
  --gutter:clamp(20px, 5vw, 56px);

  /* Motion — "a slow exhale," per the bible's Motion & Interaction page */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:220ms;
  --dur-med:340ms;
  --dur-slow:900ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--espresso);
  font-weight:600;
  line-height:1.18;
  margin:0 0 .5em 0;
}
h1{ font-size:clamp(2.4rem, 5vw, 4rem); font-weight:500; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.7rem); }
h4{ font-size:1.15rem; font-style:italic; font-weight:500; color:var(--rose); }
p{ margin:0 0 1.1em 0; }
p:last-child{ margin-bottom:0; }

.italic{ font-family:var(--font-display); font-style:italic; }
.serif{ font-family:var(--font-display); }

/* Body copy on dark surfaces */
.on-dark, .on-dark p{ color:var(--blush); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--cream); }
.on-dark h4{ color:var(--dusty-rose); }

/* ---------- Layout helpers ---------- */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.wrap-narrow{
  max-width:var(--container-narrow);
  margin:0 auto;
  padding:0 var(--gutter);
}
section{ position:relative; }
.section{ padding:clamp(64px, 10vw, 128px) 0; }
.section-tight{ padding:clamp(40px, 6vw, 72px) 0; }

.grid{ display:grid; gap:clamp(28px, 4vw, 56px); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
@media(min-width:680px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media(min-width:900px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
}

.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }

/* ---------- Eyebrow / dividers / labels ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:600;
  color:var(--taupe);
  margin-bottom:.9em;
}
.on-dark .eyebrow{ color:var(--dusty-rose); }

.divider{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:18px 0 30px 0;
}
.divider.left{ justify-content:flex-start; }
.divider .bar{ height:1px; width:56px; background:var(--line); }
.divider .cross{ color:var(--taupe); font-family:var(--font-display); font-size:1rem; }
.on-dark .divider .bar{ background:#5a4c3d; }

.tagline{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--rose);
  font-size:clamp(1.15rem, 2vw, 1.5rem);
}
.on-dark .tagline{ color:var(--dusty-rose); }

.lede{ font-size:1.15rem; line-height:1.7; color:var(--espresso); }

/* Quote / box */
.box{
  border:1px solid var(--dusty-rose);
  background:var(--blush);
  padding:clamp(22px,4vw,36px);
  border-radius:var(--radius-sm);
}
.box p{
  margin:0; font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.1rem, 2vw, 1.4rem); color:var(--espresso); line-height:1.55;
}
.box p.on-dark, .on-dark .box p{ color:var(--cream); }

/* Hairline card */
.card{
  border:1px solid var(--line);
  background:transparent;
  padding:clamp(24px,3vw,34px);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.card:hover{ border-color:var(--rose); background:rgba(232,196,206,.12); }
.card .small-cap{ display:block; margin-bottom:.6em; }

.small-cap{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px;
  border-radius:var(--radius-pill);
  font-size:.95rem; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--espresso);
  color:var(--espresso);
  background:transparent;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--espresso); color:var(--cream); }
.btn-primary:hover{ background:var(--charcoal); border-color:var(--charcoal); }
.btn-ghost:hover{ background:var(--espresso); color:var(--cream); }
.btn-rose{ border-color:var(--rose); color:var(--rose); }
.btn-rose:hover{ background:var(--rose); color:#fff; }
.on-dark .btn{ border-color:var(--dusty-rose); color:var(--cream); }
.on-dark .btn:hover{ background:var(--dusty-rose); color:var(--espresso); }

.link-underline{
  position:relative; padding-bottom:2px;
}
.link-underline::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right var(--dur-med) var(--ease);
}
.link-underline:hover::after{ right:0; }

/* ---------- Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(242,235,221,.92);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:12px var(--gutter);
  max-width:var(--container);
  margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.brand img{ width:32px; height:32px; }
.brand-word{ font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--espresso); white-space:nowrap; }

.nav-links{ display:none; align-items:center; gap:22px; flex-wrap:nowrap; flex:1; justify-content:center; }
.nav-links a{
  font-size:.86rem; letter-spacing:.02em; color:var(--ink);
  padding:6px 2px; position:relative; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--rose); transition:right var(--dur-med) var(--ease);
}
.nav-links a:hover{ color:var(--espresso); }
.nav-links a:hover::after{ right:0; }
.nav-links a.current{ color:var(--rose); }

.nav-cta{ display:none; flex-shrink:0; white-space:nowrap; padding:7px 15px; font-size:.76rem; letter-spacing:0; }

.nav-toggle{
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
}
.nav-toggle span{
  width:24px; height:1.5px; background:var(--espresso);
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-panel{
  max-height:0; overflow:hidden; background:var(--cream);
  border-bottom:1px solid var(--line);
  transition:max-height var(--dur-med) var(--ease);
}
.mobile-panel.open{ max-height:420px; }
.mobile-panel .wrap{ padding-top:8px; padding-bottom:22px; display:flex; flex-direction:column; gap:4px; }
.mobile-panel a{
  padding:12px 4px; font-size:1.05rem; border-bottom:1px dotted var(--line);
  font-family:var(--font-display);
}
.mobile-panel .btn{ margin-top:14px; align-self:flex-start; }

@media(min-width:860px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-panel{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:clamp(70px,12vw,140px) 0 clamp(60px,9vw,110px);
  overflow:hidden;
  text-align:center;
}
.hero-mark{ width:74px; height:74px; margin:0 auto 22px; }
.hero h1{ max-width:15ch; margin-left:auto; margin-right:auto; }
.hero .tagline{ margin-top:4px; }
.hero .lede{ max-width:52ch; margin:20px auto 0; color:var(--taupe); }
.hero-actions{ margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* Ambient moon: two phases cross-fade very slowly, "felt more than seen" */
.moon-ambient{
  position:absolute; pointer-events:none; opacity:.5;
}
.moon-ambient svg{ position:absolute; inset:0; }
.moon-ambient .phase-b{ opacity:0; }
.moon-anim .moon-ambient .phase-a{ animation:moonfade 16s ease-in-out infinite; }
.moon-anim .moon-ambient .phase-b{ animation:moonfade 16s ease-in-out infinite reverse; }
@keyframes moonfade{
  0%,40%{ opacity:1; }
  50%,90%{ opacity:0; }
  100%{ opacity:1; }
}

/* Grain + watermark texture, per Textures & Surface Treatment */
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.watermark{
  position:absolute; opacity:.05; pointer-events:none; filter:invert(1);
}
.on-dark .watermark{ filter:none; opacity:.06; }

/* ---------- Section dividers (dark, full-bleed statement bands) ---------- */
.band{
  background:var(--bg-dark); color:var(--cream); position:relative; overflow:hidden;
}
.band-charcoal{ background:var(--bg-darker); }
.band .wrap{ position:relative; z-index:1; }

/* ---------- Scroll reveal ----------
   Content is visible by default (no-JS, slow connections, script errors all
   still get a fully readable page). JS adds .reveal-pending only when it has
   successfully attached an IntersectionObserver, then removes it on scroll
   into view. This is progressive enhancement, never a hiding mechanism. */
.reveal{
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.reveal-pending{ opacity:0; transform:translateY(14px); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-1{ transition-delay:80ms; }
.reveal-2{ transition-delay:160ms; }
.reveal-3{ transition-delay:240ms; }
.reveal-4{ transition-delay:320ms; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal.reveal-pending{ opacity:1; transform:none; transition:none; }
  .moon-ambient .phase-a, .moon-ambient .phase-b{ animation:none !important; opacity:1; }
  .moon-ambient .phase-b{ display:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Pillars / offers ---------- */
.pillar{ padding:26px 4px; border-top:1px solid var(--line); }
.pillar .small-cap{ color:var(--rose); }

.offer-card{
  border:1px solid var(--line); padding:30px 26px; border-radius:var(--radius-sm);
  display:flex; flex-direction:column; gap:10px; height:100%;
  transition:transform var(--dur-med) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.offer-card:hover{ border-color:var(--rose); transform:translateY(-4px); }
.offer-card .price{ font-family:var(--font-display); font-size:1.6rem; color:var(--espresso); margin-top:auto; }
.offer-card.featured{ background:var(--bg-dark); color:var(--cream); border-color:var(--bg-dark); }
.offer-card.featured h3, .offer-card.featured .price{ color:var(--cream); }
.offer-card.featured p{ color:var(--blush); }

/* ---------- Moon phase diagram ---------- */
.moon-phase{
  border:1px solid var(--line); padding:30px 18px; text-align:center; border-radius:var(--radius-sm);
}
.moon-phase svg{ width:56px; height:56px; }

/* ---------- Icon strip (nature & elemental symbols) ---------- */
.icon-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,52px); }
.icon-strip .icon-item{ text-align:center; width:70px; }
.icon-strip svg{ width:38px; height:38px; }
.icon-strip img{ width:46px; height:auto; margin:0 auto; }
.icon-strip .small-cap{ margin-top:8px; display:block; }

/* ---------- Founder cards ---------- */
.founder{
  display:flex; flex-direction:column; gap:16px; text-align:left;
}
.founder-badge{
  width:120px; height:120px; border-radius:50%;
  background:var(--bg-dark); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-size:2.1rem;
  border:1px solid var(--rose);
  flex-shrink:0;
}
.founder-photo{
  object-fit:cover; object-position:center 25%;
}
.founders-teaser-photo{
  width:100%; max-width:460px; height:auto;
  border-radius:10px; border:1px solid var(--rose);
  box-shadow:0 18px 40px -22px rgba(74,56,41,.35);
}

/* ---------- Table (offers detail) ---------- */
.table{ width:100%; border-collapse:collapse; }
.table th{
  text-align:left; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem;
  color:var(--taupe); padding:10px 12px; border-bottom:1px solid var(--line);
}
.table td{ padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.table tr:last-child td{ border-bottom:none; }

/* ---------- Form ---------- */
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:.85rem; letter-spacing:.03em; color:var(--espresso); font-weight:600; }
.field input, .field textarea, .field select{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(199,123,142,.15);
}
.field textarea{ min-height:140px; resize:vertical; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

.form-note{ font-size:.85rem; color:var(--taupe); }
.form-status{ display:none; margin-top:18px; padding:16px 18px; border-radius:var(--radius-sm); font-size:.95rem; }
.form-status.show{ display:block; }
.form-status.ok{ background:var(--blush); border:1px solid var(--dusty-rose); color:var(--espresso); }
.form-status.err{ background:#fbeceb; border:1px solid var(--rose); color:var(--espresso); }

/* Pulsing compass dot loading state, per Motion & Interaction */
.dot-loading{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--rose); margin-right:8px; vertical-align:middle;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.35; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1); }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-dark); color:#EFE6D6; position:relative; overflow:hidden; }
.site-footer .wrap{ padding-top:clamp(48px,7vw,72px); padding-bottom:28px; }
.footer-grid{ display:grid; gap:36px; grid-template-columns:1fr; }
@media(min-width:720px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-brand .brand-word{ color:#EFE6D6; font-size:1.4rem; }
.footer-brand .tagline{ margin-top:8px; }
.footer-col-label{
  text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color:#a8927a; margin-bottom:14px;
}
.footer-col a{
  display:block; margin-bottom:10px; font-size:.92rem; color:#EFE6D6;
  transition:color var(--dur-fast) var(--ease);
}
.footer-col a:hover{ color:var(--dusty-rose); }
.footer-bottom{
  border-top:1px solid #5a4c3d; margin-top:34px; padding-top:18px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-size:.78rem; color:#a8927a;
}
.footer-disclaimer{
  max-width:70ch; font-size:.78rem; color:#a8927a; margin-top:14px; line-height:1.6;
}

/* ---------- Misc ---------- */
.mt-0{ margin-top:0; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--espresso); color:#fff;
  padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:12px; top:12px; }

hr.hairline{ border:none; border-top:1px solid var(--line); margin:0; }