/* ============================================================
   MARIO USHEV — DARK GOTHIC CLI REDESIGN
   Palette: bg #FFFFFF | text #000000 | accent #1B1BFF (fill + ink)
   Fonts: Gambarino (hero) + Space Mono (labels)
   ============================================================ */

/* ---------- Fonts ----------
   Hero headline: Gambarino (Fontshare / Indian Type Foundry), self-hosted.
   Ships ONE style only: Regular 400, no italic, no variable axis. The hero
   must not ask for another weight or a slant, or the browser fakes both.
   License: assets/fonts/Gambarino-LICENSE.txt */
@font-face {
  font-family: 'Gambarino';
  src: url('../fonts/Gambarino-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* ---------- Custom Properties ---------- */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --border: #e4e1da;
  --border-mid: #d3cfc5;
  --text: #000000;
  --text-dim: #000000;
  /* secondary prose */
  --text-muted: #000000;
  /* tertiary labels */
  --accent: #000000;
  --accent-glow: rgba(0, 0, 0, 0.06);
  /* ── Signature accent — the ONE loud color.
     The blue clears 7.9:1 on white, so unlike the old orange it needs no
     separate darker "ink" variant: one value serves both fills and text,
     and white sits on it at 7.9:1. The -ink aliases are kept so existing
     rules keep resolving. ── */
  --signature: #1b1bff;
  /* fill: buttons, underlines, indicators. 7.9:1 on white */
  --signature-hover: #1414cc;
  /* fill hover — 10.5:1 on white */
  --signature-ink: var(--signature);
  /* text on white — same blue, 7.9:1, clears AAA */
  --signature-ink-hover: var(--signature-hover);
  --on-signature: #ffffff;
  /* text sitting ON a blue fill — 7.9:1 */
  --rust: var(--signature);
  /* alias: kept so existing rules resolve */
  --rust-glow: rgba(27, 27, 255, 0.22);
  --prompt: var(--signature-ink);
  --line-h: 1px solid var(--border);
  --font-mono: 'Space Mono', monospace;
  --font-sans: 'Cabinet Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-hero: 'Gambarino', Georgia, 'Times New Roman', serif;
  /* Windows-XP hand cursor, upscaled from the .cur to 42px (CSS can't scale
     a .cur). Hotspot 13,13 = the 10,10 .cur hotspot scaled ×42/32.
     Falls back to the arrow PNG, then the OS arrow. */
  --cursor-xp: url('../images/cursors/xp-link-42.png') 13 13, url('../images/cursors/pointer-xp.png') 2 2, auto;
  /* pressed hand (shrunk toward the fingertip) — shown on mouse-down */
  --cursor-press: url('../images/cursors/xp-link-42-press.png') 13 13, url('../images/cursors/pointer-xp.png') 2 2, auto;
  /* springy release curve: fast down, gentle overshoot back up */
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --radius: 2px;
  /* ── Motion — ease-out curves that settle like a critically damped
     spring: fast start (instant response), gentle landing, no overshoot ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.3s var(--ease-out);
}

/* ---------- Body ---------- */
html {
  /* fallback for no-JS / reduced-motion; Lenis forces this to auto while
     its inertial scrolling is active (see .lenis-smooth below) */
  scroll-behavior: smooth;
}

/* ---------- Lenis smooth-scroll (assets/js/smooth-scroll.js) ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

/* while Lenis is active, disable native smooth-scroll so they don't fight */
html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  background-color: var(--bg);
  color: var(--text);
  cursor: var(--cursor-xp);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Custom Windows-XP-style arrow pointer, enlarged. Applied to everything —
   author `*` beats the UA link/button pointer, and the explicit cursor
   rules below are switched to the same token so nothing overrides it.
   PNG (not SVG) so Safari honours it too. Falls back to the OS arrow. */
*,
*::before,
*::after {
  cursor: var(--cursor-xp);
}

/* mouse-down anywhere swaps to the pressed hand — the click gets weight.
   Placed after the rules above so it wins during :active. */
*:active {
  cursor: var(--cursor-press);
}

/* ---------- Selection ---------- */
::selection {
  background: rgba(27, 27, 255, 0.16);
  color: var(--text);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 2px;
}

/* ---------- Fade-out transition ---------- */
body {
  transition: opacity 0.2s ease;
}

body.fade-out {
  opacity: 0;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(14deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  30% {
    transform: rotate(14deg);
  }

  40% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.wave-emoji {
  display: inline-block;
  animation: wave 2.5s infinite;
  transform-origin: 70% 70%;
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.7s var(--ease-out);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.tech-item:nth-child(1) {
  transition-delay: 0.08s;
}

.tech-item:nth-child(2) {
  transition-delay: 0.16s;
}

.tech-item:nth-child(3) {
  transition-delay: 0.24s;
}

.tech-item:nth-child(4) {
  transition-delay: 0.32s;
}

.tech-item:nth-child(5) {
  transition-delay: 0.40s;
}

.tech-item:nth-child(6) {
  transition-delay: 0.48s;
}

/* ============================================================
   GRID OVERLAY (removed for minimal UI)
   ============================================================ */
/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 max(4vw, 24px);
  height: 72px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(5px) saturate(140%);
}

/* Scroll edge effect — a soft gradient where content meets the floating
   chrome, instead of a hard 1px divider */
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65), transparent);
  pointer-events: none;
}

.logo {
  display: flex;
  gap: 10px;
  align-items: center;
  transition: transform 0.55s var(--ease-out);
  will-change: transform;
}

/* ---- scrolled header: hide nav, glide the logo to centre ----
   toggled by main.js adding .scrolled once the page leaves the top */
.nav {
  transition: opacity 0.4s ease, transform 0.45s var(--ease-out);
}

.header.scrolled .nav {
  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
}

.header.scrolled .logo {
  /* centre the logo in the header: viewport centre, minus the header's
     side padding, minus half the logo's own width */
  transform: translateX(calc(50vw - max(4vw, 24px) - 50%));
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .nav {
    transition: none;
  }
}

.logo-img img {
  width: auto;
  height: 46px;
  /* new logo is a colourful pixel-art mark, not the old mono emblem:
     keep its native aspect and colour (no darkening filter) */
  opacity: 1;
}

.logo a {
  font-family: var(--font-hero);
  font-size: 1.75rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.05em;
  opacity: 0.85;
  transition: opacity var(--transition);
}

.logo a:hover {
  opacity: 1;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 36px;
}

.nav ul li a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  transition: color var(--transition);
  position: relative;
}

