/* Lunaro Web Design */

:root {
  /* accent colour: change this one value to recolour the hero highlights */
  --accent: #ffb547;

  --void: #05071a;
  --night: #0b1230;
  --panel: #111a3e;
  --panel-2: #18224d;
  --line: rgba(190, 200, 255, 0.16);
  --text: #f5f7ff;
  --mist: #c5cbe8;
  --violet: #6a4bff;
  --violet-hi: #8268ff;
  --moon: #ffd45c;

  --f-head: "Sora", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, sans-serif;

  /* type scale, ratio 1.25 */
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
  --t-xl: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  --t-hero: clamp(2.4rem, 1.5rem + 3.6vw, 4.1rem);

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(4.5rem, 3rem + 6vw, 8rem);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-head); line-height: 1.15; letter-spacing: -0.02em; margin: 0; font-weight: 600; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { display: none; }
.key { color: var(--moon); }

:focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--text); color: var(--void); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip:focus { top: 12px; }

/* starfield sits behind everything */
.starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--violet); color: #fff;
  font: 700 1rem/1 var(--f-body);
  border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 30px -10px rgba(106, 75, 255, 0.8);
  transition: background-color 0.2s, transform 0.2s;
}
.btn:hover { background: #5a3be8; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; border-color: rgba(245, 247, 255, 0.4); box-shadow: none; }
.btn-ghost:hover { background: rgba(245, 247, 255, 0.08); border-color: var(--text); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 7, 26, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; color: var(--moon); }
.brand-name { font: 600 1.35rem/1 var(--f-head); letter-spacing: -0.02em; }
/* image logo (2x files): fixed size from its width/height attributes, never squeezed by the nav */
.brand-logo { display: block; flex: none; max-width: none; height: auto; }
/* desktop: larger nav logo, header grows just enough to keep 11px above and below it */
@media (min-width: 900px) {
  .site-header .brand-logo { height: 58px; width: auto; }
  .header-inner { min-height: 80px; }
}
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a:not(.btn) { text-decoration: none; font-weight: 600; color: var(--mist); }
.site-nav a:not(.btn):hover { color: var(--text); }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-toggle {
    display: grid; place-items: center; width: 46px; height: 46px;
    background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer;
  }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform 0.2s;
  }
  .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bar::before { top: -6px; }
  .nav-toggle-bar::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--void); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .site-nav .btn { margin-top: 16px; }
}

/* ---------- hero ---------- */
.eyebrow { margin-bottom: 1.75rem; font: 600 0.78rem/1.5 var(--f-body); letter-spacing: 0.22em; color: var(--mist); }
.serif-accent {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.14em; letter-spacing: -0.01em; color: var(--accent);
}
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px;
  font-weight: 600; text-decoration: none; color: var(--text);
}
.text-link span { transition: transform 0.2s; }
.text-link:hover { color: var(--accent); }
.text-link:hover span { transform: translateX(4px); }

/* typography-led hero, about 112vh: label near the top, headline lower-middle, buttons near the bottom.
   Mobile first: everything stacked; from 1101px the subtitle moves to the right of the headline. */
