/* ==========================================================================
   Line One Ventures — 2026 site
   Structure & interaction language modeled on whiteswanadvisors.com
   Palette sampled directly from the Line One Ventures logo:
     #1F66C2  "Line One" wordmark
     #5099F9  "Ventures" wordmark
     #17CEFC  brightest node in the sphere graphic
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #0B1C2C;
  --ink-2:      #16334A;
  --muted:      #5A6B7B;
  --muted-2:    #8697A6;
  --line:       #E3E9EF;
  --line-soft:  #EEF2F6;
  --bg:         #FFFFFF;
  --bg-soft:    #F5F8FB;
  --bg-deep:    #071729;

  --brand:      #1F66C2;   /* logo: "Line One" */
  --brand-dark: #17509C;
  --brand-lt:   #5099F9;   /* logo: "Ventures" */
  --accent:     #17CEFC;   /* logo: sphere highlight */
  --grad:       linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  --grad-deep:  linear-gradient(135deg, #061525 0%, #0B2B50 55%, #103F6E 100%);

  --radius:     6px;
  --radius-lg:  14px;
  --shadow-sm:  0 1px 2px rgba(11,28,44,.06), 0 4px 14px rgba(11,28,44,.05);
  --shadow-md:  0 2px 6px rgba(11,28,44,.07), 0 16px 40px rgba(11,28,44,.09);

  --maxw:       1180px;
  --header-h:   148px;

  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* --- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(22px, 4.5vw, 48px); }
.section { padding: 104px 0; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding: 76px 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
}
.rule { width: 56px; height: 4px; border-radius: 2px; background: var(--grad); margin: 18px 0 24px; }
.rule--center { margin-inline: auto; }

.section-head { max-width: 720px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); }
.section-head .lede { color: var(--muted); font-size: 18px; margin-top: 18px; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(31,102,194,.28); }
.btn--primary:hover { background: var(--brand-dark); box-shadow: 0 10px 26px rgba(31,102,194,.34); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #F2F7FC; }

/* --- Header --------------------------------------------------------------
   Sticky rather than fixed, and solid rather than transparent. Jim's logo
   has a dark blue wordmark, which needs a light background to stay legible —
   and a solid header matches the current lineoneventures.com. Sticky means
   the hero flows naturally beneath it with no padding compensation.
   ------------------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Fully opaque. At 94% the dark hero tinted the bar as it scrolled under,
     while the logo's own white background stayed pure — which read as a white
     square floating on a grey-blue header. Opaque white also means the mobile
     menu panel and the header always match exactly. */
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), height .3s var(--ease);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header.is-stuck { box-shadow: 0 2px 24px rgba(11,28,44,.10); }

/* --- Brand lockup -------------------------------------------------------
   Jim's original logo, used exactly as supplied — including its reflection
   and its own white background. The file carries faint compression artefacts
   that stay invisible against white but show as grey haze if the background
   is knocked out, so it is left flattened; the header and footer are both
   white, so nothing is lost.

   `logo-no-reflection.png` is the same mark with the reflection cropped. It
   renders the wordmark about 24% larger at the same header height. One-line
   swap if that trade is worth it.
   ------------------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; }
.brand__logo {
  height: 124px;
  width: auto;
  display: block;
  transition: height .3s var(--ease);
}
.footer .brand__logo { height: 118px; }

/* Nav */
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--brand); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 100%; height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav .btn { min-height: 42px; padding: 0 20px; font-size: 14px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; position: relative; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: background .3s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: inherit; border-radius: 2px;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top: 7px; }
.nav-toggle.is-open span { background: transparent !important; }
.nav-toggle.is-open span::before { transform: translateY(7px) rotate(45deg); background: var(--ink); }
.nav-toggle.is-open span::after  { transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--grad-deep);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .68; }
.hero__glow {
  position: absolute;
  width: 780px; height: 780px;
  right: -180px; top: -220px;
  background: radial-gradient(circle, rgba(23,206,252,.30) 0%, rgba(23,206,252,0) 68%);
  pointer-events: none;
}
.hero__glow--2 {
  right: auto; left: -260px; top: auto; bottom: -320px;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(31,102,194,.34) 0%, rgba(31,102,194,0) 68%);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, #000 30%, transparent 78%);
}
.hero__inner {
  position: relative; z-index: 2;
  /* block-only: must not clobber .wrap's inline gutters */
  padding-block: 92px 90px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.06);
  padding: 8px 16px; border-radius: 999px;
  margin-bottom: 30px;
}
.hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(23,206,252,.22); }
.hero h1 {
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.07;
  max-width: 700px;
}
.hero h1 .grad {
  background: linear-gradient(90deg, #8FD9FF 0%, #4FCBFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin-top: 28px;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 400;
  color: rgba(255,255,255,.80);
  max-width: min(58ch, 560px);
  line-height: 1.6;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  margin-top: 56px; padding-top: 28px;
  max-width: 620px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 13.5px; color: rgba(255,255,255,.66);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 9px; }
.hero__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.scroll-hint {
  position: absolute; z-index: 2; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(rgba(255,255,255,.6), transparent);
  animation: hint 2.2s var(--ease) infinite;
}
@keyframes hint { 0%,100% { opacity:.25; transform: scaleY(.55); transform-origin: top; } 50% { opacity:1; transform: scaleY(1); transform-origin: top; } }

/* --- Statement ---------------------------------------------------------- */
.statement { text-align: center; max-width: 940px; margin-inline: auto; }
.statement p {
  font-size: clamp(19px, 2.05vw, 27px);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--ink-2);
}
.statement strong { font-weight: 600; color: var(--ink); }

