/* ==========================================================================
   MEDIA CHORE — style.css
   Built mobile-first (375px), then enhanced for tablet and desktop.

   CONTENTS
   01  Design system (tokens)
   02  Reset + base
   03  Typography
   04  Utilities, placeholders, reveal states
   05  Buttons
   06  Navigation + mobile menu
   07  Hero + interactive laptop
   08  Marquee band
   09  Section furniture
   10  About
   11  Creative services + recent chores (work tiles)
   12  Technology / approach (parallax)
   14  Services list
   16  Stats
   19  FAQ
   20  Contact (form, reach list, map)
   21  Footer
   22  Floating buttons + lightbox
   23  Breakpoints
   24  Reduced motion + print
   25  Portfolio page

   Numbers 13, 15, 17 and 18 are retired: Selected Work folded into 11, and
   Team, Guides and Testimonials were removed from the site. The remaining
   numbers are left as they were so existing notes still line up.
   ========================================================================== */

/* ==========================================================================
   01  DESIGN SYSTEM
   Every colour, space, type size, radius and shadow used on the site is
   declared once here. Change a value here and it updates site-wide.
   ========================================================================== */
:root {
  /* -- Brand colour ------------------------------------------------------ */
  --ink: #000321; /* primary brand navy */
  --ink-deep: #040716; /* secondary */
  --ink-black: #000000; /* alternating section background */
  --ink-raise: #070b23; /* raised panels */
  --accent: #6771be; /* periwinkle — buttons, links, focus */
  --accent-bright: #8f98dd; /* hover / highlights */
  --coral: #ff8488; /* secondary accent, used sparingly */
  --paper: #ffffff;

  /* Text + hairlines derived from white so they sit on any dark surface */
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.68);
  --text-faint: rgba(255, 255, 255, 0.44);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);

  /* -- Spacing scale (4px base) ------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout rhythm */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wrap: 1280px;
  /* Kept generous but trimmed back from 9rem: the old value left long empty
     stretches between sections while scrolling, which read as the page
     failing to load rather than as breathing room. */
  --section-y: clamp(3.75rem, 7vw, 6.5rem);

  /* -- Type scale (fluid) ------------------------------------------------ */
  --font-display: "Instrument Serif", "Times New Roman", Times, serif;
  --font-head: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Figtree", "Canva Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-3xl: clamp(2.75rem, 1.6rem + 5.5vw, 6rem);
  --fs-hero: clamp(3rem, 1rem + 13vw, 9.75rem);

  /* -- Radii ------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* -- Shadows + glows --------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  --sh-3: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
  --glow-accent: 0 20px 60px -20px rgba(103, 113, 190, 0.65);
  --glow-coral: 0 20px 60px -24px rgba(255, 132, 136, 0.5);

  /* -- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.18s;
  --dur-2: 0.38s;
  --dur-3: 0.7s;

  /* -- Effects ----------------------------------------------------------- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --nav-h: 4.25rem;
}

/* ==========================================================================
   02  RESET + BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

/* Lenis takes over scrolling when JS is available */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* The hidden attribute must win over any display rule we set in here */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Film grain sits above the page and never intercepts clicks */
.grain {
  position: fixed;
  inset: -10%;
  z-index: 90;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Scroll progress hairline */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--coral));
}

.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--accent);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   03  TYPOGRAPHY
   Display serif for the big statements, Bebas for section headings,
   Figtree for everything a visitor actually has to read.
   ========================================================================== */
h1,
h2,
h3,
h4 {
  font-weight: 400;
  line-height: 1;
  text-wrap: balance;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.03em;
}

.sec-title {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  letter-spacing: 0.005em;
  line-height: 0.95;
  text-transform: uppercase;
}
.sec-title em {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--accent-bright);
}

h3 {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(255, 132, 136, 0.16);
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.01em;
}

p {
  color: var(--text-soft);
  max-width: 62ch;
}

/* ==========================================================================
   04  UTILITIES, PLACEHOLDERS, REVEAL STATES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--ink {
  background: var(--ink);
}
.section--black {
  background: var(--ink-black);
}

/* Labelled grey placeholder blocks — swap for real media later.
   The label comes from the data-ph attribute in the HTML. */
.ph {
  position: relative;
  display: block;
  background-color: #26262b;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035) 0 10px,
    transparent 10px 20px
  );
  border: 1px solid var(--line);
  overflow: hidden;
}
.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: auto var(--sp-3) var(--sp-3) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ph--16x9 {
  aspect-ratio: 16 / 9;
}
.ph--4x3 {
  aspect-ratio: 4 / 3;
}
.ph--4x5 {
  aspect-ratio: 4 / 5;
}
.ph--9x16 {
  aspect-ratio: 9 / 16;
}

.flag {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 0.15em 0.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

/* Scroll reveals are set up entirely in script.js: anything already on
   screen is shown at once, and only off-screen elements are hidden before
   they animate in. Nothing is hidden by CSS, so a failed script or a deep
   link straight to a section can never leave the page blank. */
html.anim-on [data-reveal] {
  backface-visibility: hidden; /* steadier text while opacity animates */
}

/* ==========================================================================
   05  BUTTONS
   ========================================================================== */
.btn {
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.btn i,
.btn svg {
  width: 1em;
  height: 1em;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* Solid: accent fill with a coral wash that wipes in on hover */
.btn--solid {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--glow-accent);
}
.btn--solid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--coral), var(--accent-bright));
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.btn--solid:hover::before {
  opacity: 1;
}
.btn--solid:hover {
  box-shadow: var(--glow-coral);
}
.btn--solid:hover i,
.btn--solid:hover svg {
  transform: translate(2px, 2px);
}