.hero-t { position: relative; display: flex; min-height: 112svh; overflow: hidden; }
.hero-t-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding-block: clamp(80px, 11vh, 112px) calc(12svh + 56px);
}
.hero-t .eyebrow { margin: 0; }
.hero-t-main { margin-top: auto; padding-top: clamp(96px, 14vh, 160px); display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-t h1 {
  grid-column: 1; grid-row: 1;
  font-size: clamp(2rem, 1rem + 3.8vw, 3.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.045em;
}
.hero-t h1 .serif-accent { font-size: 1.1em; letter-spacing: -0.02em; }
.hero-t-sub {
  position: relative; isolation: isolate;
  grid-column: 1; grid-row: 2; justify-self: start; margin-top: 2rem; max-width: 340px;
  font-size: 1.03rem; line-height: 1.45; color: #ddd5cd;
}
.hero-t-sub::before { /* soft dark backdrop so orbit lines and dots fade out behind the text */
  content: ""; position: absolute; z-index: -1; inset: -28px -36px;
  background: radial-gradient(closest-side, rgba(5, 7, 26, 0.85), rgba(5, 7, 26, 0));
}
.hero-t-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 2.75rem; }
.hero-t-note { grid-column: 1 / -1; margin-top: 1.1rem; font-size: 0.78rem; color: var(--mist); opacity: 0.8; }

/* atmosphere: warm glow and wide faint orbit arcs centred just off-screen top-right */
.hero-t-sky { position: absolute; inset: 0; pointer-events: none; }
.t-anchor { position: absolute; top: -6vw; right: -5vw; width: 0; height: 0; }
.t-anchor > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.t-glow {
  width: clamp(560px, 72vw, 1100px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent), transparent);
  opacity: 0.18;
}
.t-ring { border-radius: 50%; border: 1px solid rgba(255, 236, 210, 0.07); }
.t-ring.r1 { width: clamp(620px, 72vw, 1100px); height: clamp(300px, 34vw, 520px); transform: translate(-50%, -50%) rotate(-14deg); border-color: rgba(255, 236, 210, 0.09); }
.t-ring.r2 { width: clamp(900px, 106vw, 1620px); height: clamp(430px, 50vw, 760px); transform: translate(-50%, -50%) rotate(-14deg); }
.t-ring.r3 { width: clamp(1180px, 140vw, 2140px); height: clamp(560px, 66vw, 1000px); transform: translate(-50%, -50%) rotate(-14deg); border-color: rgba(255, 236, 210, 0.05); }

/* small glowing dots riding the orbit lines: two sine waves a quarter-turn apart trace each
   ellipse exactly, inside the (tilted) ring. Three fainter copies a moment behind form the trail. */
.t-dot { position: absolute; inset: 0; opacity: var(--a); pointer-events: none; }
.t-dot .dx, .t-dot .dy { position: absolute; inset: 0; }
.t-dot .dx { animation: dot-x calc(var(--T) / 2) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--o) - var(--T) / 4 + var(--lag, 0s)) infinite alternate; }
.t-dot.ccw .dx { animation-direction: alternate-reverse; }
.t-dot .dy { animation: dot-y calc(var(--T) / 2) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--o) + var(--lag, 0s)) infinite alternate; }
.t-dot .dy::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 1px rgba(255, 181, 71, 0.7), 0 0 14px 3px rgba(255, 181, 71, 0.25);
}
.t-dot .g1 { --lag: calc(var(--T) * 0.0022); }
.t-dot .g2 { --lag: calc(var(--T) * 0.0044); }
.t-dot .g3 { --lag: calc(var(--T) * 0.0066); }
.t-dot .g1 .dy::after { transform: scale(0.8); opacity: 0.45; box-shadow: none; }
.t-dot .g2 .dy::after { transform: scale(0.6); opacity: 0.25; box-shadow: none; }
.t-dot .g3 .dy::after { transform: scale(0.45); opacity: 0.12; box-shadow: none; }
@keyframes dot-x { from { transform: translateX(-50%); } to { transform: translateX(50%); } }
@keyframes dot-y { from { transform: translateY(-50%); } to { transform: translateY(50%); } }