/* --- Stats -------------------------------------------------------------- */
.stats { border-top: 1px solid var(--line); padding-top: 56px; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stat { display: flex; gap: 18px; align-items: flex-start; }
.stat__icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(31,102,194,.08); color: var(--brand);
}
.stat__icon svg { width: 22px; height: 22px; }
.stat__num { font-size: clamp(32px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.stat__label { margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* --- Capability cards --------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 52px; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 34px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #D3E2F0; }
.card__icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--grad); color: #fff;
  margin-bottom: 22px;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 22px; margin-bottom: 4px; }
.card .rule { width: 44px; height: 3px; margin: 14px 0 18px; }
.card p { color: var(--muted); font-size: 16px; }
.card__list { margin-top: 20px; display: grid; gap: 11px; }
.card__list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- Industries --------------------------------------------------------- */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 52px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.industry {
  background: #fff;
  padding: 34px 30px;
  transition: background-color .3s var(--ease);
  position: relative;
}
.industry::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.industry:hover { background: #FAFCFE; }
.industry:hover::before { transform: scaleX(1); }
.industry__icon { color: var(--brand); margin-bottom: 16px; }
.industry__icon svg { width: 26px; height: 26px; }
.industry h3 { font-size: 17.5px; margin-bottom: 10px; }
.industry p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* --- Selected work ------------------------------------------------------
   Client logos are optional: main.js removes the frame if the file is
   missing, so each card degrades to name + description rather than a
   broken image.
   ------------------------------------------------------------------------ */
.work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 52px; }
.work-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #D3E2F0; }
.work-card__logo {
  height: 116px;
  display: grid; place-items: center;
  padding: 20px 28px;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
}
.work-card__logo img { max-height: 72px; max-width: 78%; width: auto; object-fit: contain; }
.work-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.work-card__tag {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 10px;
}
.work-card h3 { font-size: 18.5px; margin-bottom: 4px; }
.work-card__loc { font-size: 13.5px; color: var(--muted-2); margin-bottom: 14px; }
.work-card p { font-size: 14.8px; color: var(--muted); line-height: 1.62; }
.work-note { margin-top: 34px; font-size: 14px; color: var(--muted-2); }

/* --- Approach (numbered steps) ------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 52px; counter-reset: step; }
.step { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.step__n {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--brand); margin-bottom: 14px;
}
.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--muted); }

/* --- Split (why us) ----------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: start; }
.checklist { display: grid; gap: 20px; }
.checklist li { display: flex; gap: 16px; align-items: flex-start; }
.checklist .ck {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 2px;
  background: rgba(23,206,252,.14); color: #1178A8;
}
.checklist .ck svg { width: 13px; height: 13px; }
.checklist h4 { font-size: 16.5px; margin-bottom: 5px; }
.checklist p { font-size: 15px; color: var(--muted); }

.panel {
  background: var(--grad-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 38px;
  position: relative;
  overflow: hidden;
}
.panel::after {
  content: ""; position: absolute; right: -120px; bottom: -140px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(23,206,252,.35) 0%, rgba(23,206,252,0) 70%);
}
.panel > * { position: relative; z-index: 1; }
.panel h3 { font-size: 24px; margin-bottom: 8px; }
.panel p { color: rgba(255,255,255,.78); font-size: 15.5px; }
.panel .rule { background: linear-gradient(90deg, #8FD9FF, #4FCBFF); }
.panel__list { display: grid; gap: 14px; margin-top: 26px; }
.panel__list li { display: flex; gap: 12px; font-size: 15px; color: rgba(255,255,255,.9); }
.panel__list li::before { content: "—"; color: var(--accent); flex: none; }

/* --- CTA band ----------------------------------------------------------- */
.cta {
  background: var(--grad-deep);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 10%, transparent 75%);
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(28px, 3.6vw, 44px); max-width: 20ch; margin-inline: auto; }
.cta p { margin-top: 20px; color: rgba(255,255,255,.78); font-size: 18px; max-width: 56ch; margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: #fff; border-top: 1px solid var(--line); padding: 64px 0 34px; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; }
.footer .brand__name { color: var(--brand); }
.footer .brand__sub { color: var(--brand-lt); }
.footer__blurb { margin-top: 20px; color: var(--muted); font-size: 15px; max-width: 34ch; }
.footer h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; font-weight: 700; }
.footer__links { display: grid; gap: 11px; }
.footer__links a { color: var(--ink-2); transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--brand); }
.footer address { font-style: normal; color: var(--muted); line-height: 1.75; }
.footer address a { color: var(--ink-2); }
.footer address a:hover { color: var(--brand); }
.footer__bottom {
  margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  color: var(--muted-2); font-size: 13.5px;
}

