/* ==========================================================================
   Medusa Labs — "Time Back" shared design system
   Used by every page. Edit tokens once here; the whole site follows.
   ========================================================================== */

:root {
  --bg: #f3f5f1;          /* off-white, green bias */
  --bg-2: #e9ede4;
  --surface: #ffffff;
  --ink: #16211b;          /* deep pine ink */
  --ink-2: #465049;
  --ink-3: #78817a;
  --line: #dbe1d6;
  --pine: #1f6f52;         /* primary green */
  --pine-2: #17553f;
  --clay: #c07a3e;         /* single warm micro-accent */
  --shadow: 0 2px 4px rgba(22,33,27,.04), 0 18px 50px rgba(22,33,27,.09);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101512; --bg-2:#151c18; --surface:#18201b; --ink:#eef2ea; --ink-2:#b8c1b8;
    --ink-3:#828b81; --line:#28322b; --pine:#5cc79b; --pine-2:#7ad4ae; --clay:#e0a668;
    --shadow:0 2px 4px rgba(0,0,0,.35), 0 20px 55px rgba(0,0,0,.5);
  }
}
/* explicit theme toggle overrides (win over the media query in both directions) */
:root[data-theme="light"]{ --bg:#f3f5f1;--bg-2:#e9ede4;--surface:#fff;--ink:#16211b;--ink-2:#465049;--ink-3:#78817a;--line:#dbe1d6;--pine:#1f6f52;--pine-2:#17553f;--clay:#c07a3e;--shadow:0 2px 4px rgba(22,33,27,.04),0 18px 50px rgba(22,33,27,.09);}
:root[data-theme="dark"]{ --bg:#101512;--bg-2:#151c18;--surface:#18201b;--ink:#eef2ea;--ink-2:#b8c1b8;--ink-3:#828b81;--line:#28322b;--pine:#5cc79b;--pine-2:#7ad4ae;--clay:#e0a668;--shadow:0 2px 4px rgba(0,0,0,.35),0 20px 55px rgba(0,0,0,.5);}

/* ---------- Medusa Labs brand tokens (Splash Web Calm) ----------
   Source: Claude Design project "Medusa Labs Splash Web Calm.dc.html".
   Consumed by the .ml-hero block near the bottom of this file.

   Theme-independent on purpose. The splash is always dark, so unlike
   --bg/--ink above there is no light-mode counterpart to define. Any rule that
   adopts these has to supply its own dark ground, the way .ml-hero does.     */
:root{
  --ml-void:    #050706;               /* outermost ground */
  --ml-deep:    #080c09;               /* mid stop of the ground gradient */
  --ml-moss:    #0f1a13;               /* lit centre of the ground gradient */
  --ml-word:    #edf7f0;               /* wordmark */
  --ml-sub:     rgba(176,214,188,.8);  /* tagline */
  --ml-jade:    #9ad3ae;               /* link rest */
  --ml-jade-hi: #dcf5e5;               /* link hover */
  --ml-glow:    rgba(126,206,155,.34); /* medallion halo */
  --ml-ring:    rgba(154,211,174,.6);  /* rotating ring */
  --ml-edge:    rgba(168,222,187,.22); /* medallion hairline */
  --ml-display: Cinzel, Georgia, "Iowan Old Style", serif;
  --ml-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 26px; }
.eyebrow{ font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--pine); font-weight:600; }
section[id]{ scroll-margin-top:90px; }
:focus-visible{ outline:2px solid var(--pine); outline-offset:3px; border-radius:4px; }

/* ---------- header / nav ---------- */
header{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 85%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s; }
header.scrolled{ border-color:var(--line); }
.bar{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ font-family:var(--serif); font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.brand em{ color:var(--pine); font-style:normal; }
nav{ display:flex; gap:30px; align-items:center; }
nav a.navlink{ color:var(--ink-2); text-decoration:none; font-size:15px; transition:color .2s; }
nav a.navlink:hover{ color:var(--pine); }
.btn{ font-family:var(--sans); font-weight:600; font-size:15px; border:none; border-radius:100px; padding:12px 24px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s, color .2s; }
.btn-primary{ background:var(--pine); color:#f3f5f1; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px color-mix(in srgb,var(--pine) 40%, transparent); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--pine); color:var(--pine); }

/* hamburger + mobile menu */
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; }
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .2s ease; margin:0 auto; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ display:none; flex-direction:column; padding:6px 26px 20px; background:var(--bg); border-bottom:1px solid var(--line); }
.mobile-menu.open{ display:flex; }
.mobile-menu a.navlink{ color:var(--ink); text-decoration:none; font-size:17px; padding:15px 4px; border-bottom:1px solid var(--line); }
.mobile-menu .btn{ margin-top:16px; justify-content:center; }
@media (max-width:720px){
  nav{ display:none; }
  .menu-toggle{ display:flex; }
}
@media (min-width:721px){ .mobile-menu{ display:none !important; } }

/* ---------- hero (home) ---------- */
.hero{ padding:90px 0 70px; text-align:center; position:relative; }
.hero .kicker{ margin-bottom:22px; }
.hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(46px,8.5vw,92px); line-height:.98; letter-spacing:-.03em; text-wrap:balance; }
.hero h1 .em{ color:var(--pine); font-style:italic; }
.hero p.lead{ font-size:clamp(18px,2.3vw,22px); color:var(--ink-2); max-width:52ch; margin:26px auto 0; }
.hero .cta-row{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }

/* ---------- .ml-hero: "Splash Web Calm" ----------
   Source: Claude Design, "Medusa Labs Splash Web Calm.dc.html".

   Four departures from the canvas source, all of them forced by the fact that
   this is the top of a real scrolling page rather than a standalone gate:

   1. The source is position:fixed; inset:0 with overflow:hidden on html and
      body, i.e. a locked screen you leave by clicking ENTER. Here it is an
      in-flow block with a min-height, so the page scrolls straight on into the
      site the way it always did. The html/body overflow lock is not carried
      over, and neither is the source's global background or font-family: the
      rest of the site keeps its own light and dark theming, so everything the
      splash brings is scoped under .ml-hero.
   2. The ENTER link is gone. The existing Book Free Consultation / See what we
      build pair sits in its place, so the hero still converts.
   3. The source's bottom strip (MEDUSA LABS + WORK / STUDIO / CONTACT, all
      href="#") is dropped. It duplicates the real sticky nav directly above it
      and its links were placeholders.
   4. min-height subtracts the 74px sticky header rather than filling 100dvh,
      so the header is not overlapping a dark hero it was never coloured for.

   Everything else is as designed: the ground gradient, the halo, the medallion
   with its rotating ring and sheen, the grain, the vignette, the type, and
   every keyframe and delay.                                                  */

.ml-hero{
  position:relative;
  min-height:calc(100dvh - 74px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:radial-gradient(130% 100% at 50% 44%, var(--ml-moss) 0%, var(--ml-deep) 55%, var(--ml-void) 100%);
  /* Contains the grain's overlay blend and the logo's screen blend. Without a
     stacking context here they composite against the page behind the hero. */
  isolation:isolate;
}

.ml-hero-halo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(88,168,116,.3), transparent 60%);
  animation:mlcHalo 8s ease-in-out infinite;
}

.ml-hero-inner{
  position:relative; z-index:4; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(24px,4.6vh,56px);
  padding:clamp(60px,9vh,110px) clamp(20px,5vw,64px);
}

/* ----- medallion ----- */
.ml-medallion{
  position:relative; flex:none;
  width:min(38vh,44vw,400px); height:min(38vh,44vw,400px);
  animation:mlcIn 1.4s cubic-bezier(.2,.8,.2,1) both;
}
.ml-medallion-glow{
  position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle, var(--ml-glow), transparent 64%);
  filter:blur(30px);
  animation:mlcHalo 7s ease-in-out infinite;
}
.ml-medallion-ring{
  position:absolute; inset:-6%; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--ml-ring) 60deg, transparent 150deg);
  -webkit-mask:radial-gradient(circle, transparent 72%, #000 73%);
          mask:radial-gradient(circle, transparent 72%, #000 73%);
  animation:mlcRing 22s linear infinite;
}
.ml-medallion-disc{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; isolation:isolate;
  border:1px solid var(--ml-edge);
  box-shadow:0 0 100px rgba(90,180,120,.28), inset 0 0 70px rgba(0,0,0,.85);
  animation:mlcBreathe 7s ease-in-out infinite;
}
.ml-medallion-disc img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; mix-blend-mode:screen;
}
.ml-medallion-sheen{
  position:absolute; left:-30%; right:-30%; height:40%;
  background:linear-gradient(transparent, rgba(214,245,229,.14), transparent);
  animation:mlcSheen 9s cubic-bezier(.4,0,.3,1) infinite;
}