@media (min-width: 961px) and (max-width: 1100px) {
  .hero-t h1 { max-width: 64%; font-size: 4.35vw; }
  .hero-t-cta { margin-top: 2.25rem; }
}
@media (min-width: 1101px) {
  .hero-t-inner { padding-top: clamp(60px, 8.25vh, 84px); }
  .hero-t-main {
    margin-top: 0;
    /* 21vh, but never so high that the subtitle meets the outer orbit (which sits ~30vw down) */
    padding-top: calc(max(clamp(110px, 21vh, 280px), calc(18.2vw - 7px - clamp(60px, 8.25vh, 84px))) - 88px);
    font-size: clamp(2.15rem, 4.35vw, 4.1rem);
    grid-template-columns: minmax(0, 13.8em) minmax(0, 1fr); /* 13.8 headline-ems = 3 lines */
  }
  .hero-t h1 { font-size: 1em; line-height: 1.12; align-self: last baseline; }
  .hero-t-sub {
    grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: last baseline;
    margin-top: 0; max-width: 480px;
    transform: translateY(1.45em); /* 2-line subtitle: its first baseline sits on the last headline line */
  }
  .hero-t-sub::before { inset: -34px -48px; background: radial-gradient(closest-side, rgba(5, 7, 26, 0.96) 55%, rgba(5, 7, 26, 0)); }
  .hero-t-cta { font-size: 1rem; margin-top: calc(clamp(3rem, 7vh, 4.5rem) + 88px); }
}
@media (max-width: 560px) {
  .hero-t { min-height: calc(100svh - 73px); }
  .hero-t-inner { padding-block: 56px 80px; }
  .hero-t-main { padding-top: 64px; }
  .hero-t h1 { letter-spacing: -0.035em; }
  .hero-t-sub { margin-top: 1.75rem; }
  .hero-t-cta { margin-top: 2.5rem; }
  .t-anchor { top: -10vw; right: -14vw; }
  .t-dot.wide-only { display: none; }
}
/* phones and tablets (899px and below): the hero is as tall as its content, label sits right above the headline */
@media (max-width: 899px) {
  .hero-t { min-height: 0; }
  .hero-t-inner { padding-block: clamp(48px, 8vw, 64px) clamp(56px, 9vw, 72px); }
  .hero-t-main { margin-top: 0; padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .t-dot .dx, .t-dot .dy { animation-play-state: paused; }
  .t-dot .dx.g1, .t-dot .dx.g2, .t-dot .dx.g3 { display: none; }
}

/* ---------- audience strip ---------- */
.audience { background: var(--night); border-block: 1px solid var(--line); padding: 2.5rem 0; }
.audience-title { font-size: var(--t-md); margin-bottom: 1.5rem; }
.audience-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.audience-list li { display: flex; gap: 14px; align-items: flex-start; padding: 0 22px; border-left: 1px solid var(--line); }
.audience-list li:first-child { padding-left: 0; border-left: 0; }
.audience-list svg { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.audience-list strong { display: block; font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.audience-list span { color: var(--mist); font-size: 0.95rem; line-height: 1.5; }
.audience-list strong { color: var(--text); }
@media (max-width: 960px) {
  .audience-list { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .audience-list li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .audience-list { grid-template-columns: 1fr; }
  .audience-list li { padding-left: 0; border-left: 0; }
}

/* ---------- why it matters (section after the hero) ---------- */
/* heading on the left; paragraphs on a thin line on the right, each with a dot that lights up near the
   middle of the screen (see main.js) */
.intro2 { position: relative; padding-block: clamp(5rem, 3rem + 6vw, 8.5rem); }
.intro2-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  column-gap: clamp(3rem, 7vw, 7rem); align-items: start;
}
.intro2-title { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.04em; }
.intro2-title .serif-accent { font-size: 1.1em; letter-spacing: -0.02em; }

/* the thin line: same colour and opacity as the hero orbit lines */
.intro2-list { position: relative; padding-left: 36px; }
.intro2-list::before {
  content: ""; position: absolute; left: 4px; top: 0.9rem; bottom: 0.5rem;
  border-left: 1px solid rgba(255, 236, 210, 0.07);
}
.intro2-item { position: relative; font-size: 1.03rem; line-height: 1.7; color: #b8afa7; }
.intro2-item + .intro2-item { margin-top: 2rem; }
.intro2-lead { font-size: 1.25rem; line-height: 1.6; }
.intro2-first { color: var(--text); }

/* one dot per paragraph, on the line, level with its first line of text */
.intro2-item::before {
  content: ""; position: absolute; left: -36px; top: calc(0.8em - 4.5px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); opacity: 0.25;
  transition: opacity 0.5s ease, box-shadow 0.5s ease;
}
.intro2-item.is-active::before,
.intro2.all-lit .intro2-item::before {
  opacity: 1;
  box-shadow: 0 0 8px 2px rgba(255, 181, 71, 0.6), 0 0 22px 6px rgba(255, 181, 71, 0.2);
}

/* divider: three braided strands flowing edge to edge across the hero / section boundary, with a
   few star points and one travelling dot. Shape and position are set in main.js so the group sits
   centred in the empty band between the hero's note line and this section's heading. */
.seam {
  position: absolute; left: 0; width: 100%; top: 0; height: 0; z-index: 0;
  overflow: hidden; pointer-events: none; /* strands run past both edges without causing a scrollbar */
}
.seam-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 3px rgba(255, 181, 71, 0.35));
}
.seam-path { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; opacity: 0.32; }
.seam-path:nth-child(2) { opacity: 0.26; }
.seam-path:nth-child(3) { opacity: 0.22; }

/* star points: size, halo and twinkle timing are set per star in main.js */
.seam-star {
  position: absolute; left: 0; top: 0; width: var(--s, 3px); height: var(--s, 3px);
  margin: calc(var(--s, 3px) / -2) 0 0 calc(var(--s, 3px) / -2); border-radius: 50%;
  background: var(--accent); opacity: var(--hi, 0.8);
  animation: seam-twinkle var(--tw, 7s) ease-in-out var(--td, 0s) infinite alternate;
}
.seam-star.bright { background: #ffe2b0; box-shadow: 0 0 6px 2px rgba(255, 181, 71, 0.55), 0 0 14px 4px rgba(255, 181, 71, 0.16); }
@keyframes seam-twinkle { from { opacity: var(--lo, 0.45); } to { opacity: var(--hi, 0.8); } }

.seam-dot {
  --T: 54s;
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0.8;
  box-shadow: 0 0 6px 1px rgba(255, 181, 71, 0.7), 0 0 14px 3px rgba(255, 181, 71, 0.25);
  offset-rotate: 0deg; offset-anchor: center;
  animation: seam-run var(--T) linear calc(var(--start, -14s) + var(--lag, 0s)) infinite;
}
.seam-dot.g1 { --lag: 0.3s; transform: scale(0.8); opacity: 0.36; box-shadow: none; }
.seam-dot.g2 { --lag: 0.6s; transform: scale(0.6); opacity: 0.2; box-shadow: none; }
.seam-dot.g3 { --lag: 0.9s; transform: scale(0.45); opacity: 0.1; box-shadow: none; }
@keyframes seam-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* lighter dividers between the later sections: two soft waves each, edge to edge, with one dot
   travelling along each. The marker has no height, so the layout doesn't move; main.js centres the
   band in the empty gap between the two sections, draws the waves and pauses the dots off screen. */
.flow { position: relative; height: 0; }
.flow-band {
  position: absolute; left: 0; width: 100%; top: 0; height: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.flow-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 2px rgba(255, 181, 71, 0.25));
}
.flow-path { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; opacity: 0.22; }
.flow-path + .flow-path { opacity: 0.17; }
.flow-dot {
  position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: 0.75;
  box-shadow: 0 0 5px 1px rgba(255, 181, 71, 0.55), 0 0 12px 2px rgba(255, 181, 71, 0.18);
  offset-rotate: 0deg; offset-anchor: center;
  animation: seam-run var(--T, 50s) linear calc(var(--start, 0s) + var(--lag, 0s)) infinite;
}
.flow-dot.rev { animation-direction: reverse; }
.flow-dot.t1 { --lag: 0.35s; transform: scale(0.75); opacity: 0.3; box-shadow: none; }
.flow-dot.t2 { --lag: 0.7s; transform: scale(0.5); opacity: 0.12; box-shadow: none; }
.flow.is-off .flow-dot { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .flow-dot { display: none; }
}

/* gentle fade-in on scroll (only when JS runs and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease var(--d, 0s), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .seam-star { animation: none; }
  .seam-dot { --start: -24s; animation-play-state: paused; }
  .seam-dot.g1, .seam-dot.g2, .seam-dot.g3 { display: none; }
}

@media (max-width: 860px) {
  .intro2-grid { grid-template-columns: minmax(0, 1fr); }
  .intro2-list { margin-top: clamp(2.25rem, 7vw, 3rem); padding-left: 30px; }
  .intro2-item::before { left: -30px; }
  .intro2-lead { font-size: 1.15rem; }
}
@media (max-width: 640px) {
  .seam .wide-only { display: none; }
}

/* ---------- sections ---------- */
.section { padding: var(--section) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head h2 { font-size: var(--t-xl); }
.section-head p { margin-top: 1rem; color: var(--mist); font-size: 1.1rem; }

/* ---------- portfolio, earlier grid layout (still used by the index-*-test pages) ---------- */
.industry { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding: 2.5rem 0; border-top: 1px solid var(--line); }
.industry:last-child { padding-bottom: 0; }
.industry-head h3 { font-size: var(--t-lg); }
.industry-head p { margin-top: 0.75rem; color: var(--mist); font-size: 0.98rem; }
.projects { display: grid; gap: 24px; }
.projects-3 { grid-template-columns: 1fr 1fr; }
.projects-3 .project-lead { grid-column: 1 / -1; }
.projects-2 { grid-template-columns: 1fr 1fr; }
.project { margin: 0; }
.shot {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--panel); border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; transition: transform 0.5s ease; }
.project-lead .shot img, .project-wide .shot img { aspect-ratio: 2.1 / 1; }
.shot:hover img { transform: scale(1.02); }
.project figcaption { margin-top: 14px; color: var(--mist); font-size: 0.95rem; max-width: 60ch; }
.project figcaption strong { display: block; color: var(--text); font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 2px; }
.project-tag {
  display: inline-block; margin-left: 0.5em; padding: 2px 8px 1px; vertical-align: 0.15em;
  border: 1px solid var(--line); border-radius: 999px;
  font: 600 0.7rem/1.5 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mist); white-space: nowrap;
}
@media (max-width: 860px) {
  .industry { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .projects-3, .projects-2 { grid-template-columns: 1fr; }
}

/* ---------- portfolio: big heading + stacking project cards ---------- */
.work-v3 {
  --hdr: 73px;            /* sticky site header: 72px + its 1px border */
  --peek: 16px;           /* how much of each covered card's top edge stays visible */
  --stick: calc(var(--hdr) + 2 * var(--peek) + 12px);
  --orbit-line: rgba(255, 236, 210, 0.09); /* same as the hero orbit lines */
}
@media (min-width: 900px) {
  .work-v3 { --hdr: 81px; }   /* desktop sticky header: 80px + its 1px border */
}

/* heading */
.work-v3 .wv-head { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.work-v3 .wv-head h2 {
  font: 600 clamp(56px, 9vw, 140px)/0.95 var(--f-head); letter-spacing: -0.045em;
  padding-bottom: clamp(1.25rem, 2.4vw, 2rem); border-bottom: 1px solid var(--orbit-line);
}
.work-v3 .wv-head p { max-width: 46ch; margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; color: var(--mist); font-size: 1.1rem; }

/* stack */
.stack { list-style: none; margin: 0 auto; padding: 0; max-width: 1160px; }
.stack-item { position: sticky; top: var(--stick); margin-bottom: clamp(3rem, 14vh, 8rem); }
.stack-item:last-child { margin-bottom: 0; }

.card {
  --d: 0; /* how many cards have slid over this one, 0 → 2 (set by the script below) */
  position: relative; overflow: hidden;
  height: 74svh; min-height: 440px; max-height: 680px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); grid-template-areas: "media text";
  background: var(--night); border: 1px solid var(--orbit-line); border-radius: 14px;
  box-shadow: 0 -20px 40px -26px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 0;
  transform: translateY(calc(min(var(--d), 2) * var(--peek) * -1)) scale(calc(1 - min(var(--d), 1) * 0.12 - max(var(--d) - 1, 0) * 0.04));
  will-change: transform;
}
/* dims the card as it gets covered */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--void); opacity: calc(min(var(--d), 1) * 0.45);
}

