/* ==========================================================================
   ASCENT — stylesheet

   One layer, one scale, one black. Written to be read top to bottom:
   tokens, base, masthead, hero, thesis, commitments, commercial,
   capabilities, inquiry, contact, submission, footer, motion, responsive.

   Rules for anyone editing this file:
   - Every size comes from a token. No loose px in type declarations.
   - A selector is defined once. Responsive changes live in the responsive
     block at the bottom, never as a second base definition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ink — one black for the whole document. */
  /* Ice — the chosen scheme. Every accent tint on the page is derived from
     --signal with color-mix, so retinting the site means editing these
     three values and the three washes. */
  --ink:            #05060a;
  --ink-raise:      #080a11;
  --ink-panel:      #090b13;
  --bone:           #f4f4f7;
  --grey:           #8d94a6;
  --grey-dim:       #7a8294;
  /* One step brighter than --grey, for the long blocks of prose people
     actually sit and read: the three tenets and the capability paragraphs.
     Short labels and captions stay on --grey. */
  --grey-read:      #949bad;
  --signal:         #7fc4da;
  --signal-soft:    #a9dae9;
  --signal-dim:     rgba(127,196,218,.34);
  --on-bone:        #3f5259;
  --wash-a:         rgba(84,152,178,.15);
  --wash-b:         rgba(38,62,80,.11);
  --wash-c:         rgba(66,116,138,.06);


  /* Rules */
  --hair:           rgba(244,244,247,.075);
  --hair-strong:    rgba(244,244,247,.155);

  /* Measure. A narrower shell with larger type reads bigger than a wide
     shell with small type. This is the correction for "small yet crammed". */
  --shell-max:      1560px;
  --shell:          min(var(--shell-max), calc(100% - clamp(28px, 8vw, 180px)));

  /* Type scale. The hero headline is sized against its own column with
     container units, not the viewport, so it can be set as large as the
     column allows at every width without ever overflowing. */
  --t-thesis:       clamp(2.375rem, 6.4vw, 6.125rem);
  --t-h1:           clamp(2.75rem, 5.6vw, 5.25rem);
  --t-h2:           clamp(2.125rem, 3.8vw, 3.5rem);
  --t-h3:           clamp(1.625rem, 2.6vw, 2.375rem);
  --t-h4:           clamp(1.375rem, 1.9vw, 1.6875rem);
  --t-lead:         clamp(1.1875rem, 1.5vw, 1.5rem);
  --t-body:         clamp(1.0625rem, calc(1rem + .22vw), 1.15625rem);
  --t-prose-lead:   clamp(1.5rem, 2vw, 1.75rem);
  --t-support:      1.0625rem;
  --t-small:        clamp(.9375rem, 1.02vw, 1rem);
  --t-eyebrow:      .75rem;

  /* Vertical rhythm */
  --sect:           clamp(80px, 8vw, 152px);
  --masthead:       88px;
  /* Masthead navigation lands Commercial and Capabilities with this exact
     breathing room between the sticky masthead and the section eyebrow.
     Keeping it as one layout token means both destinations stay identical. */
  --nav-section-gap: 42px;

  --ease:           cubic-bezier(.22,.61,.36,1);
  --ease-soft:      cubic-bezier(.2,.75,.2,1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A single atmosphere for the whole page — no seam between the hero stage
   and the sections below it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 42% at 76% -6%, var(--wash-a), transparent 70%),
    radial-gradient(ellipse 40% 30% at 12% 30%, var(--wash-b), transparent 72%),
    radial-gradient(ellipse 50% 34% at 84% 96%, var(--wash-c), transparent 74%);
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .02;
  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='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: Manrope, Inter, -apple-system, sans-serif;
  font-weight: 500;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: var(--shell);
  margin-inline: auto;
}

/* Sections are separated by whitespace, not rules. Hairlines survive only
   where they carry information: between commitments and in the grids. */
.section {
  padding-block: var(--sect);
}

/* Sections open across the full measure: eyebrow, statement, lede, each
   spanning the shell and stacked on one left edge. */
.opening {
  margin-bottom: clamp(32px, 4.5vw, 72px);
}

.eyebrow {
  margin: 0 0 clamp(15px, 1.5vw, 22px);
  color: var(--grey);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.statement {
  max-width: none;
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.044em;
  text-wrap: pretty;
}

.lede {
  max-width: none;
  margin: clamp(18px, 1.8vw, 26px) 0 0;
  color: var(--grey);
  font-size: var(--t-body);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   4. MASTHEAD
   -------------------------------------------------------------------------- */
.line-masthead {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: var(--masthead);
  height: auto;
  border-bottom: 1px solid transparent;
  background: var(--ink);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}

.line-masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  width: var(--shell);
  min-height: var(--masthead);
  height: auto;
  padding-block: 8px;
  margin-inline: auto;
}

.line-masthead.is-scrolled {
  background: rgba(5,6,10,.88);
  border-bottom-color: var(--hair);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.line-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: var(--bone);
}

.line-brand-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.line-brand-word {
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -.008em;
}

.line-masthead-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
  align-items: center;
  gap: clamp(26px, 3.2vw, 46px);
  color: var(--grey);
  font-size: clamp(.875rem, .98vw, 1rem);
  line-height: 1;
}