.nav ul li a:hover,
.nav ul li a[style*="italic"] {
  color: var(--text);
  font-style: normal !important;
}

/* Remove the inline italic style override cleanly */
.nav ul li a[style] {
  color: var(--text) !important;
  font-style: normal !important;
}

/* Header CTA chip */
.nav ul li.nav-cta a {
  color: var(--signature-ink);
  padding: 7px 14px;
  border-radius: var(--radius);
  text-transform: none;
  transition: border-color var(--transition), color var(--transition);
}

.nav ul li.nav-cta a::before {
  content: none;
}

.nav ul li.nav-cta a:hover {
  color: var(--signature-ink-hover);
  border-color: var(--signature);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

/* ============================================================
   HERO DOT FIELD
   A grid of dots warped by ripples emanating from the centre,
   clipped to a circle behind the headline. Painted by
   assets/js/hero-field.js; this just positions the canvas.
   ============================================================ */
.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.intro {
  display: block;
  width: min(92%, 1680px);
  margin: 0 auto;
  padding: 120px 0;
  background: none;
  border: none;
  border-radius: 0;
}

.intro-content {
  display: contents;
}

/* ---------- Photo (left) ---------- */
.intro-image {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  justify-self: center;
}

/* Corner brackets — CLI aesthetic */
.intro-image::before,
.intro-image::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}

.intro-image::before {
  top: -8px;
  left: -8px;
  border-width: 1px 0 0 1px;
}

.intro-image::after {
  bottom: -8px;
  right: -8px;
  border-width: 0 1px 1px 0;
}

/* Extra corner brackets via wrapper */
.intro-image-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.intro-image-inner::before,
.intro-image-inner::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}

.intro-image-inner::before {
  top: -8px;
  right: -8px;
  border-width: 1px 1px 0 0;
}

.intro-image-inner::after {
  bottom: -8px;
  left: -8px;
  border-width: 0 0 1px 1px;
}

.intro-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  filter: grayscale(100%) contrast(1.05) brightness(0.92);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.intro-image img[src] {
  opacity: 1;
}

/* Photo index — CLI line number vibe */
.intro-image-label {
  position: absolute;
  bottom: -28px;
  left: 0;
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* ---------- Text ---------- */
.intro-text {
  padding-left: 0;
  text-align: center;
}

.intro-text h1 {
  font-family: var(--font-hero);
  /* Gambarino is single-style: 400 upright is the only real cut. To read
     thinner, a hairline stroke in the page colour shaves the glyph edges
     inward (font-weight < 400 would do nothing with a single-weight face). */
  font-weight: 400;
  font-style: normal;
  -webkit-text-stroke: 1.4px var(--bg);
  text-stroke: 1.4px var(--bg);
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: 1.12;
  padding-bottom: 0.06em;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 auto 32px;
  position: relative;
  /* line breaks are explicit in the markup now, so no measure cap */
  max-width: none;
}

.intro-text p {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-dim);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 auto 32px;
  max-width: 46ch;
  /* soft white halo so the copy stays legible over the dot field */
  text-shadow:
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 6px #fff,
    0 0 3px #fff;
}

/* ---------- Hero CTA buttons ---------- */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 48px;
}

.btn-primary,
.btn-ghost {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  /* release springs back with a slight overshoot (the --spring curve) */
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform 0.4s var(--spring),
    box-shadow 0.4s var(--spring);
}

/* Heavy press: the button sinks and its shadow collapses under it, then
   springs back on release. Fast, linear-ish on the way down (80ms), elastic
   on the way up (inherited from the base transition above). */
.btn-primary:active,
.btn-ghost:active,
.contact-cta:active,
.cs-cta-btn:active {
  transform: translateY(2px) scale(0.95);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}

.btn-primary {
  background: var(--signature);
  color: var(--on-signature);
  box-shadow: 0 5px 14px -4px rgba(27, 27, 255, 0.55);
}

.btn-primary:active {
  box-shadow: 0 1px 4px -2px rgba(27, 27, 255, 0.5);
}

.btn-primary:hover {
  background: var(--signature-hover);
}

.btn-ghost {
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--signature);
  color: var(--signature-ink);
}

/* Stat pills */
.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

.hero-stat {
  padding-left: 16px;
}

.hero-stat-num {
  font-size: 1.75rem;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.hero-stat-label {
  font-size: 0.625rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Blinking cursor */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--text-dim);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

/* ============================================================
   SECTION DIVIDER / LABEL
   ============================================================ */
.section-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.section-meta-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.section-meta-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-meta-index {
  font-size: 0.625rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* ============================================================
   TECHNOLOGIES SECTION
   ============================================================ */
.technologies {
  position: relative;
  z-index: 1;
  padding: 100px 60px;
  max-width: 1300px;
  margin: 0 auto;
}

.technologies>h2 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.technologies span {
  color: var(--text);
  font-size: 0.85em;
  opacity: 0.5;
}

.technologies>p {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 48px;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

.tech-item {
  display: flex;
  align-items: center;
  background: var(--bg);
  padding: 24px 20px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  gap: 14px;
  transition: background var(--transition);
  position: relative;
  cursor: var(--cursor-xp);
}

/* Prompt line-number on left */
.tech-item::before {
  content: attr(data-index);
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.5625rem;
  color: var(--text-muted);
  opacity: 0.6;
}

.tech-item:hover {
  background: var(--surface);
  transform: none;
  box-shadow: none;
}

.tech-item img {
  width: 36px;
  height: 36px;
  margin-right: 0;
  background: var(--surface-2);
  padding: 4px;
  object-fit: contain;
  border-radius: var(--radius);
  filter: grayscale(80%) brightness(0.9);
  flex-shrink: 0;
  transition: filter var(--transition);
}

.tech-item:hover img {
  filter: grayscale(0%) brightness(1);
}

.tech-item strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.tech-item p {
  font-size: 0.6875rem;
  color: var(--text-dim);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   PROJECT TABS
   ============================================================ */
input[name="project-tabs"] {
  display: none;
}

.web_applications,
.mobile_applications,
.design_applications {
  display: none;
  width: 100%;
}

#tab-web:checked~.web_applications,
#tab-mobile:checked~.mobile_applications,
#tab-design:checked~.design_applications {
  display: block;
  animation: panel-in 0.45s var(--ease-out);
}

/* Incoming tab panel rises gently into place instead of hard-cutting */
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Tab Buttons ---------- */
.project-category-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(92%, 1680px);
  margin: 0 auto;
  background: var(--bg);
}

.web_applications_btn,
.mobile_applications_btn,
.design_applications_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: var(--cursor-xp);
  padding: 20px 24px;
  position: relative;
  transition: color var(--transition);
}

.web_applications_btn::after,
.mobile_applications_btn::after,
.design_applications_btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--text);
  transition: width 0.3s ease-out;
}

