/* ============================================================
   BIRDS — design system
   Neutral-dark. No chromatic accent by choice: emphasis comes
   from type, spacing and hairlines, not colour.

   Surfaces are built from translucent white layered over the
   base, NOT from lighter grey hex values. That is what makes
   dark UI read as expensive instead of flat. Keep it that way.
   ============================================================ */

:root{
  /* base */
  --bg:#08090B;
  --bg-deep:#050608;

  /* surfaces — opacity layers, never solid greys */
  --surf-1:rgba(255,255,255,.020);
  --surf-2:rgba(255,255,255,.045);
  --surf-3:rgba(255,255,255,.075);

  /* hairlines */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);

  /* type colours */
  --text:#EDEDED;
  --muted:#8B9096;
  --faint:#5C6167;
  --accent:#C8CDD4;

  /* type stacks */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --maxw:1200px;
  --gut:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* NOTE: horizontal padding is longhand throughout. `.wrap` gets combined with
   elements that set vertical padding, and the `padding` shorthand in either
   place silently zeroes the other axis. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
@media(max-width:560px){:root{--gut:20px}}

a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.028em;line-height:1.05;margin:0}
p{margin:0}

.d1{font-size:clamp(40px,7vw,84px)}
.d2{font-size:clamp(31px,4.4vw,54px)}
.d3{font-size:clamp(22px,2.5vw,29px);letter-spacing:-.022em}

/* mono eyebrow — the workhorse label of this system */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  margin:0 0 20px;
}
.eyebrow.lit{color:var(--accent)}

.lede{font-size:clamp(16.5px,1.55vw,19px);color:var(--muted);max-width:62ch}
.sub{color:var(--muted)}
.tight{max-width:52ch}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(8,9,11,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.mark{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
.mark-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.nav{display:flex;gap:30px;align-items:center}
.nav a{
  font-size:14px;color:var(--muted);position:relative;padding:4px 0;
  transition:color .18s var(--ease);
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--text)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--text)}
.nav-cta{
  font-size:13.5px;border:1px solid var(--line-2);padding:8px 16px;border-radius:2px;
  color:var(--text);transition:background .18s var(--ease),border-color .18s var(--ease);
}
.nav-cta:hover{background:var(--surf-2);border-color:var(--accent)}
.nav-cta::after{display:none}
.burger{display:none;background:none;border:1px solid var(--line-2);color:var(--text);border-radius:2px;padding:7px 11px;font:inherit;font-size:13px;cursor:pointer}
@media(max-width:820px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-top:1px solid var(--line);font-size:15px}
  .nav a::after{display:none}
  .nav-cta{margin-top:14px;text-align:center;border-top:1px solid var(--line-2)}
  .burger{display:block}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
#flock{position:absolute;inset:0;width:100%;height:100%;opacity:.78;pointer-events:none}
.hero-inner{position:relative;z-index:2;padding-top:132px;padding-bottom:112px}
@media(max-width:700px){.hero-inner{padding-top:76px;padding-bottom:64px}}
.hero h1{max-width:17ch}
.hero .lede{margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:2px;font-size:14.5px;font-weight:500;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn-solid{background:var(--text);color:var(--bg)}
.btn-solid:hover{background:#fff}
.btn-line{border:1px solid var(--line-2);color:var(--text)}
.btn-line:hover{background:var(--surf-2);border-color:var(--accent)}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

/* Inner pages have no .hero, so site.js injects the flock canvas into their
   first section instead. Children need lifting above it. */
.sec.has-flock{position:relative;overflow:hidden}
.sec.has-flock > *:not(#flock){position:relative;z-index:2}
.sec.has-flock > #flock{opacity:.5}

/* ---------- sections ---------- */
.sec{padding-top:104px;padding-bottom:104px;border-bottom:1px solid var(--line)}
@media(max-width:700px){.sec{padding-top:64px;padding-bottom:64px}}
.sec-head{max-width:70ch;margin-bottom:56px}
.sec-head .lede{margin-top:18px}

/* two-column split */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

/* ---------- stat band ---------- */
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line)}
.band .cell{padding:30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .cell:last-child{border-right:0}
.band .n{font-family:var(--display);font-size:30px;letter-spacing:-.03em;display:block;margin-bottom:6px}
.band .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media(max-width:700px){.band .cell{border-right:0;padding:22px 0}}

/* ---------- card grid ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--bg);padding:34px 30px;transition:background .22s var(--ease)}
.card:hover{background:var(--surf-1)}
.card .idx{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.14em;display:block;margin-bottom:18px}
.card h3{font-size:20px;margin-bottom:11px}
.card p{color:var(--muted);font-size:15px}

/* ---------- work list ---------- */
.work-list{border-top:1px solid var(--line)}
.work-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;
  padding:38px 0;border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
.work-row:hover{padding-left:14px}
.work-row .meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;display:flex;gap:14px;flex-wrap:wrap}
.work-row h3{font-size:clamp(23px,3vw,34px);margin-bottom:12px}
.work-row p{color:var(--muted);font-size:15.5px;max-width:64ch}
.work-row .go{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:8px;
  transition:color .2s var(--ease);
}
.work-row:hover .go{color:var(--accent)}
.work-row:hover .go .arw{transform:translateX(4px)}
.go .arw{transition:transform .25s var(--ease)}
@media(max-width:700px){.work-row{grid-template-columns:1fr;gap:18px}.work-row:hover{padding-left:0}}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:5px 10px;border-radius:2px}