/* ----- type ----- */
.ml-hero-type{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,2vh,24px); text-align:center;
}
.ml-hero h1{
  margin:0;
  font-family:var(--ml-display); font-weight:600;
  font-size:clamp(20px,4.6vw,54px); line-height:1.05;
  color:var(--ml-word);
  /* text-indent cancels the trailing letter-space so the word stays optically
     centred; wide tracking otherwise pushes the block left. */
  letter-spacing:.44em; text-indent:.44em;
  text-shadow:0 0 40px rgba(120,205,150,.4);
  white-space:nowrap;
  animation:mlcWord 1.6s cubic-bezier(.2,.8,.2,1) .3s both;
}
.ml-tagline{
  margin:0; font-family:var(--ml-mono);
  font-size:clamp(9px,1.2vw,13px); letter-spacing:.34em;
  color:var(--ml-sub);
  animation:mlcUp 1.2s ease .8s both;
}

/* Not in the source, which is wordmark and tagline only. The descriptive
   sentence carries the old hero's above-the-fold explanation and its h1
   keywords, so dropping it cost real SEO. It keeps the site's body font rather
   than the splash mono, which is what stops it competing with the tagline
   directly above; 52ch matches the measure of the .hero p.lead it came from. */
.ml-lead{
  margin:0; max-width:52ch;
  font-family:var(--sans);
  font-size:clamp(15px,1.7vw,19px); line-height:1.6; letter-spacing:0;
  color:rgba(222,240,229,.74);
  animation:mlcUp 1.2s ease 1s both;
}

/* The CTA pair inherits the site's own .btn components, keeping the existing
   button language. Only .btn-ghost needs re-skinning: its border and text are
   var(--line)/var(--ink), which in light mode are dark on a dark hero. It
   borrows the ENTER button's treatment from the source instead. */
.ml-hero .cta-row{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(8px,1.6vh,18px);
  /* Source had ENTER at 1.1s. Nudged to 1.25s so the reinstated lead sentence
     at 1s still lands before it and the stagger stays legible. */
  animation:mlcUp 1.2s ease 1.25s both;
}
.ml-hero .btn-ghost{
  border-color:rgba(154,211,174,.4);
  color:var(--ml-jade-hi);
  background:rgba(154,211,174,.06);
}
.ml-hero .btn-ghost:hover{
  border-color:rgba(154,211,174,.85);
  color:var(--ml-jade-hi);
  background:rgba(154,211,174,.16);
}

/* ----- overlays ----- */
.ml-hero-grain{
  position:absolute; inset:-20%; z-index:6; pointer-events:none;
  mix-blend-mode:overlay; opacity:.11;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23c)'/></svg>");
  background-size:300px 300px;
  animation:mlcGrain 2.4s steps(1,end) infinite;
}
.ml-hero-vignette{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 46%, rgba(0,0,0,.5) 82%, rgba(0,0,0,.85) 100%);
}