.web_applications_btn:hover,
.mobile_applications_btn:hover,
.design_applications_btn:hover {
  color: var(--text);
  background: none;
}

#tab-web:checked~.project-category-buttons .web_applications_btn,
#tab-mobile:checked~.project-category-buttons .mobile_applications_btn,
#tab-design:checked~.project-category-buttons .design_applications_btn {
  color: var(--text);
  font-weight: 700;
}

#tab-web:checked~.project-category-buttons .web_applications_btn::after,
#tab-mobile:checked~.project-category-buttons .mobile_applications_btn::after,
#tab-design:checked~.project-category-buttons .design_applications_btn::after {
  width: 100%;
}

/* ============================================================
   PROJECTS SECTION
   ============================================================ */
.projects {
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 80px 0;
  width: min(92%, 1680px);
  margin: 0 auto;
}

.projects-section-scroll {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 48px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 96px 48px;
  width: 100%;
  /* how far the right column is dropped against the left (monopo-style
     stagger). transform keeps the grid rows intact, so this is visual
     offset only. */
  --stagger: clamp(80px, 12vw, 180px);
  /* scroll-driven divergence, set per frame by main.js. The two columns
     read it with opposite sign, so they drift apart as the grid scrolls. */
  --p: 0px;
}

/* Scrolling down: left column sinks, right column (dropped by --stagger)
   rises — the two move in opposite directions. */
.project-grid > .project-item:nth-child(odd) {
  transform: translateY(var(--p));
}

.project-grid > .project-item:nth-child(even) {
  transform: translateY(calc(var(--stagger) - var(--p)));
}

/* room reserved for the deepest a column can travel, so nothing clips */
.project-grid > .project-item:nth-child(odd):last-child {
  margin-bottom: var(--stagger);
}

/* one column on narrow screens — no stagger, no parallax */
@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
    gap: 72px;
    --stagger: 0px;
    --p: 0px;
  }

  .project-grid > .project-item:nth-child(odd),
  .project-grid > .project-item:nth-child(even) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-grid {
    --p: 0px;
  }
}

/* ---------- Project Card ---------- */
.project-item {
  background: transparent;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: background var(--transition);
  min-width: 0;
}

.project-item:hover {
  background: transparent;
}

/* Row index */
.project-item::before {
  display: none;
  content: attr(data-index);
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.5625rem;
  color: var(--text-muted);
  z-index: 2;
  opacity: 0.5;
}

.project-item-img-box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  margin-bottom: 0;
}

.project-item-img-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95);
  transition: filter 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  border-radius: 0;
}

/* ---- logo plate ----
   A screenshot fills its frame; a logo has to sit inside one. The box
   becomes a bordered plate with the mark centred and capped, so five
   marks of wildly different proportions read as one set. */
.project-item-img-box.is-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* far shorter than the 16:9 screenshot frame: a logo needs a plate,
     not a billboard with a stamp in the middle */
  aspect-ratio: 5 / 2;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: clamp(28px, 5vw, 64px);
  transition: border-color var(--transition);
}

.project-item-img-box.is-logo img {
  width: auto;
  height: auto;
  /* cap both axes: square emblems and wide wordmarks land at a similar
     optical weight rather than the squares dominating */
  max-width: min(300px, 40%);
  max-height: 72%;
  object-fit: contain;
  filter: none;
}

.project-item:hover .project-item-img-box.is-logo {
  border-color: var(--border-mid);
}

/* the warm hover tint is for photography; leave brand colour alone */
.project-item:hover .project-item-img-box.is-logo img {
  filter: none;
}

/* ---- hover reveal: the old screenshot behind the logo plate ----
   The cover image is stacked full-bleed over the mark and fades in on
   hover, so the plate shows the brand at rest and the site on approach.
   Higher specificity than the capped ".is-logo img" so it fills the box. */
.project-item-img-box.is-logo .project-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}

.project-item:hover .project-item-img-box.is-logo .project-shot {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project-item-img-box.is-logo .project-shot {
    transition: none;
  }
}

/* When JS is driving the halftone reveal (dither.js adds .js-reveal to
   <html>), the flat fade is suppressed: the <img> becomes a hidden pixel
   source and the canvas paints the screenshot in only where the cursor
   passes. Without JS or under reduced motion, the fade above still runs. */
.js-reveal .project-item-img-box.is-logo .project-shot {
  opacity: 0 !important;
}

.reveal-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- monogram plate (Guest House Ioanna: no logo file exists) ----
   The client's supplied brand mark, scaled up from a 38px nav chip to
   sit on the card plate. Uses the site's serif and blue rather than the
   original's Spectral/clay tokens, which this project doesn't carry. */
/* Card presses in slightly the moment it's grabbed */
.project-item-img-box:active img {
  transform: scale(0.995);
  transition: transform 90ms ease-out;
}

.project-item:hover .project-item-img-box img {
  filter: brightness(1.0);
  transform: scale(1.01);
}

.project-item-img-box::after {
  display: none;
}

.project-item-img-box:hover::after {
  display: none;
}