/* Line: hairline outline that fills from the bottom */
.btn--line {
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn--line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-out);
}
.btn--line:hover {
  color: var(--ink);
  border-color: var(--paper);
}
.btn--line:hover::before {
  transform: translateY(0);
}

/* Ghost: quiet tertiary action */
.btn--ghost {
  border: 1px solid var(--line);
  color: var(--text-soft);
  background: var(--surface);
}
.btn--ghost:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.btn--sm {
  --btn-pad-y: 0.6rem;
  --btn-pad-x: 1rem;
  font-size: var(--fs-xs);
}
.btn--lg {
  --btn-pad-y: 1.05rem;
  --btn-pad-x: 1.75rem;
  font-size: var(--fs-sm);
}
.btn--block {
  width: 100%;
}

/* ==========================================================================
   06  NAVIGATION
   Transparent over the hero, then a blurred, bordered bar on scroll.
   ========================================================================== */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out),
    backdrop-filter var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  transition: padding var(--dur-3) var(--ease-out);
}

/* Scrolled state */
.site-nav.is-stuck {
  background: rgba(0, 3, 33, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-nav.is-stuck .site-nav__inner {
  padding-block: var(--sp-2);
}
/* Hidden while scrolling down, back on scroll up */
.site-nav.is-hidden {
  transform: translateY(-105%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
/* The full white-and-blue lockup is a wide mark, so it is sized by height and
   left to find its own width. */
.brand__mark {
  width: auto;
  height: 2.5rem;
  max-width: min(58vw, 15rem);
  object-fit: contain;
  object-position: left center;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.brand:hover .brand__mark {
  transform: scale(1.03);
  opacity: 0.92;
}

.site-nav__links {
  display: none;
  gap: clamp(0.75rem, 1.6vw, 1.6rem);
}
.site-nav__links a {
  position: relative;
  padding-block: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  transition: color var(--dur-2) var(--ease-out);
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.site-nav__links a:hover,
.site-nav__links a.is-active {
  color: var(--text);
}
.site-nav__links a:hover::after,
.site-nav__links a.is-active::after {
  transform: scaleX(1);
}

.site-nav__actions {
  display: none;
  align-items: center;
  gap: var(--sp-2);
}

/* Hamburger: two lines that cross into an X */
.burger {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.burger:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.burger__box {
  display: grid;
  gap: 5px;
  width: 18px;
}
.burger__box span {
  display: block;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) linear;
}
.burger[aria-expanded="true"] .burger__box span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__box span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Mobile menu sheet */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
  padding: calc(var(--nav-h) + var(--sp-6)) var(--gutter) var(--sp-6);
  background: radial-gradient(120% 90% at 80% 0%, #0b1136 0%, var(--ink) 55%, #000 100%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.menu[hidden] {
  display: none;
}
.menu.is-open {
  opacity: 1;
}
.menu__links {
  display: grid;
  gap: 0.35rem;
}
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: 0.35rem;
  font-family: var(--font-head);
  font-size: clamp(2rem, 11vw, 3.25rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.menu__links a:hover {
  color: var(--accent-bright);
  transform: translateX(8px);
}
.menu__no {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--coral);
}
.menu__foot {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.menu__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* ==========================================================================
   07  HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + var(--sp-8)) var(--gutter) var(--sp-9);
  overflow: hidden;
  isolation: isolate;
}

/* Layered background: three soft mesh blobs, a grid, and a vignette */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
}
.hero__mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
.hero__mesh--a {
  width: 70vw;
  height: 70vw;
  top: -18vw;
  left: -22vw;
  background: radial-gradient(circle, rgba(103, 113, 190, 0.85), transparent 65%);
  animation: drift 22s var(--ease-inout) infinite alternate;
}
.hero__mesh--b {
  width: 60vw;
  height: 60vw;
  bottom: -20vw;
  right: -18vw;
  background: radial-gradient(circle, rgba(255, 132, 136, 0.55), transparent 65%);
  animation: drift 28s var(--ease-inout) infinite alternate-reverse;
}
.hero__mesh--c {
  width: 45vw;
  height: 45vw;
  top: 32%;
  left: 45%;
  background: radial-gradient(circle, rgba(58, 72, 165, 0.6), transparent 70%);
  animation: drift 34s var(--ease-inout) infinite alternate;
}
@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(4vw, -3vw, 0) scale(1.12);
  }
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 20%, #000 20%, transparent 75%);
}
.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  gap: var(--sp-8);
}

.hero__copy > * + * {
  margin-top: var(--sp-5);
}
.hero__title {
  margin-top: var(--sp-4);
}
/* The mask that makes the word-reveal work is `overflow: hidden`, so the box
   has to be deep enough to clear the descenders of the display serif — the
   "y" in "your" was being cut off. Pad the box down past the baseline, then
   pull the same amount back with a negative margin so the lines keep their
   original rhythm. */
.hero__title .line {
  display: block;
  overflow: hidden; /* masks the word reveal */
  padding-bottom: 0.26em;
  margin-bottom: -0.2em;
}
/* The last line has nothing beneath it to collapse into, so give it back the
   space rather than letting the CTA ride up into the descenders. */
.hero__title .line:last-child {
  margin-bottom: 0;
}
.hero__title .word {
  display: inline-block;
}
.hero__title .word--accent {
  font-style: italic;
  color: var(--accent-bright);
  padding-right: 0.06em;
}
.hero__sub {
  font-size: var(--fs-md);
  max-width: 34ch;
  color: var(--text-soft);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.hero__facts {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero__facts dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}
.hero__facts dd {
  font-family: var(--font-head);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.scroll-cue {
  display: none;
  position: absolute;
  left: var(--gutter);
  bottom: var(--sp-5);
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.scroll-cue span {
  position: relative;
  width: 1px;
  height: 48px;
  background: var(--line-strong);
  overflow: hidden;
}
.scroll-cue span::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--coral);
  animation: cue 2.4s var(--ease-inout) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(-110%);
  }
  100% {
    transform: translateY(260%);
  }
}
.scroll-cue:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   THE LAPTOP
   A CSS-only laptop. JS tilts it toward the cursor and ticks off the
   chore list. Container queries keep the on-screen UI in proportion.
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  perspective: 1400px;
  display: grid;
  justify-items: center;
}
.stage__glow {
  position: absolute;
  inset: 12% -6% -14% -6%;
  background: radial-gradient(60% 55% at 50% 55%, rgba(103, 113, 190, 0.45), transparent 70%);
  filter: blur(28px);
  z-index: -1;
}
.stage__caption {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  max-width: none;
}

