/* ============================================================
   OutGrowth Media — The Greenhouse
   Design system per DESIGN-SPEC.md. No build step; plain CSS.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --ink: #171717;
  --gray: #676766;
  --green: #9ac556;
  --green-deep: #618e42;
  --green-bright: #8bbe3f;
  --green-pale: #cce1aa;
  --paper: #ffffff;
  --paper-tint: #f7f9f2;
  --line-dark: rgba(23, 23, 23, 0.2);
  --line-light: rgba(255, 255, 255, 0.25);
  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --maxw: 1360px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --shadow-paper: 0 1px 0 rgba(23, 23, 23, 0.06), 0 16px 40px -16px rgba(23, 23, 23, 0.25);
  --shadow-lift: 0 1px 0 rgba(23, 23, 23, 0.06), 0 24px 48px -16px rgba(23, 23, 23, 0.3);
  --sec-pad: clamp(80px, 11vw, 150px);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 380;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  letter-spacing: -0.01em;
  margin: 0;
}
h1, .h1 { font-size: clamp(3.25rem, 8.5vw, 8rem); line-height: 1.02; }
h2, .h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.06; }
h3, .h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }
p { margin: 0 0 1em; }
.measure { max-width: 68ch; }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 18px;
}
.eyebrow--wonk {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-variation-settings: "SOFT" 80, "WONK" 1;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.small { font-size: 0.875rem; }
.dim { opacity: 0.62; }

/* ---------- buttons (sap-rise hover) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn::before { /* sap rises from the bottom */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green-bright);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--primary { background: var(--green); color: var(--ink); }
.btn--primary:hover { color: var(--ink); }
.btn--white { background: var(--paper); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost:hover { color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8); }
.btn--ghost-light:hover { color: var(--ink); }