/* ----- keyframes, verbatim from the source ----- */
@keyframes mlcGrain{
  0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-2%,-2%,0)}
  50%{transform:translate3d(2%,1%,0)} 75%{transform:translate3d(-1%,2%,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes mlcHalo{ 0%,100%{opacity:.34;transform:scale(1)} 50%{opacity:.58;transform:scale(1.04)} }
@keyframes mlcRing{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes mlcBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.022)} }
@keyframes mlcIn{ 0%{opacity:0;transform:scale(.94);filter:blur(8px)} 100%{opacity:1;transform:scale(1);filter:blur(0)} }
@keyframes mlcWord{ 0%{opacity:0;letter-spacing:.85em} 100%{opacity:1;letter-spacing:.44em} }
@keyframes mlcUp{ 0%{opacity:0;transform:translateY(14px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes mlcSheen{
  0%{transform:translateY(-60%) rotate(8deg);opacity:0} 20%{opacity:.5}
  60%{opacity:0} 100%{transform:translateY(260%) rotate(8deg);opacity:0}
}

/* The grain jitters on a 2.4s step loop and the halo pulses continuously,
   which is a lot of standing motion for anyone sensitive to it. Reduced motion
   settles the whole hero: the entry animations all use fill "both", so simply
   removing them leaves every element at its resolved state. */
@media (prefers-reduced-motion:reduce){
  .ml-hero-halo, .ml-medallion, .ml-medallion-glow, .ml-medallion-ring,
  .ml-medallion-disc, .ml-hero h1, .ml-tagline, .ml-lead, .ml-hero .cta-row,
  .ml-hero-grain{ animation:none; }
  .ml-medallion-sheen{ display:none; }
}

/* counter strip */
.counter{ display:flex; gap:0; justify-content:center; margin:64px auto 0; max-width:760px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.metric{ flex:1; padding:30px 20px; text-align:center; border-right:1px solid var(--line); }
.metric:last-child{ border-right:none; }
.metric .num{ font-family:var(--serif); font-size:clamp(32px,5vw,50px); font-weight:700; color:var(--pine); line-height:1; font-variant-numeric:tabular-nums; }
.metric .lab{ font-size:13px; color:var(--ink-3); margin-top:10px; letter-spacing:.03em; }
@media (max-width:640px){ .counter{ flex-direction:column; } .metric{ border-right:none; border-bottom:1px solid var(--line); } .metric:last-child{ border-bottom:none; } }

/* ---------- interior page header ---------- */
.page-head{ text-align:center; padding:72px 0 14px; }
.page-head .eyebrow{ display:block; margin-bottom:16px; }
.page-head h1{ font-family:var(--serif); font-weight:700; font-size:clamp(38px,6.5vw,66px); line-height:1; letter-spacing:-.03em; text-wrap:balance; }
.page-head p{ color:var(--ink-2); font-size:clamp(17px,2.2vw,20px); max-width:56ch; margin:20px auto 0; }

/* ---------- generic section ---------- */
section.block{ padding:84px 0; }
.sec-head{ max-width:660px; margin:0 auto 52px; text-align:center; }
.sec-head h2{ font-family:var(--serif); font-size:clamp(30px,4.4vw,48px); letter-spacing:-.02em; line-height:1.05; margin:14px 0 14px; text-wrap:balance; }
.sec-head p{ color:var(--ink-2); font-size:18px; }

/* who-it's-for chips */
.chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:840px; margin:0 auto; }
.chip{ background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:10px 18px; font-size:14.5px; color:var(--ink-2); box-shadow:var(--shadow); transition:border-color .2s, color .2s, transform .2s; }
.chip:hover{ border-color:var(--pine); color:var(--pine); transform:translateY(-2px); }
.chip.more{ color:var(--pine); font-weight:600; border-style:dashed; }

/* service cards */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px 26px; box-shadow:var(--shadow); transition:transform .25s ease, border-color .25s; }
.card:hover{ transform:translateY(-4px); border-color:var(--pine); }
.card .ic{ width:46px; height:46px; border-radius:13px; background:color-mix(in srgb,var(--pine) 12%, transparent); color:var(--pine); display:grid; place-items:center; font-size:22px; margin-bottom:18px; }
.card h3{ font-family:var(--serif); font-size:21px; margin-bottom:8px; letter-spacing:-.01em; }
.card p{ color:var(--ink-2); font-size:15px; }
.card .for{ display:inline-block; margin-top:16px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--clay); font-weight:700; }

/* software / apps showcase */
.apps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .apps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .apps-grid{ grid-template-columns:1fr; } }
.app-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); transition:transform .25s ease, border-color .25s; display:flex; flex-direction:column; }
.app-card:hover{ transform:translateY(-4px); border-color:var(--pine); }
.app-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.app-mono{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:23px; color:#fff; flex:none; box-shadow:0 6px 16px rgba(22,33,27,.18); object-fit:cover; }
.app-card h3{ font-family:var(--serif); font-size:20px; letter-spacing:-.01em; line-height:1.1; }
.app-card .cat{ font-size:12px; color:var(--ink-3); letter-spacing:.04em; margin-top:3px; }
.app-card p{ color:var(--ink-2); font-size:14.5px; flex:1; }
.store-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.store{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); border-radius:100px; padding:7px 13px; transition:border-color .2s, color .2s; }
.store:hover{ border-color:var(--pine); color:var(--pine); }
.store svg{ width:14px; height:14px; fill:currentColor; }
.store.soon{ color:var(--clay); border-color:color-mix(in srgb,var(--clay) 40%,var(--line)); cursor:default; }
.app-card.build{ background:color-mix(in srgb,var(--pine) 8%, var(--surface)); border-style:dashed; border-color:color-mix(in srgb,var(--pine) 40%,var(--line)); align-items:flex-start; justify-content:center; }
.app-card.build h3{ margin-bottom:8px; }
.app-card.build .btn{ margin-top:16px; }

