/* ============================================================
   WEFT & CO. · main.css
   Sections in source order. Tokens live in tokens.css.
   ============================================================ */

/* ─────────────────────────  base  ───────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--rust);color:var(--cream);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
img,canvas{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:var(--cream);
  padding:14px 20px;font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
}
.skip:focus{left:0;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ────────────────────  shared type roles  ──────────────────── */
.label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-60);
  display:inline-flex;
  align-items:center;
  gap:10px;
  line-height:1.5;
  /* NOTE: intentionally wraps. Was nowrap, which clipped card footers. */
}
.label .dot{width:7px;height:7px;border-radius:50%;background:var(--rust);flex:none;}
.label.on-ink{color:var(--cream-70);}
.label.on-ink .dot{background:var(--coral);}

.display{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-0.042em;
  line-height:0.92;
  text-wrap:balance;
  font-feature-settings:"kern" 1;
}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-0.035em;}
/* Archivo ships no italic cut, so the browser synthesizes an oblique by
   slanting the roman. That fake slant reads as sloppy at display sizes.
   In headings, <em> means the accent color, never a slant. Rust is the
   default accent; the per-context rules below override it where a section
   uses mustard, sage, coral or gold. Parent brand only. No page under
   practice/ loads this sheet, so the child brand is unaffected. */
h1 em,h2 em,h3 em,.display em{font-style:normal;color:var(--rust);}

.pad{padding:clamp(80px,13vh,150px) var(--gutter);}
section{position:relative;}

.sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:26px;
  border-bottom:1px solid var(--ink-12);
  margin-bottom:clamp(36px,6vh,72px);
  gap:16px 32px;flex-wrap:wrap;
}
.sec-head.on-ink{border-bottom-color:var(--cream-12);}
.sec-sub{
  font-family:var(--display);font-weight:700;
  letter-spacing:-0.03em;line-height:1.05;
  font-size:clamp(24px,3.1vw,44px);
  max-width:22ch;margin:0 0 clamp(34px,5.5vh,64px);
  color:var(--ink);text-wrap:balance;
}
.sec-sub.on-ink{color:var(--cream);}

/* ─────────────────  corner dots (brand motif)  ───────────────── */
.corner-dot{
  position:fixed;width:8px;height:8px;border-radius:50%;
  background:var(--rust);z-index:60;pointer-events:none;
  transition:background 0.7s var(--ease);
}
.corner-dot.tl{top:18px;left:18px;}
.corner-dot.tr{top:18px;right:18px;}
.corner-dot.bl{bottom:18px;left:18px;}
.corner-dot.br{bottom:18px;right:18px;}
body.on-dark .corner-dot{background:var(--coral);}
body.in-practice .corner-dot{background:var(--mustard);}

/* ───────────────────────────  nav  ─────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gutter);
  mix-blend-mode:difference;color:#fff;
}
.nav .wordmark{font-weight:700;font-size:15px;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;}
.nav .wordmark .dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;}
.nav .links{display:flex;gap:28px;}
.nav .links a{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  position:relative;padding:4px 0;
}
.nav .links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform 0.4s var(--ease);
}
.nav .links a:hover::after,.nav .links a:focus-visible::after{transform:scaleX(1);transform-origin:left;}
.nav .menu-btn{
  display:none;font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  padding:8px 0;
}

/* mobile menu panel */
.menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gutter);gap:6px;
  transform:translateY(-101%);visibility:hidden;
  transition:transform 0.7s var(--ease),visibility 0s linear 0.7s;
}
.menu[data-open="true"]{
  transform:translateY(0);visibility:visible;
  transition:transform 0.7s var(--ease),visibility 0s;
}
.menu a{
  font-weight:700;font-size:clamp(34px,11vw,56px);letter-spacing:-0.035em;
  color:var(--cream);padding:8px 0;border-bottom:1px solid var(--cream-12);
}
.menu a:last-of-type{border-bottom:none;}

@media(max-width:760px){
  .nav .links{display:none;}
  .nav .menu-btn{display:block;}
}
@media(min-width:761px){
  .menu{display:none;}
}