/* ---------- Project heading ---------- */
.project-heading {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.project-item p {
  font-size: 0.625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.project-item h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* ---------- Mobile project overrides ---------- */
/* ---- mobile app-icon plate ----
   These are 1024px square app icons, not screenshots. Show them small and
   centred on a bordered plate (like the logo cards) rather than blown up
   to fill the frame. Rounded iOS-squircle corner + a soft lift. */
.project-mobile .project-item-img-box {
  aspect-ratio: 16 / 9;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color var(--transition);
}

.project-mobile .project-item-img-box img {
  width: clamp(96px, 12vw, 150px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 22.5%;
  box-shadow: 0 10px 28px rgba(20, 20, 40, 0.14);
  transition: transform 0.4s var(--ease-out);
}

.project-mobile .project-item-img-box:hover {
  border-color: var(--border-mid);
}

.project-mobile .project-item-img-box:hover img {
  transform: scale(1.04);
}

.project-mobile .project-item-img-box:hover::after {
  display: none;
}

.project-mobile .project-heading {
  align-items: flex-start;
  text-align: left;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  color: var(--text-dim);
  width: min(92%, 1680px);
  margin: 0 auto;
  padding: 32px 0;
  height: auto;
}

footer p {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

footer a {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0 10px;
  transition: color var(--transition);
}

footer a:hover {
  color: var(--text);
  cursor: var(--cursor-xp);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .header {
    padding: 0 24px;
  }

  .header::before {
    display: none;
  }

  .intro {
    padding: 100px 0 60px;
  }

  .intro-text {
    padding-left: 0;
  }

  .technologies {
    padding: 60px 24px;
  }

  .project-category-buttons {
    flex-wrap: wrap;
  }

  .projects {
    padding: 70px 0;
  }

  footer {
    padding: 28px 0;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .nav ul {
    gap: 20px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }

  .tech-grid {
    grid-template-columns: 1fr 1fr;
  }

  .project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 140px;
    width: 100%;
  }
}

/* On small screens keep the header clean: drop the text links, keep the CTA */
@media (max-width: 600px) {
  .nav ul li:not(.nav-cta) {
    display: none;
  }
}


/* ============================================================
   TERMINAL WINDOW (Team Hero Graphic)
   ============================================================ */
.terminal-window {
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.terminal-dot.red {
  background: #ff5f56;
}

.terminal-dot.yellow {
  background: #ffbd2e;
}

.terminal-dot.green {
  background: #27c93f;
}

.terminal-title {
  font-size: 0.6875rem;
  color: var(--text-dim);
  margin-left: auto;
  letter-spacing: 0.05em;
}

.terminal-body {
  flex: 1;
  padding: 20px 16px;
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--text-dim);
  overflow: hidden;
}

.terminal-body p {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.8;
  text-transform: none;
  letter-spacing: 0;
}

.terminal-spacing {
  margin-top: 12px;
}

.terminal-prompt {
  color: var(--text);
  margin-right: 8px;
}

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 1.2em;
  background: var(--text-dim);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}

/* Override intro-image for terminal */
.intro-image.terminal-window {
  background: var(--surface-2);
  overflow: hidden;
}

.intro-image.terminal-window::before,
.intro-image.terminal-window::after,
.intro-image.terminal-window .intro-image-inner::before,
.intro-image.terminal-window .intro-image-inner::after {
  display: none;
}

.intro-image.terminal-window img {
  display: none;
}

.intro-image-label {
  display: none;
}

/* Adjust hero layout for terminal */
@media (max-width: 900px) {
  .terminal-window {
    max-width: 300px;
    aspect-ratio: 4 / 3;
  }

  .terminal-body {
    font-size: 0.625rem;
    padding: 14px 12px;
  }
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  width: min(92%, 1680px);
  margin: 0 auto;
  scroll-margin-top: 80px;
}

.services>h2 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.services>h2 span {
  color: var(--text);
  font-size: 0.85em;
  opacity: 0.5;
}

.services>p {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 48px;
}

/* Services read as a divided list, not three identical cards: the discipline
   sits in a narrow left column, the detail in a wider right one. Asymmetric,
   and a different layout family from the stat row further down the page. */
.services-list {
  display: grid;
}

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px 60px;
  align-items: start;
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.service-row h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.service-row p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0;
  max-width: 58ch;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 0;
  }
}

/* ---- pillar keyword tags ---- */
.service-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  /* sit under the description, not back under the title */
  grid-column: 2;
}

@media (max-width: 768px) {
  .service-tags {
    grid-column: 1;
  }
}

.service-tags li {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ============================================================
   PROOF / SOCIAL PROOF SECTION  (Move 5)
   ============================================================ */
.proof {
  position: relative;
  z-index: 1;
  padding: 120px 0;
  width: min(92%, 1680px);
  margin: 0 auto;
  scroll-margin-top: 80px;
}

.proof>h2 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.proof>h2 span {
  color: var(--signature-ink);
  opacity: 0.85;
}

.proof>p {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 48px;
}

/* ---- stat row ---- */
/* Editorial hairline stats, left-aligned — matches the case-study metrics
   and the divided services list rather than three centred numbers. */
.proof-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}

.proof-stat {
  background: transparent;
  text-align: center;
  padding: 28px 20px 8px;
  border-top: 1px solid var(--border-mid);
  transition: opacity 0.4s ease, border-top-color var(--transition);
}

/* hovering one stat warms its rule and dims the others (focus, like services) */
.proof-stats:hover .proof-stat:not(:hover) {
  opacity: 0.45;
}

.proof-stat:hover {
  border-top-color: var(--signature);
}

.proof-stat-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--signature-ink);
  /* keeps the row height steady while the number counts up */
  font-variant-numeric: tabular-nums;
}

.proof-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 16px auto 0;
  max-width: 22ch;
}

/* ---- testimonials ---- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.testimonial {
  margin: 0;
  border-left: 2px solid var(--signature);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px 26px;
}

.testimonial p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 18px;
}

.testimonial footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial .t-name {
  font-size: 0.8125rem;
  color: var(--text);
}

.testimonial .t-role {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* placeholder testimonial — replace with a real quote */
.testimonial.is-placeholder {
  border-left-style: dashed;
}

