@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

/* Layout concept: a "runway" page. Cream ground, navy ink, orange marks the path forward.
   Sections alternate cream and navy; the stepped two-line motif from the logo recurs as the only ornament. */
:root {
  --navy: #1A1E41;
  --navy-2: #252A57;
  --orange: #F0652C;
  --orange-ink: #B8441A;      /* orange for small text on cream (meets 4.5:1) */
  --cream: #FEFDF8;
  --sand: #F4F0E4;            /* quiet panel on cream, biased toward the orange */
  --line: #E3DDCB;
  --ink-2: #4A4E6E;           /* secondary text on cream, navy-tinted */
  --on-navy-2: #C9CBDF;       /* secondary text on navy */

  --font-display: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --step-4: clamp(2.5rem, 1.6rem + 3.8vw, 4.4rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --radius: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--orange); color: var(--navy); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; max-width: 65ch; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: var(--cream); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-name { display: flex; flex-direction: column; font-family: var(--font-display); line-height: 1; }
.brand-name b { font-size: 1.35rem; font-weight: 800; }
.brand-name span { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.nav a { text-decoration: none; padding-block: 10px; }
.nav a:not(.btn):hover { color: var(--orange-ink); }
.lang { font-size: 0.85rem; letter-spacing: 0.08em; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px !important; }
.lang:hover { border-color: var(--navy); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--orange); color: var(--navy); box-shadow: 0 6px 18px -8px rgba(240, 101, 44, 0.7); }
.btn-primary:hover { background: #F37A48; }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn-ghost:hover { background: rgba(26, 30, 65, 0.06); }
.on-navy .btn-ghost:hover { background: rgba(254, 253, 248, 0.08); }
.btn svg { width: 18px; height: 18px; }
.nav .btn { min-height: 44px; padding: 8px 18px; }

/* Hero */
.hero { padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-lede { font-size: var(--step-1); color: var(--ink-2); margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-art { position: relative; width: 100%; max-width: 440px; justify-self: end; }
.hero-art::before { content: ""; position: absolute; inset: -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 101, 44, 0.16), transparent 70%),
              radial-gradient(rgba(26, 30, 65, 0.14) 1.2px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.runway-art { display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 30px 40px rgba(26, 30, 65, 0.16)); }
.runway-art .spark.s1 { fill: var(--cream); }
.runway-art .spark.s2 { fill: var(--orange); }
.runway-art .line { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.runway-art .l1 { stroke: var(--orange); }
.runway-art .l2 { stroke: var(--navy); }
.runway-art .frame { fill: var(--cream); stroke: var(--navy); stroke-width: 1.5; }
.runway-art .tick { fill: var(--navy); font-family: var(--font-display); font-size: 3.4px; font-weight: 700; letter-spacing: 0.12em; }

.skip-list { border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; font-family: var(--font-display); font-size: 0.95rem; }
.skip-list strong { font-weight: 800; margin-right: 6px; }
.skip-list span { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

/* Sections */
section { scroll-margin-top: 84px; }
.band { padding-block: clamp(64px, 9vw, 120px); }
.on-navy { background: var(--navy); color: var(--cream); }
.on-sand { background: var(--sand); }
.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { font-size: var(--step-3); }
.section-head p { font-size: var(--step-1); color: var(--ink-2); }
.on-navy .section-head p { color: var(--on-navy-2); }

/* Problem / solution */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.split h2 { font-size: var(--step-3); }
.split .body { display: grid; gap: 18px; color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; }
.split .body p:first-child { color: var(--navy); }

/* Positioning */
.position { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.position blockquote { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.position blockquote em { font-style: normal; color: var(--orange); }
.position .body { display: grid; gap: 18px; color: var(--on-navy-2); }
.position .body p:first-child { color: var(--cream); }
.boundary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(254,253,248,0.16); border-radius: var(--radius); overflow: hidden; margin-top: 12px; }
.boundary div { background: var(--navy-2); padding: 18px 20px; display: grid; gap: 6px; }
.boundary h3 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.boundary p { font-size: 0.98rem; color: var(--cream); }

/* Services: grouped definition lists, not cards */
.service-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(32px, 6vw, 88px); }
.service-group h3 { font-size: var(--step-1); display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--navy); }
.service-group h3 svg { width: 28px; height: 28px; flex: none; }
.service-group dl { margin: 0; display: grid; }
.service-group dt { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-top: 18px; }
.service-group dd { margin: 4px 0 0; color: var(--ink-2); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.service-group dd:last-of-type { border-bottom: 0; }

/* Process: real sequence, so the stage numbers carry information */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: stage; position: relative; }
.stage { position: relative; padding: 64px 22px 8px 0; display: grid; gap: 10px; align-content: start; }
.stage::before {
  counter-increment: stage; content: counter(stage);
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  background: var(--cream); color: var(--navy); border: 2px solid var(--navy);
}
.stage::after { content: ""; position: absolute; top: 21px; left: 52px; right: 8px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.stage:last-child::after { display: none; }
.stage:nth-child(1)::before, .stage:nth-child(5)::before { background: var(--orange); border-color: var(--orange); }
.stage h3 { font-size: var(--step-1); }
.stage p { color: var(--ink-2); font-size: 0.98rem; }

/* Who we help */
.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fit-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-block: 18px; border-bottom: 1px solid var(--line); font-size: var(--step-1); line-height: 1.45; }
.fit-list li:first-child { border-top: 1px solid var(--line); }
.fit-list svg { width: 28px; height: 28px; margin-top: 3px; }

/* Why / about */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.why-list li { display: grid; gap: 4px; }
.why-list b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--cream); }
.why-list span { color: var(--on-navy-2); }
.about { display: grid; gap: 18px; color: var(--on-navy-2); font-size: var(--step-1); line-height: 1.55; }
.about h2 { color: var(--cream); font-size: var(--step-3); margin-bottom: 6px; }
.about strong { color: var(--cream); font-weight: 600; }
.timeline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; }
.timeline span { border: 1px solid rgba(254,253,248,0.3); border-radius: 999px; padding: 8px 14px; color: var(--cream); }
.timeline span.now { background: var(--orange); border-color: var(--orange); color: var(--navy); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact h2 { font-size: var(--step-3); }
.contact .intro { display: grid; gap: 18px; }
.contact .intro p { color: var(--ink-2); font-size: var(--step-1); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 3vw, 32px); box-shadow: 0 24px 48px -32px rgba(26, 30, 65, 0.35); }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--navy);
  background: #fff; border: 1.5px solid #CFC8B4; border-radius: 8px;
  padding: 12px 14px; min-height: 48px; width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(240, 101, 44, 0.35); }