/* ───────────────────────────  hero  ─────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--gutter) clamp(28px,5vh,60px);
  overflow:hidden;
}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero-inner{position:relative;z-index:2;width:100%;}
.hero .kicker-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:clamp(18px,3vh,34px);gap:16px 24px;flex-wrap:wrap;
}
.hero h1{font-size:clamp(46px,10.2vw,172px);max-width:14ch;}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:0.22em;margin-bottom:-0.18em;}
.hero h1 .line > span{display:inline-block;transform:translateY(130%);}
.hero h1 em{font-style:normal;color:var(--rust);}
.hero .hero-foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:clamp(22px,4vh,46px);gap:24px;flex-wrap:wrap;
}
.hero .hero-sub{max-width:40ch;font-size:clamp(14px,1.3vw,17px);line-height:1.55;color:var(--ink-60);}

/* Mobile: the copy is bottom-aligned, so a full-height hero leaves a large
   empty band above the smaller mobile headline. Trim the height and top pad
   to close roughly half of it. Desktop spacing is deliberately untouched. */
@media(max-width:760px){
  .hero{min-height:76svh;padding-top:92px;}
}

/* ────────────────────────  manifesto  ──────────────────────── */
.manifesto p{
  font-size:clamp(28px,5vw,72px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.08;max-width:22ch;
}
.manifesto p .w{color:var(--ink-30);transition:color 0.25s linear;}
.manifesto p .w.lit{color:var(--ink);}
.manifesto p .w.accent.lit{color:var(--rust);}
.manifesto .attrib{
  margin-top:34px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-60);
}

/* ──────────────────────────  stats  ────────────────────────── */
.stats{background:var(--ink);color:var(--cream);}
/* The data moment: the grid breaks the page gutter and bleeds to the viewport
   edges, so it reads as a full-width band. Every other section respects the
   gutter; this one does not, which is the rhythm break. The section header
   stays within the gutter so it aligns with the rest of the page. */
.stats .grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--cream-12);
  margin-left:calc(-1 * var(--gutter));
  margin-right:calc(-1 * var(--gutter));
  margin-top:clamp(28px,4vh,52px);
  border-top:1px solid var(--cream-12);border-bottom:1px solid var(--cream-12);
}
.stats .cell{
  background:var(--ink);padding:clamp(30px,4vw,60px) clamp(20px,2.6vw,40px);
  display:flex;flex-direction:column;gap:18px;
}
/* outer cells carry the gutter so numbers align to the page content edge */
.stats .cell:first-child{padding-left:var(--gutter);}
.stats .cell:last-child{padding-right:var(--gutter);}
.stats .num{font-weight:700;font-size:clamp(58px,8vw,128px);letter-spacing:-0.04em;line-height:0.85;}
.stats .num sup{font-size:0.34em;vertical-align:top;position:relative;top:0.3em;letter-spacing:0;}
.stats .cell:nth-child(1) .num{color:var(--coral);}
.stats .cell:nth-child(2) .num{color:var(--gold);}
.stats .cell:nth-child(3) .num{color:var(--sage);}
.stats .desc{font-size:14px;line-height:1.55;color:var(--cream-70);max-width:32ch;}
.stats .src{
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--cream-40);margin-top:auto;padding-top:8px;
}
@media(max-width:860px){
  .stats .grid{grid-template-columns:1fr;}
  /* stacked: every cell needs gutter on both sides, not just first/last */
  .stats .cell,
  .stats .cell:first-child,
  .stats .cell:last-child{padding-left:var(--gutter);padding-right:var(--gutter);}
}

.founder-card h2 em{color:var(--rust);}
.founder-card .bio p{font-size:clamp(15px,1.25vw,18px);line-height:1.65;}
.founder-card .bio p + p{margin-top:18px;}
.founder-card .bio .fine{
  margin-top:26px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-60);
}