.testimonial.is-placeholder p,
.testimonial.is-placeholder .t-name,
.testimonial.is-placeholder .t-role {
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .proof {
    padding: 80px 0;
  }

  .proof-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 60px;
  }

  .testimonials {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CONTACT / CTA SECTION
   ============================================================ */
.contact {
  position: relative;
  z-index: 1;
  padding: 140px 0;
  width: min(92%, 1680px);
  margin: 0 auto;
  scroll-margin-top: 80px;
}

.contact-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.contact-inner h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.contact-inner h2 span {
  color: var(--text);
  opacity: 0.5;
}

.contact-inner>p {
  margin-top: 0.8em;
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

.contact-cta {
  margin-top: 2em;
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  padding: 16px 28px;
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform 0.35s var(--ease-out);
}

.contact-cta:hover {
  background: var(--surface);
  border-color: var(--text-dim);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.contact-cta:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

/* ---------- Responsive: services + contact ---------- */
@media (max-width: 900px) {
  .services {
    padding: 80px 0;
  }

  .contact {
    padding: 90px 0;
  }
}

/* ============================================================
   ░░  WESTERN / DESERT / GATOR THEME LAYER  ░░
   Hybrid: cowboy-desert-skeleton  ✕  terminal-dark-tech
   ============================================================ */

::selection {
  background: rgba(27, 27, 255, 0.22);
  color: var(--text);
}

::-webkit-scrollbar-thumb {
  background: var(--rust);
}

/* ---------- Western display type ---------- */
.logo a {
  font-size: 1rem;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

.intro-text h1 {
  font-family: var(--font-hero);
  font-weight: 400;
  font-style: normal;
}

.hero-accent {
  display: block;
  /* <em> defaults to italic; Gambarino has no italic cut, so stay upright */
  font-style: normal;
  /* keep the accent at full weight — only the lines above are thinned */
  -webkit-text-stroke: 0;
  text-stroke: 0;
  color: var(--signature);
}

.technologies>h2,
.services>h2,
.contact-inner h2 {
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  margin-bottom: 0;
}

.contact-inner h2 span,
.services>h2 span,
.technologies span {
  color: var(--signature-ink);
  opacity: 0.85;
}

.contact-inner h2.logo-name {
  font-family: var(--font-hero);
  font-style:  normal;
  font-weight: 300;
  font-size: 3em;
  margin-bottom: 1em;
}

/* "idea" set in the hero serif, italic, for a kinetic mixed-font accent.
   Gambarino ships one style, so this italic is browser-synthesised. */
.contact-inner h2 span {
  font-family: var(--font-hero);
  font-style: italic;
  margin-top: 0;
}

/* ---------- Terminal: rust prompt (campfire CLI) ---------- */
.terminal-prompt,
.project-category-buttons::before,
footer::before {
  color: var(--signature-ink);
}

.terminal-title {
  color: var(--signature-ink);
}

/* ---------- Hero stat numbers go gold ---------- */
.hero-stat {
  border-left-color: var(--rust);
}

.hero-stat-num {
  font-size: 1.375rem;
  color: var(--signature-ink);
}

.hero-section .intro {
  position: relative;
  z-index: 1;
}

/* ---------- Tabs: active underline burns amber ---------- */
.web_applications_btn::after,
.mobile_applications_btn::after,
.design_applications_btn::after {
  background: var(--rust);
}

#tab-web:checked~.project-category-buttons .web_applications_btn,
#tab-mobile:checked~.project-category-buttons .mobile_applications_btn,
#tab-design:checked~.project-category-buttons .design_applications_btn {
  color: var(--signature-ink);
}

/* ---------- What we do: focus-list hover ----------
   Hovering one row dims the siblings to spotlight it. The hovered row's
   title indents and grows an arrow, its copy sharpens to full black, its
   keyword tags tint, and a soft blue wash sweeps in from the left. */
.service-row {
  position: relative;
  transition: opacity 0.4s ease, background 0.45s var(--ease-out),
    border-top-color var(--transition);
}

/* fade the rows you're not pointing at */
.services-list:hover .service-row:not(:hover) {
  opacity: 0.38;
}

.service-row:hover {
  border-top-color: var(--signature);
  background: linear-gradient(90deg, rgba(27, 27, 255, 0.06), transparent 60%);
}

/* title: indent + colour, with an arrow that slides in after it */
.service-row h3 {
  display: inline-flex;
  align-items: center;
  transition: transform 0.45s var(--ease-out), color 0.3s ease;
}

.service-row h3::after {
  content: "→";
  margin-left: 12px;
  color: var(--signature);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}

.service-row:hover h3 {
  transform: translateX(12px);
  color: var(--signature-ink);
}

.service-row:hover h3::after {
  opacity: 1;
  transform: translateX(0);
}

/* copy sharpens, tags pick up the accent */
.service-row p,
.service-row .service-tags li {
  transition: color 0.3s ease;
}

.service-row:hover p {
  color: var(--text);
}

.service-row:hover .service-tags li {
  color: var(--signature-ink);
}

@media (prefers-reduced-motion: reduce) {
  .service-row h3,
  .service-row:hover h3 {
    transform: none;
  }
}

/* ---------- Project cards warm up on hover ---------- */
.project-item:hover .project-item-img-box img {
  filter: brightness(1) sepia(0.12) saturate(1.1);
}

.project-item h3 {
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
}

/* ---------- Nav hover ---------- */
.nav ul li a:hover {
  color: var(--signature-ink-hover);
}

/* ---------- Contact emblem + CTA ---------- */
.contact-emblem {
  display: block;
  width: clamp(220px, 32vw, 240px);
  height: auto;
  margin: 0 auto;
  /* filter: drop-shadow(0 0 40px var(--rust-glow)); */
}

.contact-cta {
  color: var(--on-signature);
  background: var(--signature);
  border-color: var(--signature-hover);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.contact-cta:hover {
  background: var(--signature-hover);
  border-color: var(--signature-hover);
  box-shadow: 0 0 28px var(--rust-glow);
  transform: translateY(-1px);
}

/* ---------- Footer link hover ---------- */
footer a:hover {
  color: var(--signature-ink-hover);
}

@media (max-width: 900px) {
  .contact-emblem {
    width: clamp(150px, 50vw, 220px);
  }
}

/* case-study cue on a homepage project tile */
.project-case-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--signature-ink);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--transition), color var(--transition);
}

.project-case-link:hover {
  opacity: 1;
  color: var(--signature-ink-hover);
}

/* ============================================================
   CASE STUDY PAGES — kickflip.design-style wireframe
   hero title → full-bleed media → centered 720px narrative →
   edge-to-edge grids → results → next projects → giant CTA
   ============================================================ */
.cs-main {
  width: 100%;
}

/* hero text block aligns with the site header container */
.cs-top {
  width: min(92%, 1680px);
  margin: 0 auto;
}

/* back link */
.cs-back {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-decoration: none;
  margin: 40px 0 0;
  transition: color var(--transition);
}

.cs-back:hover {
  color: var(--signature-ink);
}

/* ---- hero: huge title + one-line subtitle, nothing else ---- */
.cs-hero {
  padding: clamp(64px, 9vw, 130px) 0 clamp(56px, 8vw, 110px);
}

.cs-title {
  font-size: clamp(2.75rem, 6vw, 4.625rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}

.cs-sub {
  font-size: clamp(1.3rem, 2.2vw, 1.875rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-dim);
  max-width: 44ch;
  margin-top: 26px;
}

/* ---- full-bleed media ---- */
.cs-hero-media {
  margin: 0;
  width: 100%;
}

.cs-hero-media img,
.cs-hero-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cs-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 16px 0 0;
}

.cs-media-grid figure {
  margin: 0;
}

.cs-media-grid img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cs-media-grid .is-wide {
  grid-column: 1 / -1;
}

/* full-page screenshot pair — captures arrive in wildly different aspect
   ratios (a portrait scroll-capture next to a landscape one), and forcing
   them into a shared 4:3 frame letterboxes the tall one down to a stamp.
   Here each keeps its own intrinsic ratio at equal column width and the
   pair is top-aligned, so they read as two documents rather than two
   mismatched crops. */
.cs-media-grid.is-screens {
  align-items: start;
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
  gap: 24px;
}

.cs-media-grid.is-screens img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--border);
}