.laptop {
  width: min(100%, 620px);
  transform-style: preserve-3d;
  will-change: transform;
  animation: float 9s var(--ease-inout) infinite alternate;
}
@keyframes float {
  from {
    transform: translate3d(0, -6px, 0);
  }
  to {
    transform: translate3d(0, 10px, 0);
  }
}
/* While the cursor drives the tilt we stop the idle float to avoid fighting */
.stage.is-tilting .laptop {
  animation: none;
}

.laptop__lid {
  padding: 0.5rem 0.5rem 0.55rem;
  border-radius: 0.9rem 0.9rem 0.35rem 0.35rem;
  background: linear-gradient(160deg, #2a3058 0%, #10142c 45%, #070a1b 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.laptop__screen {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 0.5rem;
  overflow: hidden;
  background: radial-gradient(130% 100% at 10% 0%, #101736 0%, #05081a 60%, #02030c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* Screen sheen */
.laptop__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, transparent 38%);
  pointer-events: none;
}
.laptop__hinge {
  height: 0.35rem;
  margin-inline: 8%;
  border-radius: 0 0 0.4rem 0.4rem;
  background: linear-gradient(#1a1f3d, #0a0d1f);
}
.laptop__base {
  position: relative;
  height: 0.8rem;
  width: 107%;
  margin-inline: -3.5%;
  border-radius: 0.2rem 0.2rem 0.75rem 0.75rem;
  background: linear-gradient(#161b38 0%, #111531 40%, #070a1a 100%);
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.9);
}
.laptop__base span {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 0.2rem;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  background: rgba(0, 0, 0, 0.55);
}

/* On-screen chore app */
.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Fallback for browsers without container queries, then the cq version */
  gap: 0.45rem;
  padding: 0.8rem;
  font-size: 0.75rem;
  gap: 1.7cqi;
  padding: 3.2cqi;
  font-size: 3.2cqi;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: 2cqi;
  padding-bottom: 1.7cqi;
  border-bottom: 1px solid var(--line);
}
.app__dots {
  display: flex;
  gap: 1.2cqi;
}
.app__dots i {
  width: 1.8cqi;
  height: 1.8cqi;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.app__dots i:first-child {
  background: var(--coral);
}
.app__title {
  font-size: 2.5cqi;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.app__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 1cqi;
  line-height: 1.3;
  padding: 0.5cqi 1.6cqi;
  border-radius: var(--r-pill);
  background: rgba(103, 113, 190, 0.2);
  border: 1px solid rgba(103, 113, 190, 0.45);
  font-size: 2.2cqi;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.app__lead {
  font-family: var(--font-head);
  font-size: 3.2cqi;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  max-width: none;
}
.chores {
  display: grid;
  gap: 1.1cqi;
  flex: 1;
  min-height: 0; /* lets the list shrink instead of pushing the footer out */
  overflow: hidden;
  align-content: start;
}
.chore {
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  width: 100%;
  padding: 1.3cqi 2cqi;
  border-radius: 1.5cqi;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.chore:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateX(0.6cqi);
}
.chore__box {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4.2cqi;
  height: 4.2cqi;
  border-radius: 1.1cqi;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.chore__box i,
.chore__box svg {
  width: 3cqi;
  height: 3cqi;
  stroke-width: 3.2;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-1) linear, transform var(--dur-2) var(--ease-out);
}
.chore__text {
  font-size: 2.9cqi;
  line-height: 1.3;
  color: var(--text);
  transition: color var(--dur-2) var(--ease-out);
}
.chore__tag {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 2cqi;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Checked-off state */
.chore.is-done .chore__box {
  background: var(--accent);
  border-color: var(--accent);
}
.chore.is-done .chore__box i,
.chore.is-done .chore__box svg {
  opacity: 1;
  transform: scale(1);
}
.chore.is-done .chore__text {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 0.35cqi;
}
.app__foot {
  display: flex;
  align-items: center;
  gap: 2.4cqi;
  padding-top: 1.7cqi;
  border-top: 1px solid var(--line);
}
.meter {
  flex: 1;
  height: 1.2cqi;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--coral));
  transition: width 0.6s var(--ease-out);
}
.app__status {
  flex: 0 0 auto;
  line-height: 1.3;
  font-size: 2.2cqi;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
  max-width: none;
}

/* On a phone the laptop is small, so the interface inside it needs a little
   more size to stay readable. Sizes are relative to the screen itself. */
@container (max-width: 430px) {
  .app {
    font-size: 4cqi;
    padding: 3.6cqi;
  }
  .app__lead {
    display: none;
  }
  .app__title {
    font-size: 3cqi;
  }
  .app__badge {
    font-size: 2.5cqi;
  }
  .chore__text {
    font-size: 3.3cqi;
  }
  .chore__tag {
    font-size: 2.5cqi;
  }
  .app__status {
    font-size: 2.7cqi;
  }
}

/* Floating capability chips.
   The bottom inset keeps them clear of the caption underneath, and they are
   anchored to the four corners so they never sit on top of the chore list. */
.chips {
  position: absolute;
  inset: 0 0 3.25rem 0;
  pointer-events: none;
}
.chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(4, 7, 22, 0.82);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
  /* The labels are words now, not one-word tags, so the type and the tracking
     both scale down on narrow screens to keep two chips clear of each other. */
  font-size: clamp(0.5rem, 0.33rem + 0.72vw, 0.6875rem);
  font-weight: 600;
  letter-spacing: clamp(0.04em, 0.02em + 0.14vw, 0.12em);
  text-transform: uppercase;
  box-shadow: var(--sh-2);
  white-space: nowrap;
}
.chip i,
.chip svg {
  width: 0.9em;
  height: 0.9em;
  color: var(--coral);
}
.chip--1 {
  top: -7%;
  left: -2%;
  animation: bob 7s var(--ease-inout) infinite alternate;
}
.chip--2 {
  top: -7%;
  right: -2%;
  animation: bob 9s var(--ease-inout) infinite alternate-reverse;
}
.chip--3 {
  bottom: -4%;
  left: -1%;
  animation: bob 8s var(--ease-inout) infinite alternate-reverse;
}
.chip--4 {
  bottom: -4%;
  right: -1%;
  animation: bob 10s var(--ease-inout) infinite alternate;
}
@keyframes bob {
  from {
    transform: translateY(-6px);
  }
  to {
    transform: translateY(8px);
  }
}

/* ==========================================================================
   08  MARQUEE BAND
   ========================================================================== */
.band {
  border-block: 1px solid var(--line);
  background: var(--ink-deep);
  padding-block: var(--sp-4);
  overflow: hidden;
}
.band__track {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: max-content;
  animation: slide 38s linear infinite;
}
.band__track span {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 2.1rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
}
.band__star {
  color: var(--coral);
  font-size: 1rem !important;
}
@keyframes slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ==========================================================================
   09  SECTION FURNITURE
   ========================================================================== */
.sec-head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  max-width: 46ch;
}
.sec-head--split {
  max-width: none;
}
.sec-note {
  font-size: var(--fs-base);
  color: var(--text-soft);
  max-width: 44ch;
}
.sec-note--wide {
  max-width: 62ch;
}