/* ───────────────────────────  cta  ─────────────────────────── */
.cta h2{font-weight:700;letter-spacing:-0.04em;line-height:0.92;font-size:clamp(44px,9.6vw,164px);}
.cta h2 em{font-style:normal;color:var(--rust);}
.cta .row{margin-top:clamp(30px,5vh,54px);display:flex;align-items:center;gap:28px 36px;flex-wrap:wrap;}
.magnetic{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:clamp(148px,15vw,204px);height:clamp(148px,15vw,204px);border-radius:50%;
  background:var(--ink);color:var(--cream);
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;line-height:1.6;
  transition:background 0.35s ease;will-change:transform;flex:none;
}
.magnetic:hover,.magnetic:focus-visible{background:var(--rust);}
.cta .aside{max-width:36ch;font-size:15px;line-height:1.6;color:var(--ink-60);}

/* ─────────────────────────  footer  ────────────────────────── */
.site-footer{background:var(--ink);color:var(--cream);padding:clamp(52px,9vh,108px) var(--gutter) 26px;overflow:hidden;}
.site-footer .f-top{display:flex;justify-content:space-between;gap:32px 48px;flex-wrap:wrap;padding-bottom:clamp(44px,8vh,92px);}
.site-footer .f-col .h{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--cream-40);margin-bottom:14px;
}
.site-footer .f-col a{display:block;font-size:14px;color:var(--cream-70);padding:5px 0;transition:color 0.3s ease;}
.site-footer .f-col a:hover,.site-footer .f-col a:focus-visible{color:var(--coral);}
.site-footer .f-mark{
  font-weight:700;letter-spacing:-0.045em;line-height:0.82;
  font-size:clamp(48px,12.2vw,216px);color:var(--cream);white-space:nowrap;
}
.site-footer .f-mark em{font-style:normal;color:var(--rust);}
.site-footer .f-base{
  display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  border-top:1px solid var(--cream-12);padding-top:20px;margin-top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-40);
}

/* ─────────────────────  motion defaults  ────────────────────── */
.js .rv{opacity:0;transform:translateY(26px);}
.rv{transition:opacity 0.7s ease,transform 0.7s ease;}

@media (prefers-reduced-motion: reduce){
  /* Must be .js .rv, not .rv. A media query adds no specificity, so a bare
     .rv here loses to the .js .rv above and the reveal stays at opacity 0.
     motion.js also unhides these inline, but this rule is the net for the
     case where the script never runs, which is exactly when a net is needed. */
  .js .rv{opacity:1;transform:none;}
  .hero h1 .line > span{transform:none;}
  *,*::before,*::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ══════════════════════  pricing page  ══════════════════════ */
.subpage-nav{
  position:sticky;top:0;z-index:100;background:var(--cream);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 24px;flex-wrap:wrap;
  padding:20px var(--gutter);
  border-bottom:1px solid var(--ink-12);
}
.subpage-nav .wordmark{font-weight:700;font-size:15px;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;}
.subpage-nav .wordmark .dot{width:8px;height:8px;border-radius:50%;background:var(--rust);flex:none;}
.subpage-nav .links{display:flex;gap:24px;flex-wrap:wrap;}
.subpage-nav .links a{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-60);
}
.subpage-nav .links a:hover,.subpage-nav .links a:focus-visible{color:var(--ink);}

.page-head h1{font-weight:700;letter-spacing:-0.04em;line-height:0.92;font-size:clamp(48px,9vw,152px);}
.page-head h1 em{font-style:normal;color:var(--rust);}
.page-head .note{margin-top:26px;max-width:52ch;font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--ink-60);}

.tier-group{border-top:1px solid var(--ink-12);padding-top:clamp(28px,4vh,48px);margin-top:clamp(56px,9vh,104px);}
.tier-group .g-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(22px,3vh,38px);}
.tier-group h2{font-weight:700;letter-spacing:-0.035em;line-height:0.98;font-size:clamp(32px,4.6vw,66px);}
.tier-group .g-line{max-width:46ch;font-size:15px;line-height:1.6;color:var(--ink-60);margin-top:14px;}