@media (max-width: 760px) {
  .cs-media-grid.is-screens {
    padding: 0 20px;
    gap: 12px;
  }
}

/* brand diptych — the two colourways side by side across the full
   viewport, meeting edge to edge with no gap so they read as one band
   rather than two floating panels. Each half carries its own ground
   colour, so no border or padding is wanted here. */
.cs-media-grid.is-marks {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* source artwork is 300×100, so a 3:1 frame fills exactly — no crop,
   no letterboxing, at any viewport width */
.cs-media-grid.is-marks img {
  aspect-ratio: 3 / 1;
  object-fit: cover;
  background: none;
  padding: 0;
  border: none;
}

.cs-media-grid .is-wide img {
  aspect-ratio: 16 / 9;
}

/* logos, book covers, tall screenshots — centred on a panel */
img.is-contain {
  object-fit: contain;
  background: var(--surface);
  padding: clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}

/* ---- centred narrative column ---- */
.cs-narrative {
  max-width: 768px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 130px) 24px;
}

.cs-narrative h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0 0 26px;
}

.cs-narrative p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-dim);
  margin-top: 20px;
}

.cs-narrative p strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- pull-quote ----
   One per case study. Restates the sector's economic truth as the line a
   reader would screenshot — it is an argument, not a testimonial. Set in
   the hero serif so it reads as a change of voice rather than a louder
   paragraph, and hung on a signature rule to break the 3-paragraph wall. */
.cs-pullquote {
  margin: clamp(44px, 5vw, 68px) 0;
  padding: 4px 0 4px clamp(20px, 3vw, 32px);
  border-left: 2px solid var(--signature);
}

.cs-pullquote p {
  font-family: var(--font-hero);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}

.cs-pullquote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--signature-ink);
}

/* ---- project scope ---- */
/* scope — same label-on-hairline treatment as the overview block */
.cs-scope {
  margin-top: clamp(36px, 4vw, 52px);
}

.cs-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 40px;
}

.cs-scope-list li {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text);
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.cs-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
  margin-top: 44px;
}

.cs-meta-item .cs-meta-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.cs-meta-item .cs-meta-value {
  font-size: 0.875rem;
  color: var(--text);
}

/* ---- overview: the summary table directly under the hero media.
   Label sits on a hairline rule, value below it — project summary, our
   role, then the client / year / industry / team facts in one row. ---- */
.cs-overview {
  width: min(92%, 1200px);
  margin: clamp(56px, 7vw, 96px) auto 0;
}

.cs-ov-block {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.cs-ov-label {
  display: block;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.cs-ov-lead {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  max-width: 68ch;
}

.cs-ov-role {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.5;
}

.cs-ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 40px;
}

.cs-ov-cell {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.cs-ov-cell p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.cs-ov-cell p strong {
  font-weight: 600;
}

@media (max-width: 640px) {
  .cs-ov-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ---- code / API snippet (for backend-heavy projects) ---- */
.cs-code {
  margin-top: 36px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.cs-code-head {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 10px 16px;
}

.cs-code pre {
  margin: 0;
  padding: 16px;
  font-size: 0.78125rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
}

.cs-code .tok {
  color: var(--signature-ink);
}

/* ---- results: bigger heading, hairline metrics ---- */
.cs-results h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.625rem);
  font-weight: 600;
  line-height: 1.1;
}

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  margin-top: 52px;
}

/* Two honest numbers beat three with a filler count in the middle —
   see the results-grid rules in docs/case-study-guidelines.md. */
.cs-metrics.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cs-metric {
  border-top: 1px solid var(--border-mid);
  padding-top: 24px;
}

.cs-metric-num {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* growth metrics: <div class="cs-metric-num">78% <span class="up">↗</span></div> */
.cs-metric-num .up {
  color: var(--signature-ink);
  font-size: 0.6em;
  vertical-align: 0.25em;
}

.cs-metric-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-top: 12px;
}

/* ---- tags ---- */
.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.cs-tag {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--surface);
}

/* ---- explore more work ---- */
.cs-next {
  width: min(92%, 1680px);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--border);
}