/* ==========================================================================
   10  ABOUT
   ========================================================================== */
.about__grid {
  display: grid;
  gap: var(--sp-8);
}
.about__copy > * + * {
  margin-top: var(--sp-4);
}
.pull {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--coral);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 28ch;
}

.pillars {
  display: grid;
  gap: var(--sp-4);
}
.pillars li {
  position: relative;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surface), transparent 70%);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}
.pillars li::before {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.pillars li:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  background: linear-gradient(160deg, var(--surface-2), transparent 70%);
}
.pillars li:hover::before {
  transform: scaleX(1);
}
.pillars i,
.pillars svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-bright);
  margin-bottom: var(--sp-3);
}
.pillars h3 {
  font-size: 1.15rem;
  margin-bottom: var(--sp-2);
}
.pillars p {
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ==========================================================================
   11  CREATIVE SERVICES + RECENT CHORES
   The work tile (.vtile) is shared with the portfolio page. Its media box
   takes the aspect ratio of the original piece — vertical reels stay
   vertical, landscape cuts stay landscape — so nothing is cropped to fit a
   grid that was never the point.
   ========================================================================== */

/* Service pills: the categories the portfolio is filtered by */
.svc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.svc-pills a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-soft);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.svc-pills i,
.svc-pills svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent-bright);
}
.svc-pills a:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text);
  transform: translateY(-2px);
}

/* --- The work tile ------------------------------------------------------ */
.vtile {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vtile__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #151a30, #060916);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.vtile:hover .vtile__media {
  border-color: var(--line-strong);
  box-shadow: var(--sh-3);
}
.vtile__media--9x16 {
  aspect-ratio: 9 / 16;
}
.vtile__media--16x9 {
  aspect-ratio: 16 / 9;
}
.vtile__media--4x5 {
  aspect-ratio: 4 / 5;
}
.vtile__media--1x1 {
  aspect-ratio: 1 / 1;
}
.vtile__media > img,
.vtile__media > video,
.vtile__media > iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}
/* Graphics are artwork, not photography — show the whole composition */
.vtile--contain .vtile__media > img {
  object-fit: contain;
  background: var(--ink-deep);
}

/* The cover sits over the media until the visitor asks for the video. It is
   what keeps a large source file from downloading on page load. */
.vtile__cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: radial-gradient(120% 90% at 50% 40%, rgba(103, 113, 190, 0.28), transparent 70%),
    linear-gradient(170deg, #0b1030, #04061a);
  transition: opacity var(--dur-2) var(--ease-out);
}
/* Over a real poster frame, the cover only needs to darken it */
.vtile__poster + .vtile__cover {
  background: linear-gradient(180deg, rgba(0, 3, 33, 0.25), rgba(0, 3, 33, 0.72));
}
.vtile__cover[hidden] {
  display: none;
}
.vtile__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  transform: translate(-50%, -62%);
  opacity: 0.16;
}
.vtile__mark img {
  width: 100%;
  height: auto;
  display: block;
}
.vtile__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  color: var(--text);
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.vtile__play i,
.vtile__play svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.15rem; /* optically centres the triangle */
  fill: currentColor;
}
.vtile__cover:hover .vtile__play,
.vtile__cover:focus-visible .vtile__play {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}