.field input::placeholder, .field textarea::placeholder { color: #6E7190; }
.field [aria-invalid="true"] { border-color: #B3261E; }
.error { color: #B3261E; font-size: 0.88rem; font-family: var(--font-display); font-weight: 600; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-note { font-size: 0.9rem; color: var(--ink-2); flex: 1 1 220px; }
.form-status { grid-column: 1 / -1; background: var(--sand); border-radius: 8px; padding: 14px 16px; font-family: var(--font-display); font-weight: 600; }

/* Footer */
.site-footer { background: var(--navy); color: var(--on-navy-2); padding-block: 48px; font-family: var(--font-display); font-size: 0.92rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.site-footer .brand { color: var(--cream); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cream); }

/* ---------- Motion ----------
   Thesis: the page is a runway. Things travel forward and lock into place:
   the mark draws itself, a light runs along each line, the day-one costs get struck out,
   and the five stages light up in order as you scroll. Everything else is quiet feedback.
   Content stays visible without JS (all hidden states are gated by html.js). */
:root { --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1); }

/* Reading progress: an orange runway under the header (scroll-driven, ignored where unsupported) */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* Feedback */
.nav a.nav-section { position: relative; }
.nav a.nav-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 240ms var(--ease-out); }
.nav a.nav-section:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.btn svg { transition: transform 200ms var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(254, 253, 248, 0.45) 50%, transparent 70%); transform: translateX(-120%); }
.btn-primary:hover::after { transform: translateX(120%); transition: transform 700ms var(--ease-out); }
.btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(240, 101, 44, 0.75); }
.fit-list li, .why-list li { transition: transform 220ms var(--ease-out); }
.service-group h3 { position: relative; }
.service-group h3::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 56px; background: var(--orange); transform-origin: 0 50%; }
.service-group dt { transition: color 160ms ease; }
.service-group dt:hover { color: var(--orange-ink); }
.timeline span { transition: transform 200ms var(--ease-out), border-color 200ms ease; }
.timeline span:hover { transform: translateY(-2px); border-color: var(--cream); }
.field input, .field select, .field textarea { transition: border-color 150ms ease, box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .fit-list li:hover { transform: translateX(6px); }
  .why-list li:hover { transform: translateX(6px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero: the mark draws itself, then a light travels each line */
  .runway-art .draw { stroke-dasharray: 120; stroke-dashoffset: 0; animation: draw 1.4s var(--ease-out) 0.35s both; }
  .runway-art .l2.draw { animation-delay: 0.6s; }
  @keyframes draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
  .runway-art .frame, .runway-art .tick { animation: fade-in 700ms var(--ease-out) both; }
  .runway-art .tick { animation-delay: 1.2s; }
  .hero-art::before { animation: fade-in 1.4s ease 0.4s both; }
  @keyframes fade-in { from { opacity: 0; } }

  /* Headline: words rise into place */
  .js .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.45em); filter: blur(6px); animation: rise 800ms var(--ease-arrive) both; animation-delay: calc(80ms + var(--i) * 45ms); }
  .js .hero h1 .w.accent { color: var(--orange); }
  .js .hero-lede, .js .hero-actions { animation: rise 800ms var(--ease-arrive) both; }
  .js .hero-lede { animation-delay: 520ms; }
  .js .hero-actions { animation-delay: 640ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

  /* Day-one costs get struck out, one after another */
  .js .skip-list strong { animation: fade-in 600ms ease 900ms both; }
  .js .skip-list span { text-decoration: none; background: linear-gradient(var(--orange), var(--orange)) 0 58% / 0% 2px no-repeat; animation: fade-in 500ms ease both, strike 600ms var(--ease-in-out) both; animation-delay: calc(950ms + var(--i) * 90ms), calc(1300ms + var(--i) * 140ms); }
  @keyframes strike { to { background-size: 100% 2px; } }

  /* Scroll reveals */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-arrive), transform 900ms var(--ease-arrive); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .service-group h3::after { transform: scaleX(0); transition: transform 900ms var(--ease-in-out) 250ms; }
  .js .service-group.in h3::after { transform: scaleX(1); }
  .js .fit-list svg path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 300ms); }
  .js .fit-list li.in svg path { stroke-dashoffset: 0; }
  .js .position blockquote em { background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0% 3px no-repeat; padding-bottom: 2px; transition: background-size 900ms var(--ease-in-out) 500ms; }
  .js .position blockquote.in em { background-size: 100% 3px; }
}