.tier{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.5fr) auto;
  gap:12px clamp(20px,3vw,48px);
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--ink-12);
}
.tier .t-name{font-weight:700;font-size:clamp(17px,1.6vw,22px);letter-spacing:-0.015em;}
.tier .t-what{font-size:14px;line-height:1.6;color:var(--ink-60);}
.tier .t-price{font-weight:700;font-size:clamp(20px,2.2vw,32px);letter-spacing:-0.03em;text-align:right;white-space:nowrap;}
.tier .t-price.quiet{
  font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-60);white-space:normal;max-width:16ch;
}
@media(max-width:760px){
  .tier{grid-template-columns:1fr;gap:8px;}
  .tier .t-price{text-align:left;}
  .tier .t-price.quiet{max-width:none;}
}

.pricing-cta{border-top:1px solid var(--ink-12);}
.pricing-cta h2{font-weight:700;letter-spacing:-0.035em;line-height:0.98;font-size:clamp(30px,4.2vw,58px);max-width:20ch;}
.pricing-cta h2 em{font-style:normal;color:var(--rust);}

/* ══════════════════  grain + rhythm utilities  ══════════════════ */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
body.dark-page .grain{mix-blend-mode:screen;opacity:0.2;}

/* narrow measure section, breaks the full-bleed monotony */
.narrow{max-width:60ch;margin-inline:auto;}

.bleed-ink{background:var(--ink);color:var(--cream);}
.bleed-ink .sec-head{border-bottom-color:var(--cream-12);}

/* ════════════════════════  buttons  ════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  padding:15px 26px;border-radius:99px;border:1px solid var(--ink);
  background:var(--ink);color:var(--cream);
  transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}
.btn:hover,.btn:focus-visible{background:var(--rust);border-color:var(--rust);color:var(--cream);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink);color:var(--cream);}
.btn.on-forest{background:var(--mustard);border-color:var(--mustard);color:var(--forest-deep);}
.btn.on-forest:hover,.btn.on-forest:focus-visible{background:var(--parchment);border-color:var(--parchment);color:var(--forest-deep);}
.btn.ghost-forest{background:transparent;border-color:var(--parchment-55);color:var(--parchment);}
.btn.ghost-forest:hover,.btn.ghost-forest:focus-visible{background:var(--parchment);color:var(--forest-deep);border-color:var(--parchment);}

/* ═════════════════════  lead capture  ═════════════════════ */
.capture{background:var(--ink);color:var(--cream);}
.capture .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;}
.capture h2{font-weight:700;font-size:clamp(30px,4.2vw,58px);letter-spacing:-0.038em;line-height:0.98;}
.capture h2 em{font-style:normal;color:var(--coral);}
.capture p{margin-top:18px;font-size:15px;line-height:1.6;color:var(--cream-72);max-width:44ch;}
.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.form-row input{
  flex:1 1 240px;min-width:0;
  background:transparent;border:1px solid var(--cream-40);border-radius:99px;
  padding:15px 22px;color:var(--cream);font-family:var(--sans);font-size:15px;
}
.form-row input::placeholder{color:var(--cream-40);}
.form-row input:focus{outline:2px solid var(--coral);outline-offset:2px;border-color:var(--coral);}
.form-row .btn{background:var(--coral);border-color:var(--coral);color:var(--ink);flex:none;}
.form-row .btn:hover,.form-row .btn:focus-visible{background:var(--cream);border-color:var(--cream);color:var(--ink);}
.form-fine{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream-40);}
@media(max-width:860px){.capture .wrap{grid-template-columns:1fr;}}

/* ═════════════════════  product subpages  ═════════════════════ */
.crumbs{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-60);padding:18px var(--gutter);border-bottom:var(--rule);}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--rust);}
.crumbs span{color:var(--ink-30);margin:0 8px;}

