@charset "utf-8";

/* Familiar Labs — warm, living editorial system
   The site keeps the original paper / pine / rose language, atmospheric color,
   floating chrome, rounded actions, and page-specific composition. */

:root {
  --paper: #f5f0e7;
  --paper-light: #fbf8f1;
  --paper-deep: #ece5da;
  --ink: #203028;
  --dim: #526058;
  --faint: #5f6862;
  --pine: #0d5b3a;
  --pine-deep: #083f29;
  /* Matches the existing deer lockup's baked paper-free background exactly. */
  --pine-ink: #093122;
  --mint: #dcece1;
  --mint-light: #edf5ef;
  --rose: #ead3d0;
  --rose-deep: #c98683;
  --sun: #e5ad75;
  --rule: rgba(26, 55, 40, 0.14);
  --rule-invert: rgba(255, 255, 255, 0.17);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  /* The macOS system face (SF). Cristina's call — the interface type is the
     reader's own system font; Fraunces still carries the brand voice. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* The frame is the 1380px/72px one scaled by 1.25 — the same proportions a
     reader gets at 125% browser zoom. Zoom leaves vw terms alone, so only the
     fixed bounds scale. The 20px floor is kept so phone margins do not grow. */
  --edge: clamp(20px, 4.6vw, 90px);
  --content: 1725px;
  /* The page's two scan rails. On wide screens they preserve the content
     frame; everywhere else they resolve to the responsive edge. */
  --page-rail: max(var(--edge), calc(50vw - 862.5px + var(--edge)));
  /* The primary reading path. Editorial pages can narrow it locally when their
     argument needs a more intimate cadence. */
  --measure: 60rem;
  /* The widest a stacked argument column is allowed to run. */
  --reading-column: 52rem;
  /* Metadata, captions, and definition lists sit beside the reading path rather
     than in it, so they get one smaller size. Prose stays at body size wherever
     it appears — a sales sheet is not a footnote. */
  --secondary: 19px;
  /* A rail is evidence or reference material, never the default reading path.
     Arguments stack; only genuinely independent material earns a second track. */
  --split-gap: clamp(48px, 7vw, 96px);
  --split-research-gap: clamp(46px, 7vw, 98px);
  --split-research: minmax(220px, 0.76fr) minmax(0, 1.24fr);
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 34px;
  --hex: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--paper); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

[id] { scroll-margin-top: 108px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { color: inherit; font: inherit; }
p { max-width: var(--measure); margin: 0; text-wrap: pretty; }
p + p, .stack > * + * { margin-top: 1em; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

/* Gateway tier is the default. Home rises above it; leaves and utility pages sit
   below. A tier moves the whole ladder together: a page whose h1 is outranked by
   its own section heads has no hierarchy, only smaller type at the top. */
h1 { font-size: clamp(52px, 6.2vw, 86px); line-height: 1.06; }
h2 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.08; }
h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.16; }
h4 { margin: 0; font-size: 22px; font-weight: 560; }
h1 em, h2 em { color: var(--pine); font-weight: 300; }
/* On Home, a head that opens a full-bleed band carries a short declarative line
   and shares one statement size with the belief, so the page reads as hero then
   statements. Elsewhere a head sits under its own page h1 and inside a reading
   column, where this size flattens the hierarchy and walls the line. */
.home-teams .section-intro h2,
.home-paths-intro h2,
.home-connect-inner h2 { font-size: clamp(40px, 5.6vw, 86px); }
/* Leaf tier: the four forwardable offer pages. */
.offer-page h1 { font-size: clamp(42px, 4.8vw, 66px); }
.offer-page h2 { font-size: clamp(32px, 3.4vw, 48px); }
.offer-page h3 { font-size: clamp(24px, 2.2vw, 32px); }
/* Utility tier: inquiry, application, policy, and the missing-page notice. */
.conversion-page h1, .legal-page h1, .not-found-page h1 { font-size: clamp(38px, 3.6vw, 52px); }
.conversion-page h2, .legal-page h2, .not-found-page h2 { font-size: clamp(28px, 2.7vw, 38px); }
.conversion-page h3, .legal-page h3, .not-found-page h3 { font-size: clamp(24px, 2.2vw, 30px); }

::selection { background: rgba(13, 91, 58, 0.18); }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; }
.site-footer :focus-visible, .home-teams :focus-visible, .home-connect :focus-visible,
.hub-forums :focus-visible, .hub-inquire :focus-visible, .offer-page section:last-child :focus-visible,
.product-feature :focus-visible,
.co-create-page section:nth-of-type(3) :focus-visible, .co-create-page section:last-child :focus-visible {
  outline-color: var(--paper-light);
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 300;
  top: 8px;
  left: 50%;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--pine-deep);
  color: var(--paper-light);
  font-size: 14px;
  text-decoration: none;
  transform: translate(-50%, -180%);
  transition: transform 220ms var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

/* Floating masthead */
.masthead {
  position: sticky;
  z-index: 100;
  top: 14px;
  height: 0;
}

/* On desktop the wordmark and action terminate the same scan rails used by
   every section below. The pill may float; its contents never float loose. */
.masthead-inner {
  display: grid;
  width: min(calc(100% - 28px), var(--content));
  min-height: 62px;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  margin-inline: auto;
  padding: 8px 32px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(251, 248, 241, 0.88);
  box-shadow: 0 18px 48px rgba(35, 52, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px) saturate(0.92);
  grid-template-columns: auto 1fr auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark .mark { width: 15px; height: 17px; flex: 0 0 auto; fill: var(--pine); }
.wordmark b { font-weight: 600; }

.nav { display: flex; align-items: center; justify-content: right; padding-right: 24px; gap: clamp(16px, 2.3vw, 30px); }
.nav a { color: var(--dim); font-size: 16px; font-weight: 450; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--pine); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.btn {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px 17px;
  border: 1px solid var(--action-edge, var(--pine));
  border-radius: 999px;
  background: var(--action-face, var(--pine));
  color: var(--action-ink, var(--paper-light));
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform 260ms var(--ease), background 260ms var(--ease), color 260ms var(--ease);
}

/* The masthead is chrome and does not follow the content buttons up. Against an
   18px inline action, holding the nav pill at 15px is what keeps it quiet. */
.btn-nav { min-height: 42px; padding: 9px 10px 9px 18px; gap: 10px; font-size: 15px; }
.btn-nav::after {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--action-chip, rgba(255,255,255,0.15));
  content: "→";
  font-size: 11px;
  place-items: center;
}
.btn:hover { border-color: var(--action-face-hover, var(--pine-deep)); background: var(--action-face-hover, var(--pine-deep)); color: var(--action-ink-hover, var(--paper-light)); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn span {
  display: grid;
  width: 26px;
  height: 26px;
  margin-block: -2px;
  border-radius: 50%;
  background: var(--action-chip, rgba(255,255,255,0.15));
  font-size: 12px;
  place-items: center;
  transition: transform 260ms var(--ease);
}
.btn:hover span { transform: translate(2px, -1px); }
/* One arrow standard, by destination: → stays on this site, ↗ leaves it — the
   visitor's own email client, or the Co-create product site. Buttons that begin
   an in-page form are immediate actions, so their label stands on its own. */
.btn-secondary { border-color: var(--action-quiet-edge, rgba(13,91,58,0.42)); background: transparent; color: var(--action-quiet-ink, var(--pine)); }
.btn-secondary:hover { border-color: var(--action-face, var(--pine)); background: var(--action-face, var(--pine)); color: var(--action-ink, var(--paper-light)); }
.btn-secondary span { background: var(--action-quiet-chip, rgba(13,91,58,0.1)); }
.btn-secondary:hover span { background: var(--action-chip, rgba(255,255,255,0.15)); }

/* A dark section states its own surface once, and every action inside it reads
   correctly without anyone remembering to add a modifier. This replaces the
   per-surface action classes and the page-scoped recolourings that kept
   reappearing wherever someone forgot them. */
.home-teams, .hub-forums, .offer-agenda, .forum-experience,
.product-feature, .co-create-mechanism, .site-footer {
  --action-face: var(--paper-light);
  --action-ink: var(--pine-deep);
  --action-edge: var(--paper-light);
  --action-face-hover: var(--mint);
  --action-ink-hover: var(--pine-deep);
  --action-chip: rgba(13,91,58,0.1);
  --action-quiet-edge: rgba(255,255,255,0.42);
  --action-quiet-ink: var(--paper-light);
  --action-quiet-chip: rgba(255,255,255,0.15);
  --link-ink: #b8dfc7;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pine);
  cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  width: 16px;
  height: 1px;
  margin-inline: auto;
  background: var(--paper-light);
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; }
.nav-toggle-bars::before { transform: translateY(-5px); }
.nav-toggle-bars::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: rotate(-45deg); }