.line-masthead-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color .25s var(--ease);
}

.line-masthead-nav a:hover,
.line-masthead-nav a.is-current {
  color: var(--bone);
}

.line-masthead-nav .nav-contact {
  padding: 12px 20px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: rgba(244,244,247,.9);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

/* The current page is marked by weight, not by the accent — a tinted pill on
   the page you are already looking at reads as an invitation to click.
   This sits before :hover deliberately. Both selectors carry the same
   specificity, so source order decides, and hover has to win: the pill must
   still respond to the pointer on the page it points at. */
.line-masthead-nav .nav-contact.is-current {
  border-color: rgba(244, 244, 247, .26);
  background: rgba(244, 244, 247, .05);
  color: var(--bone);
}

.line-masthead-nav .nav-contact:hover {
  border-color: var(--signal-dim);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  color: var(--bone);
}

/* --------------------------------------------------------------------------
   5. HERO
   The headline is the loudest thing on the page and nothing competes with it.
   -------------------------------------------------------------------------- */
/* Anchors clear the sticky masthead. */
#top,
#thesis,
#commitments,
#commercial,
#capabilities,
#contact {
  scroll-margin-top: calc(var(--masthead) + 20px);
}

/* Two rows: the copy and structure sit in row one and centre within it;
   the programs occupy row two at the foot of the hero. Row one taking 1fr
   is what lifts the headline clear of the programs rather than crowding
   them together. */
.line-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr) auto;
  column-gap: clamp(32px, 3.6vw, 64px);
  width: var(--shell);
  min-height: min(calc(100svh - var(--masthead)), 1000px);
  margin-inline: auto;
  padding-block: clamp(28px, 3.4vh, 52px) clamp(24px, 2.6vh, 38px);
}

.line-hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  container-type: inline-size;
}

.line-hero-title {
  margin: 0;
  color: var(--bone);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.05em;
  text-wrap: wrap;
  /* Fallback for engines without container query units. */
  font-size: clamp(2rem, 6.6vw, 6.75rem);
  /* "State-of-the-art" is the longest line. At 12.8cqw it sets to roughly
     84% of the column, so it reads edge to edge without ever overflowing. */
  font-size: clamp(2rem, 12.8cqw, 7.25rem);
}


.line-hero-claim {
  margin: clamp(26px, 2.6vw, 40px) 0 0;
  color: var(--signal-soft);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.024em;
  white-space: normal;
}

.line-hero-lede {
  max-width: none;
  margin: clamp(26px, 2.4vw, 36px) 0 0;
  color: var(--grey);
  font-size: var(--t-body);
  line-height: 1.72;
  letter-spacing: -.004em;
}

.hero-lede-line {
  display: block;
  white-space: normal;
}

.line-hero-link {
  display: inline-block;
  min-height: 44px;
  padding-block: 4px;
  margin-top: clamp(24px, 2.6vw, 38px);
  color: var(--grey);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}

.line-hero-link i {
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 14px;
  background: var(--signal-dim);
  transform-origin: left;
  transition: transform .45s var(--ease), background .3s var(--ease);
}

.line-hero-link:hover {
  color: var(--bone);
}

.line-hero-link:hover i {
  transform: scaleX(1.85);
  background: var(--signal);
}

.line-hero-figure {
  position: relative;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 100%;
  height: auto;
  max-width: 700px;
  aspect-ratio: 1;
  justify-self: end;
  pointer-events: none;
}

/* The specialty row is a spec line, not a sentence. Three consequences:
   it takes the label typography used everywhere else on the page rather
   than body typography, it is bracketed across the full shell so the first
   and last terms sit on the page edges, and it keeps the hairline above it
   so it reads as a plate beneath the hero rather than a stray line. */
.line-hero-programs {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: clamp(22px, 3vh, 44px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--hair);
}

/* 1fr auto 1fr, not space-between. With space-between the middle term only
   lands on the page centre when the outer two happen to be the same width,
   and "SMALL MOLECULES" is 38px narrower than "PROTEIN ENGINEERING" — which
   pushed the centre term 19px left of everything else centred on the page.
   Same mechanism as the footer. */
.line-hero-programs ul {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 12px clamp(24px, 3vw, 56px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line-hero-programs li:last-child {
  justify-self: end;
}

.line-hero-programs li {
  color: var(--grey);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.line-hero-programs li .nb {
  white-space: nowrap;
}

/* The specialty labels behave like the Explore link without adding visual
   weight at rest: a quiet colour lift and signal hairline appear only on
   intent, so the hero keeps its original composition. */
.line-hero-program-link {
  position: relative;
  display: inline-block;
  color: inherit;
  transition: color .3s var(--ease);
}

.line-hero-program-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 28px;
  height: 1px;
  background: var(--signal-dim);
  opacity: 0;
  transform: scaleX(.55);
  transform-origin: left;
  transition: opacity .25s var(--ease), transform .45s var(--ease), background .3s var(--ease);
}

.line-hero-program-link:hover,
.line-hero-program-link:focus-visible {
  color: var(--bone);
}

.line-hero-program-link:hover::after,
.line-hero-program-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1.6);
  background: var(--signal);
}

