/* Shared art direction: an editorial grid, restrained brass, and uncompromising rules. */
:root {
  --ink: #151411;
  --ink-soft: #211f1b;
  --paper: #eae6dc;
  --paper-muted: #b9b3a7;
  --brass: #b99a61;
  --brass-light: #d6bc88;
  --rule: #555046;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--paper);
  background: var(--ink);
}
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--paper); }
::selection { background: var(--brass); color: var(--ink); }
a:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 5px; }
.wrap { max-width: 1440px; width: min(100% - 8vw, 1440px); padding: 0; margin-inline: auto; }
.mast {
  min-height: 96px;
  padding-block: 25px;
  border-bottom: 1px solid var(--rule);
  gap: 36px;
}
.brand {
  flex-shrink: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  letter-spacing: -.045em;
  text-transform: none;
  line-height: 1;
}
.brand span { color: var(--brass-light); }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 13px 26px; }
.nav a, .back {
  color: var(--paper-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current], .back:hover { color: var(--brass-light); }
.eyebrow, .kicker {
  color: var(--brass-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
}
.section h2, .ventures h2, .end h2, .contact h2, .neuro-page .hero h1,
.video-page .headline h1, .home-page .hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.065em;
}
footer {
  border-top: 1px solid var(--rule);
  color: var(--paper-muted);
  gap: 14px 32px;
  font-size: 14px;
  line-height: 1.5;
  padding-block: 28px 42px;
}
footer a { color: var(--brass-light); }
footer a:hover { color: var(--paper); }

/* Portrait / landing page */
.home-page .hero {
  min-height: min(780px, calc(100svh - 96px));
  grid-template-columns: minmax(0, 1fr) minmax(230px, .29fr);
  align-items: end;
  gap: clamp(30px, 5vw, 90px);
  padding-block: clamp(105px, 13vw, 185px) 96px;
  position: relative;
}
.home-page .hero::before {
  content: 'P / 01';
  position: absolute;
  top: 30px;
  left: 0;
  color: var(--paper-muted);
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: .2em;
}
.home-page .hero h1 {
  max-width: 1100px;
  margin: 25px 0 47px;
  font-size: clamp(5.1rem, 10.5vw, 10.8rem);
  line-height: .87;
}
.home-page .hero h1 em {
  color: var(--brass-light);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
}
.home-page .lede {
  max-width: 710px;
  color: var(--paper);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 2.15vw, 2rem);
  line-height: 1.4;
}
.home-page .hero-aside {
  align-self: end;
  border-left: 0;
  border-top: 3px solid var(--brass);
  padding: 24px 0 6px;
  color: var(--paper-muted);
  font-size: 15px;
  line-height: 1.65;
}
.home-page .hero-aside strong {
  color: var(--paper);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
}
.home-page .line { height: 1px; background: var(--rule); }
.home-page .section { padding-block: 114px 125px; }
.home-page .section-head { grid-template-columns: minmax(160px, .55fr) 2fr; gap: 40px; margin-bottom: 68px; }
.home-page .section h2 { max-width: 870px; font-size: clamp(3.2rem, 6vw, 6.7rem); line-height: .99; }
.home-page .section-intro {
  max-width: 750px;
  margin-top: 30px;
  color: var(--paper-muted);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.45;
}
.home-page .services { border-top: 3px solid var(--paper); }
.home-page .service { min-height: 370px; padding: 31px 34px 26px 0; border-color: var(--rule); }
.home-page .service:nth-child(3n+2), .home-page .service:nth-child(3n+3) {
  border-color: var(--rule);
  padding-left: 34px;
}
.home-page .num {
  color: var(--brass-light);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.1rem;
  font-weight: 400;
  line-height: 1;
}
.home-page .service h3 {
  margin: 91px 0 18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.045em;
}
.home-page .service p { color: var(--paper-muted); line-height: 1.65; max-width: 360px; }
.home-page .visual-proof { padding-block: 30px 122px; }
.home-page .visual-proof-head {
  display: grid;
  grid-template-columns: minmax(160px, .55fr) 2fr;
  gap: 40px;
  align-items: end;
  border-top: 1px solid var(--rule);
  padding-top: 38px;
  margin-bottom: 42px;
}
.home-page .visual-proof h2 {
  margin: 0;
  font: 400 clamp(3rem, 5.2vw, 5.6rem)/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.065em;
}
.comparison-figure { margin: 0; }
.comparison-media {
  background: #fff;
  border: 1px solid #94836b;
  overflow-x: auto;
  scrollbar-color: var(--brass) var(--ink-soft);
}
.comparison-media img { display: block; width: 100%; height: auto; }
.comparison-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px 30px;
  padding-top: 21px;
  color: var(--paper-muted);
  font-size: 14px;
  line-height: 1.55;
}
.comparison-figure figcaption a {
  color: var(--brass-light);
  flex-shrink: 0;
  text-underline-offset: 3px;
}
.home-page .ventures {
  padding-block: 116px 128px;
  background: var(--paper);
  color: var(--ink);
}
.home-page .ventures .eyebrow { color: #74603f; }
.home-page .ventures h2 { max-width: 1000px; font-size: clamp(3.4rem, 6.2vw, 7rem); line-height: .98; }
.home-page .venture-list { margin-top: 77px; border-top: 3px solid var(--ink); }
.home-page .venture { border-bottom: 1px solid #918a7d; padding-block: 38px; }
.home-page .venture small { color: #564d40; }
.home-page .venture strong { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.065em; }
.home-page .venture .arrow { color: #765c32; }
.home-page .end { padding-block: 132px 142px; }
.home-page .end h2 { max-width: 900px; font-size: clamp(3.2rem, 6.8vw, 7.5rem); line-height: .97; }
.home-page .end a {
  border: 1px solid var(--brass);
  color: var(--brass-light);
  padding: 20px 24px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-page .end a:hover { background: var(--brass); color: var(--ink); }

/* Video: the film occupies the page before supporting copy. */
.video-page .hero { padding-block: 49px 95px; }
.video-page .kicker { margin-bottom: 30px; }
.video-page .kicker::before { background: var(--brass); }
.video-page .headline { grid-template-columns: minmax(0, 1.6fr) minmax(250px, .48fr); gap: 54px; margin-bottom: 46px; }
.video-page .headline h1 { font-size: clamp(4.7rem, 8.5vw, 9rem); line-height: .87; }
.video-page .headline h1 em { color: var(--brass-light); font-style: italic; }
.video-page .intro {
  border-left: 0;
  border-top: 3px solid var(--brass);
  padding: 20px 0 0;
  color: var(--paper-muted);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.48;
}
.video-page .video-shell { border: 1px solid var(--brass); background: #090807; box-shadow: 25px 25px 0 #25221c; }
.video-page .video-shell::before { background: var(--brass); color: var(--ink); }
.video-page .after { padding-top: 39px; color: var(--paper-muted); }
.video-page .after strong { color: var(--paper); }
.video-page .after a { color: var(--brass-light); }

/* Neuro-symbolic service page */
.neuro-page .hero {
  padding-block: clamp(100px, 12vw, 170px) 95px;
  border-color: var(--rule);
  position: relative;
}
.neuro-page .hero::before {
  content: 'FIELD NOTES / 001';
  position: absolute;
  left: 0;
  top: 32px;
  font: 700 12px/1 Arial, sans-serif;
  letter-spacing: .18em;
  color: var(--paper-muted);
}
.neuro-page .hero h1 {
  max-width: 1230px;
  font-size: clamp(4.2rem, 8.5vw, 9rem);
  line-height: .9;
  margin: 23px 0 76px;
}
.neuro-page .hero h1 em { color: var(--brass-light); font-style: italic; }
.neuro-page .hero-bottom { grid-template-columns: minmax(0, 1.4fr) minmax(215px, .55fr); gap: 45px; }
.neuro-page .lede { color: var(--paper); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.38; }
.neuro-page .hero-index { border-left: 0; border-top: 3px solid var(--brass); color: var(--paper-muted); padding: 19px 0 0; }
.neuro-page .section { padding-block: 115px 125px; border-color: var(--rule); }
.neuro-page .section-head { grid-template-columns: minmax(180px, .55fr) 2fr; gap: 45px; margin-bottom: 55px; }
.neuro-page .section h2 { max-width: 950px; font-size: clamp(3.4rem, 6vw, 6.7rem); line-height: .99; }
.neuro-page .copy { color: var(--paper-muted); font-size: 18px; line-height: 1.72; }
.neuro-page .model { gap: 0; margin-top: 67px; border-top: 3px solid var(--paper); }
.neuro-page .model-card {
  min-height: 360px;
  padding: 38px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
}
.neuro-page .model-card + .model-card { border-left: 1px solid var(--rule); }
.neuro-page .model-card b { color: var(--brass-light); }
.neuro-page .model-card h3 {
  margin: 85px 0 15px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.3rem, 3.5vw, 4rem);
  font-weight: 400;
}
.neuro-page .model-card p { color: var(--paper-muted); }
.neuro-page .model-result {
  margin-top: 0;
  padding: 33px 38px;
  background: var(--paper);
  color: var(--ink);
}
.neuro-page .model-result strong { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 400; }
.neuro-page .services { border-top: 3px solid var(--paper); }
.neuro-page .service { min-height: 340px; padding: 29px 26px 22px 0; border-color: var(--rule); }
.neuro-page .service:nth-child(3n+2), .neuro-page .service:nth-child(3n+3) { border-color: var(--rule); padding-left: 26px; }
.neuro-page .service .num { color: var(--brass-light); font-family: Georgia, 'Times New Roman', serif; font-size: 2.6rem; font-weight: 400; }
.neuro-page .service h3 { margin: 50px 0 16px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.6rem, 2.3vw, 2.5rem); font-weight: 400; }
.neuro-page .service p { color: var(--paper-muted); }
.neuro-page .process { border-top: 3px solid var(--paper); margin-top: 60px; }
.neuro-page .step { border-color: var(--rule); min-height: 280px; }
.neuro-page .step + .step { border-color: var(--rule); }
.neuro-page .step b { color: var(--brass-light); font-family: Georgia, 'Times New Roman', serif; font-size: 2.2rem; font-weight: 400; }
.neuro-page .step h3 { margin-top: 75px; font-family: Georgia, 'Times New Roman', serif; font-size: 2rem; font-weight: 400; }
.neuro-page .step p, .neuro-page .note { color: var(--paper-muted); }
.neuro-page .sources { color: var(--paper-muted); }
.neuro-page .sources a { color: var(--brass-light); }
.neuro-page .contact { background: var(--paper); color: var(--ink); padding-block: 108px; }
.neuro-page .contact .eyebrow { color: #74603f; }
.neuro-page .contact h2 { font-size: clamp(3.1rem, 6vw, 6.8rem); }
.neuro-page .contact a {
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 20px 24px;
}
.neuro-page .contact a:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 900px) {
  .mast { min-height: 0; flex-wrap: wrap; }
  .nav { width: 100%; justify-content: flex-start; }
  .home-page .hero { grid-template-columns: 1fr; min-height: 0; gap: 55px; }
  .home-page .hero-aside { max-width: 560px; }
  .home-page .section-head, .home-page .visual-proof-head, .neuro-page .section-head { grid-template-columns: 1fr; gap: 20px; }
  .home-page .section-intro { margin-top: 25px; }
  .home-page .services, .neuro-page .services { grid-template-columns: 1fr 1fr; }
  .home-page .service:nth-child(n), .neuro-page .service:nth-child(n) { border-left: 0; padding-left: 0; padding-right: 20px; }
  .home-page .service:nth-child(2n), .neuro-page .service:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 20px; }
  .neuro-page .process { grid-template-columns: 1fr 1fr; }
  .neuro-page .step:nth-child(n) { border-left: 0; padding-left: 0; }
  .neuro-page .step:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 20px; }
  .video-page .headline { grid-template-columns: 1fr; gap: 26px; }
  .video-page .intro { max-width: 660px; }
}
@media (max-width: 600px) {
  .wrap { width: min(100% - 36px, 1440px); }
  .mast { gap: 21px; padding-block: 22px; }
  .nav { gap: 11px 18px; }
  .nav a, .back { font-size: 12px; }
  .home-page .hero { padding-block: 92px 67px; }
  .home-page .hero h1 { font-size: clamp(3.7rem, 14vw, 5.5rem); margin-bottom: 35px; }
  .home-page .section, .neuro-page .section { padding-block: 75px 82px; }
  .home-page .services, .neuro-page .services, .neuro-page .model, .neuro-page .process { grid-template-columns: 1fr; }
  .home-page .service:nth-child(n), .neuro-page .service:nth-child(n), .neuro-page .step:nth-child(n), .neuro-page .model-card:nth-child(n) {
    border-left: 0;
    padding-inline: 0;
    min-height: 0;
  }
  .home-page .service h3 { margin-top: 40px; }
  .neuro-page .service h3, .neuro-page .model-card h3, .neuro-page .step h3 { margin-top: 38px; }
  .home-page .ventures { padding-block: 80px 90px; }
  .home-page .visual-proof { padding-block: 5px 82px; }
  .comparison-media img { min-width: 760px; }
  .comparison-figure figcaption { display: block; }
  .comparison-figure figcaption a { display: inline-block; margin-top: 10px; }
  .home-page .venture { grid-template-columns: 1fr auto; gap: 8px; }
  .home-page .venture small { grid-column: 1 / -1; }
  .home-page .end { padding-block: 90px; display: block; }
  .home-page .end a { margin-top: 35px; white-space: normal; }
  .neuro-page .hero { padding-block: 95px 72px; }
  .neuro-page .hero h1 { font-size: clamp(3.4rem, 12vw, 5.8rem); margin-bottom: 50px; }
  .neuro-page .hero-bottom { grid-template-columns: 1fr; }
  .neuro-page .hero-index { justify-self: start; }
  .neuro-page .model-result { display: block; padding: 28px; }
  .neuro-page .model-result span { display: block; margin-top: 12px; }
  .neuro-page .contact { padding-block: 80px; }
  .neuro-page .contact-inner { display: block; }
  .neuro-page .contact a { display: inline-block; margin-top: 32px; white-space: normal; }
  .video-page .hero { padding-block: 44px 80px; }
  .video-page .headline h1 { font-size: clamp(3.7rem, 13vw, 6rem); }
  .video-page .video-shell { box-shadow: 9px 9px 0 #25221c; }
  footer { gap: 12px; }
  footer a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .venture .arrow { transition: none; }
}
