/* GMA Design — shared styles for all pages */

:root {
  --bg: #0C0D0A;
  --surface: #14150F;
  --ink: #ECE7DC;
  --muted: #9C988C;
  --line: #2B2C25;
  --brass: #C59B5B;
  --grid: rgba(236, 231, 220, 0.08);
  --tick: rgba(236, 231, 220, 0.35);
  --pad-base: clamp(24px, 5.6vw, 80px);
  /* Beyond 1440px wide, padding grows so content stays in a centered 1440px column */
  --pad: max(var(--pad-base), calc((100% - 1440px) / 2 + 80px));
  --img-h: clamp(360px, 54vw, 780px);
  --display: "Instrument Serif", Georgia, serif;
  --body: "Manrope", system-ui, sans-serif;
  --label: "Michroma", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3 { margin: 0; font-weight: 400; }
img { display: block; max-width: 100%; }

.label {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.label--brass { color: var(--brass); }

.wrap { width: 100%; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 36px var(--pad) 88px;
}
.hero__image {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 1560px);
  transform: translateX(-50%);
  height: var(--img-h);
  background: url("../images/hero-studio.jpg") 42% 100% / cover no-repeat;
}
.hero__image::before,
.hero__image::after { content: ""; position: absolute; left: 0; right: 0; }
.hero__image::after {
  inset: 0;
  background: linear-gradient(to bottom, rgba(12,13,10,0) 74%, rgba(12,13,10,.85) 90%, var(--bg) 97%);
}
.hero__image::before {
  top: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(12,13,10,.97) 0%, rgba(12,13,10,.9) 38%, rgba(12,13,10,0) 100%);
  z-index: 1;
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 55% at 80% 66%, rgba(197,155,91,.17) 0%, rgba(197,155,91,.05) 55%, rgba(197,155,91,0) 100%);
  pointer-events: none;
}

/* Grid lines + registration marks */
.hero__grid,
.hero__ticks {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  pointer-events: none;
}
.hero__grid {
  top: calc(var(--img-h) - 100px);
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 200px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 200px);
}
.hero__grid span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grid);
}
.hero__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 156px;
  height: 1px;
  background: var(--grid);
  pointer-events: none;
}
.hero__ticks { top: 148px; height: 17px; }
.hero__ticks span {
  position: absolute;
  top: 0;
  width: 17px;
  height: 17px;
  margin-left: -8px;
}
.hero__ticks span::before,
.hero__ticks span::after { content: ""; position: absolute; background: var(--tick); }
.hero__ticks span::before { left: 8px; top: 0; width: 1px; height: 17px; }
.hero__ticks span::after { left: 0; top: 8px; width: 17px; height: 1px; }
.x0 { left: 0; }
.x1 { left: 28.125%; }
.x2 { left: 56.25%; }
.x3 { left: 78.125%; }
.x4 { left: 100%; }

.hero__inner { position: relative; z-index: 2; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo { width: clamp(170px, 25vw, 360px); }
.nav .label { color: var(--ink); }

.hero__body {
  margin-top: calc(var(--img-h) - 147px);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--brass); flex: none; }
.headline {
  font-family: var(--display);
  font-size: clamp(56px, 9.45vw, 136px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.headline em { display: block; font-style: italic; }
.hero__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  padding-top: 12px;
}
.hero__sub {
  max-width: none;
  font-size: 17px;
  line-height: 1.6;
  color: #CFCABF;
}

/* Sections */
.section-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 80px;
}
.section-grid > .label { padding-top: 14px; line-height: 1.9; }