.line-hero-figure::before {
  content: "";
  position: absolute;
  inset: 16% 8% 14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(157,194,203,.085) 0%,
    rgba(93,137,149,.038) 42%,
    transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

#structure {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(221,238,242,.08))
          drop-shadow(0 0 20px rgba(125,174,185,.05));
}

/* --------------------------------------------------------------------------
   6. THESIS
   Section 01, and the only centred moment on the page. Every other section
   is flush left, which is what keeps this one singular even though it now
   carries a label like the rest.
   -------------------------------------------------------------------------- */
.thesis {
  display: grid;
  place-items: center;
  min-height: min(80svh, 780px);
  text-align: center;
}

/* The opening spans the shell so the authored desktop lines have enough
   room. Enlarged user text may wrap inside that same measure. */
.thesis .opening {
  width: 100%;
  margin-bottom: 0;
}

.thesis .eyebrow {
  margin-bottom: clamp(28px, 3vw, 44px);
}

.thesis-statement {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  font-size: var(--t-thesis);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.05em;
  text-wrap: wrap;
}

/* Keep the three authored desktop lines as separate blocks, while allowing
   enlarged text to wrap instead of overflowing the shell. */
.thesis-line {
  display: block;
  white-space: normal;
}

/* Mixed toward the body colour rather than used at full strength. The
   phrase reads as a temperature shift within one sentence instead of two
   sentences spliced together. */
.thesis-statement em {
  color: color-mix(in srgb, var(--signal-soft) 55%, var(--bone));
  font-style: normal;
}


/* Centred with balanced line lengths. At two lines the symmetry is worth
   more than a straight left edge, and text-wrap keeps the two lines close
   in length so the block reads as a shape rather than a rag. */
/* One sentence per line. At 56ch the first sentence broke two words early
   and stranded "them." at the head of line two; 70ch holds it whole, and
   the block spans stop the balancer moving the break somewhere else. */
.thesis .lede {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}

/* Center each sentence by its words alone. The terminal period is positioned
   just outside the measured text width, so it remains visually attached but
   contributes zero width to centering. */
.thesis .lede > .thesis-lede-line {
  display: block;
}

.thesis-lede-text {
  position: relative;
  display: inline-block;
}

.thesis-lede-period {
  position: absolute;
  left: 100%;
  top: 0;
}

/* --------------------------------------------------------------------------
   7. COMMITMENTS
   Numeral and title left, claim and detail right.
   -------------------------------------------------------------------------- */
.tenet-list {
  border-top: 1px solid var(--hair);
}

.tenet {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  column-gap: clamp(40px, 6vw, 112px);
  align-items: start;
  padding-block: clamp(48px, 5.2vw, 84px);
  border-bottom: 1px solid var(--hair);
}

/* The numeral sits in a fixed-width slot to the left of the title, on the
   title's own baseline. Fixed width is what keeps I, II and III from pushing
   their titles to three different positions. */
.tenet-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
}

.tenet-index {
  display: block;
  margin: 0;
  color: var(--signal);
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
}

/* A hyphenated compound must never split at its hyphen — "Success-" on one
   line and "Contingent" on the next reads as a typo, and both of these
   titles are wide enough to wrap at every viewport size. */
.tenet-head h3 .nb {
  white-space: normal;
}

.tenet-head .tenet-pricing-title {
  min-width: 0;
  container-type: inline-size;
}

.tenet-head .tenet-pricing-title > span {
  display: block;
  white-space: nowrap;
  /* Size both lines to this column, including after orientation changes. */
  font-size: min(1em, 9cqw);
}


.tenet-head h3 {
  margin: 0;
  font-size: calc(var(--t-h3) + .125rem);
  line-height: 1.06;
  letter-spacing: -.038em;
}

/* Title and claim both start at the top of the row now that the numeral is
   beside the title rather than above it. */
.tenet-body {
  padding-top: 0;
}

.tenet-lead {
  margin: 0;
  color: var(--bone);
  font-family: Manrope, Inter, sans-serif;
  font-size: var(--t-prose-lead);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.026em;
}

.tenet-copy {
  max-width: 60ch;
  margin: clamp(22px, 2.2vw, 32px) 0 0;
  color: var(--grey-read);
  font-size: var(--t-body);
  line-height: 1.78;
}

/* --------------------------------------------------------------------------
   8. COMMERCIAL
   -------------------------------------------------------------------------- */
#commercial {
  --t-small: clamp(1rem, calc(.9375rem + .11vw), 1.03125rem);
}

.commercial-body {
  display: grid;
  gap: clamp(20px, 2vw, 28px);
}

.commercial-contrast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
  align-items: stretch;
}

/* The silver material. Three parts, and all three are needed for a panel to
   catch light rather than sit flat:
     1. a diagonal sheen from the top-left corner
     2. a large soft glow bleeding in from a far corner
     3. a border tinted toward the accent rather than neutral white
   Everything derives from --signal, so it retints with the scheme. */
.commercial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.4vw, 48px);
  min-height: 460px;
  padding: clamp(30px, 3.2vw, 48px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--signal) 13%, var(--hair));
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--signal) 5%, transparent), transparent 42%),
    var(--ink-panel);
}

.commercial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.022), transparent 36%);
}

.commercial-card::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -165px;
  z-index: 0;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal) 15%, transparent), transparent 67%);
}

.commercial-card > * {
  position: relative;
  z-index: 1;
}