.cs-next-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.cs-next-head h3 {
  font-size: clamp(1.8rem, 3vw, 2.625rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.cs-next-head a {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}

.cs-next-head a:hover {
  color: var(--signature-ink);
}

.cs-next-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.cs-next-card {
  display: block;
  text-decoration: none;
}

.cs-next-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  /* centre logos that don't fill the frame */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* photos/screenshots cover the frame */
.cs-next-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

/* logos sit contained and capped, so a square emblem and a wide wordmark
   read at a similar size instead of one filling the whole card */
.cs-next-media img.is-contain {
  width: auto;
  height: auto;
  max-width: min(210px, 56%);
  max-height: 46%;
  object-fit: contain;
  background: transparent;
  padding: 0;
}

.cs-next-card:hover .cs-next-media img {
  transform: scale(1.03);
}

.cs-next-card:active {
  transform: scale(0.99);
  transition: transform 80ms ease-out;
}

.cs-next-card h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 22px 0 0;
}

.cs-next-meta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-top: 8px;
}

/* ---- giant closing CTA ---- */
.cs-cta {
  border-top: 1px solid var(--border);
  padding: clamp(100px, 14vw, 200px) 24px;
}

.cs-cta-inner {
  width: min(92%, 1280px);
  margin: 0 auto;
}

.cs-cta h2 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}

.cs-cta h2 span {
  color: var(--signature-ink);
}

.cs-cta-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 46ch;
  margin-top: 44px;
}

.cs-cta-btn {
  display: block;
  width: min(560px, 100%);
  text-align: center;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--on-signature);
  background: var(--rust);
  text-decoration: none;
  padding: 24px 32px;
  margin-top: 44px;
  border-radius: var(--radius);
  transition: background var(--transition), transform 0.35s var(--ease-out);
}

.cs-cta-btn:hover {
  background: var(--signature-hover);
}

.cs-cta-btn:active {
  transform: scale(0.98);
  transition: transform 80ms ease-out;
}

@media (max-width: 760px) {
  .cs-hero {
    padding: 56px 0 48px;
  }

  .cs-narrative {
    padding: 64px 20px;
  }

  .cs-media-grid,
  .cs-next-grid {
    grid-template-columns: 1fr;
  }

  .cs-media-grid {
    gap: 12px;
  }

  /* the diptych stays two-up and full-bleed — splitting it into one
     column would break the colourway pairing that is its whole point */
  .cs-media-grid.is-marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }

  .cs-metrics {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-next-head {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   GLOSS PILL CTA BUTTONS
   A fully rounded pill with a lit blue gradient, a soft halo ring
   and a white circular arrow badge at the end. The gloss is two
   stacked layers: a white top-down sheen over a diagonal blue
   sweep, so the top edge catches light and the lower right sinks
   into the deeper brand blue.

   The reference sits on a pale blue field where the halo reads as
   white; on this white page a white ring would be invisible, so
   the halo is tinted with the signature blue instead — same soft
   ring, but it actually shows.

   The arrow is a pseudo-element rather than a character in the
   markup: it needs a circular badge around it, and as decoration
   it has no business being announced by a screen reader. Placed
   here so it overrides the earlier button + contact-cta rules.
   ============================================================ */
.btn-primary,
.contact-cta,
.cs-cta-btn {
  /* the gradient is built from the brand blue, lifted at one end and
     deepened at the other, so the pill stays on-palette */
  --cta-tint: #5f6bff;
  --cta-core: var(--signature);
  --cta-deep: var(--signature-hover);
  --cta-ring: rgba(27, 27, 255, 0.1);
  --cta-sheen: 0.26;
  --cta-badge: 2.3em;      /* diameter of the arrow badge */

  /* The whole fill lives in one custom property because the older per-class
     :hover rules further up set a flat `background` and outrank the plain
     class selector here. Hover only has to restate `background: var(--cta-fill)`
     to win; the stop values it changes re-resolve through this automatically. */
  --cta-fill:
    linear-gradient(180deg, rgba(255, 255, 255, var(--cta-sheen)), rgba(255, 255, 255, 0) 46%),
    linear-gradient(120deg, var(--cta-tint) 0%, var(--cta-core) 52%, var(--cta-deep) 100%);

  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  border: 0;
  border-radius: 999px;
  color: var(--on-signature);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--cta-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),    /* lit top edge */
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),         /* grounded bottom edge */
    0 0 0 5px var(--cta-ring),                  /* the halo */
    0 10px 24px -10px rgba(27, 27, 255, 0.65);  /* cast shadow */
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out),
    background var(--transition);
}

/* the arrow badge — a white disc with a dark glyph, as in the reference */
.btn-primary::after,
.contact-cta::after,
.cs-cta-btn::after {
  content: "";
  flex: 0 0 auto;
  width: var(--cta-badge);
  height: var(--cta-badge);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1020' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 52% no-repeat;
  transition: transform 0.22s var(--ease-out);
}

/* Pull in the trailing padding: the badge already supplies the visual mass on
   that side, so matching the leading padding would leave the pill lopsided. */
.btn-primary,
.contact-cta {
  padding: 14px 14px 14px 26px;
}

/* the closing case-study button is a wide block — centre the label+badge pair */
.cs-cta-btn {
  display: flex;
  justify-content: center;
  padding: 20px 24px 20px 32px;
}

.btn-primary:hover,
.contact-cta:hover,
.cs-cta-btn:hover {
  /* the blooms at the ends deepen and reach further in, so the clear centre
     narrows — the glass leans in rather than lighting up, and stays soft */
  --cta-alpha: 0.72;
  --cta-sheen: 0.38;
  --cta-ring: rgba(27, 27, 255, 0.14);
  background: var(--cta-fill);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 8px var(--cta-ring),
    0 16px 32px -14px rgba(10, 10, 60, 0.45);
}

/* the badge leads the way on hover */
.btn-primary:hover::after,
.contact-cta:hover::after,
.cs-cta-btn:hover::after {
  transform: translateX(3px);
}

.btn-primary:active,
.contact-cta:active,
.cs-cta-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 2px 7px rgba(10, 10, 60, 0.22),     /* pressed into the page */
    0 0 0 5px var(--cta-ring),
    0 4px 10px -6px rgba(10, 10, 60, 0.4);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out;
}

