:root {
  --bg: #FCFBF8;
  --bg-alt: #F3F1EB;
  --card: #FCFBF8;
  --ink: #15140F;
  --ink-soft: #2C2921;
  --muted: #6B6657;
  --line: rgba(21,20,15,.13);
  --line-strong: rgba(21,20,15,.22);
  --accent: #A8792A;
  --gold: #7A5B22;
  --gold-antique: #CBA14D;
  --gold-antique-hover: #BE9344;
  --button: #D1AC62;
  --button-hover: #C49E59;
  --gold-tint: rgba(168,121,42,.11);
  --radius: 3px;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 1240px;
  --gutter: 40px;
  --section: clamp(36px, 4.6vw, 55px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Fixed goose pattern behind the page (shows through transparent sections) */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .055;
  background: url("geese-pattern.svg") repeat; background-size: 210px auto; }
body > section, body > footer, body > .landscape { position: relative; z-index: 1; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold);
}
/* Home: section labels run a thin rule out to the edge of their column */
.eyebrow-rule { display: flex; align-items: center; gap: 16px; }
.eyebrow-rule::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
p { color: var(--ink-soft); text-wrap: pretty; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  font-size: .92rem; font-weight: 600; white-space: nowrap;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn svg { width: 14px; height: 14px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--button); color: var(--ink); }
.btn-primary:hover { background: var(--button-hover); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(168,121,42,.35); }
.btn-outline { background: var(--bg); color: var(--ink); border-width: 2px; border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--accent); }
.btn-sm { height: 44px; padding: 0 22px; }

/* Header */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252,251,248,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; white-space: nowrap; }
.logo-mark { height: 27px; width: auto; flex: none; display: block; transition: opacity .15s; }
.logo:hover .logo-mark { opacity: .62; }
.logo span { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; letter-spacing: .01em; line-height: 1; }
.nav ul { display: flex; flex: 1; align-items: center; gap: 30px; margin-left: 56px; list-style: none; font-size: .94rem; color: var(--ink-soft); }
.nav ul a:not(.btn) { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: color .15s; }
.nav ul a:not(.btn):hover { color: var(--ink); }
.nav ul li:last-child { margin-left: auto; }
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-right: -8px; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-top: clamp(36px, 4.5vw, 60px); }
.hero-art { position: absolute; top: 0; bottom: 0; right: 0; width: 58%; pointer-events: none; }
.hero-art svg { width: 100%; height: 100%; }
/* Mountain backdrop spanning hero + companies/engineers */
.landscape { position: relative; overflow: hidden; background: linear-gradient(to bottom, rgba(243,241,235,0) 0, rgba(243,241,235,0) 30%, var(--bg-alt) 100%); }
.landscape-art { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; pointer-events: none; }
.landscape-art svg { width: 100%; height: 100%; }
.landscape .hero, .landscape .split { position: relative; background: transparent; }
.landscape .split { border-top: 1px solid var(--line); }
/* Home: the For Startups / For Engineers band is flat beige, drawn under the mountains */
.landscape .split::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-alt); }
.landscape .hero-art { width: 36%; }
.landscape-art {
  opacity: .85;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 40%), linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  mask-composite: intersect;
}
.landscape .split-col h2, .landscape .split-col .lead, .landscape .split-col .eyebrow { text-shadow: 0 0 10px var(--bg), 0 0 22px var(--bg), 0 0 36px var(--bg); }

.hero .wrap { position: relative; }
.hero { padding-bottom: var(--section); }
.hero h1:first-child { margin-top: 0; }
.hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); line-height: 1.1; margin: 18px 0 20px; max-width: 800px; }
.hero p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); max-width: 580px; }
.hero p + p { margin-top: 8px; }
/* Hero founders box: heading (link on the right), company line, then the founders side by side.
   On phones the link moves to the bottom so it doesn't split the heading from the company line. */