.commercial-card-ascent {
  border-color: color-mix(in srgb, var(--signal) 26%, var(--hair));
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--signal) 13%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--signal) 4%, transparent), transparent 52%),
    var(--ink-raise);
}

.commercial-card-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.commercial-card-label {
  margin: 0;
  color: var(--grey-dim);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.commercial-card-ascent .commercial-card-label {
  color: var(--signal);
}

.commercial-card h3 {
  margin: 0;
  font-size: calc(var(--t-h3) + .03125rem);
  line-height: 1.06;
  letter-spacing: -.038em;
}

.commercial-card ul {
  display: grid;
  gap: clamp(14px, 1.4vw, 19px);
  margin: auto 0 0;
  padding: clamp(26px, 2.6vw, 34px) 0 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}

.commercial-card li {
  position: relative;
  padding-left: 22px;
  color: var(--grey);
  font-size: var(--t-small);
  line-height: 1.6;
}

.commercial-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(141,148,166,.5);
  transform: rotate(45deg);
}

.commercial-card-ascent li {
  color: rgba(223,235,239,.86);
}

.commercial-card-ascent li::before {
  border-color: var(--signal);
}

.ownership-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  column-gap: clamp(40px, 6vw, 112px);
  row-gap: 26px;
  padding: clamp(30px, 3.2vw, 48px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--signal) 13%, var(--hair));
  border-radius: 18px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.014), transparent 38%),
    var(--ink-raise);
}

/* The glow enters from the opposite corner to the cards above, so the three
   panels read as one lit surface rather than three copies of a gradient. */
.ownership-panel::after {
  content: "";
  position: absolute;
  right: -180px;
  top: -150px;
  z-index: 0;
  width: 360px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal) 11%, transparent), transparent 68%);
}

.ownership-panel > * {
  position: relative;
  z-index: 1;
}

.ownership-label {
  margin: 0 0 14px;
  color: var(--grey-dim);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ownership-panel h3 {
  margin: 0;
  font-size: var(--t-h4);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.ownership-copy {
  display: grid;
  gap: 20px;
  max-width: 60ch;
}

.ownership-copy p {
  margin: 0;
  color: var(--grey);
  font-size: var(--t-small);
  line-height: 1.78;
}

/* --------------------------------------------------------------------------
   9. CAPABILITIES
   Open editorial rows: original full copy, with responsive type and columns.
   -------------------------------------------------------------------------- */
#capabilities {
  --cap-title: clamp(2rem, 3.3vw, 3rem);
  --cap-claim: clamp(1.625rem, 2.1vw, 2rem);
  --cap-body: var(--t-body);
  --cap-gap: clamp(28px, 3.2vw, 54px);
  --cap-columns: minmax(0, .88fr) minmax(0, 1.72fr);
}

#capabilities .opening {
  margin-bottom: clamp(32px, 4.5vw, 72px);
}

.capability-stage-simple {
  border-top: 1px solid var(--hair-strong);
}

.capability-row-simple {
  display: grid;
  grid-template-columns: var(--cap-columns);
  column-gap: var(--cap-gap);
  align-items: start;
  padding-block: clamp(44px, 4.5vw, 72px);
  border-bottom: 1px solid var(--hair-strong);
}

.capability-heading {
  min-width: 0;
}