/* ---------- tendril motif ---------- */
.tendril { stroke: currentColor; fill: none; stroke-width: 1.2; }
.tendril--draw path { stroke-dasharray: var(--tlen, 300); stroke-dashoffset: var(--tlen, 300); }
.is-inview .tendril--draw path, .tendril--drawn path { animation: tendrilDraw 1.1s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes tendrilDraw { to { stroke-dashoffset: 0; } }

/* link underline: a short curl */
.tlink { position: relative; text-decoration: none; }
.tlink::after {
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: -3px;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px 6px 2px 6px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tlink:hover::after, .tlink.is-active::after { transform: scaleX(1); }

/* ---------- paper grain ---------- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.045;
  mix-blend-mode: normal;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); position: relative; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  transition: padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.nav.is-scrolled {
  padding: 12px var(--gutter);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-dark);
}
/* while a film section owns the viewport the bar goes fully transparent —
   words float over the footage, nothing competes with it */
.nav.nav--film, .nav.nav--film.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* the brand mark rides with the glass bar: hidden while the bar is transparent
   (the film zones + the very top on load, where the hero already shows the big
   3D logo), it fades in the moment the white bar appears and out again on the
   way back up. Subpages render with the glass bar, so it shows immediately. */
.nav__logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nav.is-scrolled:not(.nav--film) .nav__logo { opacity: 1; visibility: visible; }
.nav__logo svg, .nav__logo img { width: 54px; height: auto; }
.nav__wordmark { font-family: var(--sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.nav__links a:not(.btn) { font-size: 0.9375rem; font-weight: 500; }
.nav--overlay:not(.is-scrolled) { color: var(--ink); } /* hero is light; ink works */
.nav__burger { display: none; background: none; border: 0; width: 44px; height: 44px; position: relative; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--ink); transition: transform 0.3s, top 0.3s;
}
.nav__burger span { top: 21px; }
.nav__burger span::before { top: -7px; left: 0; }
.nav__burger span::after { top: 7px; left: 0; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 89;
  background: var(--paper);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  gap: 8px;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 3.4rem); text-decoration: none; padding: 10px 0; }
body.menu-open { overflow: hidden; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
}

/* ============================================================
   HOME — the funnel
   ============================================================ */

/* ---------- hero (scroll-scrubbed title card) ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: #e9e9e7; }
/* backstop: if pin geometry ever goes stale (late font loads, viewport height
   changes), the exposed spacer must read as the destination green, never white */
.pin-spacer:has(> .hero) { background: var(--green-deep); }
.pin-spacer:has(> .bloom__stage) { background: var(--green-bright); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* poster shows the logo frame instantly (and is the no-JS fallback); the
   canvas paints over it once frames load */
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.js .hero__canvas { z-index: 1; }
html.js .hero__poster { z-index: 0; }
/* flat-green cover that fades in over the film's last frames, so the scrub
   ends on a color pixel-identical to the section below (the WebP frames'
   compression texture would otherwise show against the flat CSS green) */
.hero__seam { position: absolute; inset: 0; z-index: 2; background: var(--green-deep); opacity: 0; pointer-events: none; }
.hero__title {
  position: absolute; z-index: 3;
  top: 0; left: 0; right: 0;
  padding: clamp(96px, 15vh, 200px) var(--gutter) 0;
  max-width: var(--maxw); margin: 0 auto;
}
.hero__title .eyebrow { color: var(--gray); }
.hero__title h1 { max-width: 9em; color: var(--ink); }
.hero__scroll {
  position: absolute; z-index: 3;
  bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray);
}
.hero__scroll svg { width: 14px; height: 44px; }
.hero__scroll .tendril--loop path {
  stroke-dasharray: 90; stroke-dashoffset: 90;
  animation: tendrilLoop 2.4s ease-in-out infinite;
}
@keyframes tendrilLoop {
  0% { stroke-dashoffset: 90; opacity: 0; }
  15% { opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---------- green rooms ---------- */
.room { color: var(--paper); position: relative; overflow: hidden; }
.room--deep { background: var(--green-deep); }
.room--bright { background: var(--green-bright); color: var(--ink); }
.room .ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(10rem, 28vw, 26rem);
  letter-spacing: -0.02em;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.room--bright .ghost { opacity: 0.06; }

.stats { display: flex; gap: clamp(28px, 6vw, 80px); flex-wrap: wrap; margin-top: clamp(40px, 6vw, 80px); }
.stat { min-width: 150px; }
.stat__num {
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 1;
  font-weight: 340;
  display: block;
}
.stat__label { display: block; margin-top: 8px; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.stats__micro { margin-top: 26px; font-size: 0.9rem; opacity: 0.6; font-style: italic; }

/* gradient seam between the two greens */
.handoff { height: 80vh; background: linear-gradient(180deg, var(--green-deep) 0%, var(--green-bright) 100%); }

/* ---------- flower scrub ---------- */
.bloom { position: relative; background: var(--green-bright); }
.bloom__stage { position: relative; height: 100svh; overflow: hidden; }
.bloom__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* flat-green cover over the flower scrub's first and last frames — it meets
   flat CSS green on both sides, so hide the frames' compression texture */
.bloom__seam { position: absolute; inset: 0; background: var(--green-bright); opacity: 1; pointer-events: none; }
/* paper-dahlia mandala that blooms behind each beat card — same fractal rule
   as the film's flowers (self-similar petal rings, 22.5° offsets), spun by
   the scroll itself. JS-generated; transform/opacity only. */
.beat-mandala {
  position: absolute;
  inset: 0;
  margin: auto; /* center WITHOUT the transform channel — GSAP owns transforms here */
  width: min(780px, 122vw);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.bloom__beat {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 2 * var(--gutter)));
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-paper);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  color: var(--ink);
}
/* only the JS-driven scrub hides the beats; without JS they stack statically */
html.js .bloom__beat { opacity: 0; visibility: hidden; }
.bloom__beat .eyebrow { color: var(--green-deep); margin-bottom: 12px; }
.bloom__beat h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 12px; }
.bloom__beat p { margin: 0; color: var(--gray); }
.bloom__marquee {
  position: absolute;
  left: 0; right: 0;
  bottom: 12vh;
  white-space: nowrap;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 14px rgba(23,23,23,0.18);
  opacity: 0;
  visibility: hidden;
}
.bloom__clients-inline { display: none; margin-top: 16px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); line-height: 1.9; }
@media (max-width: 820px) {
  .bloom__marquee { display: none; }
  .bloom__clients-inline { display: block; }
}

/* ---------- services index ---------- */
.services { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line-dark); }
.service {
  display: grid;
  grid-template-columns: 64px 1fr 1.2fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line-dark);
  position: relative;
}
.service::after { /* tendril-ish draw line on reveal */
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service.is-inview::after { transform: scaleX(1); }
.service__num { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; opacity: 0.55; }
.service__name { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 400; }
.service__desc { font-size: 1rem; opacity: 0.8; max-width: 46ch; }
@media (max-width: 700px) {
  .service { grid-template-columns: 40px 1fr; }
  .service__desc { grid-column: 2; }
}

/* ---------- featured case cards ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 32px); margin-top: clamp(36px, 5vw, 64px); }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }
.case-card {
  display: block; text-decoration: none;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.case-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.case-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-tint); }
.case-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.case-card:hover .case-card__img img { transform: scale(1.03); }
.case-card__body { padding: 22px 24px 26px; color: var(--ink); }
.case-card__client { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 6px; }
.case-card__title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; margin-bottom: 8px; }
.case-card__line { font-size: 0.95rem; color: var(--gray); margin: 0; }

/* ---------- final CTA ---------- */
.cta {
  background: linear-gradient(180deg, var(--green-bright) 0%, var(--green-pale) 42%, var(--paper) 82%);
  text-align: center;
  padding-top: clamp(120px, 16vw, 220px);
  padding-bottom: clamp(90px, 12vw, 160px);
}
.cta h2 { color: var(--green-deep); font-size: clamp(2.6rem, 6.5vw, 6rem); }
.cta__sub { max-width: 54ch; margin: 26px auto 40px; color: var(--gray); font-size: 1.1rem; }
.cta__meta { margin-top: 44px; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; font-size: 0.9rem; color: var(--gray); }
.cta__meta a { text-decoration: none; }

/* ---------- footer ---------- */
.footer { background: var(--paper-tint); border-top: 1px solid var(--line-dark); padding: clamp(48px, 7vw, 90px) 0 32px; font-size: 0.95rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 60px); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__tag { font-family: var(--serif); font-style: italic; font-size: 1.15rem; margin-top: 14px; color: var(--green-deep); }
.footer h4 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; color: var(--gray); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer a { text-decoration: none; }
.footer__bottom {
  margin-top: clamp(40px, 6vw, 70px);
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--gray);
}
.footer__logo img, .footer__logo svg { width: 64px; }