.hero .operators { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: baseline; max-width: 920px; margin-top: 28px; padding: 26px 32px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(21,20,15,.04), 0 24px 48px -30px rgba(21,20,15,.3); }
.hero .operators p { max-width: none; }
.hero .operators-title { grid-column: 1; grid-row: 1; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--ink); }
.hero .operators .text-link { grid-column: 2; grid-row: 1; justify-self: end; font-size: 14px; font-weight: 500; white-space: nowrap; }
.hero .operators { max-width: none; }
.hero .operators .proof { grid-column: 1 / -1; display: block; margin-top: 24px; padding: 24px 0 0; border-top: 1px solid var(--line); }
.hero .operators-sub { grid-column: 1 / -1; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.founders { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--line); }
.founder { padding-right: 28px; }
.founder + .founder { padding: 0 0 0 28px; border-left: 1px solid var(--line); }
.founder-head { display: flex; align-items: center; gap: 14px; }
.hero .founder-name { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.hero .founder-role { margin-top: 3px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.hero .founder-bio { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
/* Founder photos: each image is enlarged and offset so the face sits centered in the circle */
.face { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--bg-alt); border: 2px solid var(--card); box-shadow: 0 0 0 1.5px rgba(168,121,42,.6), 0 4px 10px -2px rgba(21,20,15,.2); }
.face img { position: absolute; max-width: none; height: auto; }
.face-paxton img { width: 200%; left: -48%; top: -1%; }
.face-maggie img { width: 130%; left: -17%; top: -9.5%; }
.hero .actions { display: flex; gap: 14px; margin-top: 30px; }
.proof {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-top: clamp(24px, 3vw, 36px); padding: 16px 0 18px;
  border-top: 1px solid var(--line);
  position: relative; z-index: 1;
}
.proof ul { flex: 1; align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 36px; list-style: none; font-size: 14px; color: var(--ink-soft); }
.proof li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.proof li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--gold); flex: none; }
.proof li strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.proof li span { display: block; margin-top: 2px; }
.page-hero .hero-note { max-width: 680px; margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
/* Engineers: "What is a Forward Deployed Engineer?" section */
/* Engineers: "What is a Forward Deployed Engineer?" starts collapsed; the heading row opens it */
.section.section-collapsible { padding: var(--section) 0; }
.role-list { border-top: 1px solid var(--line-strong); }
.role-list > .role-details { padding: 22px 0; border-bottom: 1px solid var(--line); }
.role-details > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; list-style: none; cursor: pointer; }
.role-details > summary::-webkit-details-marker { display: none; }
.role-details > summary h2, .role-details > summary h3 { grid-column: 1; margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(1.16rem, 1.84vw, 1.48rem); line-height: 1.2; }
.role-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.details-toggle { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 50%; transition: border-color .15s, color .15s; }
.role-details > summary:hover .details-toggle { border-color: var(--accent); color: var(--gold); }
.details-toggle svg { width: 16px; height: 16px; }
.details-toggle .plus-v { transform-origin: center; transition: transform .2s; }
.role-details[open] > summary .details-toggle .plus-v { transform: scaleY(0); }
.role-body { padding-top: clamp(32px, 4vw, 48px); }
.faq-body { max-width: 680px; padding: 18px 0 4px; }
.faq-body p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.faq-body p + p { margin-top: 10px; }
.role-copy { max-width: 760px; }
.role-copy p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.role-copy p:first-child { font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.role-copy p + p { margin-top: 14px; }
.proof blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; line-height: 1.4;
  text-align: right; color: var(--muted);
}
.tagline {
  position: absolute; right: var(--gutter); top: clamp(130px, 14vw, 180px);
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--muted);
  line-height: 1.7; display: flex; align-items: center; gap: 24px;
}
.tagline::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .5; }

/* Split */
.split { background: var(--bg-alt); padding: var(--section) 0; border-top: 1px solid var(--line); }
.split { --col-pad: 32px; }
.split .wrap { display: grid; grid-template-columns: calc((100% - 17px - 2 * var(--col-pad)) * 2 / 3 + 16px + var(--col-pad)) 1fr; }
.split-head { grid-column: 1 / -1; margin-bottom: 38px; }
.split .split-head h2 { margin: 0; }
.split-head .split-sub { margin-top: 12px; max-width: 640px; font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); }
.split-col { padding-right: var(--col-pad); display: flex; flex-direction: column; }
.split-col + .split-col { border-left: 1px solid var(--line-strong); padding: 0 0 0 var(--col-pad); }
.split h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 16px 0 16px; }
.split .lead { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 470px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1; padding-top: 20px; }
.split-col + .split-col .cards { grid-template-columns: 1fr; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(21,20,15,.04), 0 24px 48px -30px rgba(21,20,15,.3);
  padding: 28px 26px 24px; display: flex; flex-direction: column; min-height: 210px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(21,20,15,.1); border-color: var(--accent); }