.capability-heading h3 {
  max-width: 14ch;
  margin: 0;
  color: var(--bone);
  font-size: var(--cap-title);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.capability-rail-copy {
  max-width: 28ch;
  margin: clamp(22px, 2.1vw, 30px) 0 0;
  color: color-mix(in srgb, var(--signal-soft) 18%, var(--grey-read));
  font-size: clamp(1.03125rem, 1.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.006em;
  text-wrap: balance;
}

.capability-content {
  min-width: 0;
  max-width: 78ch;
}

.capability-thesis {
  margin: 0;
  color: var(--bone);
  font-family: Manrope, Inter, sans-serif;
  font-size: var(--cap-claim);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.capability-heading .capability-discovery-title {
  font-size: clamp(2.125rem, 3.5vw, 3.25rem);
}

.capability-design-title {
  font-size: clamp(2.25rem, 3.3vw, 3.125rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

.capability-thesis strong {
  font-weight: 600;
}

.capability-copy {
  max-width: 66ch;
  margin: clamp(26px, 2.7vw, 38px) 0 0;
  color: var(--grey-read);
  font-size: var(--cap-body);
  line-height: 1.78;
}

/* --------------------------------------------------------------------------
   10. INQUIRY SYSTEM
   Shared by the homepage section and the dedicated contact page.
   -------------------------------------------------------------------------- */
.inquiry-section {
  padding-block: var(--sect);
}




.inquiry-form-frame {
  container: inquiry / inline-size;
  width: 100%;
  min-width: 0;
}

.inquiry-form,
.contact-page-form {
  --signal: var(--bone);
  --signal-soft: var(--grey);
  --signal-dim: color-mix(in srgb, var(--bone) 38%, transparent);
  --on-bone: var(--ink);
  color: var(--bone);
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .58fr) minmax(0, 1.42fr);
  grid-template-areas:
    "intro fields"
    "intro footer";
  width: 100%;
  max-width: none;
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  border-radius: 22px;
  background: var(--ink);
  box-shadow: 0 28px 72px rgba(0,0,0,.45), inset 0 1px 0 rgba(244,244,247,.035);
}

.inquiry-form-header {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  padding: clamp(30px, 3vw, 42px) clamp(26px, 2.6vw, 38px);
  border-right: 1px solid var(--hair);
  background: var(--ink);
}

.inquiry-form-header > div {
  max-width: 30ch;
}

.inquiry-form-kicker {
  margin: 0 0 18px;
  color: var(--signal-soft);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.inquiry-form-header h3 {
  margin: 0 0 16px;
  font-size: var(--t-h4);
  line-height: 1.1;
  letter-spacing: -.032em;
}

.inquiry-form-header span {
  display: block;
  color: var(--grey);
  font-size: var(--t-support);
  line-height: 1.7;
}

.inquiry-form-direct {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: clamp(26px, 2.6vw, 34px) 0 0;
  padding: 7px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--grey-dim);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.inquiry-form-direct i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 55%, transparent);
}

.inquiry-fields {
  grid-area: fields;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 24px);
  padding: clamp(30px, 3vw, 42px) clamp(26px, 2.6vw, 38px) 22px;
}

.inquiry-field {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.inquiry-field-wide {
  grid-column: 1 / -1;
}

.inquiry-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--grey-read);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
}

.inquiry-field-label em {
  color: var(--grey-dim);
  font-size: .75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.inquiry-field input,
.inquiry-field textarea,
.inquiry-field select {
  width: 100%;
  min-width: 0;
  scroll-margin-block: calc(var(--masthead) + 24px) 24px;
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  outline: 0;
  background: var(--ink);
  box-shadow: inset 0 1px 5px rgba(0,0,0,.16);
  color: var(--bone);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.inquiry-field input,
.inquiry-field select {
  min-height: 54px;
  height: auto;
  padding: 12px 16px;
}

.inquiry-select-wrap {
  position: relative;
  display: block;
}

.inquiry-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid rgba(244,244,247,.58);
  border-bottom: 1.5px solid rgba(244,244,247,.58);
  pointer-events: none;
  transform: rotate(45deg);
}

.inquiry-field select {
  display: block;
  padding-right: 48px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.inquiry-field select:invalid {
  color: var(--grey-dim);
}

.inquiry-field select option {
  background: var(--ink);
  color: var(--bone);
}

/* Inquiry surfaces inherit the same ink, white, gray and rules as the page. The native
   select remains the form value and the fallback when JavaScript is absent. */
.inquiry-select-wrap.is-enhanced::after { display: none; }
.inquiry-select-wrap.is-enhanced select { display: none; }
.inquiry-select-wrap.is-open { z-index: 5; }

.inquiry-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  padding: 13px 17px;
  border: 1px solid rgba(244,244,247,.19);
  border-radius: 14px;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(244,244,247, .035);
  color: var(--bone);
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.inquiry-select-trigger::after {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid var(--grey);
  border-bottom: 1.5px solid var(--grey);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.inquiry-select-trigger.is-placeholder { color: var(--grey-dim); }
.inquiry-select-trigger:hover { border-color: rgba(244,244,247,.36); }
.inquiry-select-trigger:focus-visible,
.inquiry-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--signal-dim);
  background: rgba(244,244,247,.025);
  box-shadow: 0 0 0 3px rgba(244,244,247,.065);
}
.inquiry-select-trigger[aria-expanded="true"]::after {
  transform: translateY(4px) rotate(225deg);
  border-color: var(--signal);
}

.inquiry-select-menu {
  max-height: min(280px, 45svh);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(244,244,247,.2);
  border-radius: 17px;
  background: var(--ink);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(244,244,247, .045);
  list-style: none;
  animation: inquiry-menu-enter .16s ease-out;
}
.inquiry-select-menu[hidden] { display: none; }
.inquiry-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 11px;
  border-radius: 10px;
  color: var(--bone);
  font-size: 1rem;
  line-height: 1.45;
  cursor: pointer;
}
.inquiry-select-option.is-active { background: rgba(244,244,247,.075); color: var(--bone); }
.inquiry-select-option[aria-selected="true"] { color: var(--signal); }
.inquiry-select-option[aria-selected="true"]::after { content: "✓"; font-size: .875rem; }
@keyframes inquiry-menu-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .inquiry-select-menu { animation: none; }
  .inquiry-select-trigger, .inquiry-select-trigger::after { transition: none; }
}

.inquiry-field textarea {
  min-height: 148px;
  padding: 14px 16px;
  resize: vertical;
}

.inquiry-field input:hover,
.inquiry-field textarea:hover,
.inquiry-field select:hover {
  border-color: rgba(244,244,247,.22);
  background: rgba(244,244,247,.03);
}

.inquiry-field input:focus,
.inquiry-field textarea:focus,
.inquiry-field select:focus {
  border-color: var(--signal-dim);
  background: color-mix(in srgb, var(--signal) 6%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 11%, transparent);
}

.inquiry-field input::placeholder,
.inquiry-field textarea::placeholder {
  color: var(--grey-dim);
  opacity: 1;
}

.inquiry-field small {
  color: var(--grey-dim);
  font-size: .875rem;
  line-height: 1.55;
}

.inquiry-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.inquiry-form-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  padding: 0 clamp(26px, 2.6vw, 38px) clamp(28px, 2.8vw, 38px);
}