.vtile__body {
  display: grid;
  gap: 0.3rem;
  padding-top: var(--sp-4);
}
.vtile__kind {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}
.vtile__name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.vtile__src {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-bright);
  transition: gap var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.vtile__src i,
.vtile__src svg {
  width: 0.9rem;
  height: 0.9rem;
}
.vtile__src:hover {
  gap: 0.6rem;
  color: var(--text);
}

/* A whole tile can also be a link — used for the portfolio teasers, where
   the tile navigates instead of playing. */
.vtile--link .vtile__media {
  cursor: pointer;
}
.vtile--link .vtile__media > img {
  transition: transform 1.1s var(--ease-out), filter var(--dur-3) var(--ease-out);
  filter: saturate(0.85) contrast(1.05);
}
.vtile--link:hover .vtile__media > img {
  transform: scale(1.05);
  filter: saturate(1) contrast(1.05);
}
.vtile--link:hover .vtile__src {
  gap: 0.6rem;
  color: var(--text);
}

/* The featured landscape piece sits full width above the mixed row */
.vtile--feature {
  margin-bottom: var(--sp-6);
}
.vtile--feature .vtile__name {
  font-size: var(--fs-lg);
}

/* Mixed-ratio row. align-items:start lets each tile keep its own height
   instead of everything being stretched to the tallest. */
.showcase {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.creative__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}

/* ==========================================================================
   12  TECHNOLOGY / APPROACH
   ========================================================================== */
.tech__grid {
  display: grid;
  gap: var(--sp-8);
}
.tech__visual {
  position: relative;
  aspect-ratio: 4 / 4.2;
  transform-style: preserve-3d;
}
.pfx {
  position: absolute;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-3);
  will-change: transform;
  transition: transform 0.7s var(--ease-out);
}
.pfx img {
  width: 100%;
  height: 100%;
  filter: saturate(0.8) contrast(1.05);
}
/* Slight rotations read as a deliberate collage rather than a pile-up.
   GSAP keeps these when it adds its own x/y offsets. */
.pfx--back {
  top: 0;
  left: 4%;
  width: 60%;
  aspect-ratio: 4 / 5;
  rotate: -2.5deg;
}
.pfx--mid {
  top: 22%;
  right: 0;
  width: 50%;
  aspect-ratio: 4 / 5;
  rotate: 2deg;
}
.pfx--front {
  bottom: 0;
  left: 2%;
  width: 64%;
  aspect-ratio: 16 / 10;
  rotate: -1deg;
}
.tech__ring {
  position: absolute;
  top: 8%;
  right: 4%;
  width: 34%;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 132, 136, 0.22), transparent 60%);
}

.tech__copy > * + * {
  margin-top: var(--sp-6);
}
.stack {
  display: grid;
  gap: 0;
}
.stack li {
  display: flex;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
  transition: background var(--dur-2) var(--ease-out), padding-left var(--dur-2) var(--ease-out);
}
.stack li:last-child {
  border-bottom: 1px solid var(--line);
}
.stack li:hover {
  background: var(--surface);
  padding-left: var(--sp-3);
}
.stack i,
.stack svg {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.2rem;
  color: var(--accent-bright);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.stack li:hover i,
.stack li:hover svg {
  color: var(--coral);
  transform: scale(1.12);
}
.stack h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.stack p {
  font-size: var(--fs-sm);
  line-height: 1.6;
}
/* ==========================================================================
   14  SERVICES LIST
   ========================================================================== */
.svc {
  border-top: 1px solid var(--line);
}
.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: padding-inline var(--dur-3) var(--ease-out);
}
/* Accent wash wipes across the row on hover */
.svc__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(103, 113, 190, 0.18), transparent 70%);
  transform: translateX(-101%);
  transition: transform var(--dur-3) var(--ease-out);
}
.svc__row:hover::before {
  transform: translateX(0);
}
.svc__row:hover {
  padding-inline: var(--sp-3);
}
.svc__no {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  padding-top: 0.35rem;
}
.svc__main h3 {
  font-size: clamp(1.35rem, 5vw, 2rem);
  margin-bottom: var(--sp-2);
  transition: color var(--dur-2) var(--ease-out);
}
.svc__row:hover .svc__main h3 {
  color: var(--accent-bright);
}
.svc__main p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 54ch;
}
.svc__icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--text-faint);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.svc__row:hover .svc__icon {
  color: var(--coral);
  transform: translate(3px, -3px);
}
.svc__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* ==========================================================================
   16  STATS
   ========================================================================== */
.stats__grid {
  display: grid;
  gap: var(--sp-6);
}
.stat {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-strong);
}
.stat__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.stat__num {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 14vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-block: var(--sp-2) var(--sp-2);
}
.stat__suf {
  font-size: 0.45em;
  color: var(--accent-bright);
}
.stat p {
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

/* ==========================================================================
   19  FAQ
   ========================================================================== */
.faq__list {
  border-top: 1px solid var(--line);
}
.qa {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-2) var(--ease-out);
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary h3 {
  font-size: clamp(1.1rem, 4.4vw, 1.5rem);
  transition: color var(--dur-2) var(--ease-out);
}
.qa summary:hover h3 {
  color: var(--accent-bright);
}
.qa summary i,
.qa summary svg {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--coral);
  transition: transform var(--dur-2) var(--ease-out);
}
.qa[open] summary i,
.qa[open] summary svg {
  transform: rotate(45deg);
}
.qa p {
  padding-bottom: var(--sp-5);
  font-size: var(--fs-base);
  max-width: 68ch;
}