.p-hero{padding-top:clamp(48px,7vh,88px);}
.p-hero h1{font-weight:700;font-size:clamp(44px,7.4vw,124px);letter-spacing:-0.045em;line-height:0.9;max-width:15ch;}
.p-hero h1 em{font-style:normal;color:var(--rust);}
.p-hero .lede{margin-top:clamp(24px,3.4vh,40px);max-width:52ch;font-size:clamp(17px,1.6vw,23px);line-height:1.45;color:var(--ink-72);}
.p-hero .p-actions{margin-top:clamp(28px,4vh,48px);display:flex;gap:14px;flex-wrap:wrap;}

/* Spec table. The key/value rows on a product page: modules, length, price.
   These were scoped under .card, a component the design pass deleted, so the
   block had been rendering unstyled. practice.html is the only consumer, so
   the rules now hang off .c-meta itself. */
.c-meta{display:flex;flex-direction:column;}
.m-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px 20px;padding:13px 0;border-bottom:1px solid var(--ink-12);
}
.m-row .k{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-60);
}
.m-row .v{font-weight:700;font-size:clamp(14px,1.3vw,18px);letter-spacing:-0.01em;text-align:right;}

.split{display:grid;grid-template-columns:minmax(0,0.68fr) minmax(0,1.32fr);gap:clamp(24px,4vw,72px);align-items:start;}
.split .s-label{position:sticky;top:calc(var(--stack-top) + 8px);}
.split .prose > p{font-size:clamp(15px,1.35vw,18px);line-height:1.68;max-width:60ch;}
.split .prose > p + p{margin-top:18px;}
.split .prose h3{font-size:clamp(20px,2vw,28px);letter-spacing:-0.025em;margin:34px 0 12px;}
@media(max-width:860px){.split{grid-template-columns:1fr;}.split .s-label{position:static;}}

.steps{counter-reset:s;margin-top:8px;}
.steps li{
  list-style:none;counter-increment:s;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px clamp(18px,2.4vw,34px);
  padding:22px 0;border-bottom:var(--rule);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--rust);padding-top:5px;
}
.steps li h4{font-size:clamp(17px,1.6vw,22px);letter-spacing:-0.02em;margin-bottom:8px;}
.steps li p{font-size:14px;line-height:1.62;color:var(--ink-60);max-width:56ch;}

.who-for{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ink-12);border:var(--rule);margin-top:8px;}
.who-for > div{background:var(--cream);padding:clamp(22px,2.8vw,36px);}
.who-for h4{font-size:15px;letter-spacing:0;margin-bottom:16px;font-family:var(--mono);text-transform:uppercase;font-weight:400;letter-spacing:0.16em;color:var(--ink-60);}
.who-for li{list-style:none;padding:9px 0;font-size:15px;line-height:1.5;display:flex;gap:12px;border-bottom:1px solid var(--ink-06);}
.who-for li:last-child{border-bottom:none;}
.who-for li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--sage);flex:none;margin-top:7px;}
.who-for div:last-child li::before{background:var(--ink-30);}
@media(max-width:760px){.who-for{grid-template-columns:1fr;}}

/* ═══════════════════════════  FAQ  ═══════════════════════════ */
.faq-group{margin-top:clamp(40px,6vh,72px);}
.faq-group > .g-title{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--rust);padding-bottom:14px;border-bottom:var(--rule);margin-bottom:6px;}
details.qa{border-bottom:var(--rule);}
details.qa summary{
  list-style:none;cursor:pointer;padding:22px 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.7vw,23px);letter-spacing:-0.025em;line-height:1.3;
}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--rust);flex:none;line-height:1;}
details.qa[open] summary::after{content:'\2212';}
details.qa .a{padding:0 0 24px;max-width:66ch;font-size:15px;line-height:1.68;color:var(--ink-72);}
details.qa .a p + p{margin-top:14px;}