.card .icon {
  width: 44px; height: 44px; padding: 10px; border-radius: 50%;
  background: var(--gold-tint); color: var(--gold); margin-bottom: 16px;
}
.card h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 6px; letter-spacing: -.015em; }
.card p { font-size: .95rem; color: var(--ink-soft); line-height: 1.6; }
.card .card-tag { align-self: flex-start; margin: 2px 0 12px; }
.card .more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-family: var(--mono); font-size: .86rem; }
.card .more svg { width: 13px; height: 13px; transition: transform .2s; }
.card:hover .more svg { transform: translateX(3px); }

/* Why */
.why { padding: var(--section) 0; text-align: center; }
.why h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 14px auto 40px; max-width: 700px; }
.features { display: grid; grid-template-columns: repeat(4, 1fr); }
.features.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.feature { padding: 4px 32px; }
.feature + .feature { border-left: 1px solid var(--line); }
.feature .icon {
  width: 48px; height: 48px; padding: 11px; border-radius: 50%;
  background: var(--gold-tint); color: var(--gold); margin: 0 auto 14px;
}
.feature h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 6px; }
.feature p { font-size: .95rem; line-height: 1.6; color: var(--ink-soft); max-width: 220px; margin: 0 auto; }


/* Footer */
footer { border-top: 1px solid var(--line); padding: 40px 0 24px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.foot-brand .logo-mark { height: 23px; }
.foot-brand .logo span { font-size: 1.05rem; }
.foot-brand small { display: block; margin: 10px 0 0 42px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.foot-nav { display: flex; align-items: center; gap: 30px; font-size: .9rem; color: var(--ink-soft); }
.foot-nav a { transition: color .2s; }
.foot-nav a:hover { color: var(--accent); }
.social { display: flex; gap: 10px; margin-left: 16px; padding-left: 32px; border-left: 1px solid var(--line); }
.social a { display: grid; place-items: center; width: 24px; height: 24px; transition: color .2s; }
.social svg { width: 22px; height: 22px; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.foot-bottom .mono { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; }

/* Responsive */
@media (max-width: 1080px) {
  .nav ul { gap: 24px; margin-left: 40px; }
  :root { --gutter: 32px; }
  .landscape-art { width: 90%; opacity: .55; }
  .landscape .hero-art { display: none; }
  .tagline { display: none; }
  .proof { flex-direction: column; align-items: flex-start; gap: 18px; }
  .proof blockquote { text-align: left; }
  .proof blockquote br { display: none; }
  .split .wrap { grid-template-columns: 1fr; gap: 32px; }
  .split-col { padding-right: 0; }
  .split-col + .split-col { border-left: 0; border-top: 1px solid var(--line-strong); padding: 32px 0 0; }
  .cards, .split-col + .split-col .cards { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .feature:nth-child(3) { border-left: 0; }
  .foot-top { flex-direction: column; }
}
/* Header collapses to the menu button below 900px, where the full menu stops fitting */
@media (max-width: 900px) {
  .nav { height: 64px; }
  .nav ul { display: none; }
  .nav.open ul {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-left: 0;
    position: absolute; top: 64px; left: 0; right: 0; padding: 12px var(--gutter) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line); font-size: 16px;
  }
  .nav.open ul a:not(.btn) { padding: 10px 0; }
  .nav.open ul li:last-child { margin: 8px 0 0; }
  .nav.open ul .btn { width: 100%; }
  .menu-toggle { display: block; }
  .menu-toggle svg { width: 24px; height: 24px; }
  .nav ul a[aria-current="page"]::after { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .eyebrow { font-size: .88rem; }
  .hero .operators { grid-template-columns: 1fr; padding: 18px; }
  .hero .operators .text-link { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 16px; }
  .founders { grid-template-columns: 1fr; }
  .founder { padding-right: 0; }
  .founder + .founder { margin-top: 20px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .logo span { font-size: 1rem; }
  .hero h1 { margin: 18px 0 20px; }
  .hero p { font-size: 16px; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 32px; }
  .landscape-art { width: 150%; opacity: .35; }
  .proof ul { grid-template-columns: 1fr; }
  .split .lead { font-size: 16px; }
  .cards, .split-col + .split-col .cards { grid-template-columns: 1fr; padding-top: 16px; }
  .card { min-height: 0; }
  .why h2 { margin-bottom: 24px; }
  .features, .features.two { grid-template-columns: 1fr; row-gap: 0; }
  .feature { padding: 22px 0; }
  .feature + .feature { border-left: 0; border-top: 1px solid var(--line); }
    .foot-nav { flex-wrap: wrap; gap: 16px 24px; }
  .social { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Nav dropdown + active state */
.nav ul a[aria-current="page"] { color: var(--ink); }
.nav ul a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); }
.nav ul a:not(.btn) { position: relative; }

/* Sub-pages */
.page-hero { position: relative; overflow: hidden; padding: clamp(44px, 5.5vw, 76px) 0 var(--section); border-bottom: 1px solid var(--line); }
.page-hero .geese { position: absolute; right: var(--gutter); top: 50%; width: clamp(200px, 26vw, 340px); transform: translateY(-50%); opacity: .9; pointer-events: none; }
.page-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.1; margin: 16px 0 18px; max-width: 720px; }
.page-hero h1:first-child { margin-top: 0; }
.page-hero + .section.alt { border-top: 0; }
/* "We've placed" row: small label followed by pill tags */
.placed { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.placed-label { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 8px 14px; font-size: .92rem; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; }
.page-hero p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); max-width: 620px; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.section { padding: var(--section) 0; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.plain { background: var(--bg); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head h2, .two-col h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 14px 0 14px; }
.section-head p, .two-col p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); }
.section-head p.head-note { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.head-note strong { font-weight: 600; color: var(--ink); }
/* Lead sentence: the first paragraph of a section reads as the key takeaway */
.section-head p, .two-col > div > p:first-of-type { font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.two-col > div > p:first-of-type + p { margin-top: 14px; }
.two-col p + p { margin-top: 14px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.checklist { list-style: none; border-top: 1px solid var(--line-strong); }
.checklist li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-soft); }
.checklist svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 1px; }
.checklist strong { display: block; font-weight: 600; color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.section-note { margin-top: 28px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
/* Very small screens: a long button label may wrap instead of overflowing */
@media (max-width: 560px) {
  .page-hero .actions .btn { height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; row-gap: 6px; white-space: normal; text-align: center; }
}
.page-hero .section-note { margin-top: 22px; font-size: 16px; font-weight: 600; font-style: italic; color: var(--ink); }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(21,20,15,.1); border-color: var(--accent); }
.tile h3 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 8px; }
.tile p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.tile .num { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 14px; }
/* Companies: recruiting process as numbered rows (step name left, detail right) */
.process { list-style: none; border-top: 1px solid var(--line-strong); }
.process > li { display: grid; grid-template-columns: minmax(200px, 1fr) 2.2fr; gap: 10px 48px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.process-num { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: .85rem; letter-spacing: .1em; color: var(--gold); }
.process h3 { font-size: 1.4rem; line-height: 1.2; }
.process p { max-width: 680px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.process p + p { margin-top: 10px; }
.process-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; vertical-align: middle; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: var(--gold-tint); border: 1px solid rgba(168,121,42,.35); border-radius: 999px; }
@media (max-width: 720px) { .process > li { grid-template-columns: 1fr; padding: 22px 0; } }
.process .screen-talk { margin-top: 28px; }
/* Buttons that jump down the page: arrow points down */
.btn svg.down { transform: rotate(90deg); }
.btn:hover svg.down { transform: rotate(90deg) translateX(3px); }
.statement { text-align: center; }
.statement h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 16px auto 18px; }
.statement p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 620px; margin: 0 auto; }

@media (max-width: 1080px) {
  .page-hero .geese { opacity: .35; }
  .two-col { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .page-hero .geese { display: none; }
  .page-hero p { font-size: 16px; }
  .page-hero .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .tiles, .tiles.two { grid-template-columns: 1fr; }
}

/* Home: refined layout */
.hero h1 { max-width: none; }
.landscape .hero { padding-bottom: var(--section); }
.landscape-art { top: auto; height: 76%; }
.why-split { text-align: left; }
.why-split .wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.why-split h2 { margin: 16px 0 0; max-width: 420px; }
.why-split .features.two { max-width: none; margin: 0; }
.why-split .feature { padding: 0 0 0 32px; }
.why-split .feature:first-child { padding-left: 0; }
.why-split .feature + .feature { border-left: 1px solid var(--line); }
.why-split .feature .icon { margin: 0 0 16px; }
.why-split .feature p { max-width: 260px; margin: 0; }

/* Home: "Built from experience" proof points */
.pp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.pp-statement { margin-top: 16px; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.pp-companies { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.pp-companies ul { list-style: none; display: flex; flex-wrap: wrap; row-gap: 6px; }
.pp-companies li { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--ink); }
.pp-companies li + li::before { content: "/"; margin: 0 14px; font-weight: 400; color: var(--accent); }
.pp-stats { border-top: 1px solid var(--line-strong); }
.pp-stat { padding: 26px 0; border-bottom: 1px solid var(--line); }
.pp-num { font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--gold); }
.pp-stat p { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: 360px; }
@media (max-width: 900px) { .pp-grid { grid-template-columns: 1fr; } }
@media (max-width: 1080px) {
  .why-split .wrap { grid-template-columns: 1fr; gap: 32px; }
  .landscape-art { height: 60%; }
}
@media (max-width: 720px) {
  .why-split .feature, .why-split .feature:first-child { padding: 24px 0; }
  .why-split .feature + .feature { border-left: 0; border-top: 1px solid var(--line); }
  .why-split .feature:first-child { padding-top: 0; }
}

/* Contact / call to action */
.contact { padding: var(--section) 0; }
/* Engineers: contact picks up the tinted band so the page alternates plain / tinted */
.contact.tinted { background: var(--bg-alt); }
.contact h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.12; margin: 14px 0 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 720px); gap: 28px; margin-top: 28px; }
.contact-grid > .contact-direct { margin-top: 8px; max-width: none; }
.contact-info p { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); max-width: 640px; }
.contact-info p + p { margin-top: 16px; }
.contact-direct { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-strong); max-width: 440px; }
.direct-label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-criteria { margin-top: 28px; max-width: 440px; }
.contact-criteria:first-child { margin-top: 0; }
.contact-criteria .direct-label { margin-bottom: 12px; }
.contact-criteria .checklist li:last-child { border-bottom: 0; }
.contact-email { font-family: var(--mono); font-size: 1rem; color: var(--gold); word-break: break-word; border-bottom: 1px solid rgba(122,91,34,.35); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.contact-email:hover { color: var(--accent); border-color: var(--accent); }
.copy-email { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 5px; vertical-align: middle; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; transition: color .15s, background .15s; }
.copy-email svg { width: 16px; height: 16px; }
.copy-email .i-check { display: none; }
.copy-email span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.copy-email:hover { color: var(--gold); background: var(--gold-tint); }
.copy-email:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-email.copied { color: var(--gold); }
.copy-email.copied .i-copy { display: none; }
.copy-email.copied .i-check { display: block; }
/* Home & About: "Get in touch" is a quiet antique-gold band with two outlined links and the email on one row */
body section.contact.contact-slim { padding: var(--section) 0; background: var(--gold-antique); border-top: 0; }
.contact-slim h2 { margin: 0; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.contact-link { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); border: 1px solid rgba(21,20,15,.5); border-radius: 6px; transition: border-color .15s, background .15s; }
.contact-link svg { flex: none; width: 14px; height: 14px; color: var(--ink); transition: transform .15s; }
.contact-link:hover { border-color: var(--ink); background: rgba(21,20,15,.08); }
.contact-link:hover svg { transform: translateX(3px); }
.contact-link:focus-visible, .contact-slim .copy-email:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.contact-links .contact-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; max-width: none; margin: 4px 0 0; padding: 0; border: 0; }
.contact-links .direct-label { margin: 0; color: rgba(21,20,15,.8); }
.contact-links .contact-email { font-size: .92rem; color: var(--ink); border-bottom-color: rgba(21,20,15,.5); }
.contact-links .contact-email:hover { color: var(--ink); border-bottom-color: var(--ink); }
.contact-links .copy-email { margin-left: -10px; color: rgba(21,20,15,.8); }
.contact-links .copy-email:hover { color: var(--ink); background: rgba(21,20,15,.1); }
.contact-links .copy-email.copied { color: var(--ink); }
@media (min-width: 1081px) { .contact-links .contact-direct { margin: 0 0 0 auto; } }
@media (max-width: 560px) { .contact-link { width: 100%; justify-content: space-between; } }