/* screenshot, left */
.card-media { grid-area: media; position: relative; isolation: isolate; min-height: 0; padding: clamp(16px, 2vw, 24px); }
.card-media::before {
  content: ""; position: absolute; inset: 16% 12% 8%; z-index: -1; pointer-events: none;
  border-radius: 40px; background: var(--accent); filter: blur(64px);
  opacity: 0.12; transition: opacity 0.6s ease;
}
.card-media:hover::before, .card-media:focus-within::before { opacity: 0.2; }
.work-v3 .shot {
  height: 100%; border-radius: 8px; background: var(--panel);
  box-shadow: 0 0 0 1px var(--orbit-line), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.work-v3 .shot img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.work-v3 .shot:hover img { transform: scale(1.015); }
.work-v3 .shot:focus-visible { outline-offset: 3px; }

/* text column, right: name / description / industry, split by hairlines */
.card-text {
  grid-area: text; min-width: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  border-left: 1px solid var(--orbit-line);
}
.card-text > * { margin: 0; padding: clamp(18px, 2vw, 28px); }
.card-text > * + * { border-top: 1px solid var(--orbit-line); }
.card-name { font-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.25rem); line-height: 1.08; letter-spacing: -0.03em; }
.card-name .project-tag { margin-left: 0.35em; vertical-align: 0.45em; }
.card-desc { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.6; }
.card-group { margin: 0.75rem 0 0; color: var(--mist); font-size: 0.9rem; line-height: 1.55; }
.card-industry { color: var(--mist); font: 600 0.75rem/1.4 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; }