/* ═════════════════════════  contact  ═════════════════════════ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);gap:clamp(28px,5vw,80px);align-items:start;}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-60);}
.field input,.field select,.field textarea{
  background:transparent;border:1px solid var(--ink-30);border-radius:2px;
  padding:14px 16px;font-family:var(--sans);font-size:16px;color:var(--ink);width:100%;
}
.field textarea{min-height:150px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--rust);outline-offset:1px;border-color:var(--rust);}
.contact-aside{border-left:var(--rule);padding-left:clamp(20px,2.6vw,38px);}
.contact-aside .blk{padding:18px 0;border-bottom:var(--rule);}
.contact-aside .blk .k{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-60);margin-bottom:8px;}
.contact-aside .blk p{font-size:15px;line-height:1.55;}
@media(max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-aside{border-left:none;padding-left:0;border-top:var(--rule);padding-top:8px;}
}

/* ══════════════════════  founder block  ══════════════════════ */
.founder-card{display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;}
.portrait{
  aspect-ratio:4/5;border:var(--rule);background:var(--ink-06);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-30);
}
@media(max-width:760px){.founder-card{grid-template-columns:1fr;}.portrait{max-width:280px;}}

/* ═════════════  honest block · what is not here yet  ═════════════ */
/* The confession, set apart. Contained and quiet, the tonal opposite of the
   full-bleed stats above it. A framed panel with clear air around it, so a
   first-time viewer registers it as a deliberate admission rather than a note
   tacked to the founder bio. The wording is untouched and stays candid. */
.honest{
  margin-top:clamp(56px,8vh,104px);
  border:1px solid var(--ink-12);
  border-top:3px solid var(--rust);
  padding:clamp(30px,4vw,52px);
  max-width:70ch;
}
.honest .h-label{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,3vw,38px);letter-spacing:-0.03em;line-height:1.1;
  color:var(--ink);margin-bottom:clamp(18px,2.4vw,26px);text-wrap:balance;
}
.honest p{font-size:clamp(15px,1.35vw,18px);line-height:1.65;}
.honest p + p{margin-top:16px;color:var(--ink-72);}

/* ══════════════════════  WEFT PARENT LAYER  ══════════════════════ */

/* hero: single CTA under the subhead, quieter eyebrow, dominant H1 */
.weft-hero .kicker-row{justify-content:flex-start;}
.weft-hero .hero-cta{margin-top:clamp(24px,4vh,44px);}
.weft-hero .hero-sub{max-width:46ch;}

/* brand narrative block, one reading measure, tied to the cards below */
.narrative{padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(40px,6vh,72px);}
.narrative-measure{max-width:60ch;}
.narrative-measure p{
  font-size:clamp(19px,2vw,28px);
  line-height:1.5;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.narrative-measure p + p{margin-top:24px;}
.narrative-hand{
  color:var(--ink-60);
  font-size:clamp(16px,1.5vw,20px) !important;
  line-height:1.55 !important;
}

/* four-system grid: equal frames, emphasis via style not size */
.weft-cards .wgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
}
@media(max-width:820px){.weft-cards .wgrid{grid-template-columns:1fr;}}

.wcard{
  display:flex;flex-direction:column;
  border:1px solid var(--ink-12);
  background:var(--cream);
  padding:clamp(28px,3vw,44px);
  min-height:340px;
}
.wcard-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.wc-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--rust);display:inline-flex;align-items:center;gap:9px;
}
.wc-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rust);flex:none;}
.wc-tag-dev{color:var(--ink-60);}
.wc-tag-dev::before{background:var(--ink-30);}
.wc-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-30);
}
.wc-name{
  font-family:var(--display);font-weight:700;letter-spacing:-0.03em;line-height:1.0;
  font-size:clamp(30px,3.6vw,48px);margin-bottom:16px;
}
.wc-body{
  font-size:clamp(15px,1.25vw,17px);line-height:1.62;color:var(--ink-72);
  max-width:46ch;margin-bottom:26px;
}
.wcard-foot{margin-top:auto;display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.wc-support{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-60);
}
.wc-cta{white-space:nowrap;}

/* live card carries slightly more weight: full rust rule at top, solid button */
.wcard-live{border-top:2px solid var(--rust);}

