@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfair-500.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/playfair-500-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexsans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexsans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400.woff2) format("woff2")}
:root {
  --ink:#112d3b; --night:#071b2e; --paper:#f3f6ef; --white:#fafbf5;
  --lime:#BCEF2E; --teal:#086e69; --blue:#086e69; --soft:#d0dfe4;
  --line:rgba(17,45,59,.19); --pad:clamp(24px,5.4vw,96px);
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
* { box-sizing:border-box }
html { background:var(--night); scroll-behavior:smooth; scroll-padding-top:112px }
body { margin:0; font:20px/1.5 var(--sans); color:var(--white); -webkit-font-smoothing:antialiased }
h1,h2,h3,p,figure { margin:0 } h1,h2,h3 { font-weight:400 }
a { color:inherit; text-underline-offset:.28em }
button,input,select,textarea { font:inherit }
button { cursor:pointer } button:disabled { cursor:wait }
button,a { -webkit-tap-highlight-color:transparent }
img { display:block; max-width:100%; height:auto }
[hidden] { display:none!important }
:focus-visible { outline:3px solid var(--teal); outline-offset:6px }
.dark :focus-visible,header :focus-visible { outline-color:var(--lime) }
header.paper :focus-visible { outline-color:var(--teal) }
::selection { background:var(--lime); color:var(--ink) }
.skip { position:fixed; top:12px; left:24px; z-index:100; transform:translateY(-180%); padding:12px 20px; background:var(--paper); color:var(--ink) }
.skip:focus { transform:none }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
#main:focus { outline:none }
.shell { width:100%; max-width:1460px; margin:auto; position:relative }
.mono { font:12px/1.65 var(--mono); letter-spacing:.12em; text-transform:uppercase }
.serif { font-family:var(--serif); font-weight:500; letter-spacing:-.03em; line-height:1.05; text-wrap:balance }
.light { background:var(--paper); color:var(--ink) }
.dark { background:var(--night) }
.section { padding:116px var(--pad) }
.section-tag { display:flex; align-items:center; gap:24px; color:var(--teal); margin-bottom:64px }
.section-tag:after { content:""; height:1px; flex:1; margin-left:20px; background:var(--line) }
.section-tag .number { opacity:1 }
.dark .section-tag { color:var(--lime) }
.dark .section-tag:after { background:#ffffff2b }
/* Navigation stays on the edge of the composition, never across the content. */
header { position:fixed; inset:0 0 auto; z-index:50; display:flex; align-items:center; gap:34px; height:94px; padding:0 var(--pad); color:var(--white); transition:background .25s,color .25s,border-color .25s; border-bottom:1px solid transparent }
header.scrolled { background:#071b2ef2; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom-color:#ffffff20 }
header.paper { background:#f3f6eff5; color:var(--ink); border-bottom-color:var(--line) }
.logo { position:relative; width:102px; height:46px; flex:none }
.logo img { position:absolute; inset:0; width:102px; height:46px; object-fit:contain }
.logo .navy { opacity:0 } header.paper .logo .cream { opacity:0 } header.paper .logo .navy { opacity:1 }
header nav { display:flex; align-items:center; gap:36px; margin-left:auto; margin-right:24px }
header nav a { display:flex; align-items:center; min-height:46px; font-size:15px; text-decoration:none; position:relative }
header nav a:after { content:""; position:absolute; bottom:5px; height:1px; left:0; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s }
header nav a:hover:after,header nav a[aria-current]:after { transform:scaleX(1) }
.nav-contact { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:46px; font-size:15px; text-decoration:none; border-bottom:1px solid currentColor }
.nav-contact span { font-size:25px; transition:transform .2s }.nav-contact:hover span { transform:translate(3px,-3px) }
.menu-toggle { display:none; min-width:46px; min-height:46px; padding:0; background:none; color:inherit; border:0; font-size:15px }
/* Opening: saturated atmosphere, typography and one precise frame. */
.hero { position:relative; isolation:isolate; overflow:hidden; min-height:850px; height:100svh; max-height:1160px; padding:172px var(--pad) 47px; display:flex; flex-direction:column }
.hero-photo,.contact-photo { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover }
.hero-photo { object-position:50% 52%; filter:saturate(1.3) brightness(1.12); transform:scale(1.015) }
.hero:before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(3,19,36,.82),rgba(5,27,47,.62) 42%,rgba(5,26,44,.12) 72%,transparent),linear-gradient(180deg,rgba(3,15,35,.4),transparent 32%,transparent 57%,rgba(4,24,43,.63)) }
.frame { position:absolute; inset:0; border:0; z-index:-1; pointer-events:none }
.frame:before,.frame:after { display:none }
.frame:before { left:-5px; border-left:1px solid var(--lime) }.frame:after { right:-5px; border-right:1px solid var(--lime) }
.frame .spectrum { position:absolute; bottom:0; right:0; height:2px; width:33%; background:linear-gradient(90deg,transparent,#58d9db 35%,var(--lime)); opacity:.9 }
.hero-content { flex:1; display:flex; flex-direction:column; justify-content:center; width:100%; max-width:1460px; margin:auto; padding:0 0 68px }
.hero .eyebrow { color:var(--lime); margin-bottom:31px; font-size:13px }
.hero h1 { font-size:clamp(80px,9vw,148px); line-height:1; letter-spacing:-.035em; max-width:12ch; text-wrap:initial }
.hero h1 em { color:var(--lime); font-weight:500; font-style:italic }
.hero-description { font-size:clamp(25px,1.95vw,30px); line-height:1.45; margin-top:35px; max-width:27em }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:46px; min-height:54px; width:fit-content; margin-top:28px; text-decoration:none; border-bottom:1px solid currentColor; font-size:18px }
.text-link .arrow { font-size:28px; transition:transform .25s }.text-link:hover .arrow { transform:translate(4px,-4px) }
.hero-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; max-width:1460px; margin:auto; color:#f0f6f5 }
.hero-foot .right-label { display:flex; align-items:center; gap:12px }
.hero-foot .right-label:before { content:""; width:6px; height:6px; border:1px solid var(--lime); border-radius:50% }
.hero-foot .scroll { width:46px; height:46px; border-radius:50%; border:1px solid #ffffff66; display:grid; place-items:center; text-decoration:none; font:24px var(--sans); transition:background .2s }
.hero-foot .scroll:hover { background:#ffffff1a }
/* Light pages use a shared grid, local colour, and deliberate image framing. */
.perspective { position:relative; overflow:hidden; background:radial-gradient(ellipse at 94% 45%,#d5ece23d,transparent 68%),var(--paper) }
.perspective:before,.company:before { content:""; position:absolute; inset:0; background-image:linear-gradient(90deg,#164f5706 1px,transparent 1px); background-size:calc((100vw - 2 * var(--pad))/12) 100%; background-position:var(--pad) 0; pointer-events:none }
.perspective-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(54px,6vw,100px); align-items:center }
.perspective h2 { font-size:clamp(58px,5.5vw,88px); max-width:12ch }
.perspective h2 em { color:var(--teal); font-weight:500; font-style:italic }
.perspective p.body { font-size:clamp(22px,1.7vw,27px); line-height:1.5; max-width:26em; margin-top:30px; color:#354f58 }
.perspective .afterthought { display:flex; align-items:center; gap:16px; font-size:22px; color:var(--teal); margin-top:26px }
.perspective .afterthought:before { content:""; width:24px; height:2px; background:var(--teal); flex:none }
.aperture-group { position:relative; padding:8px 6px 0 }
.aperture-group:before { content:""; position:absolute; inset:9% -7% 3%; border-radius:50%; background:radial-gradient(ellipse,#72d7c038 5%,transparent 67%); pointer-events:none }
.aperture-wrap { position:relative; padding:25px }
.aperture { position:relative; border-radius:50%; aspect-ratio:1; overflow:hidden; background:#127d8b; box-shadow:0 0 0 13px var(--paper),0 0 0 14px #08787047 }
.aperture img { width:100%; height:100%; object-fit:cover; object-position:50% 48%; transform:scale(1.025); filter:saturate(1.12) contrast(1.03) }
.aperture:after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 45px #073e4220 }
.aperture-wrap:before { content:""; position:absolute; inset:1px; border-radius:50%; border:1px solid #12797830 }
.aperture-wrap:after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid transparent; border-top-color:#147d774a; border-bottom-color:#147d771f; transform:rotate(-30deg); pointer-events:none }
.register-tick { position:absolute; width:17px; height:17px; color:var(--teal) }
.register-tick:before,.register-tick:after { content:""; position:absolute; background:currentColor }
.register-tick:before { width:17px; height:1px; top:8px; left:0 }.register-tick:after { width:1px; height:17px; left:8px; top:0 }
.tick-top { top:-16px; left:calc(50% - 8px) }.tick-bottom { bottom:-16px; left:calc(50% - 8px) }.tick-left { left:-16px; top:calc(50% - 8px) }.tick-right { right:-16px; top:calc(50% - 8px) }
.image-caption { position:relative; display:flex; justify-content:space-between; gap:20px; margin-top:34px; font-size:11px; color:#3f666b }
.thesis-bottom { display:flex; justify-content:space-between; align-items:end; gap:40px; border-top:1px solid var(--line); margin-top:77px; padding-top:29px }
.thesis-bottom p { font-size:clamp(25px,2.2vw,33px); letter-spacing:-.02em; line-height:1.4 }
.thesis-bottom .mono { color:var(--teal); text-align:right; max-width:25em; font-size:12px }
/* Areas of focus. Colours follow the selected physical context, not a UI rainbow. */
.fields { --field-accent:#ffd08a; position:relative; background:linear-gradient(135deg,#082a35,var(--night) 78%); overflow:hidden }
.fields[data-active="built"] { --field-accent:#ffbc9e }.fields[data-active="grid"] { --field-accent:var(--lime) }
.fields-head { display:grid; grid-template-columns:1.23fr .77fr; gap:60px; align-items:end; margin-bottom:54px }
.fields h2 { font-size:clamp(57px,5.5vw,88px); max-width:18ch; text-wrap:initial }
.fields-head p { max-width:22em; color:var(--soft); font-size:24px; padding-bottom:4px }
.field-layout { display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(38px,6vw,92px); align-items:center }
.field-image { border:1px solid #e0ffff45; padding:10px; position:relative; border-radius:2px 108px 2px 2px }
.field-image:before { content:""; position:absolute; left:-5px; top:-5px; width:9px; height:9px; border-top:1px solid var(--field-accent); border-left:1px solid var(--field-accent) }
.field-image:after { content:""; position:absolute; bottom:-1px; left:10px; height:2px; width:90px; background:var(--field-accent); transition:background .4s }
.field-panel { position:relative; height:540px; overflow:hidden; border-radius:1px 98px 1px 1px; background:#102d3c }
.field-panel img { width:100%; height:100%; object-fit:cover }
.field-panel#view-earth img { object-position:50% 43% }.field-panel#view-built img { object-position:50% 51% }.field-panel#view-grid img { object-position:50% 56% }
.field-panel:after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#031c2cdd) }
.field-panel figcaption { position:absolute; left:28px; right:28px; bottom:28px; z-index:1; max-width:28em; color:var(--white); font-size:16px; line-height:1.5 }
.field-count { position:absolute; left:27px; top:25px; padding:5px 10px; background:#051b2ecd; border:1px solid #ffffff59; z-index:1; color:var(--white); font-size:11px }
.field-selector { border-top:1px solid #ffffff3a }
.field-button { display:grid; grid-template-columns:24px 1fr 24px; gap:17px; align-items:start; position:relative; width:100%; padding:30px 0; border:0; border-bottom:1px solid #ffffff3a; background:none; color:#bbcad0; text-align:left; border-radius:0; transition:color .25s }
.field-button:before { content:""; position:absolute; left:-20px; top:28px; bottom:28px; width:2px; background:var(--field-accent); transform:scaleY(0); transition:transform .25s }
.field-button[aria-selected="true"]:before { transform:scaleY(1) }
.field-button[aria-selected="true"],.field-button:hover { color:var(--white) }
.field-button .idx { font:12px/1.6 var(--mono); padding-top:9px; color:#bdd0d8 }
.field-button[aria-selected="true"] .idx { color:var(--field-accent) }
.field-button .name { font-size:clamp(29px,2.6vw,42px); line-height:1.16; letter-spacing:-.042em }
.field-button small { display:block; font-size:17px; line-height:1.45; letter-spacing:0; margin-top:11px; color:#c2d3d9 }
.field-button .plus { font-size:27px; line-height:1.1; color:var(--field-accent); padding-top:2px }
.field-foot { font-size:15px; line-height:1.65; color:#c6d8de; max-width:29em; margin-top:34px }
.field-foot strong { font-weight:400; color:var(--field-accent) }
/* Company. */
.company { position:relative; overflow:hidden; background:radial-gradient(ellipse at 1% 100%,#c8deee69,transparent 64%),#f4f5ef }
.company-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(60px,7vw,112px); align-items:start }
.company h2 { font-size:clamp(61px,6.05vw,97px); max-width:12ch; text-wrap:initial }
.company h2 .intention { color:var(--blue); font-style:italic }
.company .principle { font-size:24px; line-height:1.45; color:#1f5965; margin-top:32px; padding-left:23px; border-left:2px solid var(--blue); max-width:22em }
.company .intro { font-size:clamp(27px,2.3vw,35px); line-height:1.45; letter-spacing:-.023em; color:var(--ink) }
.company .intro-secondary { font-size:22px; line-height:1.55; color:#425b65; margin-top:26px }
.founder { display:grid; grid-template-columns:108px 1fr; gap:26px; align-items:center; border-top:1px solid var(--line); padding-top:31px; margin-top:41px }
.founder img { width:108px; height:138px; object-fit:cover; object-position:50% 34%; border-radius:2px 24px 2px 2px }
.founder h3 { font-size:27px; letter-spacing:-.02em }.founder .role { font-size:16px; color:var(--teal); margin-top:4px }.founder .bio { font-size:17px; line-height:1.55; color:#425b65; margin-top:12px }
.company .text-link { font-size:17px; color:var(--teal); margin-top:26px }
/* A vivid closing frame with a deliberately quiet form. */
.contact { position:relative; isolation:isolate; overflow:hidden; padding-block:114px 119px; }
.contact-photo { object-position:47% 48%; filter:saturate(1.28) brightness(1.26) }
.contact:before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#071b2edb,#071b2e59 57%,#071b2e05),linear-gradient(180deg,#071b2e7a,transparent 38%,transparent 72%,#071b2ee0) }
.contact:after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 90% 0%,#11729235,transparent 60%); pointer-events:none }
.contact-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(50px,6vw,100px); align-items:start }
.contact h2 { font-size:clamp(62px,5.7vw,91px); max-width:13ch; text-wrap:initial }
.contact h2 em { font-style:italic; color:var(--lime) }
.contact .intro { font-size:25px; line-height:1.45; max-width:23em; margin-top:32px }
.form-shell { position:relative; border:1px solid #c0e1e362; background:#071f31f2; padding:37px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 22px 70px #00142526 }
.form-shell:before { content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px; background:linear-gradient(90deg,#79d4cf,var(--lime) 64%,#eabe88) }
.form-shell h3 { font-size:29px; line-height:1.25; letter-spacing:-.035em; margin-bottom:29px }
.form-shell fieldset { padding:0; margin:0; border:0; min-width:0 }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:22px }
.form-field { display:block; min-width:0; margin-bottom:25px }
.form-field>span { display:block; font-size:15px; color:#dce9eb; margin-bottom:7px }
.form-field .optional { display:inline; color:#adc1cd; font-size:12px }
.form-field input,.form-field select,.form-field textarea { display:block; width:100%; min-height:43px; padding:7px 0; font-size:19px; color:var(--white); background:transparent; border:0; border-bottom:1px solid #ccedf077; border-radius:0; box-shadow:none; transition:border-color .2s }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-bottom-color:var(--lime) }
.form-field input::placeholder,.form-field textarea::placeholder { color:#a4bac5 }
.form-field textarea { resize:vertical; min-height:76px; max-height:360px }
.form-field select { color-scheme:dark; padding-right:8px; font-size:18px }.form-field option { background:var(--night); color:var(--white) }
.privacy-hint,.preview-note { font-size:13px; line-height:1.6; color:#c0d4dd }
/* Sized to its label, not the panel. Muted teal, with a visible accessible boundary. */
.submit { display:inline-flex; align-items:center; justify-content:space-between; gap:26px; width:fit-content; max-width:100%; min-height:48px; padding:11px 16px; margin-top:23px; border:1px solid #759aa6; border-radius:2px; background:#15394a; color:#f3f6ef; font-size:16px; line-height:1.45; text-align:left; transition:background .2s,border-color .2s }
.submit:hover { background:#20495b; border-color:#9fc5cf }
.submit:focus-visible { outline-color:#b2d9df }
.submit:disabled { opacity:.7 }
.submit .arrow { font-size:21px; line-height:1; color:#b4d3dc }
.preview-note { margin-top:12px; font-size:12px }
.form-result { font-size:16px; line-height:1.5; color:var(--lime); margin-top:18px }.form-result:empty { display:none }.form-result[data-error="true"] { color:#ffd0b6 }
.nojs-note { font-size:16px; margin-top:18px }
footer { position:relative; background:var(--night); padding:58px var(--pad) 33px }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:35px; border-bottom:1px solid #ffffff2a; padding-bottom:40px }
.footer-tagline { font-size:clamp(40px,4.2vw,67px) }.footer-top .mono { color:var(--lime) }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:27px; padding-top:25px; color:#d1dfe3; font-size:14px }
.footer-bottom img { width:82px }.footer-bottom .links { display:flex; align-items:center; gap:28px }.footer-bottom a { min-height:46px; display:inline-flex; align-items:center; text-decoration:none }.footer-bottom a:hover { text-decoration:underline }.copyright { margin-left:auto }
/* Motion is progressive enhancement; no content relies on an entrance animation. */
@media (prefers-reduced-motion:no-preference) {
  .hero-photo { animation:atmosphere 4s ease-out both }
  @keyframes atmosphere { to { transform:scale(1.06) } }
  .aperture-wrap:after { animation:register 4s ease-out both }
  @keyframes register { to { transform:rotate(-24deg) } }
  .field-panel:not([hidden]) img { animation:field-in .5s ease-out }
  @keyframes field-in { from { opacity:.35; transform:scale(1.015) } to { opacity:1; transform:none } }
  .arrived { animation:arrive .7s cubic-bezier(.2,.65,.2,1) both }
  @keyframes arrive { from { opacity:.25; transform:translateY(14px) } to { opacity:1; transform:none } }
}
@media (min-width:1650px) {
  .hero-content { padding-bottom:90px }.section { padding-block:128px }.field-panel { height:594px }.perspective-grid { gap:106px }
}
@media (max-width:1150px) {
  header { gap:25px } header nav { gap:26px; margin-right:4px }.section { padding-block:92px }
  .hero { min-height:820px }.hero h1 { font-size:clamp(90px,10.8vw,126px) }
  .perspective-grid { gap:46px }.perspective h2 { font-size:65px }.perspective p.body { font-size:22px }
  .aperture-wrap { padding:20px }.fields-head { grid-template-columns:1.2fr .8fr; gap:42px }.fields h2 { font-size:64px }.fields-head p { font-size:22px }
  .field-layout { grid-template-columns:1.07fr .93fr; gap:47px }.field-panel { height:485px }.field-button { padding-block:27px; gap:13px }.field-button .name { font-size:32px }
  .company-grid { gap:55px }.company h2 { font-size:76px }.company .intro { font-size:29px }.company .intro-secondary { font-size:21px }
  .contact-grid { gap:48px; grid-template-columns:1fr 1fr }.contact h2 { font-size:66px }.contact .intro { font-size:23px }.form-shell { padding:27px }.form-row { grid-template-columns:1fr; gap:0 }
}
@media (max-width:820px) {
  html { scroll-padding-top:97px } header { height:80px; gap:20px }.logo,.logo img { width:85px; height:39px }.nav-contact { margin-left:auto; font-size:14px; gap:20px }.menu-toggle { display:block }
  header nav { display:none; position:absolute; top:79px; left:0; right:0; padding:15px var(--pad) 24px; margin:0; background:var(--night); box-shadow:0 16px 22px #021c342e } header nav.open { display:flex; flex-direction:column; gap:0; align-items:stretch } header.paper nav { background:var(--paper) }
  header nav a { font-size:21px; min-height:59px; padding:12px 0; border-bottom:1px solid #85949e4f }header nav a:after { display:none }
  .hero { min-height:max(790px,100svh); height:auto; max-height:none; padding-top:145px; padding-bottom:34px }.hero .frame { inset:98px 14px 15px }.hero-content { padding:35px 0 73px }
  .hero h1 { font-size:clamp(72px,10.6vw,104px); max-width:12ch }.hero .eyebrow { font-size:11px; max-width:29em; margin-bottom:31px }.hero-description { font-size:25px }
  .hero-photo { object-position:58% 50% }.hero:before { background:linear-gradient(90deg,#041b2c99,#061e3240),linear-gradient(180deg,#041a2f30 8%,#041b2c70 28%,#061e3285 61%,#071b2ec9) }.hero-foot { font-size:10px; letter-spacing:.09em }.hero-foot .right-label { display:none }
  .section { padding-block:78px }.section-tag { margin-bottom:46px; gap:18px; font-size:11px }.section-tag:after { margin-left:10px }
  .perspective-grid,.fields-head,.company-grid,.contact-grid { grid-template-columns:1fr; gap:47px }
  .perspective h2 { font-size:clamp(60px,8.4vw,78px); max-width:14ch }.perspective p.body { font-size:24px; max-width:26em }.perspective .afterthought { font-size:21px }
  .aperture-group { width:100%; max-width:470px; margin:3px auto 0; padding:8px 12px 0 }.image-caption { font-size:10px; margin-top:35px; gap:12px }.thesis-bottom { margin-top:50px; gap:28px }.thesis-bottom p { font-size:27px }.thesis-bottom .mono { font-size:10px }
  .fields-head { gap:28px; margin-bottom:38px }.fields h2 { font-size:clamp(57px,8.2vw,73px); max-width:17ch }.fields-head p { font-size:23px; max-width:none }
  .field-layout { grid-template-columns:1fr; gap:32px }.field-panel { height:460px }.field-button { padding:23px 0; gap:16px }.field-button .name { font-size:34px }.field-button small { font-size:17px; margin-top:8px }.field-button:before { left:-13px }.field-foot { max-width:none; margin-top:26px }
  .company h2 { font-size:clamp(66px,9.5vw,86px); max-width:14ch }.company .principle { font-size:23px }.company .intro { font-size:30px }.company-grid { gap:40px }.company .intro-secondary { max-width:29em; font-size:22px }.founder { margin-top:31px }
  .contact h2 { font-size:clamp(60px,8.8vw,78px); max-width:14ch }.contact .intro { font-size:24px; max-width:25em }.contact-grid { gap:39px }.contact:before { background:linear-gradient(180deg,#071b2e60,#071b2e20 30%,#071b2e8c 80%,var(--night)),linear-gradient(90deg,#071b2e66,#071b2e05) }.contact-photo { object-position:54% 43% }
  .form-shell { padding:31px; max-width:620px; width:100% }.form-row { grid-template-columns:1fr 1fr; gap:22px }
  footer { padding-block:42px 28px }.footer-top { align-items:flex-start }.footer-tagline { font-size:48px }.footer-top .mono { font-size:10px; max-width:11em; text-align:right }.footer-bottom { flex-wrap:wrap; gap:17px }.footer-bottom .links { flex-basis:100%; font-size:14px }
}
@media (max-width:520px) {
  :root { --pad:25px }.section { padding-block:70px } .hero h1 { font-size:clamp(61px,14.8vw,77px) }
  .hero { min-height:max(790px,100svh); padding-top:143px }.hero-content { padding:30px 0 62px }.hero .eyebrow { max-width:27em; font-size:10px; line-height:1.8; letter-spacing:.12em }.hero-description { font-size:23px; max-width:21em; margin-top:30px }.hero .text-link { font-size:17px; margin-top:28px; gap:34px }
  .hero-foot { font-size:10px; letter-spacing:.055em }.hero-foot .scroll { width:42px; height:42px; flex:none }
  .perspective h2 { font-size:clamp(53px,12.5vw,64px) }.perspective p.body { font-size:22px }.perspective .afterthought { font-size:20px; gap:13px }
  .aperture-group { margin-top:5px; padding-inline:4px }.aperture-wrap { padding:17px }.image-caption { font-size:9px; letter-spacing:.08em }.thesis-bottom { display:block; padding-top:24px; margin-top:42px }.thesis-bottom p { font-size:25px }.thesis-bottom .mono { display:block; text-align:left; margin-top:19px; max-width:none }
  .fields h2 { font-size:clamp(48px,11.8vw,61px); max-width:17ch }.fields-head p { font-size:22px }.field-panel { height:397px; border-top-right-radius:77px }.field-image { border-top-right-radius:87px; padding:9px }.field-panel figcaption { font-size:14px; left:20px; right:20px; bottom:23px }.field-count { left:20px; top:20px }.field-button .name { font-size:31px }.field-button small { font-size:16px }.field-button .idx { font-size:11px }
  .company h2 { font-size:clamp(58px,13.7vw,70px) }.company .principle { font-size:22px }.company .intro { font-size:27px }.company .intro-secondary { font-size:21px }.founder { grid-template-columns:93px 1fr; gap:21px }.founder img { width:93px; height:129px }.founder h3 { font-size:25px }.founder .role { font-size:15px }.founder .bio { font-size:16px }
  .contact h2 { font-size:clamp(50px,12.5vw,64px) }.contact .intro { font-size:23px }.form-shell { padding:25px }.form-row { grid-template-columns:1fr; gap:0 }.form-shell h3 { font-size:27px }.form-field { margin-bottom:23px }.form-field input,.form-field select,.form-field textarea { font-size:18px }.privacy-hint { font-size:12px }
  .footer-top { display:block; padding-bottom:30px }.footer-tagline { font-size:clamp(36px,9.5vw,49px) }.footer-top .mono { text-align:left; max-width:none; margin-top:20px }.footer-bottom .links { gap:25px }
}
@media (max-width:359px) {
  :root { --pad:20px }header { gap:13px }.logo,.logo img { width:73px; height:34px }.nav-contact { font-size:13px; gap:12px }.menu-toggle { font-size:13px }
  .hero h1 { font-size:57px }.hero .eyebrow { max-width:23em }.hero-description { font-size:22px }.hero-description .desktop-break { display:none }
  .perspective h2 { font-size:50px }.fields h2 { font-size:45px }.field-panel { height:351px }.field-button .name { font-size:28px }.field-button { gap:10px; grid-template-columns:20px 1fr 24px }.field-foot { font-size:14px }
  .company h2 { font-size:55px }.founder { grid-template-columns:77px 1fr; gap:17px }.founder img { width:77px; height:110px }.founder h3 { font-size:23px }.founder .bio { font-size:15px }
  .contact h2 { font-size:48px }.form-shell { padding:20px }.form-shell h3 { font-size:25px }.footer-bottom { font-size:12px }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*:before,*:after { animation:none!important; transition:none!important } }
@media (forced-colors:active) {
  .hero-photo,.contact-photo,.frame,.hero:before,.contact:before,.contact:after,.perspective:before,.company:before { display:none }
  .hero,.dark,.light,header,header.scrolled,header.paper,footer,.form-shell,.fields { background:Canvas; color:CanvasText }
  .logo { forced-color-adjust:none; background:#071b2e }.logo .cream { opacity:1!important }.logo .navy { opacity:0!important }
  .submit,.field-button { border:1px solid ButtonText; color:ButtonText }.field-button[aria-selected="true"] { outline:2px solid Highlight }
}
@media print {
  header,.skip,.frame,.hero-photo,.contact-photo,.form-shell,.hero-foot { display:none!important }
  .hero,.section,footer { min-height:0; max-height:none; height:auto; padding:35px 24px; background:white; color:#112d3b; break-inside:avoid }
  .hero:before,.contact:before,.contact:after { display:none }.hero-content { padding:0 }.hero h1 { font-size:70px }.hero h1 em,.contact h2 em { color:#086e69 }
  .fields-head p,.field-button,.field-button[aria-selected="true"],.field-button small,.field-foot { color:#112d3b }.field-panel { height:270px }.contact-grid { display:block }
}

/* Revision 03: resilient navigation and layout, including the no-JavaScript path. */
header .logo { order:1 }
header nav { order:2 }
header .nav-contact { order:3 }
header .menu-toggle { order:4 }
.menu-toggle { align-items:center; gap:9px; justify-content:center }
.menu-icon { position:relative; display:block; width:17px; height:14px; flex:none }
.menu-icon i { position:absolute; left:0; width:17px; height:1px; background:currentColor; transition:transform .18s,top .18s }
.menu-icon i:first-child { top:4px }
.menu-icon i:last-child { top:10px }
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child { top:7px; transform:rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child { top:7px; transform:rotate(-45deg) }
.perspective-grid>*,.fields-head>*,.field-layout>*,.company-grid>*,.contact-grid>*,.founder>* { min-width:0 }
h1,h2,h3,p,.field-button .name { overflow-wrap:break-word }
.form-result,.preview-note { overflow-wrap:anywhere }
.form-field input,.form-field select,.form-field textarea { min-height:44px }
.form-field .optional { font-size:13px }
.privacy-hint { font-size:14px }
.preview-note { font-size:13px }
.nojs-note a { display:inline-block; min-height:44px; line-height:44px }
.hero { height:auto; min-height:max(850px,100svh); max-height:none }
@media(min-width:821px) {
 .hero { padding-top:172px }
}
@media(max-width:820px) {
 .menu-toggle { display:inline-flex }
 header nav { max-height:calc(100svh - 80px); overflow-y:auto; overscroll-behavior:contain }
 header:not(.nav-ready) { position:relative; height:auto; min-height:80px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px }
 header:not(.nav-ready) nav { position:static; display:flex; flex-direction:column; align-items:stretch; flex:1 0 100%; order:5; padding:0; background:transparent; box-shadow:none; max-height:none; overflow:visible }
 header:not(.nav-ready) .menu-toggle { display:none }
 .hero { min-height:max(790px,100svh) }
}
@media(max-width:359px) {
 .menu-toggle { gap:6px }.menu-icon { width:14px }.menu-icon i { width:14px }
}
@supports(padding:max(0px)) {
 header { padding-left:max(var(--pad),env(safe-area-inset-left)); padding-right:max(var(--pad),env(safe-area-inset-right)) }
 footer { padding-bottom:max(33px,env(safe-area-inset-bottom)) }
}
@media(forced-colors:active) {
 .submit { background:ButtonFace; border-color:ButtonText; color:ButtonText }
 .submit .arrow { color:ButtonText }.submit:focus-visible { outline-color:Highlight }
}
/* A failed/disabled script does not remove the navigation or access to focus imagery. */
.noscript-message { font-size:16px; line-height:1.5; margin-top:18px }

/* Revision 04: type restored, hero to the edges, the record section, mail fallback. */
.record { position:relative; overflow:hidden; background:linear-gradient(180deg,#061226,var(--night) 60%) }
.record-head { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,96px); align-items:end; margin-bottom:56px }
.record h2 { font-size:clamp(54px,5.2vw,84px); max-width:14ch; text-wrap:initial }
.record h2 em { color:var(--lime); font-style:italic }
.record-head p { max-width:24em; color:var(--soft); font-size:22px; line-height:1.5; padding-bottom:6px }
.frag { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; align-items:start; padding:36px 0 8px; border-top:1px solid #ffffff2b }
.frag figure { min-width:0; transform:translateY(var(--rest)); opacity:1; transition:opacity 1.1s ease var(--d),transform 1.3s cubic-bezier(.2,.7,.2,1) var(--d) }
.frag.scattered figure { transform:translateY(var(--scatter)); opacity:.18 }
.frag .strip { aspect-ratio:480/744; overflow:hidden; background:#102d3c; border-radius:2px }
.frag .strip img { width:100%; height:100%; object-fit:cover }
.frag figcaption { padding-top:18px }
.frag .lab { display:block; color:var(--lime); margin-bottom:10px; font-size:11px }
.frag h3 { font-size:clamp(20px,1.6vw,25px); letter-spacing:-.02em; line-height:1.2; color:var(--white) }
.frag p { font-size:15px; line-height:1.5; margin-top:8px; color:#c6d8de }
.record-foot { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,96px); align-items:start; margin-top:60px; padding-top:32px; border-top:1px solid #ffffff2b }
.record .close { font-size:clamp(25px,2.2vw,33px); line-height:1.4; color:var(--white) }
.record .counter { font-size:18px; line-height:1.6; color:#c6d8de; max-width:30em }
.record .counter strong { font-weight:400; color:var(--lime) }
.record .trio { display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:22px; color:#bdd0d8; font-size:11px }
.mail-shell .mail-lede { font-size:20px; line-height:1.5; color:#dce9eb; margin-bottom:24px }
.mail-button { text-decoration:none; margin-top:0; min-width:220px }
.mail-shell .privacy-hint { margin-top:16px } .mail-shell .privacy-hint a { color:var(--lime); text-decoration:none } .mail-shell .privacy-hint a:hover { text-decoration:underline }
.form-shell [data-fade] { transition:opacity .3s cubic-bezier(.2,.65,.2,1),transform .3s cubic-bezier(.2,.65,.2,1) }
.form-shell [data-fade="out"] { opacity:0; transform:translateY(6px) }
.success-lede { font-size:20px; line-height:1.5; color:#dce9eb }
@media (max-width:1150px) { .record h2 { font-size:62px } .record-head p { font-size:21px } }
@media (max-width:820px) {
  .record-head,.record-foot { grid-template-columns:1fr; gap:28px }
  .record h2 { font-size:clamp(50px,8.2vw,66px) }
  .frag { grid-template-columns:1fr; gap:0; padding-top:8px }
  .frag figure { display:grid; grid-template-columns:72px 1fr; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid #ffffff2b; transform:none!important; opacity:1!important }
  .frag .strip { aspect-ratio:72/112 } .frag figcaption { padding-top:0 }
}
@media (max-width:520px) { .record h2 { font-size:clamp(44px,11.5vw,56px) } .record .close { font-size:24px } }
@media (prefers-reduced-motion:reduce) { .frag figure { transform:translateY(var(--rest)); opacity:1 } }