/* ----------------------------------------------------------------------
   FUTUROX — site-level overrides on top of colors_and_type.css
   ---------------------------------------------------------------------- */

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

html { overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; }

img, svg, video { max-width: 100%; }

section {
  padding: 96px 96px;
  position: relative;
}

.container { max-width: 1280px; margin: 0 auto; width: 100%; }

.shell-bone { background: var(--bone-50); color: var(--ink-900); }
.shell-ink  { background: var(--ink-900); color: var(--bone-50); }
.shell-paper{ background: var(--paper); color: var(--ink-900); }

a      { transition: color .24s var(--ease), border-color .24s var(--ease); }
button { font: inherit; cursor: pointer; }

@keyframes sv-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes drift-up {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
.drift { animation: drift-up 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------------
   Responsive — three breakpoints:
     - 1180px : tablet — collapse 2-col layouts to single column
     - 900px  : narrow tablet — switch nav to hamburger
     - 720px  : phone — tighten paddings, shrink display type
   ---------------------------------------------------------------------- */

/* ── desktop hamburger / sheet visibility default ── */
[data-site="nav-hamburger"] { display: none; }

@media (max-width: 1180px) {
  section { padding: 96px 48px !important; }

  /* hero */
  [data-site="hero"]                            { padding-top: 128px !important; }
  [data-site="hero"]   > [data-site="hero-inner"],
  [data-site="positioning-inner"],
  [data-site="service-inner"],
  [data-site="founders-head"],
  [data-site="founder-spread"],
  [data-site="contact-inner"],
  [data-site="services-intro"],
  [data-site="services-copyrow"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  [data-site="services-topbar"] { flex-wrap: wrap; gap: 12px; }
  [data-site="arch-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 56px !important;
  }
  /* 2×2 grid breaks the single-line reading; drop the connectors */
  [data-site="arch-rule"], [data-site="arch-arrow"] { display: none !important; }

  [data-site="hero-meta"]   { padding: 0 48px 40px !important; flex-wrap: wrap; gap: 12px; }
  [data-site="hero-bottom"] { padding: 56px 48px 0 !important; margin-top: 56px !important; }
  [data-site="viz-col"]     { order: 2; }
  [data-site="service-section"] [data-site="service-inner"] > div:last-child { order: 99; }
  [data-site="founder-spread"] [data-site="founder-portrait-col"] { order: -1; max-width: 480px; }
  [data-site="founder-portrait"] { height: auto !important; }
}

/* ── nav switch ── */
@media (max-width: 960px) {
  [data-site="nav-inner"]     { padding: 14px 24px !important; }
  [data-site="nav-links"]     { display: none !important; }
  [data-site="nav-hamburger"] { display: inline-flex !important; }
}

/* ── phone ── */
@media (max-width: 720px) {
  section                                       { padding: 64px 20px !important; }
  [data-site="hero"]                            { padding-top: 96px !important; }
  [data-site="hero-meta"]                       { padding: 0 20px 32px !important; }
  [data-site="hero-bottom"]                     { padding: 40px 20px 0 !important; margin-top: 40px !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  [data-site="hero-bottom"] > div               { border-right: 0 !important; padding-right: 0 !important; }
  [data-site="services-topbar"]                 { gap: 8px; }
  [data-site="arch-grid"]                       { grid-template-columns: 1fr !important; row-gap: 36px !important; }
  [data-site="contact-fields"]                  { grid-template-columns: 1fr !important; }
  [data-site="founder-spread"] [data-site="founder-portrait-col"] { max-width: 100%; }

  /* taming oversized display type on phones */
  h1, h2 { letter-spacing: -0.02em !important; }
}

/* ── grain overlay for hero portrait blocks ── */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

/* ── footer responsive ── */
@media (max-width: 900px) {
  footer { padding: 64px 24px 32px !important; }
  footer > div > div:first-child { grid-template-columns: 1fr !important; gap: 32px !important; }
}