/* ==========================================================================
   20  CONTACT
   ========================================================================== */
.contact__grid {
  display: grid;
  gap: var(--sp-8);
}

/* --- Custom form fields: floating labels, no default browser chrome --- */
.form {
  display: grid;
  gap: var(--sp-4);
}
.field {
  position: relative;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 1.5rem 1rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.field textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}
.field label {
  position: absolute;
  top: 1.05rem;
  left: 1rem;
  font-size: var(--fs-base);
  color: var(--text-faint);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(103, 113, 190, 0.16);
}
/* Label floats up when the field is focused or filled */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
  transform: translateY(-0.65rem) scale(0.72);
  color: var(--accent-bright);
}
.field--select select {
  appearance: none;
  cursor: pointer;
  padding-top: 1.5rem;
}
.field--select label {
  transform: translateY(-0.65rem) scale(0.72);
  color: var(--accent-bright);
}
.field--select i,
.field--select svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--text-faint);
  pointer-events: none;
}
.field--select option {
  background: var(--ink-deep);
  color: var(--text);
}
.field__err {
  display: none;
  padding-top: 0.35rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}
.field.has-error input,
.field.has-error textarea {
  border-color: var(--coral);
}
.field.has-error .field__err {
  display: block;
}

/* Multi-select chips */
.chipset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.chipset legend {
  padding-inline: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pick span {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.pick span:hover {
  color: var(--text);
  border-color: var(--paper);
  transform: translateY(-1px);
}
.pick input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pick input:focus-visible + span {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__fine {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.form__fine.is-error {
  color: var(--coral);
}

/* Thank-you panel */
.thanks {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  padding: var(--sp-6);
  border: 1px solid var(--accent);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(103, 113, 190, 0.18), transparent 70%);
}
.thanks[hidden] {
  display: none;
}
.thanks i,
.thanks svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent-bright);
}
.thanks h3 {
  font-size: var(--fs-xl);
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -0.02em;
}
.thanks__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Direct contact list */
.reach__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.reach__list li {
  border-bottom: 1px solid var(--line);
}
.reach__list a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-4);
  transition: padding-left var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.reach__list a:hover {
  padding-left: var(--sp-3);
  background: var(--surface);
}
.reach__list i,
.reach__list svg {
  grid-row: span 2;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-bright);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.reach__list a:hover i,
.reach__list a:hover svg {
  color: var(--coral);
  transform: scale(1.1);
}
.reach__k {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.reach__v {
  font-family: var(--font-head);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.map {
  margin-top: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.map iframe {
  width: 100%;
  height: clamp(220px, 42vw, 320px);
  border: 0;
  /* Turns the bright Google map into a neutral dark one */
  filter: grayscale(1) invert(0.9) contrast(0.85) brightness(1.05);
  transition: filter var(--dur-3) var(--ease-out);
}
.map:hover iframe {
  filter: grayscale(0.7) invert(0.88) contrast(0.9) brightness(1.08);
}

/* ==========================================================================
   21  FOOTER
   ========================================================================== */
/* Deliberately compact: three columns, no oversized statement line, and
   tighter vertical rhythm so the footer closes the page rather than becoming
   a section of its own. */
.foot {
  padding-block: var(--sp-6) var(--sp-5);
  background: var(--ink-black);
  border-top: 1px solid var(--line);
}
.foot__grid {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-5);
}
.foot__brand img {
  width: auto;
  height: 2.6rem;
  max-width: 13rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--sp-3);
}
.foot__brand p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 38ch;
}
.social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-soft);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.social i,
.social svg {
  width: 1.05rem;
  height: 1.05rem;
}
.social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-3px);
}

