/* ============================================================
   Guided Intelligence
   Theme: locked light. Paper + ink + one eucalypt accent.
   Radius system: interactive = pill, containers = 20px,
   media inside frames = 14px (concentric with 6px frame pad).
   Z scale: nav 40, menu overlay 30, grain 60.
   ============================================================ */

:root {
  --paper: #F4F5F2;
  --paper-raise: #FBFBF9;
  --ink: #131A16;
  --text-soft: #3E4A43;
  --text-faint: #5C6862;
  --accent: #175C43;
  --accent-deep: #0F4432;
  --accent-tint: #E3ECE6;
  --hairline: rgba(19, 26, 22, 0.12);
  --hairline-soft: rgba(19, 26, 22, 0.07);

  --font-display: "Bricolage Grotesque", "Satoshi", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, -apple-system, sans-serif;

  --r-container: 20px;
  --r-inner: 14px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--accent); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 70;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 999px;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 12px; }

.container { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }

h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section-sub { color: var(--text-faint); margin-top: 14px; max-width: 46ch; }

.accent { color: var(--accent); font-style: normal; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  border-radius: 999px;
  font-weight: 500;
  transition: transform 160ms var(--ease-out), background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent); color: var(--paper);
  padding: 12px 12px 12px 26px;
  font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 30px -12px rgba(23, 92, 67, 0.55);
}
.btn-primary:hover { background: var(--accent-deep); }