/* Contact forms: soft rounded card, white fields with a gold focus ring, and a pill-style segmented choice */
.contact-form {
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(24px, 3.4vw, 40px); background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21,20,15,.04), 0 28px 60px -30px rgba(21,20,15,.3);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* LinkedIn gets 65% of the row and Resume the rest, so the Resume box runs compact: its wordier hints and the file
   size are left out until the two stack (760px and under), where it has the full width again */
.field-row-linkedin { grid-template-columns: minmax(0, 65%) minmax(0, 1fr); }
.field-row-linkedin .hint-detail, .field-row-linkedin .file-more, .field-row-linkedin .file-size { display: none; }
@media (max-width: 760px) {
  .field-row-linkedin { grid-template-columns: minmax(0, 1fr); }
  .field-row-linkedin .hint-detail, .field-row-linkedin .file-more, .field-row-linkedin .file-size { display: inline; }
}
.field { min-width: 0; border: 0; }
.field label, .field legend { display: block; margin-bottom: 8px; padding: 0; font-size: .84rem; font-weight: 500; color: var(--ink); }
.field .hint { display: block; margin-top: 2px; font-weight: 400; font-size: .8rem; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: .98rem; color: var(--ink);
  background-color: #fff; border: 1px solid rgba(21,20,15,.16); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(21,20,15,.04);
  transition: border-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(21,20,15,.3); }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%236B6657' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.field select:invalid { color: #9A9484; }