@media (max-width: 860px) {
  .work-v3 { --peek: 10px; --stick: calc(var(--hdr) + 2 * var(--peek) + 8px); }
  .stack-item { margin-bottom: clamp(2rem, 8vh, 4rem); }
  .card {
    height: auto; min-height: 0; max-height: none;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text";
    transform: translateY(calc(min(var(--d), 2) * var(--peek) * -1)) scale(calc(1 - min(var(--d), 1) * 0.06 - max(var(--d) - 1, 0) * 0.03));
  }
  .card-media { padding: 12px 12px 0; }
  .work-v3 .shot img { height: auto; aspect-ratio: 4 / 3; }
  .card-text { border-left: 0; }
  .card-text > * { padding: 16px 18px; }
  .card-media + .card-text, .card-text { border-top: 0; }
  .card-text > :first-child { padding-top: 18px; }
  .card-desc { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-item { position: static; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .card { transform: none !important; will-change: auto; }
  .card::after { display: none; }
  .work-v3 .shot img { transition: none; }
  .work-v3 .shot:hover img { transform: none; }
}

/* lightbox */
.lightbox {
  width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 12px;
  background: var(--panel); color: var(--text); overflow: auto;
}
.lightbox::backdrop { background: rgba(3, 4, 14, 0.85); }
.lightbox img { width: 100%; }
.lightbox-caption { padding: 14px 20px; color: var(--mist); }
.lightbox-close {
  position: sticky; top: 10px; float: right; margin: 10px 10px -56px 0; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(5, 7, 26, 0.85); color: var(--text); font-size: 26px; line-height: 1;
}

/* ---------- case study ---------- */
.case { background: var(--night); border-block: 1px solid var(--line); }
.case-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.case-copy h2 { font-size: var(--t-xl); }
.case-copy > p { margin-top: 1rem; color: var(--mist); font-size: 1.05rem; }
.case-facts { margin: 2rem 0 0; display: grid; gap: 0; }
.case-facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.case-facts dt { color: var(--mist); font-size: 0.95rem; }
.case-facts dd { margin: 0; font-weight: 600; }

.compare { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px #000; }
.compare-pane { position: absolute; inset: 0; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); }
.ph { position: absolute; inset: 0; padding: 6% 7%; display: flex; flex-direction: column; gap: 4%; }
.ph-old { background: #d9d9d9; }
.ph-old .ph-bar { height: 9%; background: #a7a7a7; }
.ph-old .ph-block { height: 26%; background: #bdbdbd; }
.ph-old .ph-text { height: 4%; background: #b3b3b3; width: 90%; }
.ph-old .ph-text.short { width: 55%; }
.ph-new { background: #f7f6f2; }
.ph-new .ph-bar { height: 9%; background: #1f3a5f; border-radius: 6px; }
.ph-new .ph-hero { flex: 0 0 38%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr auto; gap: 8%; column-gap: 6%; }
.ph-new .ph-hero i { background: #c9d6e6; border-radius: 6px; grid-column: 1; }
.ph-new .ph-hero b { grid-column: 2; grid-row: 1 / 4; background: #9fc3e6; border-radius: 8px; }
.ph-new .ph-row { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.ph-new .ph-row i { background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px #e3e0d6; }
.ph-label { position: absolute; bottom: 7%; font: 700 0.8rem/1 var(--f-body); color: #3b3f52; background: rgba(255, 255, 255, 0.8); padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.ph-old .ph-label { left: 6%; }
.ph-new .ph-label { right: 6%; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--text); pointer-events: none; }
.compare-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--violet); color: #fff; font: 700 16px/1 var(--f-body); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.compare-tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; background: rgba(5, 7, 26, 0.85); color: var(--text); pointer-events: none; }
.tag-before { left: 14px; }
.tag-after { right: 14px; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(.compare-range:focus-visible) { outline: 3px solid var(--moon); outline-offset: 4px; }
@media (max-width: 860px) {
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ph-label { font-size: 0.65rem; padding: 4px 6px; }
  .ph-old .ph-label { left: 4%; }
  .ph-new .ph-label { right: 4%; }
}
@media (max-width: 420px) {
  .case-facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- services ---------- */
.service-panel {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.service { padding: clamp(1.75rem, 3vw, 2.5rem); border-left: 1px solid var(--line); }
.service:first-child { border-left: 0; }
.service h3 { font-size: var(--t-lg); }
.service { display: flex; flex-direction: column; }
.service-for { margin-top: 0.5rem; color: var(--mist); }
.price-block { margin-top: 1.5rem; }
.price { font: 700 1.75rem/1.2 var(--f-head); letter-spacing: -0.02em; }
.price span { font: 500 0.95rem var(--f-body); color: var(--mist); letter-spacing: 0; }
.price-sub { margin-top: 0.35rem; color: var(--mist); font-size: 0.95rem; }
.price-note { margin-top: 0.35rem; color: var(--moon); font-size: 0.85rem; font-weight: 600; line-height: 1.5; }
.service-cta { margin-top: auto; align-self: flex-start; }
.service ul + .service-cta { margin-top: 1.75rem; }
/* the highlighted card: amber outline and soft glow, drawn above its neighbours' borders */
.service-highlight {
  position: relative; z-index: 1; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--accent), 0 0 48px -8px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* the three cards share one set of rows (heading, description, price, list, button) so each part lines up across them */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .service-panel { grid-template-rows: repeat(5, auto); }
    .service { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .service h3 { grid-row: 1; }
    .service-for { grid-row: 2; }
    .service .price-block { grid-row: 3; align-self: start; }
    .service ul { grid-row: 4; align-self: start; }
    .service-cta { grid-row: 5; align-self: end; justify-self: start; }
  }
}
.service ul { list-style: none; margin: 1.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.service li { position: relative; padding-left: 26px; }
.service li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em; width: 12px; height: 7px;
  border-left: 2px solid var(--violet-hi); border-bottom: 2px solid var(--violet-hi); transform: rotate(-45deg);
}
@media (max-width: 900px) {
  .service-panel { grid-template-columns: 1fr; }
  .service { border-left: 0; border-top: 1px solid var(--line); }
  .service:first-child { border-top: 0; }
  .service-cta { align-self: stretch; }
}

/* "also available" row: no boxes, columns split by hairlines in the hero orbit-line colour */
.extras { --orbit-line: rgba(255, 236, 210, 0.09); margin-top: 2.5rem; }
.extras-title { font: 600 0.78rem/1.5 var(--f-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); }
.extras-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.extras-list li { padding: 0 var(--gutter); border-left: 1px solid var(--orbit-line); color: #b8afa7; line-height: 1.6; }
.extras-list li:first-child { padding-left: 0; border-left: 0; }
.extras-list li:last-child { padding-right: 0; }
.extras-list strong { display: block; margin-bottom: 0.35rem; color: var(--text); font-weight: 700; }
/* inline-block so the arrow stays right after the text when the sentence wraps on phones */
.extras-link { display: inline-block; margin-top: 0.75rem; padding: 0.6rem 0; color: var(--mist); font-weight: 500; }
.extras-link span { display: inline-block; }
@media (max-width: 900px) {
  .extras-list { grid-template-columns: 1fr; }
  .extras-list li { padding: 1.1rem 0; border-left: 0; border-top: 1px solid var(--orbit-line); }
  .extras-list li:first-child { padding-top: 0; border-top: 0; }
  .extras-list li:last-child { padding-bottom: 0; }
}

.guarantee { display: flex; gap: 22px; align-items: flex-start; margin-top: 2rem; padding: 1.75rem clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius); }
.guarantee svg { flex: none; width: 44px; height: 44px; fill: none; stroke: var(--moon); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.guarantee h3 { font-size: var(--t-md); }
.guarantee p { margin-top: 0.4rem; color: var(--mist); max-width: 62ch; }

/* ---------- process ---------- */
.process { background: var(--night); border-block: 1px solid var(--line); }
.steps { --g: clamp(1.5rem, 4vw, 3rem); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); position: relative; }
.steps::before { /* the path connecting the steps */
  content: ""; position: absolute; top: 24px; left: 24px; right: calc((100% - 2 * var(--g)) / 3 - 24px); height: 1px;
  background: linear-gradient(90deg, var(--violet-hi), rgba(130, 104, 255, 0.15));
}
.steps li { position: relative; }
.step-num {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--void); border: 1px solid var(--violet-hi); font: 600 1.15rem/1 var(--f-head);
}
.steps h3 { margin-top: 1.5rem; font-size: var(--t-md); }
.steps p { margin-top: 0.6rem; color: var(--mist); max-width: 34ch; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 2.25rem; }
  .steps::before { top: 24px; bottom: 24px; left: 24px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--violet-hi), rgba(130, 104, 255, 0.15)); }
  .steps li { padding-left: 72px; }
  .step-num { position: absolute; left: 0; top: 0; }
  .steps h3 { margin-top: 0.6rem; }
}

/* ---------- testimonial ---------- */
.quote { margin: 0; max-width: 860px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 500 clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem)/1.35 var(--f-head); letter-spacing: -0.02em; }
.quote figcaption { margin-top: 1.5rem; color: var(--mist); }
.quote figcaption strong { display: block; color: var(--text); }

/* ---------- contact ---------- */
.contact { background: linear-gradient(180deg, transparent, rgba(11, 18, 48, 0.9) 30%); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-copy h2 { font-size: var(--t-xl); }
.contact-copy > p { margin-top: 1rem; color: var(--mist); font-size: 1.05rem; }
.contact-copy .reply { color: var(--text); font-weight: 600; }
.contact-direct { list-style: none; margin: 2rem 0 0; padding: 0; }
.contact-direct li { display: grid; grid-template-columns: 5rem 1fr; padding: 12px 0; border-top: 1px solid var(--line); }
.contact-direct span { color: var(--mist); }
.contact-direct a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-direct a:hover { text-decoration: underline; }

.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 0.95rem; }
.optional { font-weight: 400; color: var(--mist); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 500 1rem/1.4 var(--f-body); color: var(--text);
  background: var(--void); border: 1px solid rgba(190, 200, 255, 0.5); border-radius: 10px;
  transition: border-color 0.15s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field select option { background: var(--panel); color: var(--text); }
.field ::placeholder { color: #8f97bd; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(190, 200, 255, 0.7); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet-hi); box-shadow: 0 0 0 3px rgba(130, 104, 255, 0.35); }
.form .btn { margin-top: 6px; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 3rem 0; background: var(--void); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
.footer-inner p { margin-top: 0.75rem; color: var(--mist); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.footer-links a { color: var(--mist); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-inner .copyright { grid-column: 1 / -1; font-size: var(--t-sm); }
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- simple pages (thanks / 404) ---------- */
.simple { min-height: 70vh; display: grid; place-items: center; text-align: left; padding: 4rem 0; }
.simple h1 { font-size: var(--t-xl); }
.simple p { margin-top: 1rem; color: var(--mist); font-size: 1.1rem; max-width: 46ch; }
.simple .btn { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shot img { transition: none; }
}