.foot__col h2 {
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-3);
}
.foot__col ul {
  display: grid;
  gap: var(--sp-2);
}
.foot__col a {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  transition: color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.foot__col a:hover {
  color: var(--text);
  transform: translateX(4px);
}

.foot__base {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.foot__base p {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.foot__slogan {
  font-family: var(--font-display);
  font-size: var(--fs-sm) !important;
  letter-spacing: 0 !important;
  color: var(--text-soft) !important;
}

/* ==========================================================================
   22  FLOATING BUTTONS + LIGHTBOX
   ========================================================================== */
.fab {
  position: fixed;
  right: var(--gutter);
  z-index: 96;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: var(--sh-2);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}
.fab i,
.fab svg {
  width: 1.2rem;
  height: 1.2rem;
}
.fab--wa {
  bottom: calc(var(--sp-4) + 3.75rem);
  background: var(--accent);
  color: #fff;
}
.fab--wa:hover {
  background: var(--accent-bright);
  transform: scale(1.07);
}
.fab--top {
  bottom: var(--sp-4);
  background: rgba(4, 7, 22, 0.85);
  border: 1px solid var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.fab--top.is-in {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fab--top:hover {
  background: var(--paper);
  color: var(--ink);
}

.lb {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(0, 1, 10, 0.86);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.lb[hidden] {
  display: none;
}
.lb.is-open {
  opacity: 1;
}
.lb__sheet {
  width: min(100%, 980px);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--ink-deep);
  box-shadow: var(--sh-3);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-3) var(--ease-out);
}
.lb.is-open .lb__sheet {
  transform: none;
}
.lb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.lb__title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lb__close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.lb__close i,
.lb__close svg {
  width: 1rem;
  height: 1rem;
}
.lb__close:hover {
  background: var(--paper);
  color: var(--ink);
}
.lb__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #1d1d22;
}
.lb__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.lb__fine {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.lb__fine a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Hidden when a real video is playing */
.lb.has-video .lb__fine {
  display: none;
}

/* ==========================================================================
   25  PORTFOLIO PAGE
   Laid out like a store: a hero, then two independent filter strips, then a
   grid of product-style tiles. The two filters never touch each other —
   industry lives with the specialists, service lives with the grid — and the
   grid shows the intersection of whatever both are currently set to.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.pf-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-8);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.pf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.pf-hero__bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.pf-hero__bg span:first-child {
  width: 55vw;
  height: 55vw;
  top: -22vw;
  left: -16vw;
  background: radial-gradient(circle, rgba(103, 113, 190, 0.8), transparent 65%);
}
.pf-hero__bg span:last-child {
  width: 45vw;
  height: 45vw;
  bottom: -24vw;
  right: -12vw;
  background: radial-gradient(circle, rgba(255, 132, 136, 0.45), transparent 65%);
}
.pf-hero__inner {
  display: grid;
  gap: var(--sp-5);
}
.pf-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 0.92;
  letter-spacing: -0.03em;
  /* The display serif hangs low, so leave room under the baseline rather
     than letting a descender clip the way the homepage headline used to. */
  padding-bottom: 0.1em;
}
.pf-hero__title em {
  font-style: italic;
  color: var(--accent-bright);
}
.pf-hero p {
  font-size: var(--fs-md);
  max-width: 48ch;
}
.pf-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.pf-crumbs a {
  color: var(--text-soft);
  transition: color var(--dur-2) var(--ease-out);
}
.pf-crumbs a:hover {
  color: var(--text);
}

/* --- Industry experts --------------------------------------------------- */
.experts {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}
/* The portrait leads the card. It is deliberately large — these are the
   people the work is being credited to, so the photo is the first thing the
   visitor meets, not a thumbnail beside a paragraph. */
.expert {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, var(--surface), transparent 65%);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}
.expert:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
}
.expert__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-raise);
}
.expert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter var(--dur-3) var(--ease-out);
  filter: saturate(0.92) contrast(1.04);
}
.expert:hover .expert__photo img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.04);
}
/* A soft wash off the bottom edge so the card reads as one piece rather than
   a photo with a box stuck underneath it. */
.expert__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(0, 3, 33, 0.55));
  pointer-events: none;
}
/* Each portrait is framed differently, so each gets its own focal point */
.expert__photo--brad img {
  object-position: 50% 18%;
}
.expert__photo--jess img {
  object-position: 46% 42%;
}
.expert__copy {
  display: grid;
  gap: 0.3rem;
  padding: var(--sp-5);
}
.expert__name {
  font-size: 1.5rem;
  margin-bottom: 0.1rem;
}
.expert__role {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
}
.expert__title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.expert p {
  font-size: var(--fs-sm);
  line-height: 1.7;
}
/* The role line is a <p> too, so this spaces it off the copy that follows
   as well as spacing the paragraphs from each other. */
.expert__copy p + p {
  margin-top: var(--sp-3);
}

/* --- Filter strips ------------------------------------------------------ */
/* Two visually distinct strips so it is obvious which control does what:
   the industry strip is an outlined panel that sits with the specialists,
   the service strip is a filled rail that sits on top of the grid. */
.fbar {
  margin-top: var(--sp-6);
}
.fbar__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.fbar__label i,
.fbar__label svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent-bright);
}
.fbar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.tab:hover {
  border-color: var(--line-strong);
  color: var(--text);
}
.tab:active {
  transform: scale(0.97);
}
.tab__count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-faint);
}
/* The selected tab has to be unmistakable at a glance */
.tab[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.tab[aria-pressed="true"] .tab__count {
  color: rgba(0, 3, 33, 0.55);
}

/* Industry strip: outlined panel, sits inside the expert section */
.fbar--industry {
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
}
/* Service strip: stays under the nav while the grid scrolls past it */
.fbar--service {
  position: sticky;
  top: calc(var(--nav-h) + 0.5rem);
  z-index: 5;
  margin-top: 0;
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: rgba(4, 7, 22, 0.86);
  backdrop-filter: blur(14px);
}
.fbar--service .tab[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fbar--service .tab[aria-pressed="true"] .tab__count {
  color: rgba(255, 255, 255, 0.7);
}

/* A plain-language readout of the current combination */
.fstate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.fstate b {
  font-weight: 600;
  color: var(--text);
}
.fstate__reset {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fstate__reset:hover {
  color: var(--text);
}

/* --- Project grid ------------------------------------------------------- */
/* Columns rather than a grid, so a vertical reel, a landscape cut and a
   square graphic can sit beside each other at their own true heights without
   a row of empty space under the shortest one. */
.pf-grid {
  columns: 1;
  column-gap: var(--sp-5);
}
.pf-grid .vtile {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--sp-5);
}
.pf-grid .vtile[hidden] {
  display: none;
}

/* Website development entries: a business mark that opens their live site */
.pf-card--site .vtile__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--sp-6);
  background: linear-gradient(165deg, #10152e, #05081a);
}
.pf-card--site .vtile__media img {
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 62%;
  object-fit: contain;
}
.pf-card--site .vtile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 0%, rgba(103, 113, 190, 0.22), transparent 70%);
  pointer-events: none;
}
/* Until a logo file is supplied, the business name is set in the site's own
   display face rather than shown as a broken image or a fake screenshot. */
