/* Onrush Data. Brand: orange #FD6A05 -> #FE4914, slate ink #313B43 (sampled
   from the logo). Button text is near-black on orange: white on the brand
   orange fails WCAG contrast. */
/* Theme: follows the system by default; the header toggle sets
   data-theme="light|dark" on <html> (see index.html). light-dark() picks the
   value for whichever color-scheme is in force. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#faf8f4, #111518);
  --bg-alt: light-dark(#f2eee6, #161b1f);
  --card: light-dark(#ffffff, #1a2024);
  --fg: light-dark(#1d2328, #e8eceb);
  --ink: light-dark(#313b43, #e8eceb);
  --muted: light-dark(#5e676e, #9aa4aa);
  --line: light-dark(#e6e0d5, #283036);
  --brand: #fd6a05;
  --brand-2: #fe4914;
  --link: light-dark(#b8460a, #ff8a3d);
  --on-brand: #14181b;
  --grad-text: linear-gradient(90deg, light-dark(#e85a06, #ff8a3d), light-dark(#d63d0d, #fe4914));
  --sh-a: light-dark(rgb(29 35 40 / .05), rgb(0 0 0 / .3));
  --sh-b: light-dark(rgb(29 35 40 / .06), rgb(0 0 0 / .25));
  --sh-c: light-dark(rgb(29 35 40 / .06), rgb(0 0 0 / .35));
  --sh-d: light-dark(rgb(29 35 40 / .12), rgb(0 0 0 / .4));
  --shadow: 0 1px 2px var(--sh-a), 0 8px 24px var(--sh-b);
  --shadow-hover: 0 2px 4px var(--sh-c), 0 18px 40px var(--sh-d);
  --header: light-dark(rgb(250 248 244 / .82), rgb(17 21 24 / .8));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Logo variants: both are in the page; show the one for the active scheme. */
.for-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .for-light { display: none; }
  :root:not([data-theme="light"]) .for-dark { display: block; }
}
:root[data-theme="dark"] .for-light { display: none; }
:root[data-theme="dark"] .for-dark { display: block; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 28px; } }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--header);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand img { height: 44px; width: auto; }
nav { display: flex; align-items: center; gap: 26px; }
nav a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 550; font-size: .95rem; }
nav a:not(.btn):hover { color: var(--fg); }
@media (max-width: 720px) {
  nav a:not(.btn) { display: none; }
  .brand img { height: 38px; }
}

/* Theme switch: sun and moon sit in the track, the knob slides over the
   active one. Position comes from the same selectors as the logo swap, so it
   is right on first paint and when following the system theme. */
.theme-toggle {
  display: none; position: relative; flex: none; width: 58px; height: 32px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; transition: border-color .15s;
}
.js .theme-toggle { display: block; }
.theme-toggle:hover { border-color: var(--brand); }
.theme-toggle svg {
  position: absolute; top: 7px; width: 16px; height: 16px;
  fill: none; stroke: var(--fg); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .sun { left: 8px; }
.theme-toggle .moon { right: 8px; }
.theme-toggle .knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
  /* See-through so the icon under it stays visible. */
  background: rgb(253 106 5 / .22);
  border: 1.5px solid var(--brand);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .knob { transform: translateX(26px); }
}
:root[data-theme="dark"] .theme-toggle .knob { transform: translateX(26px); }
.bar-end { display: flex; align-items: center; gap: 14px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--on-brand); font-weight: 650; text-decoration: none;
  box-shadow: 0 6px 18px rgb(254 73 20 / .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgb(254 73 20 / .36); }
.btn-sm { padding: 8px 16px; font-size: .92rem; box-shadow: none; }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; overflow-wrap: anywhere; text-align: center; }
.btn-ghost {
  background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 72px 0 96px; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(closest-side, rgb(253 106 5 / .16), transparent 70%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 56px; } }