/* the global focus ring is square-cornered — follow the pill instead */
.btn-primary:focus-visible,
.contact-cta:focus-visible,
.cs-cta-btn:focus-visible {
  border-radius: 999px;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .contact-cta,
  .cs-cta-btn {
    transition: background var(--transition), box-shadow var(--transition);
  }
  .btn-primary:hover,
  .contact-cta:hover,
  .cs-cta-btn:hover,
  .btn-primary:active,
  .contact-cta:active,
  .cs-cta-btn:active {
    transform: none;
  }
  .btn-primary:hover::after,
  .contact-cta:hover::after,
  .cs-cta-btn:hover::after {
    transform: none;
  }
}

/* ============================================================
   ACCESSIBILITY — keyboard focus + motion/transparency/contrast
   preferences
   ============================================================ */
a:focus-visible,
button:focus-visible,
label:focus-visible,
input:focus-visible {
  outline: 2px solid var(--signature);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Reduced motion ≠ no feedback — swap movement for gentle fades */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    transform: none;
    transition: opacity 0.4s ease;
  }

  .wave-emoji,
  .cursor,
  .terminal-cursor {
    animation: none;
  }

  #tab-web:checked~.web_applications,
  #tab-mobile:checked~.mobile_applications,
  #tab-design:checked~.design_applications {
    animation: panel-in-fade 0.3s ease;
  }

  .project-item:hover .project-item-img-box img,
  .project-item-img-box:active img,
  .project-mobile .project-item-img-box:hover img,
  .cs-next-card:hover .cs-next-media img,
  .contact-cta:hover,
  .contact-cta:active,
  .btn-primary:active,
  .btn-ghost:active,
  .cs-next-card:active,
  .cs-cta-btn:active {
    transform: none;
  }
}

@keyframes panel-in-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Frostier chrome when translucency is unwelcome */
@media (prefers-reduced-transparency: reduce) {
  .header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-dim: #000000;
    --text-muted: #000000;
    --signature-ink: #0000cc;
    --border-mid: #9a948a;
  }

  .header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--border-mid);
  }
}

/* ============================================================
   PROJECT CARD REVEAL canvas (painted by assets/js/dither.js) is
   positioned above with .reveal-canvas. The old global cursor
   cloud (.dither-layer) has been removed.
   ============================================================ */

/* ============================================================
   INQUIRY PAGE (inquiry/index.html, inquiry/thanks/index.html)
   ------------------------------------------------------------
   Two columns on desktop: the heading sticks on the left while the
   form scrolls on the right. One column below 960px.

   The block reuses .cs-cta-btn for the submit control, so the page
   inherits the case-study vocabulary instead of inventing a second one.
   ============================================================ */
.inq-main {
  width: 100%;
}

.inq-layout {
  width: min(92%, 1680px);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) 0 clamp(96px, 12vw, 180px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ---- left column: sticky heading ---- */
.inq-intro {
  position: sticky;
  top: 120px;
}

.inq-title {
  font-family: var(--font-hero);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}

.inq-title span {
  color: var(--signature-ink);
}

.inq-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 40ch;
  margin-top: 28px;
}

.inq-aside {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 28px;
}

.inq-aside a {
  color: var(--signature-ink);
}

/* ---- right column: the form ---- */
.inq-form {
  border: 0;
}

/* the honeypot must be unreachable, not merely invisible: display:none
   would let some bots skip it, so it is moved off-screen instead */
.inq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inq-group {
  border: 0;
  border-top: 1px solid var(--border);
  padding: clamp(32px, 4vw, 48px) 0 0;
  margin: 0 0 clamp(40px, 5vw, 64px);
}

.inq-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* A <legend> is laid out inside the fieldset's border, so it cuts a notch in
   the group's top rule and leaves a gap under itself. Floating it opts out of
   that special layout and makes it an ordinary block; the rule then runs
   unbroken above it. The next sibling clears the float. */
.inq-legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
}

.inq-legend + * {
  clear: both;
}

.inq-question {
  display: block;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.inq-hint {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 52ch;
  margin-bottom: 24px;
}

/* ---- choice chips (checkbox + radio) ---- */
.inq-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.inq-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition),
    color var(--transition);
}

.inq-choice input {
  accent-color: var(--signature);
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
}

.inq-choice:hover {
  border-color: var(--signature);
}

/* :has gives the whole chip the selected state. Where it is unsupported the
   native control still shows the tick, so nothing is lost. */
.inq-choice:has(input:checked) {
  border-color: var(--signature);
  background: var(--accent-glow);
  color: var(--signature-ink);
}

.inq-choice:has(input:focus-visible) {
  outline: 2px solid var(--signature);
  outline-offset: 3px;
}

/* ---- text fields ---- */
.inq-sublabel {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin: 28px 0 12px;
}

.inq-field {
  display: block;
  margin-bottom: 22px;
}

.inq-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.inq-label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.inq-field input,
.inq-field textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.inq-field textarea {
  resize: vertical;
  min-height: 150px;
}

.inq-field input::placeholder,
.inq-field textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
}

.inq-field input:focus,
.inq-field textarea:focus {
  outline: 0;
  border-color: var(--signature);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* two fields side by side — name and email */
.inq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* ---- submit ---- */
.inq-submit {
  border-top: 1px solid var(--border);
  padding-top: clamp(32px, 4vw, 44px);
}

/* the button is a <button>, not the <a> the rule was written for: give it the
   font it would otherwise inherit from the user agent */
.inq-submit .cs-cta-btn {
  font-family: inherit;
  cursor: pointer;
  font-size: 2rem;
}

.inq-note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: 20px;
  opacity: 0.75;
}

/* ---- thank-you page ---- */
.inq-thanks {
  width: min(92%, 1680px);
  margin: 0 auto;
  padding: clamp(80px, 12vw, 180px) 0 clamp(96px, 14vw, 200px);
  max-width: 900px;
}

.inq-thanks .inq-lead {
  max-width: 52ch;
}

.inq-thanks-links {
  margin-top: 44px;
}

.inq-thanks-links .cs-cta-btn {
  display: inline-flex;
  width: auto;
}

/* ---- responsive ---- */
@media (max-width: 960px) {
  .inq-layout {
    grid-template-columns: 1fr;
    gap: clamp(40px, 7vw, 64px);
  }

  .inq-intro {
    position: static;
  }
}

@media (max-width: 560px) {
  .inq-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .inq-choice {
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inq-choice,
  .inq-field input,
  .inq-field textarea {
    transition: none;
  }
}