.sitemark {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
  padding-inline: var(--sp-3);
}
.sitemark__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sitemark__url {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Graphic-design tiles open the full artwork in the lightbox */
.pf-zoom {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.pf-zoom span {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(4, 7, 22, 0.75);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
  color: var(--text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.pf-zoom span i,
.pf-zoom span svg {
  width: 1rem;
  height: 1rem;
}
.vtile:hover .pf-zoom span,
.pf-zoom:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

/* Nothing matches the current pair of filters */
.pf-empty {
  display: none;
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
  text-align: center;
}
.pf-empty.is-on {
  display: block;
}
.pf-empty h3 {
  margin-bottom: var(--sp-2);
}
.pf-empty p {
  margin-inline: auto;
}
.pf-empty .btn {
  margin-top: var(--sp-4);
}

/* A short, honest note about how the tagging works */
.pf-note {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* The lightbox is shared with the homepage markup, but on the portfolio page
   it also has to hold a tall image or a vertical reel. */
.lb__frame--free {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  background: transparent;
}
.lb__frame--free img,
.lb__frame--free video {
  max-width: 100%;
  max-height: min(74vh, 900px);
  width: auto;
  height: auto;
  border-radius: var(--r-md);
}

/* ==========================================================================
   23  BREAKPOINTS
   Mobile-first: everything above is the 375px layout.
   ========================================================================== */

/* --- Large phone / small tablet ---------------------------------------- */
@media (min-width: 560px) {
  .showcase {
    grid-template-columns: repeat(2, 1fr);
  }
  .pf-grid {
    columns: 2;
  }
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero__facts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
  .field--half {
    grid-column: span 1;
  }
  .form {
    grid-template-columns: 1fr 1fr;
  }
  .form > .field:not(.field--half),
  .form > .chipset,
  .form > .field--select,
  .form > button,
  .form > .form__fine,
  .form > .honey {
    grid-column: 1 / -1;
  }
  .foot__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot__base {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* --- Tablet ------------------------------------------------------------- */
@media (min-width: 860px) {
  :root {
    --nav-h: 5rem;
  }
  .about__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-8);
    align-items: start;
  }
  .tech__grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
  }
  .sec-head--split {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--sp-6);
  }
  /* Service rows read across the full width: title left, description right */
  .svc__main {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--sp-6);
    align-items: start;
  }
  .svc__main h3 {
    margin-bottom: 0;
  }
  .svc__row {
    gap: var(--sp-5);
    padding-block: var(--sp-6);
  }
  .contact__grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
  /* Each specialist gets the full width of the wrap: a tall portrait beside
     their write-up, rather than two cramped columns. */
  .expert {
    grid-template-columns: minmax(0, 0.44fr) 1fr;
    min-height: 26rem;
  }
  .expert__photo {
    aspect-ratio: auto;
    height: 100%;
  }
  .expert__photo::after {
    inset: 0 0 0 auto;
    width: 30%;
    height: auto;
    background: linear-gradient(90deg, transparent, rgba(0, 3, 33, 0.45));
  }
  .expert__copy {
    align-content: center;
    padding: var(--sp-6);
  }
  /* The director's card carries more copy, so it gets a taller frame and a
     larger share of the width for the portrait. */
  .expert--lead {
    grid-template-columns: minmax(0, 0.5fr) 1fr;
    min-height: 32rem;
  }
  /* Alternating sides give the stacked cards a rhythm on the About page */
  .expert--flip {
    grid-template-columns: 1fr minmax(0, 0.44fr);
  }
  .expert--flip .expert__photo {
    order: 2;
  }
  .expert--flip .expert__photo::after {
    inset: 0 auto 0 0;
    background: linear-gradient(270deg, transparent, rgba(0, 3, 33, 0.45));
  }
  .showcase {
    grid-template-columns: repeat(3, 1fr);
  }
  .pf-grid {
    columns: 3;
  }
  /* The featured piece would be over 700px tall at full wrap width */
  .vtile--feature {
    max-width: 62rem;
    margin-inline: auto;
  }
  .pf-hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: var(--sp-7);
  }
}

/* --- Desktop ------------------------------------------------------------ */
@media (min-width: 1080px) {
  .site-nav__links,
  .site-nav__actions {
    display: flex;
  }
  .burger {
    display: none;
  }
  .menu {
    display: none !important;
  }
  .hero {
    padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-8);
  }
  /* Two columns: copy above facts on the left, laptop spanning both rows */
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--sp-6) var(--sp-7);
  }
  .hero__copy {
    grid-column: 1;
    grid-row: 1;
  }
  .stage {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .hero__facts {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Brand block gets the room; the two link columns sit tight beside it */
  .foot__grid {
    grid-template-columns: 1.6fr 0.9fr 1.1fr;
  }
  .fab--wa {
    right: var(--gutter);
  }
}

/* --- Wide --------------------------------------------------------------- */
@media (min-width: 1280px) {
  .pillars {
    gap: var(--sp-5);
  }
  .pf-grid {
    columns: 4;
  }
}

/* The scroll hint only appears on a desktop screen tall enough to hold it
   without crowding the facts row above it. */
@media (min-width: 1080px) and (min-height: 940px) {
  .scroll-cue {
    display: flex;
  }
}

/* Hover-capable devices only: keeps tap targets honest on touch screens */
@media (hover: none) {
  .btn:hover,
  .pf-card:hover,
  .vtile:hover .vtile__media,
  .svc-pills a:hover,
  .pillars li:hover {
    transform: none;
  }
}

/* ==========================================================================
   24  REDUCED MOTION + PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.anim-on [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .band__track {
    animation: none;
    transform: none;
  }
  .laptop,
  .chip,
  .hero__mesh {
    animation: none !important;
  }
  .scroll-cue span::after {
    display: none;
  }
}

@media print {
  .site-nav,
  .fab,
  .grain,
  .progress,
  .lb,
  .menu,
  .band {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}