/* Game Plan Studio. INSTRUMENT, Field Mode.
   Source of truth: Figma tFJ1XjKucugGpdyf0KGx7v, frame 123:339 (Home / Desktop 1440). */

:root {
  --paper: #efefec;
  --pure: #ffffff;
  --ink: rgba(20, 20, 15, 0.88);
  --ink-2: rgba(20, 20, 15, 0.7);
  --ink-3: rgba(20, 20, 15, 0.5);
  --ink-4: rgba(20, 20, 15, 0.35);
  --rule: rgba(20, 20, 15, 0.18);
  --rule-soft: rgba(20, 20, 15, 0.12);
  --navy: #14213d;

  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 3.333vw, 48px);
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; font-weight: 400; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono span + span { margin-left: 2.2em; }
.dim { color: var(--ink-4); }

.rule { height: 1px; background: var(--rule); }

.band { background: var(--paper); }
.band.pure { background: var(--pure); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 1px solid var(--navy); outline-offset: 4px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  height: var(--nav-h);
}
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { width: 128px; height: 41px; }
.nav-links { display: flex; gap: 40px; }
.nav-links a, .foot-links a { transition: color 0.18s var(--ease); }
.nav-links a:hover, .foot-links a:hover { color: var(--navy); }

/* Hero */
.hero .wrap { min-height: 760px; padding-top: 140px; padding-bottom: 56px; display: flex; flex-direction: column; }
.display {
  font-size: clamp(42px, 6.389vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.display .line { display: block; }
.hero-right { margin-top: 66px; text-align: right; }
.hero-right .payoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0435em;
  letter-spacing: -0.033em;
  padding-right: 0.04em;
}
.hero-tag { position: absolute; left: var(--gutter); top: 380px; }
.hero-foot { margin-top: auto; padding-top: 70px; display: flex; justify-content: space-between; }

/* Hero media */
.hero-media { height: clamp(260px, 36.11vw, 520px); }
.placeholder {
  background: var(--pure);
  border: 1px dashed var(--rule);
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase;
  color: var(--ink-4); text-align: center; padding: 0 20px;
}
.placeholder span + span { margin-left: 2.2em; }

/* Stats */
.stats .wrap { padding-top: 72px; padding-bottom: 32px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat-num { font-size: clamp(48px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.035em; white-space: nowrap; }
.stat-label { margin-top: 33px; font-size: 18px; line-height: 1.5; color: var(--ink-3); max-width: 17em; }
.stats-line { margin-top: 8px; font-size: clamp(22px, 1.944vw, 28px); line-height: 1.3; letter-spacing: -0.021em; color: var(--ink-2); }

/* Section heads */
.sec-head { padding-top: 72px; }
.work .sec-head { padding-top: 64px; }
.h2 { font-size: clamp(38px, 3.889vw, 56px); line-height: 0.92; letter-spacing: -0.036em; }
.sec-head .mono { margin-top: 16px; }

/* Selected work */
.work .wrap { padding-bottom: 96px; }
.work-list { margin-top: 44px; display: flex; flex-direction: column; gap: 96px; }
.work-item { display: flex; gap: 40px; align-items: flex-start; }
.work-item.flip { flex-direction: row-reverse; justify-content: space-between; }
.work-media { flex: 0 0 auto; width: calc(var(--w) / 1344 * 100%); overflow: hidden; background: var(--pure); }
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.work-item:hover .work-media img { transform: scale(1.05); }
.work-cap { padding-top: 4px; min-width: 0; }
.work-cap h3 { margin-top: 8px; font-size: 34px; line-height: 1; letter-spacing: -0.035em; transition: color 0.18s var(--ease); }
.work-item:hover .work-cap h3 { color: var(--navy); }
.work-cap .desc { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--ink-3); }
.work-cap .year { margin-top: 4px; color: var(--ink-4); }

/* How it works */
.how .wrap { padding-bottom: 226px; }
.phases { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.phase { border-top: 1px solid var(--rule); padding-top: 21px; }
.phase h3 { margin-top: 10px; font-size: 30px; line-height: 1; letter-spacing: -0.033em; }
.phase p { margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--ink-3); }

/* Rows: services and FAQ */
.rows { margin-top: 36px; }
.row { border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: 52.08% 1fr; align-items: start; }
.services .wrap { padding-bottom: 60px; }
.services .row { padding: 27px 0 36px; min-height: 104px; }
.services .row h3 { font-size: clamp(30px, 2.778vw, 40px); line-height: 1; letter-spacing: -0.035em; }
.services .row p { padding-top: 8px; font-size: 17px; line-height: 1.5; color: var(--ink-3); max-width: 560px; }
.faq .wrap { padding-bottom: 80px; }
.faq .row { grid-template-columns: 49.1% 1fr; padding: 27px 0 44px; min-height: 128px; }
.faq .row dt { font-size: clamp(23px, 1.944vw, 28px); line-height: 1.1; letter-spacing: -0.032em; }
.faq .row dd { padding-top: 2px; font-size: 17px; line-height: 1.55; color: var(--ink-3); max-width: 680px; }

/* Footer */
.footer .wrap { padding-top: 90px; }
.talk { font-size: clamp(54px, 6.389vw, 92px); line-height: 0.95; letter-spacing: -0.035em; }
.email {
  display: inline-block; margin-top: 33px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(34px, 3.889vw, 56px); line-height: 1; letter-spacing: -0.029em;
  color: var(--ink-2);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.14em;
  transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}
.email:hover { color: var(--navy); text-decoration-color: currentColor; }
.entity { margin-top: 34px; color: var(--ink-4); }
.foot-links { margin-top: 32px; display: flex; gap: 36px; flex-wrap: wrap; }
.foot-logo { margin-top: 92px; width: min(400px, 78%); height: auto; aspect-ratio: 128 / 41; }
.foot-base { margin-top: 88px; border-top: 1px solid var(--rule); padding: 21px 0 36px; display: flex; justify-content: space-between; }

/* Motion. Native scroll, fade and rise on entry, one staggered load-in. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .hero .line, .js .hero .mono, .js .nav { opacity: 0; }
  .js .hero .line { transform: translateY(0.35em); }
  .js.loaded .hero .line, .js.loaded .hero .mono, .js.loaded .nav {
    opacity: 1; transform: none;
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: var(--d, 0ms);
  }
}

/* Narrow screens */
@media (max-width: 900px) {
  .hero .wrap { min-height: 0; padding-top: 72px; }
  .hero-tag { position: static; margin-top: 28px; }
  .hero-right { margin-top: 56px; }
  .phases { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .how .wrap { padding-bottom: 96px; }
  .row, .faq .row { grid-template-columns: 1fr; row-gap: 14px; }
  .services .row p, .faq .row dd { padding-top: 0; }
  .work-list { gap: 64px; }
  .work-item, .work-item.flip { flex-direction: column; gap: 18px; }
  .work-media { width: 100%; }
}
@media (max-width: 560px) {
  :root { --nav-h: 64px; }
  .nav-logo img { width: 100px; height: 32px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 10px; letter-spacing: 0.2px; }
  .stats-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .stats-line { margin-top: 36px; }
  .stat-label { margin-top: 18px; }
  .phases { grid-template-columns: 1fr; }
  .mono span { display: block; }
  .mono span + span, .placeholder span + span { margin-left: 0; }
  .placeholder { flex-direction: column; gap: 6px; }
  .hero-foot .dim { display: none; }
  .foot-base { flex-direction: column; gap: 8px; }
}