/* quote / promise band */
.promise{ background:var(--bg-2); }
.promise .inner{ max-width:780px; margin:0 auto; text-align:center; }
.promise blockquote{ font-family:var(--serif); font-size:clamp(24px,3.6vw,38px); line-height:1.25; letter-spacing:-.015em; text-wrap:balance; }
.promise blockquote .em{ color:var(--pine); font-style:italic; }
.promise .who{ margin-top:24px; color:var(--ink-3); font-size:14px; letter-spacing:.04em; }

/* how it works timeline */
.flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
@media (max-width:760px){ .flow{ grid-template-columns:1fr; } }
.node{ text-align:center; }
.node .ring{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; border:2px solid var(--pine); color:var(--pine); display:grid; place-items:center; font-family:var(--serif); font-size:22px; font-weight:700; background:var(--surface); }
.node h4{ font-size:19px; margin-bottom:8px; }
.node p{ color:var(--ink-2); font-size:15px; max-width:30ch; margin:0 auto; }

/* centered CTA block */
.cta{ text-align:center; }
.cta h2{ font-family:var(--serif); font-size:clamp(32px,5vw,54px); letter-spacing:-.02em; line-height:1.02; text-wrap:balance; margin-bottom:18px; }
.cta p{ color:var(--ink-2); font-size:18px; max-width:48ch; margin:0 auto 30px; }

/* ---------- about page ---------- */
.about-grid{ display:grid; gap:22px; max-width:820px; margin:0 auto; }
.about-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(26px,4vw,40px); box-shadow:var(--shadow); }
.about-card h2{ font-family:var(--serif); font-size:26px; margin-bottom:14px; letter-spacing:-.01em; }
.about-card > p{ color:var(--ink-2); margin-bottom:12px; }
.about-card > p:last-child{ margin-bottom:0; }
.values{ list-style:none; display:grid; gap:18px; }
.values li{ display:flex; gap:14px; align-items:flex-start; color:var(--ink-2); }
.values .vic{ flex:none; width:36px; height:36px; border-radius:10px; background:color-mix(in srgb,var(--pine) 12%,transparent); color:var(--pine); display:grid; place-items:center; }
.values .vic svg{ width:19px; height:19px; fill:currentColor; }
.values b{ color:var(--ink); }
.about-card.founder{ text-align:center; }
.about-card.founder .founder-line{ font-size:18px; color:var(--ink); }
.founder-link{ color:var(--pine); text-decoration:none; display:inline-flex; gap:6px; align-items:center; margin-left:10px; font-weight:600; }
.founder-link:hover{ text-decoration:underline; }
.founder-link svg{ width:18px; height:18px; fill:currentColor; }

/* ---------- legal / prose pages ---------- */
/* content is preserved from source exports; !important defeats their inline colors */
.legal{ max-width:820px; margin:0 auto; padding:20px 0 90px; }
.prose h1{ font-family:var(--serif)!important; font-size:clamp(30px,5vw,44px)!important; color:var(--ink)!important; -webkit-text-stroke:0!important; text-align:center; letter-spacing:-.02em; margin:0 0 6px; }
.prose h2{ font-family:var(--serif)!important; font-size:25px!important; color:var(--ink)!important; -webkit-text-stroke:0!important; letter-spacing:-.01em; margin:36px 0 12px; }
.prose h3{ font-family:var(--sans)!important; font-size:18px!important; font-weight:700!important; color:var(--ink)!important; -webkit-text-stroke:0!important; margin:26px 0 10px; }
.prose h4{ font-family:var(--sans)!important; font-size:15px!important; font-weight:700!important; color:var(--ink-2)!important; -webkit-text-stroke:0!important; letter-spacing:.02em; text-transform:uppercase; margin:20px 0 8px; }
.prose p{ color:var(--ink-2); font-size:16px; margin:0 0 14px; }
.prose ul{ margin:0 0 18px; padding-left:22px; }
.prose li{ color:var(--ink-2); font-size:16px; margin:7px 0; }
.prose b, .prose strong{ color:var(--ink); font-weight:700; }
.prose span{ color:inherit!important; -webkit-text-stroke:0!important; }
.prose a{ color:var(--pine); text-decoration:underline; }
.prose a:hover{ color:var(--pine-2); }
.prose hr{ border:none; border-top:1px solid var(--line); margin:28px 0; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:44px 0; color:var(--ink-3); font-size:14px; }
.foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; }
.foot-links a{ color:var(--ink-2); text-decoration:none; margin-left:22px; }
.foot-links a:first-child{ margin-left:0; }
.foot-links a:hover{ color:var(--pine); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }