/* =====================================================================
   Receptia team pages — shared layout styles.
   Tokens + conventions mirror index.html exactly (same palette, same
   type pairing, same shadows). Motion lives in ../motion.css.
   ===================================================================== */
:root {
  /* GRAPHITE tokens (2026-07-29) — must match index.html's rebuild palette */
  --paper:    #0a0d12;
  --paper-2:  #0d1117;
  --card:     #12161d;
  --ink:      #f2f6f5;
  --text:     #c6d0d2;
  --muted:    #93a0a9;
  --line:     rgba(255,255,255,0.08);
  --line-2:   rgba(255,255,255,0.15);
  --acc:      #00e5a0;
  --acc-deep: #3ee2ad;
  --acc-hi:   #8affd6;
  --acc-soft: rgba(0,229,160,0.10);
  --acc-line: rgba(0,229,160,0.30);
  /* CHARCOAL GLASS depth — mirrors the rebuilt index.html */
  --glass: inset 0 1px 0 rgba(255,255,255,0.09);
  --clay-lo-sm: inset 0 -3px 6px -2px rgba(0,0,0,0.35);
  --clay-lo-md: inset 0 -4px 8px -3px rgba(0,0,0,0.42);
  --sh-sm: var(--glass), var(--clay-lo-sm), 0 0 0 1px rgba(255,255,255,0.04), 0 3px 8px -2px rgba(0,0,0,0.42), 0 10px 24px -8px rgba(0,0,0,0.5);
  --sh-md: var(--glass), var(--clay-lo-md), 0 0 0 1px rgba(255,255,255,0.05), 0 10px 24px -8px rgba(0,0,0,0.5), 0 26px 58px -14px rgba(0,0,0,0.6);
  --r:    30px;
  --r-sm: 20px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Inter", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", "Courier New", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--text); background: var(--paper);
  font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 530; line-height: 1.06; letter-spacing: -0.022em; color: var(--ink); }
h1 em, h2 em { font-style: italic; font-weight: 470; color: var(--acc-deep); }
p { color: var(--muted); }
a { color: inherit; text-decoration: none; }
strong { color: var(--text); font-weight: 650; }
svg { display: block; }
img { max-width: 100%; }
.wrap { width: min(980px, 92vw); margin-inline: auto; }
::selection { background: rgba(14,177,129,0.22); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc-deep); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--acc); flex: 0 0 auto; }

/* buttons — same recipe as index */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 650; border: 0; border-radius: 999px;
  padding: 14px 26px; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn:focus-visible { outline: 2.5px solid var(--acc-deep); outline-offset: 3px; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-ink { background: linear-gradient(180deg, #ffffff, #e9efec); color: #0a0d12; box-shadow: var(--sh-sm); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: var(--sh-md); background: #ffffff; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--sh-sm); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--acc-line); }

/* header — slim version of the index bar; see-through at rest, frosts on scroll */
header { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,13,18,0.72), rgba(10,13,18,0.12) 62%, transparent);
  transition: opacity .25s ease; }
/* fully see-through even when scrolled — no fill, no bar; soft top scrim keeps links legible */
header.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.nav { display: flex; align-items: center; gap: 18px; padding: 13px 0; }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 620; letter-spacing: -0.02em; font-size: 19px; color: var(--ink); }
.logo img { width: 26px; height: 26px; }
.backlink { font-size: 13.5px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.backlink:hover { color: var(--acc-deep); }
.nav .spacer { flex: 1; }

/* hero */
.p-hero { padding: 72px 0 64px; }
.p-hero .cols { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.p-hero .persona-fig { width: 300px; height: 300px; }
.p-hero .persona-fig img { width: 100%; height: 100%; border-radius: 50%; display: block; position: relative; background: var(--paper-2); border: 1px solid var(--line); }
.p-hero .persona-fig .pip { width: 18px; height: 18px; right: 22px; bottom: 24px; box-shadow: 0 0 0 4px var(--paper), 0 0 12px rgba(0,229,160,0.45); }
.p-hero h1 { font-size: clamp(38px, 5.2vw, 58px); margin-top: 16px; }
.p-hero .role { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--acc-deep); background: var(--acc-soft); border: 1px solid var(--acc-line); border-radius: 999px; padding: 6px 14px; }
.p-hero .promise { margin-top: 18px; font-size: 17.5px; max-width: 52ch; }
.p-hero .honest { margin-top: 14px; font-size: 14px; max-width: 56ch; }
.p-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* what they do */
.band { padding: 76px 0; }
.band.alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.head { max-width: 640px; margin-bottom: 44px; }
.head h2 { font-size: clamp(28px, 3.2vw, 38px); margin-top: 14px; }
.does { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.does .d { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px; box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.does .d:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.does .d .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--acc-soft); color: var(--acc-deep); display: grid; place-items: center; margin-bottom: 14px; }
.does .d .ic svg { width: 19px; height: 19px; }
.does .d h3 { font-size: 17.5px; letter-spacing: -0.01em; }
.does .d p { margin-top: 8px; font-size: 14px; }

/* a moment from the desk — chat vignette */
.moment { max-width: 560px; margin-inline: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-md); padding: 26px 24px; }
.moment .stamp { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 16px; }
.moment .msg { max-width: 82%; border-radius: 14px; padding: 11px 15px; font-size: 14.5px; line-height: 1.55; margin-top: 10px; }
.moment .msg.them { background: var(--paper-2); border: 1px solid var(--line); color: var(--text); }
.moment .msg.us { background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--text); margin-left: auto; }
.moment .msg .who { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-deep); margin-bottom: 4px; }
.moment .note { margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted); font-style: italic; }

