/* ============================================================
   OctaFlow — warm editorial system (logo-derived palette)
   ============================================================ */
:root{
  /* Paper / ink */
  --paper:        #FAF6EC;   /* warm off-white page bg */
  --paper-2:      #F3ECDA;   /* slightly deeper warm panel */
  --cream:        #FBEFC9;   /* logo butter cream — highlight */
  --cream-deep:   #F6E4A8;   /* deeper butter for accents */
  --ink:          #232020;   /* logo charcoal — primary text */
  --ink-soft:     #4B4540;   /* secondary text */
  --ink-faint:    #8A8175;   /* muted text */
  --line:         #E4DAC4;   /* hairlines on paper */
  --line-soft:    #ECE3D0;
  /* Accent — terracotta that harmonises cream+charcoal */
  --accent:       #C25A3A;
  --accent-deep:  #A6472B;
  --accent-soft:  #E9A982;
  --ok:           #4F7A57;

  --maxw: 1200px;
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(35,32,32,.05), 0 4px 14px rgba(35,32,32,.05);
  --shadow-md: 0 6px 22px rgba(35,32,32,.08), 0 18px 50px rgba(35,32,32,.08);
  --shadow-lg: 0 20px 60px rgba(35,32,32,.14);
  --ease: cubic-bezier(.2,.7,.2,1);
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.8rem); }
h4{ font-size:1.18rem; letter-spacing:-.005em; }
p{ margin:0 0 1.1em; color:var(--ink-soft); text-wrap:pretty; }
p:last-child{margin-bottom:0}
a{color:inherit; text-decoration:none}
strong{font-weight:650; color:var(--ink)}
em{font-style:italic}
::selection{background:var(--accent-soft); color:var(--ink)}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-sans);
  font-size:.78rem; font-weight:650;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-deep);
}
.eyebrow::before{
  content:""; width:26px; height:1.5px; background:var(--accent); display:inline-block;
}
.lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); color:var(--ink-soft); line-height:1.55; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:860px; }
section{ position:relative; }
.section-pad{ padding:clamp(70px,9vw,130px) 0; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-sans); font-weight:600; font-size:1rem;
  padding:.92em 1.5em; border-radius:999px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s;
  will-change:transform; position:relative; line-height:1;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--accent{ --bg:var(--accent); --fg:#fff; }
.btn--accent:hover{ background:var(--accent-deep); }
.btn--ghost{
  --bg:transparent; --fg:var(--ink);
  border-color:var(--ink); 
}
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--light{ --bg:var(--paper); --fg:var(--ink); border-color:var(--line); }
.btn--lg{ font-size:1.08rem; padding:1.05em 1.8em; }

/* text link with animated underline */
.tlink{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-sans); font-size:1rem; border:0; background-color:transparent;
  font-weight:600; color:var(--accent-deep); cursor:pointer;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s var(--ease);
  padding:0 0 2px; white-space:nowrap;
}
.tlink:hover{ background-size:100% 1.5px; }
.tlink .arrow{ transition:transform .3s var(--ease); }
.tlink:hover .arrow{ transform:translateX(3px); }

/* ============================================================
   Scroll-reveal primitives (animation-based — reliable end state)
   ============================================================ */
@keyframes revUp{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
@keyframes revFade{ from{opacity:0} to{opacity:1} }
@keyframes revLeft{ from{opacity:0; transform:translateX(-34px)} to{opacity:1; transform:none} }
@keyframes revRight{ from{opacity:0; transform:translateX(34px)} to{opacity:1; transform:none} }
@keyframes revScale{ from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none} }

[data-reveal]{ opacity:0; will-change:opacity, transform; }
[data-reveal].in{ animation:revUp .8s var(--ease) both; animation-delay:var(--rd, 0ms); }
[data-reveal="fade"].in{ animation-name:revFade; }
[data-reveal="left"].in{ animation-name:revLeft; }
[data-reveal="right"].in{ animation-name:revRight; }
[data-reveal="scale"].in{ animation-name:revScale; }

/* word-by-word headline reveal */
.reveal-words .w{ display:inline-block; opacity:0; }
.reveal-words.in .w{ animation:revUp .7s var(--ease) both; animation-delay:calc(var(--i) * 55ms); }

/* Force-visible fallback when CSS animations are throttled/unsupported
   (e.g. offscreen/background tab). Set by JS probe in site.js. */
.no-anim *{ animation:none !important; transition:none !important; }
.no-anim [data-reveal],
.no-anim .reveal-words .w{ opacity:1 !important; transform:none !important; }