/* --- Contact page ------------------------------------------------------- */
.page-hero {
  background: var(--grad-deep);
  color: #fff;
  padding: 96px 0 96px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -160px; top: -180px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(23,206,252,.28) 0%, rgba(23,206,252,0) 68%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.03em; }
.page-hero p { margin-top: 20px; color: rgba(255,255,255,.8); font-size: 19px; max-width: 52ch; }
.page-hero .eyebrow { color: var(--accent); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.info-block + .info-block { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }
.info-block h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; font-weight: 700; }
.info-block a { color: var(--ink); font-weight: 500; }
.info-block a:hover { color: var(--brand); }
.info-block .big { font-size: 21px; font-weight: 600; letter-spacing: -.02em; display: block; }
.info-block address { font-style: normal; color: var(--ink-2); line-height: 1.8; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow-md); }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.field label .req { color: var(--brand); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #FBFDFE;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(31,102,194,.12);
}
.field textarea { min-height: 148px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { margin-top: 16px; font-size: 13px; color: var(--muted-2); }

/* Netlify honeypot — hidden from people, visible to bots that fill everything.
   Kept out of the layout and out of the accessibility tree without using
   display:none, which some bots detect. */
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; }

/* --- Resize guard --------------------------------------------------------
   While the window is being dragged, freeze every transition. Without this,
   crossing the 940px nav breakpoint re-applies the menu panel's opacity
   transition and it visibly fades out — reads as a flash of the menu.
   Added and removed by main.js; open/close animation is unaffected.
   ------------------------------------------------------------------------ */
.is-resizing *,
.is-resizing *::before,
.is-resizing *::after {
  transition: none !important;
  animation-duration: 0.001s !important;
}

/* --- Scroll reveal ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* --- Responsive --------------------------------------------------------- */
/* Nav collapses earlier than the content grids — it runs out of room first */
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(11,28,44,.12);
    padding: 12px clamp(22px, 4.5vw, 48px) 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { color: var(--ink) !important; padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 16px; min-height: 48px; border-bottom: 0; }
  .nav .btn.btn--primary { color: #fff !important; }
}

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 46px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .work { grid-template-columns: repeat(2, 1fr); }
  .industries { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 76px 0; }

  .stats__grid { grid-template-columns: 1fr; gap: 26px; }
  .cards { grid-template-columns: 1fr; }
  .industries { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .work { grid-template-columns: 1fr; }
  .brand__logo { height: 86px; }
  .footer .brand__logo { height: 92px; }
  .footer__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: 30px 24px; }
  .hero__meta { gap: 10px 22px; }
  .scroll-hint { display: none; }

  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 17px; }
  .brand__sub { font-size: 12px; }
  .hero__eyebrow { font-size: 10.5px; letter-spacing: .13em; padding: 7px 14px; }
  :root { --header-h: 106px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
  .scroll-hint::after { animation: none; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .header, .scroll-hint, .cta, .hero__canvas { display: none !important; }
  .hero, .page-hero, .panel { background: #fff !important; color: #000 !important; }
}