/* B Open Ground: layout and copy preserved from the approved Claude Design export.
   See ../references for provenance. Only local assets; no runtime JavaScript. */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('./assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
:root { color-scheme: light; }
html, body { margin: 0; padding: 0; background: #F4F3EC; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
a { color: #2345D6; }
a:hover { color: #18234B; }
a:focus-visible { outline: 3px solid #2345D6; outline-offset: 4px; }
::selection { background: #2345D6; color: #FFFFFF; }
.skip-link { position: absolute; left: 20px; top: 12px; z-index: 10; padding: 12px 18px; background: #F4F3EC; color: #18234B; font: 700 18px 'Schibsted Grotesk', sans-serif; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
section[id] { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.site {
  background:#F4F3EC;
  color:#18234B;
  font-family:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.header {
  max-width:1440px;
  margin:0 auto;
  padding:22px clamp(20px,5vw,72px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 32px;
}

.wordmark {
  text-decoration:none;
  color:#18234B;
  font-weight:800;
  font-size:29px;
  letter-spacing:-0.05em;
  line-height:1;
  display:inline-flex;
  align-items:flex-end;
  padding:4px 0;
}

.wordmark-image {
  display:block;
}

.navigation {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 30px;
  font-size:16px;
  font-weight:600;
}

.nav-link {
  color:#18234B;
  text-decoration:none;
  padding:8px 0;
  display:inline-block;
  border-bottom:2px solid transparent;
}

.nav-link:hover {
  color:#2345D6;
  border-bottom:2px solid #2345D6;
}

.hero {
  max-width:1440px;
  margin:0 auto;
  padding:clamp(24px,4.5vh,72px) clamp(20px,5vw,72px) 0;
}

.hero-title {
  font-weight:800;
  font-size:clamp(48px,min(10vw,15vh),168px);
  line-height:0.9;
  letter-spacing:-0.055em;
  margin:0 0 0 -0.04em;
  max-width:12ch;
}

.intro-layout {
  margin-top:clamp(24px,4vh,56px);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:40px clamp(32px,5vw,80px);
}

.intro-copy {
  flex:1 1 320px;
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.intro-text {
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.6;
  margin:0;
  text-wrap:pretty;
}

.approach-link {
  align-self:flex-start;
  font-size:17px;
  font-weight:700;
  color:#2345D6;
  text-decoration:none;
  border-bottom:2px solid #2345D6;
  padding:4px 0;
}

.approach-link:hover {
  color:#18234B;
  border-bottom:2px solid #18234B;
}

.hero-art {
  flex:2 1 420px;
  position:relative;
  height:clamp(180px,min(26vw,38vh),380px);
  margin-right:calc(-1 * clamp(20px,5vw,72px) - max(0px,(100vw - 1440px) / 2));
}

.plane-low {
  position:absolute;
  left:0;
  bottom:0;
  width:34%;
  height:64%;
  background:#2345D6;
}

.plane-edge {
  position:absolute;
  left:34%;
  width:clamp(24px,4vw,56px);
  bottom:calc(64% - 10px);
  height:10px;
  background:#D84C36;
}

.plane-high {
  position:absolute;
  left:calc(34% + clamp(24px,4vw,56px));
  right:0;
  bottom:0;
  height:100%;
  background:#2345D6;
}

.approach {
  max-width:1440px;
  margin:0 auto;
  padding:clamp(80px,10vw,160px) clamp(20px,5vw,72px) clamp(80px,10vw,150px);
}

.section-label {
  margin:0 0 28px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#2345D6;
}

.label-line {
  width:32px;
  height:2px;
  background:#2345D6;
}

.approach-layout {
  display:flex;
  flex-wrap:wrap;
  gap:28px clamp(40px,6vw,96px);
  align-items:flex-end;
}

.approach-title {
  flex:1 1 460px;
  font-weight:750;
  font-size:clamp(38px,5.4vw,80px);
  line-height:0.96;
  letter-spacing:-0.04em;
  margin:0;
  max-width:13ch;
  text-wrap:balance;
}

.approach-text {
  flex:1 1 340px;
  font-size:clamp(18px,1.4vw,20px);
  line-height:1.65;
  margin:0;
  max-width:44ch;
  text-wrap:pretty;
}

.steps {
  list-style:none;
  margin:clamp(56px,7vw,96px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:0 clamp(24px,3vw,48px);
  border-top:2px solid #18234B;
}

.step {
  padding:28px 0 8px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.step-number {
  font-size:15px;
  font-weight:700;
  color:#2345D6;
}

.step-title {
  font-weight:700;
  font-size:clamp(28px,2.6vw,36px);
  letter-spacing:-0.03em;
  line-height:1;
  margin:0;
}

.step-text {
  font-size:18px;
  line-height:1.55;
  margin:0;
  max-width:30ch;
}

.ambition {
  background:#2345D6;
  color:#FFFFFF;
  position:relative;
}

.ambition-cutout {
  position:absolute;
  top:0;
  right:0;
  width:38%;
  height:clamp(28px,4vw,56px);
  background:#F4F3EC;
}

.ambition-inner {
  max-width:1440px;
  margin:0 auto;
  padding:clamp(96px,11vw,170px) clamp(20px,5vw,72px) clamp(80px,10vw,150px);
}

.section-label-light {
  margin:0 0 28px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#FFFFFF;
}

.label-line-light {
  width:32px;
  height:2px;
  background:#FFFFFF;
}

.ambition-title {
  font-weight:800;
  font-size:clamp(44px,7.4vw,116px);
  line-height:0.9;
  letter-spacing:-0.05em;
  margin:0;
  max-width:11ch;
  text-wrap:balance;
}

.ambition-copy {
  margin-top:clamp(40px,5vw,72px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:24px clamp(32px,5vw,80px);
  max-width:960px;
}

.ambition-text {
  font-size:clamp(18px,1.4vw,21px);
  line-height:1.6;
  margin:0;
  text-wrap:pretty;
}

.contact {
  max-width:1440px;
  margin:0 auto;
  padding:clamp(80px,10vw,150px) clamp(20px,5vw,72px);
}

.contact-layout {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:48px clamp(40px,6vw,96px);
  align-items:end;
}

.founder {
  display:flex;
  flex-direction:column;
  gap:24px;
}

.founder-title {
  font-weight:750;
  font-size:clamp(36px,4.8vw,72px);
  line-height:0.96;
  letter-spacing:-0.04em;
  margin:0;
  text-wrap:balance;
}

.founder-text {
  font-size:clamp(18px,1.4vw,20px);
  line-height:1.6;
  margin:0;
  max-width:40ch;
  text-wrap:pretty;
}

.invitation {
  display:flex;
  flex-direction:column;
  gap:18px;
}

.invitation-text {
  font-size:clamp(20px,1.7vw,24px);
  font-weight:500;
  line-height:1.35;
  margin:0;
  max-width:30ch;
  text-wrap:pretty;
}

.contact-links {
  margin-top:clamp(36px,5vw,64px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.email {
  font-weight:800;
  font-size:clamp(24px,5.6vw,76px);
  letter-spacing:-0.035em;
  line-height:1.1;
  color:#2345D6;
  text-decoration:none;
  border-bottom:3px solid #2345D6;
  max-width:100%;
}

.email:hover {
  color:#18234B;
  border-bottom:3px solid #18234B;
}

.email-part {
  display:inline-block;
  white-space:nowrap;
}

.linkedin {
  font-size:17px;
  font-weight:600;
  color:#18234B;
  text-decoration:none;
  border-bottom:2px solid #18234B;
  padding:4px 0;
}

.linkedin:hover {
  color:#2345D6;
  border-bottom:2px solid #2345D6;
}

.footer {
  border-top:2px solid #18234B;
}

.footer-inner {
  max-width:1440px;
  margin:0 auto;
  padding:28px clamp(20px,5vw,72px) 40px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 32px;
  font-size:15px;
  line-height:1.5;
}

.footer-text {
  margin:0;
}