/* ---------- numbered process list ---------- */
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;
  padding:26px 0 26px 62px;border-top:1px solid var(--line);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);
}
.steps h3{font-size:18px;margin-bottom:8px}
.steps p{color:var(--muted);font-size:15px}

/* ---------- key/value list ---------- */
.kv{list-style:none;padding:0;margin:0}
.kv li{padding:19px 0;border-top:1px solid var(--line);color:var(--muted);font-size:15.5px}
.kv li:first-child{border-top:0;padding-top:0}
.kv b{color:var(--text);font-weight:600}

/* ---------- panel ---------- */
.panel{background:var(--surf-1);border:1px solid var(--line);padding:44px 40px}
@media(max-width:560px){.panel{padding:30px 22px}}

/* ---------- prose (case studies) ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin:52px 0 16px}
.prose h3{font-size:19px;margin:34px 0 12px}
.prose p{color:var(--muted);margin-bottom:17px}
.prose ul{color:var(--muted);padding-left:20px;margin:0 0 17px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent);border-bottom:1px solid var(--line-2)}
.prose a:hover{border-color:var(--accent)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:620px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--bg);padding:30px 26px;display:flex;flex-direction:column}
.price-np{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border-top:1px solid var(--line);padding-top:12px;margin-bottom:22px;
}
.price-np b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;text-transform:none}
.tier.pick{background:var(--surf-2)}
.tier .idx{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);display:block;margin-bottom:14px}
.tier.pick .idx{color:var(--accent)}
.tier h3{font-size:23px;margin-bottom:8px}
.tier .blurb{color:var(--muted);font-size:14.5px;min-height:44px}
.price{margin:24px 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price .amt{font-family:var(--display);font-size:38px;letter-spacing:-.035em;line-height:1}
.price .pre{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.price-alt{font-size:13px;color:var(--faint);margin-bottom:22px}
.feat{list-style:none;padding:0;margin:0 0 26px;flex:1}
.feat li{
  padding:9px 0 9px 24px;position:relative;font-size:14.5px;color:var(--muted);
  border-top:1px solid var(--line);
}
.feat li:first-child{border-top:0}
.feat li::before{
  content:'';position:absolute;left:2px;top:17px;
  width:9px;height:1px;background:var(--accent);
}
.feat li.no{color:var(--faint)}
.feat li.no::before{background:var(--line-2);width:5px}
.tier .btn{justify-content:center}

/* care plan table */
.plans{width:100%;border-collapse:collapse;font-size:14.5px}
.plans th,.plans td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.plans thead th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);border-bottom-color:var(--line-2);
}
.plans tbody th{font-weight:400;color:var(--muted);width:34%}
.plans td{color:var(--text)}
.plans .amt{font-family:var(--display);font-size:26px;letter-spacing:-.03em}
.plans .per{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.plans .dash{color:var(--faint)}
.plans col.hi,.plans .hi{background:var(--surf-1)}
.tablewrap{overflow-x:auto;border:1px solid var(--line)}
@media(max-width:700px){.plans{min-width:620px}}

/* ---------- CTA strip ---------- */
.cta-strip{background:var(--bg-deep);border-bottom:1px solid var(--line)}
.cta-strip .inner{padding-top:92px;padding-bottom:92px}
.cta-strip h2{max-width:16ch}
.mailto{
  display:inline-block;margin-top:28px;font-family:var(--display);
  font-size:clamp(21px,3vw,30px);letter-spacing:-.03em;
  border-bottom:1px solid var(--line-2);padding-bottom:4px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.mailto:hover{border-color:var(--accent);color:#fff}

/* ---------- footer ---------- */
.site-foot{padding-top:56px;padding-bottom:44px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:52px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
.foot-grid h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.foot-links{display:flex;flex-direction:column;gap:11px}
.foot-links a{font-size:14.5px;color:var(--muted);transition:color .18s var(--ease)}
.foot-links a:hover{color:var(--text)}
.foot-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
.foot-bar .mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- scroll reveal ----------
   The hidden state is gated behind `html.js`, which site.js adds as its very
   first action. Without that gate, any JS failure leaves every section stuck
   hidden and the site renders blank. Content-visible is the default; the
   animation is the enhancement. Do not move these rules onto the bare class.

   Three variants:
     .rv       fade and rise      — body copy, cards, list rows
     .rv-mask  wipe up behind an edge — headings
     .rv-line  draw left to right — hairlines and rules              */

.rv,.rv-mask,.rv-line{opacity:1;transform:none;clip-path:none}

.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* the type rises out from under a hard edge rather than fading in place */
.js .rv-mask{
  clip-path:inset(0 0 105% 0);
  transform:translateY(14px);
  transition:clip-path .9s var(--ease),transform .9s var(--ease);
}
.js .rv-mask.in{clip-path:inset(0 0 -12% 0);transform:none}

/* hairlines draw themselves */
.js .rv-line{transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--ease)}
.js .rv-line.in{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv-mask,.js .rv-line{opacity:1;transform:none;clip-path:none;transition:none}
  #flock{display:none}
}

/* ---------- utility ---------- */
.mono{font-family:var(--mono)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:10px;z-index:99;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}