/* ---------- reveal defaults ----------
   Only hide reveal targets once JS is confirmed running (html.js). Without JS,
   or in reduced motion, everything is visible by default — no blank pages. */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.reduced [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- floating chat pill ---------- */
.aloha-pill {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 95;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 10px 30px -8px rgba(23, 23, 23, 0.45);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.aloha-pill.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.aloha-pill__leaf { width: 16px; height: 16px; background: var(--green); border-radius: 0 60% 0 60%; }
.aloha-pill:hover .aloha-pill__leaf { background: var(--green-pale); }

/* ============================================================
   CHAT — Sage
   ============================================================ */
.chat-overlay {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(23, 23, 23, 0.32);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.chat-overlay.is-open { opacity: 1; pointer-events: auto; }
.chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 99;
  width: min(520px, 100vw);
  background: var(--paper);
  box-shadow: -24px 0 60px -20px rgba(23, 23, 23, 0.35);
  transform: translateX(102%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex; flex-direction: column;
}
.chat-panel.is-open { transform: none; }
/* full-screen agent takeover (contact page): Sage owns the whole viewport */
body.chat--page { overflow: hidden; }
.chat--page .nav, .chat--page .mobile-menu, .chat--page .aloha-pill { display: none; }
.chat--page .chat-panel {
  position: fixed; inset: 0; z-index: 60;
  width: 100%; max-width: none; height: 100svh;
  transform: none; box-shadow: none;
}
.chat--page .chat__head { padding: 16px clamp(20px, 5vw, 56px); }
.chat--page .chat__scroll { padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px); }
.chat--page .chat__welcome { padding-top: 13vh; }
.chat--page .chat__welcome, .chat--page #chatThread { max-width: 760px; margin-left: auto; margin-right: auto; }
.chat--page .chat__composer { padding: 14px clamp(20px, 5vw, 40px) 18px; }
.chat--page .chat__composer > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.chat__back {
  margin-left: auto; background: none; border: 0; color: rgba(255, 255, 255, 0.9);
  font-family: var(--sans); font-size: 0.85rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px;
  transition: color 0.2s ease;
}
.chat__back:hover { color: var(--paper); }
.chat__back span { transition: transform 0.2s ease; }
.chat__back:hover span { transform: translateX(-3px); }
.chat__head {
  background: var(--green-deep);
  color: var(--paper);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
}
.chat__head img { width: 40px; }
.chat__head-name { font-family: var(--serif); font-style: italic; font-size: 1.2rem; }
.chat__head-sub { font-size: 0.75rem; opacity: 0.8; }
.chat__close { margin-left: auto; background: none; border: 0; color: var(--paper); font-size: 1.5rem; line-height: 1; padding: 6px; }
.chat__scroll { flex: 1; overflow-y: auto; padding: 24px 20px; }
.chat__welcome { text-align: center; padding: 8vh 12px 20px; }
.chat__welcome h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 12px; }
.chat__welcome p { color: var(--gray); font-size: 0.95rem; max-width: 42ch; margin: 0 auto 28px; }
.chat__suggestions { display: grid; gap: 12px; }
.suggestion {
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.suggestion:hover { border-color: var(--green); box-shadow: 0 6px 20px -8px rgba(23, 23, 23, 0.18); }
.suggestion__label { font-weight: 600; display: block; }
.suggestion__desc { font-size: 0.85rem; color: var(--gray); }
.msg { margin-bottom: 20px; display: flex; flex-direction: column; }
.msg--user { align-items: flex-end; }
.msg--user .msg__bubble {
  background: var(--green-pale);
  color: var(--ink);
  border-radius: 16px 16px 4px 16px;
  padding: 12px 18px;
  max-width: 85%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg--sage { align-items: flex-start; }
.msg--sage .msg__who { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--green-deep); margin-bottom: 6px; }
.msg--sage .msg__bubble {
  border-left: 2px solid var(--green);
  padding: 2px 0 2px 16px;
  max-width: 95%;
  color: #2c2c2b;
  overflow-wrap: anywhere;
}
.msg__bubble p { margin: 0 0 0.8em; }
.msg__bubble p:last-child { margin-bottom: 0; }
.msg__bubble ul { margin: 0 0 0.8em; padding-left: 20px; }
.msg__bubble a { color: var(--green-deep); }
.typing { display: inline-flex; align-items: center; gap: 8px; color: var(--green-deep); padding-left: 16px; border-left: 2px solid var(--green); }
.typing svg { width: 46px; height: 16px; }
.typing .tendril--loop path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: tendrilLoop 1.6s ease-in-out infinite; }

/* tool cards */
.tool-card {
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 18px;
  margin: 12px 0 20px;
  box-shadow: var(--shadow-paper);
}
.tool-card__title { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 4px; }
.tool-card__rationale { font-size: 0.85rem; font-style: italic; color: var(--gray); margin-bottom: 12px; }
.tool-card--pending { display: flex; align-items: center; gap: 12px; color: var(--gray); font-size: 0.9rem; }
.tool-card--pending .spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--green-pale); border-top-color: var(--green-deep);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.swatches { display: flex; border-radius: 8px; overflow: hidden; height: 74px; }
.swatch { flex: 1; position: relative; transition: flex 0.3s ease; cursor: pointer; }
.swatch:hover { flex: 1.3; }
.swatch__copied { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(23,23,23,0.55); color: #fff; font-size: 0.7rem; }
.swatch-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.swatch-legend div { font-size: 0.68rem; line-height: 1.35; }
.swatch-legend b { display: block; font-size: 0.72rem; }
.swatch-legend code { color: var(--gray); }

.dirboard__moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.dirboard__moods span { border: 1px solid var(--green-pale); color: var(--green-deep); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; }
.dirboard h5 { margin: 14px 0 6px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.dirboard ul { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.dirboard .swatches { height: 44px; margin-top: 6px; }

.screen-frame { border: 1px solid var(--line-dark); border-radius: 10px; overflow: hidden; background: #f2f2f0; }
.screen-frame__bar { display: flex; align-items: center; gap: 6px; background: #e6e6e3; padding: 8px 12px; }
.screen-frame__bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.screen-frame__bar i:nth-child(1) { background: #ec6a5e; }
.screen-frame__bar i:nth-child(2) { background: #f4bf4f; }
.screen-frame__bar i:nth-child(3) { background: #61c554; }
.screen-frame iframe { width: 100%; height: 460px; border: 0; pointer-events: none; background: #fff; }
.screen-frame--mobile { max-width: 320px; margin: 0 auto; }
.screen-frame--mobile iframe { height: 560px; }
.tool-card__actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.tool-card__actions .btn { padding: 9px 18px; font-size: 0.85rem; }

.scope__row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.scope__phase { width: 110px; font-family: var(--serif); font-size: 1rem; }
.scope__bar { flex: 1; height: 10px; border-radius: 5px; background: var(--green-pale); position: relative; overflow: hidden; }
.scope__bar i { position: absolute; inset: 0; width: var(--w, 50%); background: var(--green); border-radius: 5px; }
.scope__dur { width: 88px; font-size: 0.78rem; color: var(--gray); text-align: right; }
.scope__work { font-size: 0.8rem; color: var(--gray); margin: -6px 0 12px 122px; }
.scope__budget { margin-top: 14px; padding: 12px 16px; background: var(--paper-tint); border-radius: 8px; font-size: 0.9rem; }
@media (max-width: 560px) { .scope__work { margin-left: 0; } }

.chart-card svg { width: 100%; height: auto; }
.chart-card__insight { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-dark); font-size: 0.88rem; }
.chart-card__insight b { color: var(--green-deep); }

.brief-card { position: relative; text-align: center; padding: 28px 22px; overflow: hidden; }
.brief-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(154, 197, 86, 0.18) 50%, transparent 70%);
  background-size: 300% 300%;
  animation: shimmer 3s linear infinite;
  pointer-events: none;
}
@keyframes shimmer { 0% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }

/* composer */
.chat__composer { border-top: 1px solid var(--line-dark); padding: 14px 16px; }
.composer {
  display: flex; align-items: flex-end; gap: 10px;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 10px 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  background: var(--paper);
}
.composer:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.composer textarea {
  flex: 1; border: 0; outline: none; resize: none;
  font: inherit; font-size: 0.95rem; line-height: 1.5;
  max-height: 144px; background: transparent;
  padding: 4px 0;
}
.composer__send {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--green); border: 0; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transform: scale(0); opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.composer__send.is-ready { transform: scale(1); opacity: 1; }
.composer__send:hover { background: var(--green-bright); }
.composer__hint { font-size: 0.68rem; color: var(--gray); text-align: right; margin-top: 6px; }
.chat__locked { text-align: center; color: var(--gray); font-size: 0.9rem; padding: 16px; }

/* info wall */
.wall {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.wall.is-open { display: flex; }
.wall__card {
  width: min(440px, 100%);
  background: var(--paper-tint);
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  padding: 34px 30px;
  box-shadow: var(--shadow-lift);
  text-align: center;
}
.wall__card img { width: 52px; margin: 0 auto 16px; }
.wall__card h2 { font-size: 1.6rem; margin-bottom: 10px; }
.wall__card > p { font-size: 0.92rem; color: var(--gray); margin-bottom: 22px; }
.wall__field { text-align: left; margin-bottom: 14px; }
.wall__field input {
  width: 100%;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--paper);
  padding: 13px 15px;
  font: inherit; font-size: 0.95rem;
}
.wall__field input:focus { outline: none; border-color: var(--green); }
.wall__err { color: #c0392b; font-size: 0.75rem; margin-top: 4px; display: none; }
.wall__field.has-err .wall__err { display: block; }
.wall .btn { width: 100%; justify-content: center; }
.wall__micro { font-size: 0.72rem; color: var(--gray); margin-top: 14px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  z-index: 130;
  background: var(--paper);
  border: 1px solid var(--green);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 0.85rem;
  box-shadow: var(--shadow-lift);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }

/* ============================================================
   WORK — archive + project pages
   ============================================================ */
.page-head { padding-top: calc(var(--sec-pad) + 60px); padding-bottom: clamp(30px, 5vw, 60px); }
.filters {
  position: sticky; top: 64px; z-index: 40;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px 0 18px;
  background: linear-gradient(180deg, var(--paper) 75%, rgba(255,255,255,0));
}
.chip {
  border: 1px solid var(--line-dark);
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.chip b { font-weight: 600; opacity: 0.5; margin-left: 5px; font-size: 0.72rem; }
.chip:hover { border-color: var(--green); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.is-active b { opacity: 0.7; }
.filters__gate { margin-left: auto; font-size: 0.78rem; color: var(--gray); background: none; border: 0; text-decoration: underline; }
.grid { columns: 4 260px; column-gap: 24px; }
.tile {
  break-inside: avoid;
  margin-bottom: 24px;
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-tint);
  box-shadow: var(--shadow-paper);
  position: relative;
  opacity: 0; transform: translateY(16px);
  animation: tileIn 0.5s ease forwards;
}
@keyframes tileIn { to { opacity: 1; transform: none; } }
.tile img { width: 100%; height: auto; }
.tile__strip {
  padding: 14px 16px;
  background: var(--paper);
  color: var(--ink);
}
.tile__strip b { font-family: var(--serif); font-weight: 420; font-size: 1.05rem; display: block; line-height: 1.25; }
.tile__strip span { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gray); }
@media (min-width: 821px) {
  .tile__strip { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(101%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .tile:hover .tile__strip { transform: none; }
}
.grow-more { display: flex; justify-content: center; padding: 40px 0 20px; }

/* gate card */
.gate-card { max-width: 520px; margin: 0 auto; }

/* project page */
.proj-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; background: var(--paper-tint); overflow: hidden; }
.proj-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-hero__card {
  position: relative; z-index: 2;
  margin: 0 0 clamp(24px, 4vw, 56px) var(--gutter);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: clamp(24px, 3.5vw, 44px);
  max-width: min(620px, calc(100% - 2 * var(--gutter)));
}
.proj-hero__card h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
.proj-meta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: 0.82rem; color: var(--gray); }
.proj-meta .chip { pointer-events: none; padding: 5px 13px; }
.proj-meta__rel { margin-left: auto; font-weight: 600; color: var(--green-deep); }
.cs-section { padding: clamp(40px, 6vw, 80px) 0 0; }
.cs-section .eyebrow { color: var(--green-deep); }
.gallery { display: grid; gap: clamp(16px, 2.5vw, 30px); margin: clamp(40px, 6vw, 80px) 0; }
.gallery img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-paper); }
.gallery__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; gap: clamp(16px, 2.5vw, 30px); }
@media (max-width: 700px) { .gallery__row2 { grid-template-columns: 1fr; } }
.statband { background: var(--green-pale); border-radius: var(--radius); padding: clamp(30px, 5vw, 60px); margin: clamp(40px, 6vw, 80px) 0; display: flex; gap: clamp(28px, 6vw, 90px); flex-wrap: wrap; }
.statband .stat__num { font-size: clamp(3rem, 7vw, 6rem); color: var(--green-deep); }
.statband .stat__label { color: var(--ink); opacity: 0.75; }
.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-style: italic;
  line-height: 1.3;
  max-width: 26ch;
  margin: clamp(40px, 6vw, 80px) auto;
  text-align: center;
  color: var(--green-deep);
}
.next-card {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 48px);
  background: var(--paper-tint);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  margin: clamp(40px, 7vw, 100px) 0;
  box-shadow: var(--shadow-paper);
  transition: box-shadow 0.3s, transform 0.3s;
}
.next-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.next-card img { width: min(340px, 42%); aspect-ratio: 4/3; object-fit: cover; }
.next-card__body { padding: 20px 24px 20px 0; }
.next-card__body .eyebrow { margin-bottom: 8px; color: var(--gray); }
.next-card__body h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); }
@media (max-width: 640px) { .next-card { flex-direction: column; align-items: stretch; } .next-card img { width: 100%; } .next-card__body { padding: 0 22px 22px; } }
.proj-ctabar {
  position: sticky; bottom: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 13px var(--gutter);
  font-size: 0.95rem;
}
.proj-ctabar .btn { padding: 9px 20px; font-size: 0.85rem; }

/* nsfw page gate */
.nsfw-gate { position: fixed; inset: 0; z-index: 200; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 20px; }

/* ============================================================
   BLOG — Cuttings
   ============================================================ */
.stream { max-width: 900px; }
.entry {
  display: grid;
  grid-template-columns: 110px 1fr 180px;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(26px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--line-dark);
  text-decoration: none;
  align-items: center;
}
.entry__date { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.entry__title { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.2; }
.entry__dek { color: var(--gray); font-size: 0.95rem; margin-top: 8px; }
.entry img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 700px) { .entry { grid-template-columns: 1fr; } .entry img { display: none; } }

.article { padding-top: calc(var(--sec-pad) + 40px); }
.article__head { max-width: 780px; margin: 0 auto; text-align: center; padding-bottom: clamp(30px, 5vw, 60px); }
.article__kicker { display: inline-block; border: 1px solid var(--green-pale); color: var(--green-deep); border-radius: 999px; padding: 5px 14px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.article__head h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.article__dek { font-size: 1.2rem; color: var(--gray); max-width: 56ch; margin: 22px auto 0; }
.article__meta { margin-top: 24px; font-size: 0.82rem; color: var(--gray); }
.article__body { max-width: 68ch; margin: 0 auto; padding-bottom: var(--sec-pad); }
.article__body h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 1.6em 0 0.6em; }
.article__body blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.4;
  color: var(--green-deep);
  border: 0; margin: 1.6em 0; padding: 0 0 0 24px;
  border-left: 2px solid var(--green);
}
.share { position: sticky; top: 40vh; float: left; margin-left: calc(-1 * clamp(60px, 8vw, 110px)); display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1100px) { .share { float: none; position: static; flex-direction: row; margin: 0 0 30px; } }
.share button, .share a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-dark); background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray); text-decoration: none; font-size: 0.8rem;
  transition: border-color 0.2s, color 0.2s;
}
.share button:hover, .share a:hover { border-color: var(--green-deep); color: var(--green-deep); }
.band { background: var(--green-pale); border-radius: var(--radius); padding: clamp(30px, 5vw, 56px); text-align: center; margin: 0 0 var(--sec-pad); }
.band h3 { margin-bottom: 10px; }
.band p { color: var(--ink); opacity: 0.75; margin-bottom: 22px; }

/* ============================================================
   Reduced motion
   ============================================================ */
.reduced .bloom__stage, html.no-js .bloom__stage { height: auto; min-height: 50vh; padding: 70px var(--gutter); }
.reduced .bloom__beat, html.no-js .bloom__beat { position: relative; left: auto; top: auto; transform: none; opacity: 1 !important; visibility: visible !important; margin: 24px auto; }
.reduced .bloom__marquee, html.no-js .bloom__marquee { display: none; }
/* reduced motion: skip the hero scrub, show the held logo frame + title */
.reduced .hero__canvas { display: none; }
.reduced .hero__seam, html.no-js .hero__seam { display: none; }
.reduced .bloom__seam, html.no-js .bloom__seam { display: none; }
.reduced .beat-mandala, html.no-js .beat-mandala { display: none; }
.reduced [data-ghost], html.no-js [data-ghost] { display: none; }
/* no-js: give the empty canvas the flower-wall color so the section isn't blank */
html.no-js .bloom__canvas { background: var(--green-bright); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .tendril--draw path, .tendril--loop path { stroke-dashoffset: 0 !important; animation: none !important; }
}