.inquiry-form-footer .inquiry-form-message:not(:empty) {
  margin-right: auto;
}

.inquiry-form-message {
  margin: 0 0 5px;
  color: var(--signal);
  font-size: .875rem;
  line-height: 1.5;
}

.inquiry-form-message:empty {
  display: none;
}

.inquiry-form-message.is-error {
  color: var(--bone);
}

.inquiry-submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 196px;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(244,244,247,.3);
  border-radius: 999px;
  background: var(--bone);
  box-shadow: inset 0 1px 0 rgba(244,244,247,.055), 0 8px 22px rgba(0,0,0,.22);
  color: var(--ink);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.inquiry-submit:hover {
  transform: translateY(-1px);
  background: var(--bone);
  box-shadow: inset 0 1px 0 rgba(244,244,247,.08), 0 12px 28px rgba(0,0,0,.3);
}

.inquiry-submit:disabled {
  cursor: wait;
  opacity: .6;
  transform: none;
  box-shadow: none;
}

.inquiry-submit > span:last-child {
  color: var(--on-bone);
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   11. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-page {
  min-height: 100vh;
}

/* No hero sits behind the contact masthead, so it carries its rule at rest. */
.contact-masthead {
  border-bottom-color: var(--hair);
}

.contact-page-main {
  position: relative;
  overflow: hidden;
}


.contact-page-grid {
  display: block;
  padding-block: clamp(64px, 7.5vw, 112px);
}

.contact-page-header {
  margin-bottom: clamp(38px, 4.5vw, 68px);
}

.contact-page-header .statement {
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: -.05em;
}

/* The dedicated contact page now uses the exact same inquiry surface as the
   homepage. Direct email routes sit below as a secondary contact layer. */
.contact-page-form-frame {
  width: 100%;
  max-width: none;
}

.contact-page-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--hair);
}

.contact-page-notes p {
  display: grid;
  gap: 10px;
  margin: 0;
}

.contact-page-notes span {
  color: var(--grey-dim);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.contact-page-notes a {
  width: fit-content;
  min-height: 44px;
  padding-block: 8px;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--hair);
  color: rgba(244,244,247,.9);
  font-size: var(--t-small);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}

.contact-page-notes a:hover {
  border-bottom-color: var(--signal);
  color: var(--bone);
}

/* --------------------------------------------------------------------------
   12. SUBMISSION PAGE
   One vertical reading path: received status, complete thank-you, details, return.
   No side columns, clipped headings, fixed-height content, or forced word breaks.
   -------------------------------------------------------------------------- */
.submission-page {
  --submission-status-gap: clamp(38px, 3.35vw, 48px);
  --submission-copy-gap: 10px;
  --submission-action-gap: 40px;
  min-height: 100svh;
}

.submission-page-main {
  width: var(--shell);
  min-height: 100svh;
  margin-inline: auto;
  padding-block: clamp(28px, 3.2vw, 48px) clamp(56px, 7vw, 96px);
}

.submission-brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  min-height: 44px;
  color: var(--bone);
}

.submission-brand-mark {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
}

