/* ==========================================================================
   Upshoot Collective
   Concept: "The Stem" — a single line of growth runs the length of the page,
   sprouting a leaf at every section. Content climbs as you scroll.
   ========================================================================== */

:root{
  /* Brand palette — from the brand pack. Change here, changes everywhere. */
  --mint:        #0E9C8A;
  --shadow:      #0A6E63;
  --deepshadow:  #075248;
  --lightmint:   #7FD8CA;
  --tint:        #D5F2EC;
  --tintbg:      #EAF7F4;
  --ink:         #15161C;
  --slate:       #5B5E6B;
  --paper:       #FBF8F2;
  --line:        #E7E2D6;

  /* Layout */
  --col:      1080px;   /* content column */
  --gutter:   28px;
  --rail:     96px;     /* space reserved for the stem on desktop */

  /* Type scale */
  --display:  clamp(2.6rem, 5.6vw, 4.5rem);
  --h2:       clamp(1.85rem, 3.7vw, 2.9rem);
  --h3:       clamp(1.28rem, 2vw, 1.6rem);
  --body:     clamp(1.02rem, 1.15vw, 1.14rem);

  --ease:     cubic-bezier(.22,.68,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--body);
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

h1,h2,h3,.display{
  font-family:'Bricolage Grotesque','Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.022em;
}

::selection{ background:var(--mint); color:#fff; }

/* Focus — visible, on brand, never removed */
:focus-visible{ outline:2.5px solid var(--mint); outline-offset:3px; border-radius:3px; }

/* ---------- Shared bits ---------- */
.label{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.19em;
  font-size:.72rem;
  color:var(--shadow);
}
.lede{
  font-size:clamp(1.06rem,1.5vw,1.28rem);
  color:var(--slate);
  max-width:56ch;
  line-height:1.5;
}
.mono{ font-family:'Space Grotesk','Inter',sans-serif; }

.shell{
  max-width:calc(var(--col) + var(--rail) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell > *{ max-width:var(--col); margin-left:var(--rail); }
@media (max-width:900px){
  :root{ --rail:34px; --gutter:20px; }
}
@media (max-width:560px){
  :root{ --rail:26px; --gutter:16px; }
}

section{ position:relative; }
section[id]{ scroll-margin-top:86px; }
.band{ padding-block:clamp(58px,6.6vw,94px); }

/* ==========================================================================
   TRUSTED BY — client logo row
   ==========================================================================
   Logos are pre-rendered as single-colour Upshoot-ink silhouettes on
   transparency, so the row reads as one system rather than four brand
   palettes fighting each other.

   Each <li> carries an inline --h (its display height). Logos are NOT all
   the same height on purpose: a wide wordmark set to the same height as a
   square mark looks twice as heavy. --h optically balances them. Wide
   wordmark ≈ 30px, standard lockup ≈ 40px, near-square mark ≈ 47px.
   ========================================================================== */
.clients{
  padding-block:clamp(30px,4vw,46px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.clients .label{ display:block; margin-bottom:24px; color:var(--slate); }

/* The marquee. Two identical copies of the logo set sit side by side and the
   track slides exactly half its own width, so the loop is seamless. The gap
   lives on each item's margin-right (not flex `gap`) — with flex gap there is
   no trailing gap after the last item, the halves don't match, and the loop
   visibly jumps. */
.marquee{
  position:relative;
  overflow:hidden;
  /* fade out at both edges */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.marquee-track{
  list-style:none;
  display:flex;
  align-items:center;
  width:max-content;
}
/* --shift and --dur are written by main.js once it has measured one set */
.marquee-track.running{
  animation:marquee var(--dur,26s) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-1 * var(--shift,50%))); }
}

.client{
  --h:38px;
  flex:none;
  display:flex; align-items:center; justify-content:flex-start;
  min-height:52px;
  margin-right:clamp(46px,7vw,96px);
  opacity:.55;
  transition:opacity .3s var(--ease);
}
.client:hover{ opacity:.9; }
.client img{
  height:var(--h); width:auto; max-width:100%;
  object-fit:contain; object-position:left center;
}
.client .name{
  font-family:'Bricolage Grotesque','Archivo',sans-serif;
  font-weight:700; font-size:clamp(1rem,1.6vw,1.2rem);
  letter-spacing:-.018em; color:var(--ink);
  line-height:1.15;
}
.client .what{
  display:block;
  font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); margin-top:5px;
}
@media (max-width:720px){
  .client{ margin-right:44px; }
}
/* The marquee is decorative motion. Anyone who has asked their OS for less
   movement gets the logos still, scrollable by hand. main.js also skips the
   cloning entirely in that case. */
@media (prefers-reduced-motion:reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; overflow-x:auto; }
  .marquee-track{ animation:none !important; }
}

.sec-head{ margin-bottom:clamp(34px,4.6vw,60px); }
.sec-head .label{ display:block; margin-bottom:14px; }
.sec-head h2{ font-size:var(--h2); margin-bottom:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:600; font-size:1rem;
  padding:.92em 1.5em;
  border-radius:100px;
  text-decoration:none;
  transition:transform .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translate(2px,-3px); }

.btn-primary{
  background:var(--mint); color:#fff;
  box-shadow:0 1px 2px rgba(7,82,72,.2), 0 10px 26px -10px rgba(7,82,72,.55);
}
.btn-primary:hover{ background:var(--shadow); transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(7,82,72,.22), 0 18px 34px -12px rgba(7,82,72,.6); }

.btn-ghost{ border:1.5px solid var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--mint); color:var(--shadow); transform:translateY(-2px); }

.btn-light{ background:#fff; color:var(--deepshadow); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(0,0,0,.5); }

.btn-outline-light{ border:1.5px solid rgba(255,255,255,.55); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.09); transform:translateY(-2px); }

.textlink{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:600; text-decoration:none; color:var(--shadow);
  border-bottom:1.5px solid var(--tint);
  padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.textlink:hover{ border-color:var(--mint); color:var(--mint); }
.textlink .arr{ transition:transform .3s var(--ease); }
.textlink:hover .arr{ transform:translate(2px,-3px); }

/* ==========================================================================
   THE STEM
   ========================================================================== */
.stem{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  overflow:visible;
}
.stem-line{
  fill:none;
  stroke:var(--mint);
  stroke-width:2.5;
  stroke-linecap:round;
}
.stem-ghost{
  fill:none;
  stroke:var(--line);
  stroke-width:2.5;
  stroke-linecap:round;
}
.stem-node{
  fill:var(--paper);
  stroke:var(--mint);
  stroke-width:2.5;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.stem-node.sprouted{ opacity:1; transform:scale(1); }

.stem-leaf{
  fill:var(--mint);
  opacity:0;
  transform-box:fill-box;
  transform-origin:0% 100%;
  transition:opacity .5s var(--ease), transform .75s var(--ease);
}
.stem-leaf.sprouted{ opacity:1; }

.stem-tip{
  fill:var(--mint);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.stem-tip.lit{ opacity:1; }

/* Everything above the stem */
main, .site-nav, .site-footer{ position:relative; z-index:1; }

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,242,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-nav.stuck{ border-bottom-color:var(--line); }
.nav-inner{
  max-width:calc(var(--col) + var(--rail) + var(--gutter) * 2);
  margin-inline:auto;
  padding:15px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; font-weight:700; letter-spacing:-.018em;
  font-size:1.03rem;
}
.brand img{ width:23px; height:auto; }
.brand span{ white-space:nowrap; }
.nav-links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); }
.nav-links a{
  text-decoration:none; font-size:.95rem; font-weight:500; color:var(--slate);
  transition:color .2s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links .btn{ padding:.62em 1.15em; font-size:.92rem; color:#fff; }
.nav-links .btn:hover{ color:#fff; }
@media (max-width:680px){
  /* Hide same-page anchors on small screens — you scroll past those sections
     anyway. Keep links to OTHER pages visible, because the footer is the only
     other route to them. */
  .nav-links a.hide-sm{ display:none; }
  .nav-links a.hide-sm[href*="story"]{ display:inline-block; }
  .brand span{ display:none; }
  .nav-links{ gap:14px; }
  .nav-links a{ font-size:.9rem; }
  .nav-links .btn{ padding:.6em 1em; font-size:.88rem; }
}
@media (max-width:400px){
  .nav-links{ gap:10px; }
  .nav-links a{ font-size:.85rem; }
  .nav-links .btn{ padding:.58em .9em; font-size:.84rem; }
  .nav-inner{ padding-inline:14px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding-top:clamp(58px,9vw,104px); padding-bottom:clamp(64px,9vw,116px); }
.hero .label{ display:block; margin-bottom:22px; }
.hero h1{
  font-size:var(--display);
  max-width:17ch;
  margin-bottom:26px;
}
.hero h1 .rise{
  display:block;
  color:var(--mint);
}
.hero .lede{ margin-bottom:36px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; align-items:center; }
.hero-note{
  margin-top:30px;
  font-size:.9rem; color:var(--slate);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.hero-note b{ color:var(--ink); font-weight:600; }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--lightmint); flex:none; }

/* ==========================================================================
   THE GAP — two stat cards
   ========================================================================== */
.gap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .gap-grid{ grid-template-columns:1fr; } }

.gapcard{
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(26px,3.2vw,38px);
  background:#fff;
  position:relative;
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .45s var(--ease);
}
.gapcard:hover{ border-color:var(--tint); transform:translateY(-3px); }
.gapcard .label{ display:block; margin-bottom:16px; color:var(--slate); }
.gapcard h3{ font-size:var(--h3); margin-bottom:12px; }
.gapcard p{ color:var(--slate); font-size:.98rem; margin-bottom:28px; }
.gapcard{ display:flex; flex-direction:column; }
.stat{
  border-top:1px solid var(--line);
  padding-top:20px;
}
.stat .num{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(2.9rem,6vw,4rem);
  line-height:1; color:var(--mint);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stat .cap{ font-size:.88rem; color:var(--slate); margin-top:9px; max-width:34ch; }
.stat .src{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); opacity:.75; margin-top:14px;
}

.gap-close{
  margin-top:26px;
  font-size:1.02rem;
  color:var(--ink);
  font-weight:500;
  max-width:52ch;
}

/* ==========================================================================
   WHAT WE DO
   ========================================================================== */
.do-list{ border-top:1px solid var(--line); }
.do-row{
  display:grid;
  grid-template-columns:56px 1.05fr 1.3fr;
  gap:clamp(16px,3vw,44px);
  align-items:start;
  padding:clamp(26px,3.4vw,40px) 0;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.do-row .n{
  font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:.82rem; color:var(--shadow); padding-top:.45em;
  letter-spacing:.06em;
}
.do-row h3{ font-size:var(--h3); }
.do-row p{ color:var(--slate); font-size:1rem; }
@media (max-width:720px){
  .do-row{ grid-template-columns:1fr; gap:10px; }
  .do-row .n{ padding-top:0; }
}

/* ==========================================================================
   PRICING — the ladder that climbs
   ========================================================================== */
.ladder{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:end;
}
.tier{
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:clamp(24px,2.6vw,32px);
  display:flex; flex-direction:column;
  position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
/* the climb */
.tier--1{ margin-bottom:0; }
.tier--2{ margin-bottom:34px; }
.tier--3{ margin-bottom:68px; }
.tier:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -26px rgba(7,82,72,.42); border-color:var(--tint); }

.tier-flag{
  position:absolute; top:-11px; left:clamp(24px,2.6vw,32px);
  background:var(--ink); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px;
}
.tier-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.55rem; letter-spacing:-.02em; margin-bottom:4px; }
.tier-plats{
  font-family:'Space Grotesk',sans-serif; font-size:.76rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--shadow);
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line);
}
.price{ display:flex; align-items:baseline; gap:7px; margin-bottom:6px; }
.price .amt{
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(2.5rem,4.4vw,3.15rem); line-height:1;
  letter-spacing:-.03em; color:var(--ink);
}
.price .per{ font-size:.92rem; color:var(--slate); font-weight:500; }
.tier-what{ font-size:.95rem; color:var(--slate); margin-bottom:20px; }
.tier ul{ list-style:none; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.tier li{
  font-size:.93rem; color:var(--slate); padding-left:20px; position:relative;
  margin-bottom:9px; line-height:1.45;
}
.tier li::before{
  content:"↗"; position:absolute; left:0; top:0;
  color:var(--shadow); font-weight:700; font-size:.85rem;
}

/* Reach — the dark card. These come AFTER the base .tier rules on purpose:
   .tier--3 li and .tier li have equal specificity, so source order decides.
   Move this block above them and the list text goes grey-on-green. */
.tier.tier--3{
  background:linear-gradient(158deg,var(--shadow),var(--deepshadow));
  border-color:transparent; color:#fff;
}
.tier.tier--3:hover{ border-color:transparent;
  box-shadow:0 26px 50px -26px rgba(7,82,72,.6); }
.tier.tier--3 .tier-name,
.tier.tier--3 .price .amt{ color:#fff; }
.tier.tier--3 .tier-what,
.tier.tier--3 .price .per,
.tier.tier--3 li{ color:rgba(255,255,255,.93); }
.tier.tier--3 .tier-plats{ color:var(--tint); border-bottom-color:rgba(255,255,255,.26); }
.tier.tier--3 ul{ border-top-color:rgba(255,255,255,.26); }
.tier.tier--3 li::before{ color:var(--tint); }
@media (max-width:860px){
  .ladder{ grid-template-columns:1fr; }
  .tier--1,.tier--2,.tier--3{ margin-bottom:0; }
}

.price-note{
  margin-top:clamp(34px,4vw,52px);
  border-left:3px solid var(--mint);
  padding:6px 0 6px 22px;
  max-width:60ch;
  color:var(--slate);
  font-size:1rem;
}
.price-note b{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   WHERE WE SIT
   ========================================================================== */
.sit{ border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; }
.sit-row{
  display:grid; grid-template-columns:150px 1fr; gap:clamp(14px,3vw,32px);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,32px);
  border-bottom:1px solid var(--line);
  align-items:center;
}
.sit-row:last-child{ border-bottom:0; }
.sit-row .label{ color:var(--slate); }
.sit-row p{ color:var(--slate); font-size:1rem; }
.sit-row.is-us{ background:var(--ink); color:#fff; }
.sit-row.is-us .label{ color:var(--lightmint); }
.sit-row.is-us p{ color:#fff; font-weight:500; font-size:1.06rem; }
@media (max-width:640px){
  .sit-row{ grid-template-columns:1fr; gap:8px; }
}

/* ==========================================================================
   THE DIFFERENCE
   ========================================================================== */
.diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line);
  border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.diff{ background:var(--paper); padding:clamp(26px,3vw,38px); transition:background .3s var(--ease); }
.diff:hover{ background:#fff; }
.diff .n{ font-family:'Space Grotesk',sans-serif; font-size:.78rem; color:var(--shadow);
  letter-spacing:.14em; display:block; margin-bottom:14px; }
.diff h3{ font-size:1.22rem; margin-bottom:10px; }
.diff p{ color:var(--slate); font-size:.96rem; }
@media (max-width:720px){ .diff-grid{ grid-template-columns:1fr; } }
.diff-close{ margin-top:24px; color:var(--slate); font-size:1rem; max-width:54ch; }
.diff-close b{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   EMINENCE teaser
   ========================================================================== */
.emin{
  background:linear-gradient(152deg,var(--shadow),var(--deepshadow));
  border-radius:26px;
  padding:clamp(34px,5vw,66px);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.emin::after{
  content:""; position:absolute; right:-90px; top:-90px;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(127,216,202,.24),transparent 68%);
  pointer-events:none;
}
.emin .label{ color:var(--tint); display:block; margin-bottom:16px; }
.emin h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:18px; max-width:17ch; }
.emin p{ color:rgba(255,255,255,.9); max-width:52ch; margin-bottom:14px; }
.emin .emin-price{
  font-family:'Space Grotesk',sans-serif; color:var(--tint);
  font-size:.88rem; letter-spacing:.06em; margin:22px 0 26px;
}
.emin .btn-light{ position:relative; z-index:1; }

/* ==========================================================================
   THE RISE
   ========================================================================== */
.rise-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.rise-step{ padding-top:26px; border-top:2px solid var(--line); transition:border-color .4s var(--ease); }
.rise-step.in{ border-top-color:var(--mint); }
.rise-step .label{ display:block; margin-bottom:14px; }
.rise-step h3{ font-size:1.2rem; margin-bottom:10px; }
.rise-step p{ color:var(--slate); font-size:.96rem; }
@media (max-width:760px){ .rise-grid{ grid-template-columns:1fr; gap:26px; } }
.rise-close{ margin-top:34px; font-size:clamp(1.15rem,2.1vw,1.5rem); font-weight:500;
  max-width:40ch; letter-spacing:-.01em; }

/* ==========================================================================
   BELIEFS
   ========================================================================== */
.beliefs{ list-style:none; }
.beliefs li{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding:22px 0; border-bottom:1px solid var(--line);
  font-size:clamp(1.04rem,1.7vw,1.24rem);
  line-height:1.42; letter-spacing:-.008em;
}
.beliefs li:first-child{ border-top:1px solid var(--line); }
.beliefs .mk{ color:var(--mint); font-weight:700; }

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
.cta{
  background:linear-gradient(158deg,var(--shadow) 0%,var(--deepshadow) 100%);
  color:#fff;
  padding-block:clamp(70px,8.5vw,112px);
  position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 22% 0%,rgba(255,255,255,.14),transparent 58%);
  pointer-events:none;
}
.cta .label{ color:var(--tint); display:block; margin-bottom:20px; }
.cta h2{ font-size:clamp(2.1rem,4.4vw,3.3rem); max-width:13ch; margin-bottom:20px; }
.cta p{ color:rgba(255,255,255,.92); max-width:48ch; margin-bottom:34px; font-size:1.08rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:13px; align-items:center; }
.cta-mail{
  margin-top:30px; font-size:.95rem; color:rgba(255,255,255,.85);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.cta-mail a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.55); }
.cta-mail a:hover{ border-color:#fff; }

.site-footer{ padding-block:44px; border-top:1px solid var(--line); }
.foot-inner{
  display:flex; flex-wrap:wrap; gap:18px 30px;
  align-items:center; justify-content:space-between;
  font-size:.88rem; color:var(--slate);
}
.foot-inner a{ color:var(--slate); text-decoration:none; }
.foot-inner a:hover{ color:var(--ink); }
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; }

/* ==========================================================================
   EMINENCE PAGE
   ========================================================================== */
.emin-hero{ padding-top:clamp(52px,7vw,88px); padding-bottom:clamp(52px,7vw,88px); }
.emin-hero h1{ font-size:clamp(2.3rem,4.9vw,3.9rem); max-width:16ch; margin-bottom:24px; }
.emin-hero .label{ display:block; margin-bottom:20px; }
.back-link{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  color:var(--slate); font-size:.92rem; font-weight:500; margin-bottom:28px;
}
.back-link:hover{ color:var(--ink); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
@media (max-width:800px){ .split{ grid-template-columns:1fr; } }
.split h3{ font-size:var(--h3); margin-bottom:12px; }
.split p{ color:var(--slate); margin-bottom:14px; }

.pricecard{
  border:1px solid var(--line); border-radius:22px; background:#fff;
  padding:clamp(28px,3.4vw,42px);
}
.pricecard .price{ margin-bottom:10px; }
.pricecard ul{ list-style:none; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.pricecard li{ font-size:.96rem; color:var(--slate); padding-left:22px; position:relative; margin-bottom:11px; }
.pricecard li::before{ content:"↗"; position:absolute; left:0; color:var(--shadow); font-weight:700; font-size:.85rem; }
.pricecard .btn{ margin-top:26px; width:100%; justify-content:center; }

.forwho{ list-style:none; }
.forwho li{
  padding:18px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  color:var(--slate); font-size:1.02rem;
}
.forwho li:first-child{ border-top:1px solid var(--line); }
.forwho .mk{ color:var(--mint); font-weight:700; }
.forwho b{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   PHOTO STRIP — our story page
   ==========================================================================
   Three portrait photos in a row. Images are already black and white; the
   aspect-ratio box plus object-fit means a replacement of any shape still
   sits flush without redoing the layout.
   ========================================================================== */
.photo-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px);
  margin-bottom:clamp(34px,4.4vw,56px);
}
.photo-strip figure{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:var(--tintbg);
  aspect-ratio:4 / 5;
}
.photo-strip img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease);
}
.photo-strip figure:hover img{ transform:scale(1.03); }
@media (max-width:560px){
  .photo-strip figure{ border-radius:12px; }
}

/* ==========================================================================
   PULL QUOTE — our story page
   ========================================================================== */
.quote{
  margin-top:clamp(34px,4vw,52px);
  border-left:3px solid var(--mint);
  padding:4px 0 4px clamp(20px,2.6vw,30px);
  max-width:62ch;
}
.quote blockquote{
  font-family:'Bricolage Grotesque','Archivo',sans-serif;
  font-weight:400;
  font-size:clamp(1.16rem,2.1vw,1.55rem);
  line-height:1.32;
  letter-spacing:-.014em;
  color:var(--ink);
}
.quote blockquote::before{ content:"\201C"; }
.quote blockquote::after{ content:"\201D"; }
.quote figcaption{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin-top:18px;
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .85s var(--ease);
}
.reveal.d1.in{ transition-delay:.07s; }
.reveal.d2.in{ transition-delay:.14s; }
.reveal.d3.in{ transition-delay:.21s; }

/* ==========================================================================
   MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .stem-leaf,.stem-node,.stem-tip{ opacity:1; transform:none; }
}

@media print{
  .stem,.site-nav{ display:none; }
  body{ background:#fff; }
}