.field select option { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(168,121,42,.16);
}
.field.invalid input, .field.invalid select, .field.invalid textarea, .field.invalid .seg { border-color: #a4452c; }
.field.invalid input:focus, .field.invalid select:focus, .field.invalid textarea:focus { box-shadow: 0 0 0 4px rgba(164,69,44,.14); }
.contact-form [hidden] { display: none !important; }
/* "Prefer a call? Add your number." reveals the optional phone field */
.add-phone { display: inline-block; margin-top: 8px; padding: 0; background: none; border: 0; font: inherit; font-size: .8rem; color: var(--muted); cursor: pointer; }
.add-phone span { color: var(--gold); border-bottom: 1px solid rgba(122,91,34,.35); transition: color .15s, border-color .15s; }
.add-phone:hover span { color: var(--accent); border-color: var(--accent); }
.add-phone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.add-phone + .field { margin-top: 16px; }
.text-link { color: var(--gold); border-bottom: 1px solid rgba(122,91,34,.35); transition: color .15s, border-color .15s; }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.field .hint.inline { display: inline; margin: 0 0 0 6px; }
.field input::placeholder { color: #9A9484; }
/* Clear (×) button inside text fields, shown once the field has a value */
.input-wrap { position: relative; }
.field .input-wrap textarea { padding-right: 42px; }
.clear-btn {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: var(--bg-alt); color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.input-wrap textarea + .clear-btn { top: 10px; transform: none; }
.input-wrap.has-value .clear-btn { display: inline-flex; }
.clear-btn:hover { background: var(--line-strong); color: var(--ink); }
.clear-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.clear-btn svg { width: 10px; height: 10px; }
/* Resume picker: the real file input stretches over the whole zone (so click and drag-and-drop both work),
   and once a file is chosen the zone shows its name and size with a × to remove it */
.file-drop {
  position: relative; display: flex; align-items: center; gap: 12px; height: 45px; padding: 0 14px;
  background: #fff; border: 1px dashed rgba(21,20,15,.28); border-radius: 8px; color: var(--muted); font-size: .95rem;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.file-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.file-drop:hover { border-color: var(--accent); background: var(--gold-tint); }
.file-drop:has(input:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(168,121,42,.16); }
.file-icon { flex: none; width: 16px; height: 16px; color: var(--gold); }
.file-label { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name strong { font-weight: 500; color: var(--gold); }
.file-size { flex: none; font-size: .8rem; color: var(--muted); }
.file-drop .clear-btn { z-index: 1; }
.file-drop.has-file { padding-right: 40px; border-style: solid; border-color: rgba(21,20,15,.16); color: var(--ink); box-shadow: 0 1px 2px rgba(21,20,15,.04); }
.file-drop.has-file:hover { background: #fff; border-color: rgba(21,20,15,.3); }
.file-drop.has-file .clear-btn { display: inline-flex; }
.file-drop.has-file .file-icon { display: none; }
.field.invalid .file-drop { border-color: #a4452c; }
.field-error { display: block; min-height: 0; margin-top: 6px; font-size: .8rem; color: #a4452c; }
.field-error:empty { display: none; }

/* Segmented choice: a soft track with a raised white pill for the selected option */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: flex; align-items: center; justify-content: center; margin: 0; padding: 10px 8px; border-radius: 7px; text-align: center; line-height: 1.3; font-size: .92rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.seg label:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.seg input:checked + label { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(21,20,15,.08), 0 2px 10px rgba(21,20,15,.07); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A Yes/No question laid out as a row: the question on the left, a compact toggle on the right */
.field-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.field-q { font-size: .84rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
/* The Yes/No toggle: a rounded track with a gold thumb that slides to the chosen side. Browsers without :has() skip the
   slide and just fill the chosen label with gold. */
.field-inline .seg { flex: none; width: 148px; gap: 0; padding: 3px; border-radius: 999px; background: var(--bg-alt); box-shadow: inset 0 1px 2px rgba(21,20,15,.07); transition: border-color .15s; }
.field-inline .seg:hover { border-color: var(--line-strong); }
.field-inline.invalid .seg { border-color: #a4452c; }
.field-inline .seg label { position: relative; z-index: 1; padding: 8px 6px; border-radius: 999px; font-weight: 600; color: var(--muted); transition: color .2s; }
.field-inline .seg label:hover { background: transparent; color: var(--ink); }
.field-inline .seg input:checked + label,
.field-inline .seg input:checked + label:hover { background: var(--button); color: var(--ink); box-shadow: 0 1px 2px rgba(21,20,15,.15); }
@supports selector(:has(*)) {
  .field-inline .seg::before {
    content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: 999px;
    background: var(--button); box-shadow: 0 1px 2px rgba(21,20,15,.18), 0 4px 12px -3px rgba(168,121,42,.55);
    opacity: 0; transform: translateX(0); pointer-events: none;
    transition: transform .3s cubic-bezier(.34,1.3,.5,1), opacity .2s;
  }
  .field-inline .seg:has(input:checked)::before { opacity: 1; }
  .field-inline .seg:has(input[value="No"]:checked)::before { transform: translateX(100%); }
  .field-inline .seg input:checked + label,
  .field-inline .seg input:checked + label:hover { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .field-inline .seg::before, .field-inline .seg label { transition: none; } }

.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.contact-form .btn { cursor: pointer; font-family: inherit; min-width: 160px; height: 50px; border-radius: 8px; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-note { font-size: .88rem; color: var(--muted); line-height: 1.4; flex: 1 1 200px; }
.form-note.error { color: #a4452c; }
.form-note.error a { color: inherit; border-bottom-color: currentColor; }
.contact-form .btn:disabled { opacity: .75; cursor: default; transform: none; box-shadow: none; }

/* After sending: the fields give way to a confirmation panel */
.contact-form.is-sent > :not(.form-success) { display: none; }
.form-success { padding: 28px 8px; text-align: center; }
.form-success:focus { outline: none; }
.form-success-icon { display: block; width: 52px; height: 52px; margin: 0 auto 18px; padding: 13px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); }
.form-success h3 { margin-bottom: 10px; font-size: 1.5rem; line-height: 1.2; }
.form-success p { max-width: 400px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.form-success p + p { margin-top: 10px; }
.form-success .form-success-alt { font-size: 14px; color: var(--muted); }
.form-edit { margin-top: 22px; padding: 0; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; color: var(--gold); border-bottom: 1px solid rgba(122,91,34,.35); cursor: pointer; }
.form-edit:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-info p, .contact-direct { max-width: none; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .seg label { padding: 10px 6px; font-size: .84rem; }
  .field-inline-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .field-inline .seg { width: auto; }
  .contact-info p { font-size: 1rem; }
  .contact-form .btn { width: 100%; }
}

/* Co-founder bios */
.bio-cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.bio-card { padding: 0 clamp(28px, 4vw, 56px); }
.bio-card:first-child { padding-left: 0; }
.bio-card:last-child { padding-right: 0; border-left: 1px solid var(--line); }
.bio-head { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; }
.bio-photo {
  position: relative; overflow: hidden; width: 104px; height: 104px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--gold-tint);
}
.bio-initials { font-family: var(--serif); font-weight: 600; font-size: 1.8rem; letter-spacing: .02em; color: var(--gold); }
.bio-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.bio-head .eyebrow { font-size: .78rem; line-height: 1; }
.bio-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); line-height: 1.1; margin: 8px 0 0; }
.bio-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.bio-head .bio-name h2 { margin: 0; }
.bio-linkedin { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--ink); transition: color .15s; }
.bio-linkedin svg { width: 22px; height: 22px; }
.bio-linkedin:hover { color: var(--gold); }
.bio-linkedin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bio-text p { font-size: 1rem; line-height: 1.65; }
.bio-text p + p { margin-top: 14px; }
.bio-book { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; margin-top: 26px; padding: 20px 22px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.book-cover { display: block; border-radius: 2px; box-shadow: 0 10px 24px rgba(21,20,15,.22); transition: transform .18s, box-shadow .18s; }
.book-cover:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(21,20,15,.26); }
.book-cover img { display: block; width: 100%; height: auto; border-radius: 2px; }
.book-label { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.bio-book h3 { font-size: 1.25rem; margin-bottom: 6px; }
.bio-book p { font-size: .95rem; line-height: 1.6; }
.bio-book .go { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: .84rem; color: var(--accent); transition: color .15s; }
.bio-book .go:hover { color: var(--gold); }
@media (max-width: 900px) {
  .bio-cols { grid-template-columns: 1fr; gap: 48px; }
  .bio-card, .bio-card:first-child, .bio-card:last-child { padding: 0; border-left: 0; }
  .bio-card:last-child { border-top: 1px solid var(--line); padding-top: 48px; }
}

/* Dark footer */
footer { background: var(--ink); color: #E9E5DA; border-top: 0; }
footer .logo span { color: #F6F3EC; }
footer .logo-mark { filter: invert(1); }
.foot-brand small, .foot-bottom, .foot-bottom .mono { color: #A39D8C; }
.foot-nav { color: #D9D4C7; }
.foot-nav a:hover { color: #D9A94B; }
.social { border-left-color: rgba(255,255,255,.18); }
.social a { color: #F3F1EB; }
.social a:hover { color: #D9A94B; }
.social svg path { fill: currentColor; }
.foot-bottom { border-top-color: rgba(255,255,255,.12); }

/* Section separation: a divider whenever the contact form follows a plain section
   (a tinted section above it already provides its own edge) */
section:not(.alt) + .contact, .landscape + .contact { border-top: 1px solid var(--line); }

/* "On this page" jump links (long pages) */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.jump span { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jump a { font-size: .9rem; color: var(--ink-soft); border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.jump a:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 720px) {
  .jump { gap: 10px 20px; }
  .jump span { flex-basis: 100%; }
}

/* Who you will work with (engineers v2) */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.person { display: flex; gap: 20px; align-items: flex-start; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.person-photo { width: 88px; height: 88px; flex: none; object-fit: cover; object-position: center 22%; border-radius: var(--radius); }
.person h3 { font-size: 1.35rem; line-height: 1.2; }
.person-role { margin: 4px 0 10px; font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.person p { font-size: .95rem; line-height: 1.6; }
.person .go { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: .84rem; color: var(--accent); transition: color .15s; }
.person .go:hover { color: var(--gold); }
@media (max-width: 900px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .person { flex-direction: column; } }

/* Destination chips */

.stat { border-top: 1px solid var(--line-strong); padding-top: 28px; }
.stat-num { font-family: var(--serif); font-weight: 600; font-size: clamp(3.6rem, 8vw, 6rem); line-height: 1; letter-spacing: -.03em; color: var(--gold); }
.two-col .stat-label { margin-top: 14px; font-size: 1.15rem; line-height: 1.45; color: var(--ink); max-width: 360px; }
.two-col .stat-source { margin-top: 12px; font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pull-quote {
  margin-top: clamp(44px, 5vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line);
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.3;
  text-align: center; text-wrap: balance; color: var(--ink);
}
.pull-quote:first-child { margin: 0 0 clamp(40px, 5vw, 64px); padding: 0 0 clamp(32px, 4vw, 48px); border-top: 0; border-bottom: 1px solid var(--line); }