.about {
  padding: 160px var(--pad) 140px;
  background: radial-gradient(ellipse 55% 60% at 12% 35%, rgba(197,155,91,.08), rgba(197,155,91,0));
}
.about__copy { display: flex; flex-direction: column; gap: 48px; }
.lead {
  font-family: var(--display);
  font-size: clamp(30px, 3.05vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.about__copy .body-text { max-width: 620px; }
.body-text { font-size: 16px; line-height: 1.7; color: var(--muted); }

.platforms {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 120px;
  border-top: 1px solid var(--line);
}
.platform { padding: 32px 28px 0; display: flex; flex-direction: column; gap: 14px; }
.platform:first-child { padding-left: 0; }
.platform:last-child { padding-right: 0; }
.platform + .platform { border-left: 1px solid var(--line); }
.platform .label { font-size: 10px; }
.platform h3 { font-family: var(--display); font-size: 30px; line-height: 1.1; }

.standard { background: var(--surface); padding: 120px var(--pad) 140px; }
.standard__copy { max-width: 760px; display: flex; flex-direction: column; gap: 28px; }
.standard__copy h2 { font-family: var(--display); font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; }
.standard__copy p { font-size: 16px; line-height: 1.7; color: var(--muted); }

.vision {
  padding: 160px var(--pad);
  background: radial-gradient(ellipse 55% 65% at 85% 60%, rgba(197,155,91,.10), rgba(197,155,91,0));
}
.vision__copy { display: flex; flex-direction: column; gap: 56px; }
.vision__copy p { max-width: 620px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.vision__copy .contact {
  max-width: none;
  padding-top: 8px;
}
.vision__copy .contact::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--brass);
}
.contact a {
  white-space: nowrap;
  color: var(--brass);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact a:hover { border-bottom-color: var(--brass); }
.vision__copy h2 {
  font-family: var(--display);
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px var(--pad) 56px;
  border-top: 1px solid var(--line);
}
.footer__logo { width: 137px; }
.footer__tagline { margin-top: 28px; font-size: 10px; line-height: 1.8; color: #CFCABF; }
.footer__contact { margin-top: 10px; font-size: 10px; line-height: 1.8; font-style: normal; }
.footer__contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.footer__contact a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nowrap { white-space: nowrap; }
.footer__rule { width: 40px; height: 1px; margin: 32px 0; background: var(--brass); }
.footer__copy { font-size: 10px; color: var(--ink); }
.footer__links { margin-top: 12px; font-size: 10px; }
.footer__links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.footer__links a:hover,
.footer__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--line); }
.footer__links .sep { margin: 0 10px; color: var(--line); }
.legal { margin-top: 12px; font-size: 9px; line-height: 1.9; color: #6E6B62; }

/* Scroll reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(.2, .6, .2, 1), transform 0.9s cubic-bezier(.2, .6, .2, 1);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Sticky bar: appears once the hero logo scrolls out of view */
.site-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(12, 13, 10, 0.82);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(236, 231, 220, 0.08);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1), opacity .45s ease, visibility 0s linear .45s;
}
.site-bar.is-shown {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1), opacity .45s ease, visibility 0s;
}
.site-bar__inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 72px;
  padding: 0 var(--pad-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-bar__logo { display: block; line-height: 0; }
.site-bar__logo img { width: 140px; }
.site-bar .label { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .site-bar, .site-bar.is-shown { transition: none; }
}

/* Very wide windows: fade the photo's sides into the background */
@media (min-width: 1561px) {
  .hero__image {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

/* Legal pages (privacy, terms) */
.site-bar--static {
  position: sticky;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: none;
}
.legal-page {
  padding: 120px var(--pad) 140px;
  background: radial-gradient(ellipse 55% 45% at 85% 0%, rgba(197,155,91,.08), rgba(197,155,91,0));
}
.legal-doc { max-width: none; }
.legal-doc h1 {
  margin-top: 20px;
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.legal-doc__date { display: block; margin-top: 20px; }
.legal-doc p.legal-doc__intro:not(.label) { margin-top: 48px; font-size: 18px; line-height: 1.7; color: #CFCABF; }
.legal-doc h2 {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.15;
}
.legal-doc h3 {
  margin-top: 28px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.legal-doc p:not(.label),
.legal-doc li { font-size: 16px; line-height: 1.75; color: var(--muted); }
.legal-doc p:not(.label) { margin-top: 16px; }
.legal-doc ul { margin: 16px 0 0; padding-left: 20px; }
.legal-doc li + li { margin-top: 8px; }
.legal-doc li::marker { color: var(--brass); }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--brass); text-decoration: none; border-bottom: 1px solid rgba(197,155,91,.35); }
.legal-doc a:hover { border-bottom-color: var(--brass); }
.legal-doc address { font-style: normal; margin-top: 16px; font-size: 16px; line-height: 1.75; color: var(--ink); }


/* Tablet */
@media (max-width: 1080px) {
  .hero__body { margin-top: calc(var(--img-h) - 70px); }
  .hero__footer { flex-direction: column; align-items: flex-start; }
  .section-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-grid > .label { padding-top: 0; }
  .platforms { grid-template-columns: repeat(3, 1fr); }
  .platform:nth-child(3) { padding-right: 0; }
  .platform:nth-child(4) { border-left: 0; padding-left: 0; }
  .platform:nth-child(n+4) { border-top: 1px solid var(--line); margin-top: 32px; }
}

/* Mobile */
@media (max-width: 760px) {
  .x1, .x2, .x3 { display: none; }
  /* Phone: photo sits below the logo, framed on the truck */
  .hero { padding-top: 28px; }
  .hero__image {
    top: 92px;
    height: 300px;
    background-size: 175% auto;
    background-position: 47% 88%;
  }
  .hero__image::before {
    height: 56px;
    background: linear-gradient(to bottom, var(--bg) 0%, rgba(12,13,10,0) 100%);
  }
  .hero__image::after {
    background: linear-gradient(to bottom, rgba(12,13,10,0) 80%, var(--bg) 100%);
  }
  .hero__rule, .hero__ticks { display: none; }
  .hero__grid { top: 300px; }
  .hero__body { margin-top: 330px; gap: 28px; }
  .nav .label { font-size: 9px; }
  .meta { flex-direction: column; gap: 20px; }
  .about { padding: 96px var(--pad); }
  .platforms { grid-template-columns: 1fr; margin-top: 72px; }
  .platform,
  .platform:first-child,
  .platform:last-child,
  .platform:nth-child(n) { padding: 24px 0; margin-top: 0; border-left: 0; }
  .platform + .platform { border-top: 1px solid var(--line); }
  .vision { padding: 96px var(--pad); }
  .standard { padding: 96px var(--pad); }
  .site-footer { padding: 56px var(--pad) 48px; }
  .legal-page { padding: 72px var(--pad) 96px; }
  .legal-doc h2 { margin-top: 48px; font-size: 26px; }
  .site-bar__inner { height: 56px; }
  .site-bar__logo img { width: 112px; }
  .site-bar .label { font-size: 9px; }
  .footer__contact .sep { display: block; height: 0; overflow: hidden; }
}
/* Phone held sideways: fit the photo to the screen height so the whole truck shows */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --img-h: 100vh; --img-h: 100svh; }
  .hero__image {
    top: 0;
    height: var(--img-h);
    background-size: cover;
    background-position: 42% 100%;
  }
  .hero__image::before {
    height: 22%;
    background: linear-gradient(to bottom, rgba(12,13,10,.9) 0%, rgba(12,13,10,0) 100%);
  }
  .hero__image::after {
    background: linear-gradient(to bottom, rgba(12,13,10,0) 88%, var(--bg) 100%);
  }
  .hero__rule, .hero__ticks { display: none; }
  .hero__grid { top: calc(var(--img-h) - 60px); }
  .hero__body { margin-top: calc(var(--img-h) - 60px); }
  .nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nav .label { text-shadow: 0 1px 8px rgba(12,13,10,.9); }
}