.btn-orb {
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(244, 245, 242, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 1rem;
  transition: transform 260ms var(--ease-out), background-color 260ms var(--ease-out);
}

.btn-nav { padding: 9px 9px 9px 20px; font-size: 0.92rem; box-shadow: none; }
.btn-nav .btn-orb { width: 28px; height: 28px; font-size: 0.9rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px;
  transition: border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.link-arrow i { font-size: 1rem; transition: transform 260ms var(--ease-out); color: var(--accent); }
.link-arrow:hover { border-color: var(--accent); color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover .btn-orb { transform: translate(2px, -2px); background: rgba(244, 245, 242, 0.26); }
  .link-arrow:hover i { transform: translateX(4px); }
}

/* ---------- Navigation ---------- */
.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: 18px 16px 0;
}

.nav-pill {
  display: flex; align-items: center; gap: 28px;
  width: 100%; max-width: 1080px;
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  background: rgba(244, 245, 242, 0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 40px -18px rgba(19, 26, 22, 0.25);
  transition: background-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.nav-wrap.scrolled .nav-pill {
  background: rgba(244, 245, 242, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 16px 44px -18px rgba(19, 26, 22, 0.35);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.brand-mark { width: 26px; height: 26px; color: var(--accent); flex: none; }

.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-size: 0.94rem; font-weight: 500; color: var(--text-soft);
  transition: color 200ms var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }

.burger {
  display: none;
  width: 40px; height: 40px; border-radius: 999px;
  position: relative; flex: none;
}
.burger span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 360ms var(--ease-drawer), top 360ms var(--ease-drawer);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 23px; }
html.menu-open .burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
html.menu-open .burger span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* ---------- Mobile menu overlay ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(244, 245, 242, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--ease-drawer), visibility 0s linear 420ms;
}
html.menu-open .menu-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
html.menu-open { overflow: hidden; }

.menu-links { text-align: center; display: grid; gap: 20px; }
.menu-links a {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.6rem); letter-spacing: -0.02em;
}
.menu-links li {
  opacity: 0; transform: translateY(28px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
html.menu-open .menu-links li {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(90ms + var(--i) * 60ms);
}
.menu-cta { color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: center;
  overflow: clip;
}

/* The hero fade is painted inside the canvas (see main.js), not with a CSS mask.
   Firefox regressed on masking a <canvas> inside an overflow:clip parent: the
   layer loses its alpha and composites as opaque black, which the mask then
   fades in from the left straight over the hero copy. Chrome renders it fine,
   so keep the fade in canvas paint where every engine agrees. */
#contours {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}

.hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 84px; padding-bottom: 48px; }

.hero-title {
  font-size: clamp(2.9rem, 7.4vw, 5.6rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-inner {
  display: block;
  transition: transform 950ms var(--ease-out);
}
html.js .line-inner { transform: translateY(112%); }
body.loaded .line:nth-child(1) .line-inner { transform: translateY(0); transition-delay: 80ms; }
body.loaded .line:nth-child(2) .line-inner { transform: translateY(0); transition-delay: 170ms; }

.lede {
  margin-top: 28px;
  font-size: 1.15rem;
  color: var(--text-soft);
  max-width: 44ch;
}

.cta-row { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* ---------- Scroll reveal (JS-gated so no-JS visitors see everything) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition:
    opacity 800ms var(--ease-out) var(--delay, 0s),
    transform 800ms var(--ease-out) var(--delay, 0s),
    filter 800ms var(--ease-out) var(--delay, 0s);
}
html.js .reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---------- Manifesto ---------- */
.manifesto { padding: clamp(96px, 14vh, 160px) 0; }
.manifesto-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.1vw, 2.35rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  max-width: 62rem;
}
.manifesto-text > span { display: inline; }

/* ---------- Sections ---------- */
.section { padding: clamp(88px, 12vh, 150px) 0; }
.section-head { margin-bottom: 52px; max-width: 640px; }

/* ---------- Services bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.cell {
  border-radius: var(--r-container);
  padding: 34px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper-raise);
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 24px 50px -38px rgba(19, 26, 22, 0.3);
}
.cell p { color: var(--text-faint); font-size: 0.99rem; max-width: 46ch; }
.cell-icon { font-size: 1.7rem; color: var(--accent); margin-bottom: 6px; }

.cell-a { grid-column: span 7; padding: 0; overflow: clip; }
.cell-a .cell-body { padding: 34px 34px 10px; display: flex; flex-direction: column; gap: 12px; }
.cell-media {
  margin: 22px 8px 8px; border-radius: var(--r-inner); overflow: clip;
  aspect-ratio: 16 / 8.4;
}
.cell-b { grid-column: span 5; background: var(--accent-tint); border-color: rgba(23, 92, 67, 0.14); }
.cell-b p { color: #33473E; }
.cell-c { grid-column: span 5; }
.cell-d { grid-column: span 7; background: var(--ink); border-color: transparent; }
.cell-d h3 { color: var(--paper); }
.cell-d p { color: rgba(244, 245, 242, 0.72); }
.cell-d .cell-icon { color: #6FBF9E; }

/* ---------- Tinted media (natural photo, whisper of brand green) ---------- */
.duotone { position: relative; background: var(--ink); overflow: clip; border-radius: inherit; }
.duotone img {
  filter: saturate(0.8) contrast(1.02);
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.duotone::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: 0.14;
  pointer-events: none;
}

.frame {
  background: rgba(19, 26, 22, 0.045);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-container);
  padding: 6px;
}
.frame .duotone { border-radius: var(--r-inner); }

@media (hover: hover) and (pointer: fine) {
  .strip-card:hover .duotone img,
  .about-media:hover .duotone img { transform: scale(1.04); }
}

/* ---------- Approach ---------- */
.approach-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.approach-sticky { position: sticky; top: 130px; }
.approach-sticky p { margin-top: 18px; color: var(--text-faint); max-width: 34ch; }

.steps { display: grid; gap: 0; }
.step { padding: 34px 0; }
.step + .step { border-top: 1px solid var(--hairline-soft); }
.step h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: var(--accent);
}
.step p { margin-top: 10px; color: var(--text-soft); max-width: 52ch; }

/* ---------- Plain English translations ---------- */
.translate { max-width: 900px; }
.translate li {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 24px 0;
}
.translate li + li { border-top: 1px solid var(--hairline-soft); }
.translate code {
  font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.93rem;
  color: var(--text-faint);
  letter-spacing: -0.01em;
}
.t-arrow { color: var(--accent); font-size: 1.15rem; display: inline-flex; }
.translate p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.plain-note { margin-top: 40px; color: var(--text-soft); max-width: 56ch; }

/* ---------- Who we help strip ---------- */
.strip-outer { overflow: hidden; }
.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(369px, 78vw);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip-card { scroll-snap-align: start; }
.strip-card .frame { aspect-ratio: 4 / 3; }
.strip-card .duotone, .strip-card figure { height: 100%; }
.strip-card h3 { margin-top: 20px; }
.strip-card p { margin-top: 8px; color: var(--text-faint); font-size: 0.99rem; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: center;
}
.about-media { aspect-ratio: 4 / 5; }
.about-media .duotone { height: 100%; }
.about-media figure { height: 100%; }
.about-text p { margin-top: 22px; color: var(--text-soft); max-width: 54ch; }

.tag-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.tag-row li {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.87rem; font-weight: 500;
  color: var(--text-soft);
}

/* ---------- Contact ---------- */
.contact { padding-bottom: clamp(110px, 16vh, 190px); }
.contact-title {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 750;
  letter-spacing: -0.03em;
}
.contact-sub { margin-top: 24px; color: var(--text-soft); max-width: 46ch; }
.contact .cta-row { margin-top: 40px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline-soft); padding: 56px 0 34px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-brand p { margin-top: 14px; color: var(--text-faint); font-size: 0.95rem; }
.footer-nav { display: grid; gap: 10px; }
.footer-nav a, .footer-contact a { color: var(--text-soft); font-size: 0.95rem; transition: color 200ms var(--ease-out); }
.footer-nav a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-small { margin-top: 44px; }
.footer-small p { color: var(--text-faint); font-size: 0.85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .approach-grid { grid-template-columns: 1fr; gap: 20px; }
  .approach-sticky { position: static; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-media { max-width: 460px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 860px) {
  .nav-links, .btn-nav { display: none; }
  .burger { display: block; }
  .nav-pill { gap: 12px; justify-content: space-between; }
}

@media (max-width: 768px) {
  .container { padding-inline: 18px; }
  .translate li { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .t-arrow { transform: rotate(90deg); font-size: 1rem; }
  .section { padding: 72px 0; }
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .cell-a, .cell-b, .cell-c, .cell-d { grid-column: 1 / -1; }
  .cell { padding: 26px; }
  .cell-a .cell-body { padding: 26px 26px 6px; }
  .hero-inner { padding-top: 110px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { transition: opacity 300ms ease; transform: none; filter: none; }
  html.js .line-inner { transform: none; transition: none; }
  .menu-links li { transition: opacity 250ms ease; transform: none; }
  .duotone img { transition: none; }
  .btn, .btn-orb, .link-arrow i { transition-property: background-color, color, border-color; }
}