.masthead-product .masthead-inner { grid-template-columns: auto 1fr auto; }
.masthead-product .wordmark .mark { fill: var(--rose-deep); }
.product-institution { margin: 0; color: var(--faint); font-size: 14px; letter-spacing: 0.04em; }
.product-institution a { color: var(--pine); text-underline-offset: 3px; }

.redirect-main { display: grid; min-height: 100dvh; padding: 32px; place-items: center; }
.redirect-message { width: min(100%, 560px); padding: clamp(36px, 7vw, 72px); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-light); box-shadow: 0 24px 64px rgba(35, 52, 42, 0.08); }
.redirect-message p { margin-top: 22px; }
.redirect-message a { color: var(--pine); text-underline-offset: 4px; }

/* Shared editorial language */
/* One continuous left/right rail lets a reader scan the whole page without
   re-finding the content column in each section. */
.shell { width: 100%; margin-inline: 0; padding-inline: var(--page-rail); }
/* Fields own content width inside the permanent shell rails. Children inherit
   the field instead of repairing width and centring page by page. */
.field-reading { width: min(100%, var(--reading-column)); }
.field-wide { width: min(100%, 64rem); }
.field-measure { width: min(100%, var(--measure)); }
.section-pad { padding-block: clamp(104px, 12.5vw, 185px); }
.editorial-hero-inner { position: relative; z-index: 2; }
.editorial-hero-copy { max-width: 940px; }
.editorial-hero-copy h1 { max-width: 13ch; }
.editorial-section-grid { width: 100%; }
.editorial-section-grid > * + * { margin-top: 30px; }
.label {
  margin: 0 0 22px;
  color: var(--pine);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.19em;
  line-height: 1.5;
  text-transform: uppercase;
}
.label-inverse { color: #a7d7ba; }.lede { color: var(--dim); font-size: clamp(26px, 2.06vw, 31px); line-height: 1.5; }
.dim { color: var(--dim); }
.meta { color: var(--faint); font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.link {
  display: inline;
  color: var(--link-ink, var(--pine));
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* The arrow is an atomic inline box so the label's underline stops at the word.
   As a flex item it inherits the parent's decoration and cannot refuse it, which
   is why the link is a plain inline with its own margin instead. */
.link::after { display: inline-block; margin-left: 8px; content: "→"; }
.link-list { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
.prose a, p a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong, p strong { font-weight: 560; }
.headline-stack > h2 + p, .headline-stack > h1 + p { margin-top: 22px; }

.feature-split { width: 100%; }
.feature-split > * + * { margin-top: 30px; }
.split-intro { max-width: var(--reading-column); }
.split-intro > * + * { margin-top: 28px; }
.split-intro .btn { margin-top: 28px; }

/* Home */
.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  /* More air above the headline on a tall window without stealing it from a
     laptop: the ramp is steeper than the viewport, so it holds the old 153px at
     900px tall and reaches 220px at 1162px tall instead of scaling both. */
  padding-block: clamp(148px, calc(25.6vh - 77px), 240px) clamp(122px, 15vh, 166px);
  background: linear-gradient(145deg, var(--paper-light), var(--paper) 74%);
}
/* The hero keeps the site's single left edge; its left-anchored character comes
   from the atmospheric field holding the right, not from a wider canvas. */
.home-hero-inner { position: relative; z-index: 2; }
/* Display serif needs room for descenders; below ~1.0 the "y" of one line
   collides with the caps of the next. */
.home-hero h1 { max-width: 960px; font-size: clamp(54px, 6.9vw, 100px); line-height: 1.0; }
.home-hero .label { margin: clamp(30px,4.4vh,54px) 0 32px; }
.home-hero .lede { max-width: 57rem; margin-top: clamp(30px,3.8vh,46px); }
.home-hero .actions { margin-top: clamp(30px,3.4vh,42px); }
/* A peripheral field of people and familiars. Its larger, sparse forms drift
   past the edge rather than resolving into a self-contained illustration. */
.hero-network {
  position: absolute;
  z-index: 1;
  top: 49%;
  right: calc(var(--page-rail) - 92px);
  width: min(60vw, 860px);
  height: min(60vw, 780px);
  pointer-events: none;
  transform: translateY(-50%);
}
.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: clamp(28px,4.2vh,46px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--pine);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.scroll-cue i { display: grid; width: 28px; height: 28px; border: 1px solid rgba(13,91,58,0.3); border-radius: 50%; font-family: var(--sans); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1; place-items: center; transition: transform 220ms var(--ease), background 220ms var(--ease); }
.scroll-cue:hover i, .scroll-cue:focus-visible i { background: rgba(13,91,58,0.1); transform: translateY(3px); }
/* The belief is the hinge between the Lab's premise and its work: a manifesto
   surface, not a rule-bound afterthought or a contained card. */
.home-principle-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 64% 130% at 92% 6%, rgba(220,236,225,0.88), transparent 66%),
    radial-gradient(ellipse 52% 120% at 4% 100%, rgba(234,211,208,0.72), transparent 72%),
    linear-gradient(108deg, var(--paper-deep), var(--rose) 145%);
}
.home-principle {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: 52svh;
  display: grid;
  align-content: center;
  padding-block: clamp(112px, 12vw, 184px);
}
.home-principle h2 { max-width: 54rem; margin-inline: auto; font-size: clamp(52px,5.6vw,86px); letter-spacing: -0.045em; line-height: 0.98; text-align: center; }
.home-principle h2 em { color: var(--pine); }
.home-principle p { max-width: 54rem; margin: clamp(34px,4vw,56px) auto 0; color: var(--dim); font-size: clamp(20px,1.75vw,28px); line-height: 1.45; text-align: center; }
.hero-atmosphere { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hero-atmosphere i { position: absolute; display: block; border-radius: 50%; filter: blur(58px); opacity: 0.56; }
.hero-atmosphere i:nth-child(1) { width: min(46vw, 660px); aspect-ratio: 1; top: -8%; right: 3%; background: var(--rose); }
.hero-atmosphere i:nth-child(2) { width: min(34vw, 500px); aspect-ratio: 1; top: 19%; right: -3%; background: #b9d9c5; }
.hero-atmosphere i:nth-child(3) { width: min(25vw, 380px); aspect-ratio: 1; top: 2%; right: 26%; background: rgba(229,173,117,0.65); }
.home-teams, .home-connect, .hub-forums, .hub-inquire {
  background: var(--pine-deep);
  color: rgba(255,255,255,0.78);
}
.home-teams h2, .home-connect h2, .hub-forums h2, .hub-inquire h2 { color: var(--paper-light); }
.home-teams h2 em, .home-connect h2 em, .hub-forums h2 em { color: #a7d7ba; }
.home-offering-pair {
  --band-bleed: clamp(30px,3.6vw,58px);
  display: grid;
  margin-top: clamp(58px,7vw,86px);
  margin-inline: calc(-1 * var(--band-bleed));
  padding-inline: var(--band-bleed);
  border-block: 1px solid var(--rule-invert);
  grid-template-columns: repeat(2,minmax(0,1fr));
}
/* Ruled columns, so the gutter belongs between them and never on the outside:
   the first column starts on the page rail and the last ends on it, exactly like
   the heading above and the action below. Outer padding here broke that rail. */
.offering-card {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: clamp(34px,4.5vw,58px) 0;
  color: inherit;
  text-decoration: none;
}
.offering-card:first-child { padding-right: var(--band-bleed); }
.offering-card + .offering-card { border-left: 1px solid var(--rule-invert); padding-left: var(--band-bleed); }
.offering-card .offering-action { margin-top: auto; padding-top: 38px; }
.offering-card > * { position: relative; z-index: 1; }
.home-offering-pair h3 { color: var(--paper-light); font-size: clamp(28px, 2.6vw, 38px); }
.home-offering-pair p { margin-top: 26px; color: rgba(255,255,255,0.74); font-size: 22px; }
.home-offering-pair strong { color: var(--paper-light); font-weight: 560; }

.home-paths { background: var(--paper-light); }
.home-paths-intro .label { margin-bottom: 16px; }
/* Roughly two thirds of the band, held in ch rather than a percentage. The cap
   has to scale with the type or `text-wrap: balance` changes its mind: every
   percentage cap that reads right at 1665 flips to a fourth, badly filled line
   by 1440. In ch it holds two well-filled lines at every width. */
.home-paths-intro h2 { max-width: 24.42ch; }
.path-grid {
  --band-bleed: clamp(28px,3.2vw,50px);
  display: grid;
  margin-top: clamp(56px,7vw,88px);
  margin-inline: calc(-1 * var(--band-bleed));
  padding-inline: var(--band-bleed);
  border-block: 1px solid var(--rule);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.path-card {
  display: flex;
  position: relative;
  min-height: 330px;
  flex-direction: column;
  padding: clamp(34px,4vw,50px) 0;
  color: var(--ink);
  text-decoration: none;
  transition: background 260ms var(--ease);
}
/* Same rail rule as the training band: the gutter lives between the columns, so
   the first card's text starts on the page rail and the last card's ends on it. */
.path-card:first-child { padding-right: var(--band-bleed); }
.path-card + .path-card { border-left: 1px solid var(--rule); padding-inline: var(--band-bleed); }
.path-card:last-child { padding-right: 0; }
/* The hover surface is the whole column, so it needs the same breathing room on
   the rail side that the gutter already gives the text on the inside. Tinting
   the padding box alone left the fill hugging the first and last card's text. */
.path-card::before, .offering-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  transition: background 260ms var(--ease);
}
.path-card:first-child::before, .offering-card:first-child::before { left: calc(-1 * var(--band-bleed)); }
.path-card:last-child::before, .offering-card:last-child::before { right: calc(-1 * var(--band-bleed)); }
.path-card:hover::before { background: rgba(13,91,58,0.035); }
.offering-card:hover::before { background: rgba(255,255,255,0.045); }
.offering-card:hover .offering-action { color: var(--paper-light); }
.path-research { background: linear-gradient(145deg, var(--mint-light), rgba(222,239,226,0.22)); }
.path-products, .path-about { background: transparent; }
.path-card > * { position: relative; z-index: 1; }
.path-card h3 { font-size: clamp(40px,4.25vw,58px); }
.path-card p { margin-top: 24px; color: var(--dim); font-size: 22px; }
.path-action { margin-top: auto; padding-top: 42px; }
.home-connect { border-top: 1px solid var(--rule); background: var(--paper-deep); color: var(--ink); }
.home-connect h2 { color: var(--ink); }
.home-connect .label { color: var(--pine); }
.home-connect p { color: var(--dim); }
.home-connect-inner { display: grid; justify-items: center; text-align: center; }
.home-connect-inner h2 { max-width: 18ch; }
.home-connect-inner > p:not(.label) { max-width: 44rem; margin-top: 32px; font-size: 22px; }
.home-connect-inner .btn { margin-top: 34px; }

/* Hub */
.subpage-hero { position: relative; overflow: hidden; padding-block: clamp(176px,21vh,240px) clamp(92px,10vw,140px); }
.subpage-hero-inner { position: relative; z-index: 2; }
.subpage-hero h1 { max-width: 11ch; }
.hub-hero .subpage-hero-inner { display: grid; justify-items: center; text-align: center; }
.hub-hero h1 { max-width: 10.5ch; }
.hub-testimonial { width: min(100%, 38rem); margin: 52px auto 0; padding: 26px 0 0; border-top: 1px solid var(--rule); }
.hub-testimonial blockquote { margin: 0; }
.hub-testimonial blockquote p { max-width: none; color: var(--dim); font-family: var(--serif); font-size: clamp(22px,2.1vw,30px); line-height: 1.25; }
.hub-testimonial figcaption { display: grid; gap: 2px; margin-top: 18px; color: var(--faint); font-size: var(--secondary); line-height: 1.35; }
.hub-testimonial figcaption strong { color: var(--ink); font-weight: 600; }
.hero-atmosphere-soft i { opacity: 0.38; }
.hub-sessions { background: var(--paper-light); }
.hub-sessions .section-intro h2 { max-width: 22ch; }
.hub-offer-grid { display: grid; gap: 18px; margin-top: 58px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.hub-offer-card { display: flex; min-height: 470px; padding: clamp(32px,4.5vw,58px); border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); flex-direction: column; text-decoration: none; transition: background 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.hub-offer-card:hover { background: var(--mint-light); box-shadow: inset 0 0 0 1px rgba(13,91,58,0.28); transform: translateY(-2px); }
.hub-offer-card h3 { max-width: none; margin-top: 46px; font-size: clamp(36px,4vw,56px); }
.hub-offer-card > p:not(.meta) { margin-top: 28px; color: var(--dim); font-size: 28px; }
.card-action { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 38px; color: var(--pine); font-size: 20px; font-weight: 600; }
.card-action i, .co-create-portal-action i { display: grid; width: 30px; height: 30px; border-radius: 50%; background: rgba(13,91,58,0.1); font-family: var(--sans); font-size: 13px; font-style: normal; font-weight: 500; place-items: center; transition: transform 220ms var(--ease); }
.hub-offer-card:hover .card-action i { transform: translateX(3px); }
.hub-offer-primary { background: var(--mint); }
.practice-lab { display: grid; align-items: center; gap: 24px clamp(40px,7vw,92px); margin-top: 26px; padding: clamp(30px,4vw,48px); border-radius: var(--radius); background: var(--rose); grid-template-columns: 0.9fr 1.1fr; }
.practice-lab .label { margin-bottom: 8px; }
.practice-lab h3 { font-size: clamp(24px, 2.1vw, 30px); }
.practice-lab-copy > p { color: var(--dim); }
.practice-lab-copy .link-list { margin-top: 18px; }
.hub-credibility { margin-top: clamp(74px,9vw,118px); padding-block: clamp(76px,9vw,118px); border-top: 1px solid var(--rule); }
.hub-credibility-intro { max-width: var(--reading-column); }
.hub-credibility h2 { max-width: 20ch; }
.hub-credentials { display: grid; gap: 0; max-width: var(--reading-column); margin: 58px 0 0; padding: 0; border-top: 1px solid var(--rule); list-style: none; }
.hub-credentials li { display: grid; gap: clamp(24px,5vw,72px); min-height: 0; padding: clamp(28px,4vw,44px) 0; border-bottom: 1px solid var(--rule); background: transparent; grid-template-columns: 46px minmax(0,1fr); }
.hub-credentials .meta { margin: 0; color: var(--pine); font-size: 12px; }
.hub-credentials li p:last-child { max-width: 38rem; margin: 0; color: var(--dim); line-height: 1.48; }
.hub-forums .home-paths-intro { display: grid; justify-items: start; max-width: var(--hero-field); text-align: left; }
.hub-forums { background: var(--pine-deep); }
.hub-forums .home-paths-intro h2 { max-width: 16ch; }
.hub-forums .path-grid { margin-top: 58px; border-color: var(--rule-invert); }
.hub-forums .path-card { min-height: 340px; background: transparent; color: var(--paper-light); }
.hub-forums .path-card + .path-card { border-color: var(--rule-invert); }
.hub-forums .path-card p { color: rgba(255,255,255,0.68); }
.hub-forums .path-action { color: var(--paper-light); }
.hub-inquire { border-top: 1px solid var(--rule); background: var(--paper-deep); color: var(--ink); }
.hub-inquire h2 { color: var(--ink); }
.hub-inquire .label { color: var(--pine); }
.hub-inquire p { color: var(--dim); }
.hub-research { border-top: 1px solid var(--rule); background: var(--paper-light); }
.hub-research h2 { color: var(--ink); }
.hub-research .label { color: var(--pine); }
.hub-research-inner { display: grid; justify-items: start; max-width: calc(var(--reading-column) + 2 * var(--page-rail)); text-align: left; }
.hub-research-inner h2 { max-width: 19ch; }
.hub-research-inner > p:not(.label) { margin-top: 28px; color: var(--dim); }
.hub-research-inner .link { margin-top: 28px; }

/* Legacy fragments, now used as flexible ingredients */
.band, .band-open { position: relative; }
.band-open { padding-block: clamp(176px,20vh,230px) clamp(86px,9vw,130px); }
.band { padding-block: clamp(76px,8vw,120px); }.longform { max-width: var(--measure); }
.longform > * + * { margin-top: 1.45em; }
.longform h2 { margin-bottom: 1em; }
.longform p { max-width: var(--measure); }

.rows { margin-top: 44px; border-top: 1px solid var(--rule); }
.row { display: grid; gap: 18px clamp(30px,5vw,72px); padding-block: 34px; border-bottom: 1px solid var(--rule); grid-template-columns: minmax(190px,0.55fr) minmax(0,1fr); }
.row-title { font-size: clamp(25px,2.4vw,34px); font-weight: 350; }
.row-body > * + * { margin-top: 14px; }
.row-body p { color: var(--dim); }
.note { max-width: 680px; margin-top: 30px; padding: 24px 26px; border-radius: var(--radius-sm); background: var(--rose); }
.note .label { margin-bottom: 10px; color: var(--pine); }
.note p { color: var(--dim); }
.checks { max-width: 650px; margin: 26px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 26px; color: var(--dim); }
.checks li + li { margin-top: 13px; }
.checks li::before { position: absolute; top: 0.6em; left: 0; width: 8px; height: 9px; background: var(--pine); clip-path: var(--hex); content: ""; }
.disclosure { position: relative; margin-top: 42px; border-block: 1px solid var(--rule); }
.disclosure::before { position: absolute; top: -42px; right: 0; left: 0; height: 42px; background: linear-gradient(to bottom, transparent, var(--paper)); content: ""; pointer-events: none; }
.disclosure > summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 19px; color: var(--pine); cursor: pointer; font-size: 20px; font-weight: 500; list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+"; font-family: var(--serif); font-size: 24px; }
.disclosure[open] > summary::after { content: "–"; }
.disclosure-body { padding: 12px 0 32px; }
.disclosure-body > * + * { margin-top: 17px; }
.disclosure-body h3 { margin-bottom: 26px; }
.disclosure-body h4 { margin-top: 28px; }

/* This is part of the familiar argument, not a second argument beside it. The
   relation proceeds down the reading path: person, continuity, familiar, shared
   context, company work. */
.relation { display: grid; justify-items: center; width: min(100%, 32rem); margin: clamp(52px,7vw,86px) auto 0; padding: clamp(30px,4vw,48px); border-radius: var(--radius); background: rgba(255,255,255,0.48); box-shadow: inset 0 0 0 1px var(--rule); }
.relation-node { display: grid; width: 124px; min-width: 124px; min-height: 82px; padding: 10px 18px; color: var(--pine-deep); font-size: 15px; font-weight: 500; line-height: 1.2; place-items: center; text-align: center; }
.relation-node.person { aspect-ratio: 1; min-height: 0; border-radius: 50%; background: var(--rose); }
.relation-node.familiar { aspect-ratio: 1; min-height: 0; background: var(--mint); clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); font-family: var(--serif); font-size: 17px; font-weight: 400; }
.relation-node.work { border-radius: 15px; background: var(--paper-light); box-shadow: inset 0 0 0 1px var(--rule); }
.relation-link { position: relative; width: 1px; height: 52px; background: rgba(13,91,58,0.35); }
.relation-link span { position: absolute; top: 50%; left: 22px; width: max-content; color: var(--faint); font-size: 13px; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; transform: translateY(-50%); }

/* Offer pages: compact sales artifacts with varied, web-native compositions. */
.offer-page main { background: var(--paper-light); }
/* Leaf tier: no atmospheric orbs. A quiet tonal field keeps the warmth without
   repeating the doorway treatment on four sibling pages. */
.offer-hero { position: relative; overflow: hidden; padding-block: clamp(168px,19vh,206px) clamp(76px,8vw,104px); background: linear-gradient(160deg, var(--paper-light), var(--paper) 62%); }
.offer-hero.forum-hero { background: linear-gradient(160deg, var(--mint-light), var(--paper) 68%); }
.offer-hero-grid { position: relative; z-index: 2; display: grid; align-items: end; gap: clamp(48px,8vw,112px); grid-template-columns: minmax(0,1.45fr) minmax(280px,0.52fr); }
.offer-hero-copy h1 { max-width: 14ch; }
.offer-hero-copy .lede { max-width: var(--measure); margin-top: 30px; }
.offer-hero-copy > p:not(.label):not(.lede) { max-width: var(--measure); margin-top: 20px; color: var(--dim); }
.offer-facts { margin: 0; padding-left: clamp(30px,4vw,48px); border-left: 1px solid var(--rule); }
.offer-facts div { padding-block: 20px; }
.offer-facts div + div { border-top: 1px solid var(--rule); }
.offer-facts dt { color: var(--pine); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.offer-facts dd { margin: 8px 0 0; color: var(--dim); font-size: var(--secondary); line-height: 1.45; }

.offer-case { background: var(--paper-light); }
.offer-case-grid { width: 100%; }
.offer-recognition h2 { max-width: 14ch; }
.offer-recognition > p:not(.label) { margin-top: 28px; color: var(--dim); }
.offer-case-detail { max-width: var(--measure); margin-top: 44px; border-block: 1px solid var(--rule); }
.offer-case-detail article { padding-block: clamp(30px,4vw,48px); }
.offer-case-detail article + article { border-top: 1px solid var(--rule); }
.offer-case-detail h3 { max-width: 16ch; }
.offer-case-detail p:not(.label) { margin-top: 22px; color: var(--dim); }

.offer-agenda { background: var(--pine-deep); color: rgba(255,255,255,0.76); }
.offer-agenda h2, .offer-agenda h3 { color: var(--paper-light); }
/* Eyebrow above the heading, both on the page's left edge — not a rail that
   pushes a major heading into a second alignment. */
.offer-section-heading .label { margin-bottom: 16px; }
.offer-section-heading h2 { max-width: 21ch; }
.offer-agenda-grid { display: grid; margin-top: 64px; border-block: 1px solid var(--rule-invert); grid-template-columns: repeat(2,minmax(0,1fr)); }
.offer-agenda-grid.three-up { grid-template-columns: repeat(3,minmax(0,1fr)); }
.offer-agenda-grid article { padding: 34px clamp(28px,4vw,58px) 38px 0; }
.offer-agenda-grid:not(.three-up) article:nth-child(even) { padding-right: 0; padding-left: clamp(28px,4vw,58px); border-left: 1px solid var(--rule-invert); }
.offer-agenda-grid:not(.three-up) article:nth-child(n+3) { border-top: 1px solid var(--rule-invert); }
.offer-agenda-grid.three-up article + article { padding-left: 28px; border-left: 1px solid var(--rule-invert); }
.offer-agenda-grid span { color: #b8dfc7; font-size: 14px; letter-spacing: 0.1em; }
.offer-agenda-grid h3 { margin-top: 36px; }
.offer-agenda-grid p { margin-top: 20px; color: rgba(255,255,255,0.72); }
.offer-led-by { max-width: var(--measure); margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--rule-invert); color: rgba(255,255,255,0.72); }

.offer-details { background: var(--paper); }
.offer-details-grid { width: 100%; }
.offer-details h2 { max-width: 14ch; }
.offer-details article > p:not(.label), .offer-fit > p:not(.label) { margin-top: 26px; color: var(--dim); }
.offer-fit { max-width: var(--measure); margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--rule); }
.offer-fit h3 { max-width: 15ch; }
.offer-faq { margin-top: 32px; border-top: 1px solid rgba(32,48,40,0.2); }
.offer-faq > div { padding-block: 22px; border-bottom: 1px solid rgba(32,48,40,0.2); }
.offer-faq h4 { font-size: 24px; }
.offer-faq p { margin-top: 10px; color: var(--dim); }
.offer-close { border-top: 1px solid var(--rule); background: var(--paper-deep); color: var(--dim); }
.offer-close h2 { color: var(--ink); }
.offer-close .label { color: var(--pine); }
.offer-close p { color: var(--dim); }
.offer-close .btn { margin-top: 30px; }
/* Placement only. Block rather than flex: as a flex item the arrow stops being
   an atomic inline box and the underline draws straight through it. */
.link-block { display: block; width: max-content; margin-top: 24px; }

.forum-purpose { background: var(--paper-light); }
.forum-purpose-grid { width: 100%; }
.forum-purpose h2 { max-width: 14ch; }
.forum-purpose article > p:not(.label) { margin-top: 24px; color: var(--dim); }
.forum-room-card { max-width: var(--measure); margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--rule); }
.forum-room-card h3 { max-width: 15ch; }
.forum-experience { background: var(--pine-deep); color: rgba(255,255,255,0.76); }
.forum-experience-grid { display: grid; align-items: start; gap: var(--split-gap); grid-template-columns: minmax(0,1fr) minmax(320px,0.72fr); }
.forum-experience h2, .forum-experience h3 { color: var(--paper-light); }
.forum-experience h2 { max-width: 15ch; }
.forum-experience article > p:not(.label) { margin-top: 24px; color: rgba(255,255,255,0.72); }
.forum-question-panel { padding: clamp(30px,4vw,48px); border: 1px solid var(--rule-invert); border-radius: var(--radius-lg); background: rgba(255,255,255,0.045); }
.forum-question-panel .checks { margin-top: 30px; }
.forum-question-panel .checks li { color: rgba(255,255,255,0.75); }
.forum-question-panel .checks li::before { background: #b8dfc7; }
.forum-conditions { background: var(--paper); }
.forum-conditions-grid { width: 100%; }
.forum-conditions h2 { max-width: 14ch; }
.forum-conditions article > p:not(.label), .forum-status > p:not(.label) { margin-top: 24px; color: var(--dim); }
.forum-status { max-width: var(--measure); margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--rule); }
.forum-status h3 { max-width: 15ch; }

/* Editorial routes: one reading line, full-bleed surfaces, one earned contrast. */
.product-hero, .research-hero, .product-opening { position: relative; overflow: hidden; padding-block: clamp(186px,21vh,224px) clamp(92px,10vw,132px); background: var(--paper-light); }
/* Paper-backed doorways carry the atmospheric field; the tinted gateways
   (Research, About) get their weight from the gradient instead. */
.product-hero h1, .product-opening h1 { max-width: min(100%, 850px); }
.product-hero .lede, .product-opening .lede { max-width: var(--measure); }
.product-hero-inner, .research-hero-inner { display: grid; justify-items: center; text-align: center; }
.product-hero-inner .editorial-hero-copy { display: grid; justify-items: center; }
.product-familiar { padding-block: clamp(100px,11vw,152px); background: var(--paper); }
.product-familiar-inner { max-width: calc(var(--reading-column) + 2 * var(--page-rail)); }
.product-familiar-copy { max-width: var(--reading-column); margin-inline: auto; }
/* The thesis lands immediately before the definition it sets up. */
.product-thesis { max-width: var(--measure); color: var(--dim); }
.product-thesis + .product-thesis { margin-top: 16px; }
.product-thesis + h2 { margin-top: 34px; }
.product-familiar h2 { font-size: clamp(40px, 3.6vw, 56px); }
.product-feature { padding-block: clamp(100px,11vw,152px); background: var(--pine-deep); color: rgba(255,255,255,0.74); }
.co-create-portal { display: grid; position: relative; align-items: center; gap: 30px clamp(32px,5vw,80px); min-height: 460px; padding: clamp(38px,6vw,84px); overflow: hidden; border: 1px solid var(--rule-invert); border-radius: var(--radius-lg); background: radial-gradient(circle at 88% 8%, rgba(234,211,208,0.34), transparent 38%), linear-gradient(135deg, rgba(220,236,225,0.18), rgba(255,255,255,0.035)); color: var(--paper-light); grid-template-columns: minmax(0,0.7fr) minmax(0,1.4fr); text-decoration: none; transition: background 260ms var(--ease), transform 260ms var(--ease); }
.co-create-portal:hover { background: radial-gradient(circle at 88% 8%, rgba(234,211,208,0.46), transparent 38%), linear-gradient(135deg, rgba(220,236,225,0.27), rgba(255,255,255,0.07)); transform: translateY(-2px); }
.co-create-portal-identity { display: grid; justify-items: start; gap: 28px; }
.co-create-portal-mark { width: clamp(98px,12vw,154px); aspect-ratio: 1; background: var(--rose); clip-path: var(--hex); }
.co-create-portal-copy { display: grid; gap: 24px; max-width: 36rem; color: rgba(255,255,255,0.74); }
.co-create-portal-title { color: var(--paper-light); font-family: var(--serif); font-size: clamp(36px,3.7vw,54px); font-weight: 300; letter-spacing: -0.026em; line-height: 1.06; text-wrap: balance; }
.co-create-portal-action { display: inline-flex; align-items: center; gap: 12px; width: max-content; margin-top: 12px; color: var(--paper-light); font-size: 18px; font-weight: 600; white-space: nowrap; }
.co-create-portal-action::after { display: grid; width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,0.14); content: "↗"; font-family: var(--sans); font-size: 12px; font-weight: 500; place-items: center; transition: transform 220ms var(--ease); }
.co-create-portal:hover .co-create-portal-action::after { transform: translate(3px,-2px); }
.product-research { border-top: 1px solid var(--rule); background: var(--paper-deep); }
.product-research h2 { color: var(--ink); }
.product-research p { color: var(--dim); }

.research-hero { background: linear-gradient(145deg,var(--paper-light),var(--mint-light)); }
.research-hero h1 { max-width: 13ch; }
.research-close { padding-block: clamp(92px,10vw,138px); border-top: 1px solid var(--rule); background: var(--paper-deep); }
.research-close h2 { max-width: 13ch; }
.research-close .link-list { justify-content: flex-start; }
.research-future-inner { display: grid; justify-items: center; text-align: center; }
.research-future-inner h2 { max-width: 18ch; }
.research-future-inner > p { max-width: 58rem; margin-top: 28px; color: var(--dim); }
.research-future-inner .link-list { justify-content: center; }
.research-paths { border-top: 1px solid var(--rule); background: #f3f0e8; }
.research-paths h2 { max-width: 16ch; }
.research-paths .section-intro > p { max-width: var(--measure); margin-top: 28px; color: var(--dim); }
.research-path-rows { margin-top: clamp(52px,7vw,76px); }
.research-path-rows .row { grid-template-columns: minmax(0,1fr); }
.research-path-rows .row-body { max-width: var(--measure); }

.about-hero { padding-block: clamp(186px,21vh,224px) clamp(72px,7vw,96px); background: linear-gradient(135deg,var(--rose),#efded9 65%,var(--paper-light)); }
/* About opens on a single broad statement rather than a column against a void. */
.about-hero h1 { max-width: min(100%, 1060px); }
.about-story { padding-block: clamp(104px,12vw,168px); background: var(--paper-light); }
.about-story-inner .longform { max-width: var(--measure); margin-inline: auto; }
.about-story .label { margin-bottom: 36px; }
.about-founders { padding-block: clamp(100px,11vw,152px); background: var(--paper-deep); }
.about-founders-intro { display: grid; justify-items: start; max-width: var(--reading-column); margin-inline: 0; text-align: left; }
.about-founders h2 { max-width: 18ch; }
.about-founders .founder-intro { margin-top: 28px; }
.founder-intro > * + * { margin-top: 18px; }
.founders-media-pending { display: grid; align-content: center; min-height: clamp(190px, 24vw, 310px); gap: 8px; margin-top: 48px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--rule); background: linear-gradient(135deg, var(--rose), var(--paper)); color: var(--pine-deep); }
.founders-media-pending span { font-family: var(--serif); font-size: clamp(34px, 4.2vw, 58px); line-height: 1; }
.founders-media-pending small { color: var(--faint); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.row-title + .meta { margin-top: 10px; }
.founder-rows { max-width: none; margin: 72px 0 0; }
.about-next { border-top: 1px solid var(--rule); background: var(--paper-light); }
.about-next { margin-bottom: 0; }
.about-next .home-paths-intro { display: grid; justify-items: center; text-align: center; }
.about-next .home-paths-intro h2 { max-width: 18ch; }

/* A page hero is an entry into an argument, not automatically a manifesto.
    The centered composition stays reserved for Home's belief and final invitation. */
.hub-hero, .product-hero, .research-hero, .about-hero {
  /* A non-Home hero claims three quarters of the available field. The lede
     remains on a reading measure; display type is allowed to balance the page. */
  --hero-field: min(100%, max(60rem, 75%));
}
.gateway-hero-inner { position: relative; z-index: 2; display: grid; justify-items: start; text-align: left; }
.gateway-hero-copy { width: min(100%, var(--hero-field)); }
.gateway-hero h1 { max-width: none !important; }
.gateway-hero-support { width: min(100%, 52rem); margin-top: 36px; }
.gateway-hero-support > * + * { margin-top: 18px; }
.gateway-hero-centered { justify-items: center; text-align: center; }
.gateway-hero-centered .gateway-hero-copy, .gateway-hero-centered .gateway-hero-support { margin-inline: auto; }
.hub-hero .subpage-hero-inner { display: grid; max-width: none; text-align: left; }
.hub-hero h1 { max-width: var(--hero-field); }
.hub-testimonial-band { padding-block: clamp(50px, 6vw, 80px); border-block: 1px solid var(--rule); background: var(--paper-light); }
.hub-testimonial { width: min(100%, 52rem); margin: 0; padding: 0 0 0 clamp(24px, 3vw, 40px); border-top: 0; border-left: 2px solid var(--pine); }
.practice-lab { border-radius: 0; border-block: 1px solid var(--rule); border-left: 4px solid var(--pine); background: transparent; }

.product-hero-inner, .research-hero-inner { display: grid; text-align: left; }
.product-hero-inner .gateway-hero-copy, .research-hero-inner .gateway-hero-copy { max-width: var(--hero-field); }
.product-familiar-inner { max-width: none; }
.product-familiar-copy { max-width: var(--reading-column); margin-inline: 0; }
.product-hero h1, .research-hero h1 { max-width: var(--hero-field) !important; }
@media (min-width: 981px) {
  /* Keep the desktop field broad without turning 981px into a second art
     direction. The floor stays close to the fluid gateway scale below it;
     expansion only becomes pronounced on genuinely wide canvases. */
  .hub-hero .subpage-hero-inner {
    width: 100%;
    max-width: none;
  }
  .hub-hero h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(62px, 6.2vw, 100px);
  }
  /* The shell owns the permanent rails. The Training argument claims 85% of
     the shell's content box, so it expands without ever erasing that frame. */
  .hub-hero .subpage-hero-inner > .label,
  .hub-hero .subpage-hero-inner > .gateway-hero-copy {
    width: 85% !important;
    max-width: none !important;
  }
  /* These headings sit inside a hero copy block that already owns the field.
     Re-applying a percentage-based custom property here would resolve against
     that smaller parent and collapse the visible line back to 960px. */
  .gateway-hero h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(62px, 6.2vw, 100px);
  }
}
/* The upstream brand stylesheet gives its generic stack pieces auto margins.
   These are page arguments, so each element has to claim the shared left rail. */
.gateway-hero .label, .gateway-hero h1, .gateway-hero-copy, .gateway-hero-support, .gateway-hero-support p {
  margin-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* The shared brand foundation uses a broadly-targeted auto margin to center
   display pieces. These page-specific selectors must win it, or the text keeps
   its centered geometry while merely changing to left-aligned type. */
body.hub-page .gateway-hero .label,
body.hub-page .gateway-hero-copy,
body.products-page .gateway-hero .label,
body.products-page .gateway-hero-copy,
body.research-page .gateway-hero .label,
body.research-page .gateway-hero-copy {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: start !important;
}

/* About is the one interior doorway that holds its statement centrally. */
.about-hero-inner { display: grid; justify-items: center; text-align: center; }
.about-hero-inner .gateway-hero-copy { display: grid; justify-items: center; max-width: var(--hero-field); }
.about-hero h1 { max-width: var(--hero-field) !important; }
body.about-page .about-hero .label, body.about-page .about-hero .gateway-hero-copy, body.about-page .about-hero h1 { margin-inline: auto !important; justify-self: center !important; }

/* Products is an explanation. Its relationship sequence is reference material,
   so it earns a calm rail beside the argument rather than centering below it. */
@media (min-width: 981px) {
  .product-familiar-inner { display: grid; align-items: start; gap: var(--split-gap); grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); }
  .product-familiar-inner .relation { align-self: start; margin: 0 auto; }
}

.co-create-page { --co-oat: #f4ece3; --co-blue: #2f5c8f; --co-ink: #1e1b24; --co-rule: rgba(30,27,36,0.16); }
.co-create-page .product-opening { background: var(--co-oat); }
.co-create-page .hero-atmosphere-soft i { border-color: rgba(40,95,190,0.16); }
.co-create-page .btn { border-radius: 8px; }
.co-create-burden { padding-block: clamp(100px,11vw,152px); background: var(--co-oat); }
.co-create-burden h2 { max-width: 12ch; }
.co-create-burden-copy { color: var(--co-ink); }
.co-create-burden-copy > * + * { margin-top: 18px; }
.co-create-mechanism { padding-block: clamp(100px,11vw,152px); background: var(--co-blue); color: rgba(255,255,255,0.8); }
.co-create-mechanism h2, .co-create-mechanism h3 { color: var(--paper-light); }
.co-create-mechanism .lede, .co-create-mechanism .dim, .co-create-mechanism .row-body p { color: rgba(255,255,255,0.72); }
.co-create-mechanism .rows, .co-create-mechanism .row { border-color: rgba(255,255,255,0.28); }
.co-create-boundary { margin-top: clamp(82px,10vw,132px); padding-top: 44px; border-top: 1px solid var(--rule-invert); }
.co-create-boundary h2 { max-width: 18ch; }
.co-create-implication { padding-block: clamp(88px,10vw,132px); background: #dde7f5; }
.co-create-implication h2 { max-width: 13ch; }
.co-create-implication-copy { color: var(--dim); }
.co-create-implication-copy > * + * { margin-top: 18px; }
.co-create-implication-copy .lede { color: var(--pine); font-family: var(--serif); font-size: clamp(26px,2.8vw,38px); line-height: 1.15; }
.co-create-access { padding-block: clamp(96px,10vw,142px); background: var(--co-oat); }
.co-create-access h2 { max-width: 13ch; }
.co-create-access-copy { color: var(--dim); }
.co-create-access-copy > * + * { margin-top: 18px; }
.co-create-boundary .headline-stack { color: rgba(255,255,255,0.72); }

/* Conversion, legal, 404 */
/* Utility tier: these pages serve an action already decided elsewhere. They get a
   compact hero and the smallest headline on the site, on the shared reading line. */
.conversion-page .band-open, .legal-page .band-open, .not-found-page .band-open { padding-block: clamp(150px,17vh,182px) clamp(52px,6vw,74px); background: var(--paper-light); }
.conversion-page .band-open h1, .legal-page .band-open h1, .not-found-page .band-open h1 { max-width: 20ch; }
.conversion-page .band-open .lede, .legal-page .band-open .lede, .not-found-page .band-open .lede { max-width: var(--measure); }
.conversion-page main { padding-bottom: 96px; background: var(--paper-light); }
/* The utility hero stacks like every other argument on the site. When a page
   attaches a boundary note — the price disclosure, the nothing-is-submitted
   promise — that note is a condition rather than the other half of the
   argument, so it earns the second track and stops sitting in the reading path. */
.utility-hero-grid { width: 100%; }
.utility-hero-grid .note { margin-top: 30px; }
@media (min-width: 981px) {
  .utility-hero-grid:has(> .note) {
    display: grid;
    align-items: start;
    gap: var(--split-gap);
    max-width: none;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.56fr);
  }
  .utility-hero-grid:has(> .note) > .headline-stack { max-width: var(--reading-column); }
  .utility-hero-grid:has(> .note) > .note { max-width: none; margin-top: 0; }
}
.choice-band { padding-top: clamp(40px,5vw,58px); }
.choice-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.choice-grid-pair { grid-template-columns: repeat(2, minmax(0,1fr)); }
.choice-card { display: flex; padding: clamp(32px,3.4vw,42px); border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); flex-direction: column; }
.choice-card h3 { margin-top: 14px; }
/* A choice page is a routing task: keep the named action beside the reason to
   choose it, rather than pinning all controls below the longest sibling card. */
.choice-card .actions { margin-top: 26px; padding-top: 0; }
.choice-card .dim { margin-top: 30px; }
@media (min-width: 981px) {
  /* The route title and action are the choice. This supporting boundary copy is
     deliberately a quieter register than the page's main reading argument. */
  .choice-card .dim { font-size: 24px; line-height: 1.5; }
}
/* A privacy page should read as one calm document, not alternating colour bands.
   Each policy is a heading paired with its terms, on the shared reading line. */
.legal-page main { padding-bottom: 96px; background: var(--paper-light); }
.legal-page .band { padding-block: 0; }
.legal-page .policy-row { padding-block: clamp(40px,4.4vw,54px); border-top: 1px solid var(--rule); }
.policy-row { width: 100%; }
.policy-head h2 { max-width: 16ch; }
.policy-body { max-width: var(--measure); margin-top: 28px; color: var(--dim); }
.policy-body > * + * { margin-top: 16px; }
.policy-body .dim { max-width: var(--measure); }
.not-found-page main { min-height: 100dvh; background: var(--paper-light); }

/* Contact flows are one shared, native modal with distinct relationship starts.
   It is intentionally transactional rather than another ornamental page section. */
.contact-modal {
  width: min(calc(100% - 32px), 720px);
  max-height: min(880px, calc(100dvh - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(8, 40, 27, 0.34);
}
.contact-modal::backdrop { background: rgba(6, 47, 32, 0.62); backdrop-filter: blur(7px) saturate(0.82); }
.contact-modal-frame { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
.contact-modal-head { position: relative; padding: clamp(34px, 5vw, 54px) clamp(28px, 6vw, 64px) 28px; background: linear-gradient(135deg, var(--mint-light), var(--paper-light) 70%); }
.contact-modal-head h2 { max-width: 15ch; font-size: clamp(32px, 4.4vw, 48px); }
.contact-modal-intro { max-width: 41rem; margin-top: 18px; color: var(--dim); font-size: 18px; line-height: 1.5; }
.contact-modal-close { position: absolute; top: 20px; right: 20px; display: grid; width: 38px; height: 38px; padding: 0 0 3px; border: 1px solid var(--rule); border-radius: 50%; background: rgba(251,248,241,0.72); color: var(--pine); cursor: pointer; font-size: 26px; line-height: 1; place-items: center; }
.contact-modal-close:hover { background: var(--paper); }
.contact-flow { padding: 0 clamp(28px, 6vw, 64px) clamp(36px, 6vw, 60px); }
.contact-form { display: grid; gap: 22px; }
/* The forum application takes the whole screen. Applying to a room is a
   decision, and a card floating over the page invites the visitor to treat it
   as a detour. The column stays narrow so one question is in front of them at a
   time; the close control stays, quietly, because a person must always be able
   to leave. */
.contact-modal.is-immersive {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
}
.is-immersive .contact-modal-frame { display: grid; align-content: safe center; min-height: 100dvh; padding-block: clamp(56px, 9vh, 104px) clamp(48px, 8vh, 92px); }
.is-immersive .contact-modal-head { width: min(100%, 560px); margin-inline: auto; padding: 0 24px 34px; background: none; }
.is-immersive .contact-modal-head h2 { max-width: 18ch; }
.is-immersive .contact-flow { width: min(100%, 560px); margin-inline: auto; padding: 0 24px; }
.is-immersive .contact-modal-close { position: fixed; top: clamp(16px, 2.4vh, 28px); right: clamp(16px, 2.4vw, 32px); border-color: transparent; background: none; color: var(--faint); }
.is-immersive .contact-modal-close:hover { color: var(--pine); }

.form-step { display: grid; gap: 22px; }
.form-step[hidden] { display: none; }
.form-step-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-field { display: grid; gap: 8px; }
.form-field label, .form-room-choice legend { color: var(--pine-deep); font-size: 15px; font-weight: 600; line-height: 1.35; }
.form-field label span { color: var(--faint); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(26,55,40,0.24);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.42;
}
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--pine); outline-offset: 2px; border-color: var(--pine); }
/* Three named starting points. These are buttons, not fields to fill in, so
   they carry the button's shape and chip rather than the input's rectangle.
   Quiet outlines rather than three green pills: one list, three peers, no
   recommended answer among them. */
.form-choice { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.form-choice legend { width: 100%; margin-bottom: 10px; color: var(--dim); font-size: 16px; }
.form-choice label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 9px 9px 9px 24px;
  border: 1px solid var(--pine);
  border-radius: 999px;
  background: var(--paper-light);
  color: var(--pine-deep);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.form-choice label::after {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(13,91,58,0.09);
  color: var(--pine);
  content: "\2192";
  font-size: 14px;
  place-items: center;
  transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.form-choice label:hover { background: var(--pine); color: var(--paper-light); transform: translateY(-1px); }
.form-choice label:hover::after { background: rgba(255,255,255,0.15); color: var(--paper-light); transform: translateX(2px); }
.form-choice label:active { transform: translateY(1px) scale(0.995); }
.form-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-choice label:has(:focus-visible) { outline: 2px solid var(--pine); outline-offset: 3px; }
.form-choice label:has(:checked) { background: var(--mint-light); }
.form-back {
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.form-back:hover { color: var(--pine-deep); }
.form-step-controls:has(.form-back) { align-items: center; justify-content: space-between; }
.form-room-choice { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.form-room-choice legend { width: 100%; margin-bottom: 2px; }
.form-room-choice label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--dim); cursor: pointer; font-size: 16px; line-height: 1.3; }
.form-room-choice input { accent-color: var(--pine); }
/* The room is being offered here, not gated. The price stays plainly visible and
   ahead of every question, but it reads as one fact among the reasons rather
   than a toll booth in front of them. */
.form-price { padding: 26px clamp(22px,4vw,30px); border-left: 3px solid var(--pine); background: var(--mint-light); }
.form-forum-leave { margin-top: 14px; color: var(--dim); line-height: 1.5; }
.form-price-line { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(13,91,58,0.16); color: var(--dim); font-size: 16px; }
.form-reassure { color: var(--faint); font-size: 15px; line-height: 1.5; }
.form-price .label { margin-bottom: 6px; font-size: 12px; }
.form-forum-value { max-width: 34rem; color: var(--pine-deep); font-size: 20px; line-height: 1.4; }
.form-forum-value + .form-price-amount { margin-top: 22px; }
.form-price-amount { display: block; color: var(--pine-deep); font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.form-price p:last-child { max-width: var(--measure); margin-top: 7px; color: var(--dim); font-size: 16px; line-height: 1.45; }
.form-handoff, .form-research-boundary { max-width: 52rem; padding-top: 2px; color: var(--dim); font-size: 15px; line-height: 1.45; }
.form-research-boundary { padding: 14px 16px; border-left: 2px solid var(--rose-deep); background: rgba(234,211,208,0.38); color: var(--ink); }
.form-status { min-height: 1.4em; margin: -8px 0 0; color: var(--pine); font-size: 15px; line-height: 1.4; }

/* Footer */
.site-footer { background: var(--pine-ink); color: rgba(255,255,255,0.72); }
.footer-inner { display: grid; width: 100%; gap: 48px; margin-inline: 0; padding: 82px var(--page-rail) 34px; grid-template-columns: 1.5fr 0.72fr 0.72fr; }
.footer-deer-logo { display: block; width: min(100%, 150px); text-decoration: none; }
.footer-deer-logo img { width: 100%; height: auto; }
.footer-line { max-width: 31ch; margin-top: 18px; color: rgba(255,255,255,0.72); font-size: var(--secondary); }
.footer-nav { display: grid; align-content: start; gap: 9px; }
.footer-heading { margin: 0 0 8px; color: rgba(255,255,255,0.68); font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-nav a { width: max-content; color: rgba(255,255,255,0.8); font-size: 16px; text-decoration: none; }
.footer-nav a:hover { color: var(--paper-light); text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { max-width: none; padding-top: 25px; border-top: 1px solid var(--rule-invert); color: rgba(255,255,255,0.68); font-size: 14px; grid-column: 1 / -1; }
.footer-legal a { color: rgba(255,255,255,0.76); text-underline-offset: 3px; }
.footer-inner-product { grid-template-columns: 1fr 0.6fr; }

@media (min-width: 981px) {
  .masthead-inner {
    /* Derived from the rail rather than a fixed width, so the wordmark lands on
       the page rail at every viewport: inset the pill by the rail, then give
       back its 1px border and 24px inset. The action is a filled pill, so its
       own padding supplies the optical inset on the right; a literal 24px there
       would read as a gap. */
    width: calc(100% - 2 * (var(--page-rail) - 25px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 24px 8px;
  }
}

@media (max-width: 980px) {
  .masthead { top: 10px; }
  .masthead-inner { width: calc(100% - 20px); grid-template-columns: 1fr auto; }
  .nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 4px 6px; grid-column: 1 / -1; }
  .nav { grid-row: 2; }
  .nav.is-open { display: flex; }
  .nav a { padding: 11px 6px; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .nav a[aria-current="page"] { text-decoration: none; }
  .masthead-inner > .btn-nav { display: none; }
  .nav.is-open + .btn-nav { display: inline-flex; width: max-content; margin: 4px 4px 6px; grid-column: 1 / -1; }
  .nav.is-open + .btn-nav { grid-row: 3; }
  .nav-toggle { display: block; grid-column: 2; grid-row: 1; }
  .masthead-inner:has(.nav.is-open) { border-radius: 28px; }
  html.nav-open, body.nav-open { overflow: hidden; }
  .masthead.is-open {
    position: fixed;
    z-index: 200;
    inset: 0;
    height: 100dvh;
    overflow-y: auto;
    background: rgba(6, 47, 32, 0.54);
    backdrop-filter: blur(9px) saturate(0.86);
  }
  .masthead.is-open .masthead-inner { margin-top: 10px; }
  .masthead.is-open .nav { padding: 16px 10px 10px; border-top: 1px solid var(--rule); }
  .masthead.is-open .nav a { padding: 14px 8px; }
  .masthead-product .masthead-inner { grid-template-columns: 1fr auto; }
  .masthead-product .product-institution { display: none; }
  .masthead-product .masthead-inner > .btn-nav { display: inline-flex; }
  .home-paths-intro h2 { max-width: none; }
  /* Single column on small screens, so the band has nowhere to bleed into.
     Zeroing the token retires the rule bleed, the gutters and the hover offsets
     together, instead of unwinding each of them by hand. */
  .home-offering-pair, .path-grid { --band-bleed: 0px; }
  .path-grid { grid-template-columns: minmax(0,1fr); }
  .path-card { min-height: 340px; }
  .path-card + .path-card { border-top: 1px solid var(--rule); border-left: 0; }
  .hub-offer-grid { grid-template-columns: minmax(0,1fr); }
  /* The credential rail keeps a 360px minimum column, which is wider than a
     phone once the page rails are taken out. It has to collapse like the rest. */
  .hub-credibility { grid-template-columns: minmax(0,1fr); }
  .practice-lab { grid-template-columns: auto 1fr; }
  .practice-lab-copy { grid-column: 2; }

  .offer-hero-grid, .forum-experience-grid { grid-template-columns: minmax(0,1fr); }
  .product-familiar-inner .relation { margin: clamp(52px,7vw,86px) auto 0; }
  .offer-facts { max-width: 760px; padding: 28px 0 0; border-top: 1px solid var(--rule); border-left: 0; }
  .offer-agenda-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .offer-agenda-grid.three-up { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .choice-grid, .choice-grid-pair { grid-template-columns: minmax(0,1fr); }
  .contact-modal { width: min(calc(100% - 20px), 720px); max-height: calc(100dvh - 20px); }
}

@media (max-width: 720px) {
  body { font-size: 18px; }
  h1 { font-size: clamp(42px,13.5vw,62px); }
  h2 { font-size: clamp(34px,10.5vw,48px); }
  .section-pad { padding-block: 82px; }
  .home-hero { min-height: 100dvh; padding-top: 172px; }
  .home-hero h1 { max-width: 9.6ch; font-size: clamp(42px, 13.5vw, 58px); }
  .home-hero .label { margin: 30px 0 32px; }
  .home-hero .lede { margin-top: 30px; }
  .hero-atmosphere i:nth-child(1) { width: 110vw; top: 5%; right: -58%; }
  .hero-atmosphere i:nth-child(2) { width: 88vw; top: 25%; right: -46%; }
  .hero-atmosphere i:nth-child(3) { width: 70vw; top: 2%; right: 2%; }
  .home-principle p { font-size: 18px; }
  .home-offering-pair { grid-template-columns: minmax(0,1fr); }
  .offering-card + .offering-card { border-top: 1px solid var(--rule-invert); border-left: 0; }
  .practice-lab { padding: 26px; grid-template-columns: minmax(0,1fr); }
  .practice-lab-copy { grid-column: 1; }
  .band-open, .subpage-hero { padding-block: 170px 82px; }
  .product-hero, .research-hero, .about-hero, .product-opening { min-height: auto; padding-block: 170px 92px; }
  .band { padding-block: 78px; }
  .rows { margin-top: 36px; }
  .row { grid-template-columns: minmax(0,1fr); }
  .relation { justify-items: center; }

  .offer-hero { padding-block: 170px 86px; }
  .offer-hero-copy h1 { font-size: clamp(42px,12.7vw,60px); }
  .offer-section-heading { grid-template-columns: minmax(0,1fr); }
  .offer-agenda-grid, .offer-agenda-grid.three-up { grid-template-columns: minmax(0,1fr); }
  .offer-agenda-grid article { padding: 28px 0; }
  .offer-agenda-grid article + article { padding-left: 0; border-top: 1px solid var(--rule-invert); border-left: 0; }
  .offer-agenda-grid:not(.three-up) article:nth-child(even) { padding-left: 0; border-left: 0; }
  .offer-fit, .forum-room-card, .forum-question-panel, .forum-status { padding-top: 28px; }
  .about-story-inner .longform { max-width: none; }
  .hub-offer-card > p:not(.meta) { font-size: inherit; }
  .conversion-page .band:not(.band-open) { width: calc(100% - 28px); padding: 34px 24px; }
  .contact-modal-head { padding: 34px 28px 24px; }
  .contact-flow { padding: 0 28px 34px; }
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .form-room-choice { display: grid; grid-template-columns: minmax(0,1fr); }
  .form-room-choice label { border-radius: var(--radius-sm); }

  .footer-inner, .footer-inner-product { grid-template-columns: minmax(0,1fr); }
  .footer-legal { grid-column: 1; }
}

@media (max-width: 980px) {
  .hero-network { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  .masthead, .skip-link, .nav-toggle { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  body::before, .hero-atmosphere { display: none; }
  .site-footer { background: none; color: #000; }
  .disclosure-body { display: block !important; }
}