/* in-development card: quieter, must not read as a live product door */
.wcard-dev{background:transparent;border-style:dashed;border-color:var(--ink-30);}
.wc-early{
  font-size:14px;line-height:1.55;color:var(--ink-60);max-width:44ch;margin:0;
}
.wc-capture{display:flex;gap:10px;flex-wrap:wrap;width:100%;}
.wc-capture input{
  flex:1 1 200px;min-width:0;
  background:var(--cream);border:1px solid var(--ink-30);border-radius:99px;
  padding:13px 20px;font-family:var(--sans);font-size:15px;color:var(--ink);
}
.wc-capture input::placeholder{color:var(--ink-30);}
.wc-capture input:focus{outline:2px solid var(--rust);outline-offset:2px;border-color:var(--rust);}
.wc-capture .btn{flex:none;}
.wc-confirm{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--rust);margin:0;
}

/* ─────────────  four systems: entrance + hover choreography  ─────────────
   Entrance: cards start hidden only when JS is on, then resolve in sequence
   as the grid crosses in (staggered in motion.js). No-JS renders them at rest.
   Hover: motion carries the commitment hierarchy that button color carries
   statically. Practice (live) is most alive, the inquiry cards moderate,
   First 90 (in development) is deliberately the quietest so it never reads
   as a live product door. Pointer devices only. Reduced motion keeps the
   border shifts and drops the travel. */
.js .weft-cards .wgrid > .wcard{opacity:0;}
.weft-cards .wgrid > .wcard{
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),
             border-color 0.4s ease, box-shadow 0.5s ease, border-top-width 0.4s ease;
}

@media (hover:hover){
  /* Practice · live · most alive */
  .wcard-live:hover{
    transform:translateY(-6px);
    border-color:var(--ink-30);
    border-top-width:3px;
    box-shadow:0 22px 46px -28px var(--ink-30);
  }
  /* The Studio + Empathetic Systems · by inquiry · moderate */
  .wcard:not(.wcard-live):not(.wcard-dev):hover{
    transform:translateY(-3px);
    border-color:var(--ink-30);
    box-shadow:0 14px 30px -26px var(--ink-30);
  }
  /* First 90 · in development · quietest, the border firms and nothing lifts */
  .wcard-dev:hover{
    border-color:var(--ink-60);
  }
}

@media (prefers-reduced-motion: reduce){
  .js .weft-cards .wgrid > .wcard{opacity:1;}
  .wcard-live:hover,
  .wcard:not(.wcard-live):not(.wcard-dev):hover{transform:none;}
}

/* ══════════════════════  ABOUT PAGE  ══════════════════════ */
.about-body{padding-top:0;}
.about-measure{max-width:64ch;}
.about-sec{padding:clamp(28px,4vh,48px) 0;border-top:1px solid var(--ink-12);}
.about-sec:first-child{border-top:none;}
.about-sec .label{margin-bottom:20px;}
.about-sec p{font-size:clamp(16px,1.35vw,19px);line-height:1.68;color:var(--ink);}
.about-sec p + p{margin-top:18px;}

.founder-note{display:grid;grid-template-columns:minmax(0,0.5fr) minmax(0,1fr);gap:clamp(22px,3.5vw,48px);align-items:start;margin-top:8px;}
.founder-note .portrait{aspect-ratio:4/5;}
.founder-note .fn-text p{font-size:clamp(16px,1.4vw,20px);line-height:1.6;}
.fn-sign{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-0.02em;margin-top:16px !important;color:var(--ink);}
@media(max-width:700px){.founder-note{grid-template-columns:1fr;}.founder-note .portrait{max-width:260px;}}

.about-close{padding:clamp(48px,7vh,96px) 0 0;border-top:2px solid var(--rust);margin-top:clamp(28px,5vh,56px);}
.about-close p{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,6.1vw,88px);letter-spacing:-0.035em;line-height:1.03;
  max-width:20ch;color:var(--ink);text-wrap:balance;
}
.about-close p em{font-style:normal;color:var(--rust);}
.about-close .p-actions{margin-top:clamp(28px,4vh,44px);display:flex;gap:14px;flex-wrap:wrap;}