/* two moments side by side on desktop */
.moments { display: grid; gap: 22px; }
.moments .moment { max-width: none; margin-inline: 0; }
@media (min-width: 900px) { .moments { grid-template-columns: 1fr 1fr; align-items: start; } }

/* the fine print that matters — skills + the honest "won't do" panel */
.fine { display: grid; gap: 16px; }
@media (min-width: 860px) { .fine { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }
.fine .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; box-shadow: var(--sh-sm); }
.fine .panel h3 { font-size: 19px; letter-spacing: -0.01em; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.skill-chips .sc { font-size: 13.5px; font-weight: 570; color: var(--text); background: var(--acc-soft); border: 1px solid var(--acc-line); border-radius: 999px; padding: 8px 15px; }
.wont { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.wont li { display: flex; gap: 11px; font-size: 14.5px; color: var(--muted); align-items: flex-start; line-height: 1.55; }
.wont .x { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.07); color: var(--muted); display: grid; place-items: center; flex: 0 0 auto; margin-top: 2px; font-size: 11px; font-weight: 700; font-family: var(--sans); }
.wont b { color: var(--text); }

/* rest of the team */
.sibs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sib { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.sib:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--acc-line); }
.sib:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.sib img { width: 56px; height: 56px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line); flex: 0 0 auto; }
.sib b { font-family: var(--display); font-weight: 620; font-size: 16.5px; color: var(--ink); display: block; }
.sib span { font-size: 12.5px; color: var(--muted); }

/* CTA band */
.cta-band { text-align: center; padding: 80px 0 90px; }
.cta-band h2 { font-size: clamp(28px, 3.4vw, 40px); }
.cta-band p { margin-top: 14px; }
.cta-band .cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 26px 0 34px; }
footer .cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
footer a:hover { color: var(--acc-deep); }

@media (max-width: 799px) {
  .p-hero { padding: 48px 0 52px; }
  .p-hero .cols { grid-template-columns: 1fr; gap: 34px; }
  .p-hero .persona-fig { width: 220px; height: 220px; margin-inline: auto; }
  .band { padding: 56px 0; }
  .backlink small { display: none; }
}
@media (max-width: 640px) {
  /* the header row can't fit logo + backlink + full CTA at 375px — compact it */
  .backlink { display: none; }
  .nav { gap: 12px; }
  .nav .btn { padding: 11px 18px; font-size: 13.5px; }
}