.eyebrow {
  display: inline-block; margin: 0 0 22px; padding: 6px 14px; border-radius: 999px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: .02em;
}
h1, h2, h3 { color: var(--fg); letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.06; margin: 0 0 22px; font-weight: 800; text-wrap: balance; }
.grad { white-space: nowrap; }
@media (max-width: 420px) { .grad { white-space: normal; } }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); max-width: 56ch; margin: 0 0 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-mark { display: flex; justify-content: center; }
.hero-mark img { width: min(100%, 440px); filter: drop-shadow(0 24px 40px rgb(254 73 20 / .18)); animation: float 7s ease-in-out infinite; }
@media (max-width: 899px) { .hero-mark { display: none; } }

/* Speed streaks echoing the mark */
.streaks { position: absolute; inset: 0; pointer-events: none; }
.streaks span {
  position: absolute; left: 0; top: var(--y); width: 220px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgb(253 106 5 / .45));
  opacity: .5;
  animation: streak var(--d) linear infinite; animation-delay: var(--delay);
}
.streaks span::after {
  content: ""; position: absolute; right: -4px; top: -3.5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand); opacity: .7;
}
.streaks span:nth-child(even) { background: linear-gradient(90deg, transparent, rgb(49 59 67 / .35)); }
.streaks span:nth-child(even)::after { background: var(--ink); opacity: .5; }
@keyframes streak { from { transform: translateX(-260px); } to { transform: translateX(100vw); } }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Sections */
.section { padding: 96px 0; }
.section.alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.kicker {
  margin: 0 0 10px; color: var(--link); font-weight: 700; font-size: .85rem;
  letter-spacing: .12em; text-transform: uppercase;
}
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; margin: 0 0 40px; max-width: 24ch; font-weight: 750; }
h3 { font-size: 1.2rem; margin: 0 0 8px; font-weight: 700; }

/* Service cards */
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card:hover::before { transform: scaleX(1); }
.card p { margin: 0; color: var(--muted); }
.icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 18px rgb(254 73 20 / .25);
}
.icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Work */
.work { display: grid; gap: 28px; }
@media (min-width: 860px) { .work { grid-template-columns: 1fr 1fr; } }
.project {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.project:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.shot { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .5s ease; }
.project:hover .shot img { transform: scale(1.03); }
.project-body { padding: 24px 26px 26px; }
.project-body p { margin: 0 0 16px; color: var(--muted); }
.arrow { display: inline-block; color: var(--brand); transition: transform .2s ease; }
.project:hover .arrow { transform: translateX(4px); }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  color: var(--muted); background: var(--bg-alt); border: 1px solid var(--line);
}

/* Approach */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.steps li { position: relative; padding-top: 26px; border-top: 2px solid var(--line); }
.steps li::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.num { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 14px; color: transparent; -webkit-text-stroke: 1.5px var(--brand); }
.steps p { margin: 0; color: var(--muted); }

/* Call to action */
#contact { padding-top: 24px; }
.cta {
  position: relative; overflow: hidden; display: grid; gap: 28px; align-items: center;
  padding: 48px 36px; border-radius: 26px; background: light-dark(#313b43, #1d2429); color: #e8eceb;
  border: 1px solid light-dark(transparent, var(--line));
}
@media (min-width: 860px) { .cta { grid-template-columns: 1fr auto; padding: 56px 56px; } }
.cta::before {
  content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(253 106 5 / .35), transparent);
}
.cta > * { position: relative; }
@media (max-width: 480px) {
  .cta { padding: 36px 20px; }
  .cta .btn-lg { padding: 14px 16px; font-size: .95rem; overflow-wrap: normal; }
}
.cta h2 { color: #fff; margin: 0 0 10px; max-width: 22ch; }
.cta p { margin: 0; color: #c3cbd0; }

/* Footer */
.site-footer { padding: 40px 0 56px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.foot { display: flex; gap: 18px; align-items: center; }
.foot p { margin: 0 0 4px; }
.foot-mark { width: 54px; flex: none; }

/* No scroll-reveal on purpose: URL-categorization scanners render the page
   headlessly and screenshot it, and content that starts hidden can come out
   blank for them. Nothing on this page may start invisible. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .streaks, .hero-mark img { animation: none; }
  .streaks { display: none; }
  *, *::before, *::after { transition: none !important; }
}