.submission-brand span {
  font-family: Inter, Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.submission-stage {
  display: block;
  width: 100%;
  margin-top: clamp(28px, 3.5vw, 48px);
}

.submission-rule {
  height: 1px;
  margin-bottom: clamp(54px, 7.5vh, 90px);
  background: var(--hair-strong);
}

.submission-stage h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--bone);
  font-family: Manrope, Inter, -apple-system, sans-serif;
  font-size: clamp(2.75rem, 4.9vw, 4.75rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

/* The heading and confirmation form one unit. Status and action sit outside it. */
.submission-message {
  display: grid;
  gap: var(--submission-copy-gap);
  width: 100%;
  margin-top: var(--submission-status-gap);
}

.submission-index {
  margin: 0;
  color: var(--signal-soft);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.submission-copy {
  max-width: 60ch;
  margin: 0;
  color: var(--grey-read);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.72;
  text-wrap: pretty;
}

.submission-copy > span {
  display: block;
}

.submission-return {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: fit-content;
  max-width: 100%;
  min-height: 52px;
  padding: 12px 22px;
  margin-top: var(--submission-action-gap);
  border: 1px solid var(--bone);
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.submission-return span:last-child {
  color: inherit;
  font-size: 1.0625rem;
  line-height: 1;
}

.submission-return:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: #ffffff;
}

.submission-return:focus-visible {
  outline: 2px solid var(--signal-soft);
  outline-offset: 5px;
}

/* Keep the desktop action at its established vertical position when the
   two-sentence confirmation becomes one line. Narrow screens may wrap normally. */
@media (min-width: 1024px) {
  .submission-page {
    --submission-action-gap: calc(40px + 1.72 * clamp(1.0625rem, 1.35vw, 1.25rem));
  }
  .submission-copy { max-width: none; text-wrap: wrap; }
  .submission-copy > span { display: inline; }
}

@media (max-width: 760px) {
  .submission-page {
    --submission-status-gap: 32px;
    --submission-copy-gap: 20px;
    --submission-action-gap: 52px;
  }
  .submission-page-main { padding-block: 24px 56px; }
  .submission-brand-mark { width: 25px; height: 25px; flex-basis: 25px; }
  .submission-brand span { font-size: 1.375rem; }
  .submission-stage { margin-top: 24px; }
  .submission-rule { margin-bottom: clamp(42px, 8vh, 64px); }
  .submission-stage h1 {
    font-size: clamp(2.0625rem, 9vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -.045em;
  }
  .submission-index { font-size: .6875rem; }
  .submission-copy { max-width: 52ch; font-size: 1.0625rem; line-height: 1.7; }
}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
/* 1fr auto 1fr, not three equal columns: the centre column sizes to its own
   content and still lands on the page centre, so the tagline never has to
   wrap to fit a third of the width. */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 26px 44px;
  padding-block: clamp(46px, 5vw, 72px);
  border-top: 1px solid var(--hair);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  color: var(--bone);
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.brand span {
  font-family: Manrope, Inter, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: .28em;
  margin-right: -.28em;
}

.site-footer p {
  margin: 0;
  color: var(--grey);
  font-size: var(--t-small);
  text-align: center;
}

.site-footer > div {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  color: var(--grey-dim);
  font-size: var(--t-small);
}

.site-footer > div a {
  color: var(--grey);
  transition: color .25s var(--ease);
}

.site-footer > div a:hover {
  color: var(--bone);
}

/* --------------------------------------------------------------------------
   14. MOTION
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance, orchestrated once by script.js adding .is-ready to body. */
.js .line-hero-copy > * {
  opacity: 0;
  transform: translateY(16px);
}

.js .line-hero-figure {
  opacity: 0;
}

.js .is-ready .line-hero-copy > * {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms + 80ms);
}

.js .is-ready .line-hero-figure {
  opacity: 1;
  transition: opacity 1.4s var(--ease) 220ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .line-hero-copy > *,
  .js .line-hero-figure,
  .js .is-ready .line-hero-copy > *,
  .js .is-ready .line-hero-figure {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .line-hero-link i,
  .line-hero-link:hover i,
  .inquiry-submit,
  .submission-return {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   Layout follows available space, with bounded reading widths on big screens.
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--bone);
  font: inherit;
  font-size: .875rem;
  line-height: 1.4;
  cursor: pointer;
}

.line-hero::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 1px;
  margin-top: clamp(28px, 3vh, 44px);
  border-top: 1px solid var(--hair);
}

/* Lift the headline and protein together without changing their size. */
@media (min-width: 761px) and (min-height: 600px) {
  .line-hero-copy,
  .line-hero-figure {
    top: calc(-1 * clamp(16px, 2.5vh, 32px));
  }
}

@media (min-width: 1800px) {
  :root {
    --masthead: 96px;
    --t-small: 1rem;
  }
}

@media (min-width: 2200px) {
  :root { --shell-max: 1780px; }
  .line-hero-title { font-size: clamp(2rem, 12.8cqw, 8.5rem); }
}

@media (max-width: 1200px) {
  .contact-page-notes {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 24px;
  }
}

@media (max-width: 1100px) {
  :root { --masthead: 80px; }
  .line-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 28px;
    min-height: min(calc(100svh - var(--masthead)), 760px);
  }
  .tenet {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}

@media (max-width: 1024px) {
  .hero-lede-line { display: inline; white-space: normal; }

  #capabilities { --cap-columns: minmax(0, 1fr); }
  .capability-heading h3 { max-width: none; }
  .capability-rail-copy { max-width: 52ch; margin-top: 16px; }
  .capability-content { padding-top: 30px; }
  .ownership-panel { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

@media (max-width: 960px) {
  .thesis-line { white-space: normal; }
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 18px;
  }
  .site-footer p { text-align: left; }
  .site-footer > div { justify-self: start; white-space: normal; }
}

@media (max-width: 760px) {
  :root {
    --masthead: 68px;
    --sect: clamp(56px, 12vw, 88px);
    --nav-section-gap: 28px;
    --shell: calc(100% - 40px);
  }
  .line-masthead-inner { gap: 12px; }
  .line-brand { margin-right: auto; }
  .js .nav-toggle { display: inline-flex; }
  .js .line-masthead-nav { display: none; }
  .line-masthead-nav { gap: 8px 22px; }
  .js .line-masthead-nav.is-open {
    position: absolute;
    inset: 100% 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100svh - 100px);
    overflow-y: auto;
    padding: 12px 20px 24px;
    border-bottom: 1px solid var(--hair-strong);
    background: var(--ink);
    box-shadow: 0 20px 36px rgba(0,0,0,.3);
  }
  .line-masthead-nav.is-open a { padding: 12px 16px; font-size: 1rem; }
  .line-masthead-nav.is-open .nav-contact { margin-top: 8px; }
  .line-hero {
    display: block;
    min-height: 0;
    padding-block: 44px 0;
  }
  .line-hero-copy { width: 100%; }
  .line-hero-title { font-size: clamp(2.125rem, 12.8cqw, 4.5rem); line-height: 1.02; }
  .line-hero-claim { white-space: normal; margin-top: 24px; }
  .line-hero-lede { margin-top: 24px; }
  .line-hero-link { margin-top: 24px; }
  .line-hero-figure { display: none; }
  .line-hero::after { margin-top: 36px; }
  .thesis { min-height: 0; }
  .thesis .lede > .thesis-lede-line { display: inline; }
  .thesis-statement { font-size: clamp(1.875rem, 8.5vw, 3.5rem); line-height: 1.12; }
  .thesis-middle-line { display: block; }
  .tenet { padding-block: 36px; }
  .tenet-head { grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 10px; }
  .tenet-head h3 { line-height: 1.16; }
  .commercial-contrast-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .commercial-card { min-height: 0; padding: 26px; gap: 30px; }
  .ownership-panel { padding: 26px; }
  .contact-page-grid { padding-block: 52px 64px; }
  .contact-page-notes { grid-template-columns: minmax(0, 1fr); margin-top: 36px; padding-top: 26px; }
  .contact-page-header .statement { line-height: 1.08; }
  .submission-card { margin-top: 64px; }
  .submission-card h1 { line-height: 1.06; }
}

@media (max-width: 960px) and (max-height: 500px) {
  .line-hero { display: block; min-height: 0; padding-top: 32px; }
  .line-hero-copy { max-width: 44rem; }
  .line-hero-title { font-size: clamp(2.125rem, 8vw, 4rem); line-height: 1.02; }
  .line-hero-figure { display: none; }
}

@media (max-width: 600px) {
  .capability-claim-break { display: none; }
  .capability-content { padding-top: 28px; }
}

@media (max-width: 360px) {
  :root { --shell: calc(100% - 32px); }
  .commercial-card, .ownership-panel { padding: 22px; }
}

/* Narrow form containers include contact pages with a sidebar, regardless
   of the screen's overall width. */
@container inquiry (max-width: 62rem) {
  .inquiry-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "fields" "footer";
  }
  .inquiry-form-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  .inquiry-form-header > div { max-width: 56ch; }
  .inquiry-form-direct { margin: 0; }
}

@container inquiry (max-width: 40rem) {
  .inquiry-form-header { display: block; padding: 26px; }
  .inquiry-form-direct { margin-top: 22px; }
  .inquiry-fields { grid-template-columns: minmax(0, 1fr); padding: 26px; }
  .inquiry-field-wide { grid-column: auto; }
  .inquiry-field select { padding-right: 36px; }
  .inquiry-select-wrap::after { right: 14px; }
  .inquiry-form-footer { flex-direction: column; align-items: stretch; gap: 18px; padding: 0 26px 26px; }
  .inquiry-submit { width: 100%; min-width: 0; }
}

@supports not (container-type: inline-size) {
  .inquiry-form {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "fields" "footer";
  }
  .inquiry-fields { grid-template-columns: minmax(0, 1fr); }
  .inquiry-form-header { border-right: 0; border-bottom: 1px solid var(--hair); }
}

@media (max-width: 600px) {
  .tenet-head .tenet-pricing-title { font-size: clamp(1.375rem, 6.6vw, 1.75rem); }
}

/* Latest editorial line control: preserve deliberate desktop rhythm without
   constraining natural wrapping on narrower layouts. */
.capability-target-thesis > span { display: block; }

@media (max-width: 760px) {
  .capability-target-thesis > span { display: inline; }
  .capability-target-thesis > span + span::before { content: " "; }
}

/* Inquiry intro: keep the small-team statement compact and visually separate
   from the invitation that follows. */
.inquiry-form-header > div { max-width: 38ch; }
.inquiry-form-header .inquiry-intro-copy { display: block; max-width: 38ch; }
.inquiry-form-header .inquiry-intro-primary { display: block; text-wrap: balance; }
.inquiry-form-header .inquiry-intro-secondary { display: block; margin-top: 8px; }


/* Inquiry intro line control: fit the small-team statement into exactly two
   lines without changing the form grid, divider, padding, or column widths. */
.inquiry-form-header .inquiry-intro-line { display: inline; white-space: normal; }

@media (max-width: 760px) {
  .inquiry-form-header .inquiry-intro-line { display: inline; white-space: normal; }
  .inquiry-form-header .inquiry-intro-line + .inquiry-intro-line::before { content: " "; }
}

/* Focused small-screen refinements. Desktop and tablet type/grid tokens stay intact. */
@media (max-width: 760px) {
  .line-hero-lede { max-width: 52ch; }
  .capability-design-title {
    font-size: clamp(1.75rem, 6.5vw, 2.125rem);
    line-height: 1.2;
    text-wrap: pretty;
  }
  .capability-heading h3 { text-wrap: pretty; }
  .inquiry-field textarea { min-height: 210px; }
  .eyebrow, .commercial-card-label, .ownership-label,
  .inquiry-form-kicker, .contact-page-notes span { line-height: 1.4; }
  .line-masthead-nav.is-open { overscroll-behavior: contain; }
}

@media (max-width: 480px) {
  .inquiry-form { border-radius: 18px; }
  .inquiry-form-header, .inquiry-fields { padding: 22px 20px; }
  .inquiry-form-footer { padding: 0 20px 22px; }
}

/* Native phone pickers keep long option lists accessible beside the keyboard. */
.inquiry-field select { color-scheme: dark; }
.inquiry-field [aria-invalid="true"] { border-color: #dcaeaa; }
.inquiry-field-error { margin: 0; color: #e2c4c1; font-size: .875rem; line-height: 1.5; }
.inquiry-field-error[hidden] { display: none; }