/* How it works: stages light up in order as they come into view */
.js .stage::before { transition: background-color 400ms ease, border-color 400ms ease, transform 500ms var(--ease-arrive); }
.js .stage:nth-child(1)::before, .js .stage:nth-child(5)::before { background: var(--cream); border-color: var(--navy); }
.js .stage.lit::before { background: var(--orange); border-color: var(--orange); transform: scale(1.06); }
.js .stage::after { background: linear-gradient(var(--orange), var(--orange)) 0 0 / 0% 100% no-repeat, repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); transition: background-size 700ms var(--ease-in-out) 200ms; }
.js .stage.lit::after { background-size: 100% 100%, auto; }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid, .split, .position, .fit, .why, .contact { grid-template-columns: minmax(0, 1fr); }
  .hero-art { justify-self: start; max-width: 300px; order: -1; }
  .stages { grid-template-columns: minmax(0, 1fr); }
  .stage { padding: 0 0 28px 64px; }
  .stage::after { top: 52px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
  .js .stage::after { background: linear-gradient(var(--orange), var(--orange)) 0 0 / 100% 0% no-repeat, repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
  .js .stage.lit::after { background-size: 100% 100%, auto; }
}
@media (max-width: 720px) {
  .service-groups, .boundary, .form { grid-template-columns: minmax(0, 1fr); }
  .nav { gap: 4px 16px; font-size: 0.9rem; }
  .nav .nav-section { display: none; }
}
@media (max-width: 720px) {
  .hero-art { display: none; }
  .header-row { flex-wrap: nowrap; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
  .nav .btn { padding: 8px 14px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary::after { display: none; }
  .js .stage::before, .js .stage::after { transition-duration: 1ms; }
}
/* prevent sideways scroll */
html, body { overflow-x: clip; }