/* === Tokens === */
:root {
  /* Lavender / Apricot White / Charcoal palette */
  --bg: #222223;                              /* Deep Charcoal — main surface */
  --bg-deep: #18181a;
  --bg-blur: rgba(34, 34, 35, 0.55);          /* Translucent --bg for the blurred sticky header */
  --accent: #bcb4ff;                          /* Lavender — brand accent */
  --accent-glow: rgba(188, 180, 255, 0.7);    /* Lavender glow for the active nav indicator */
  --pop: var(--accent);                       /* Pop accent — alias, identical to --accent */
  --white: #fffeec;                           /* Apricot White — text on dark */
  --white-78: rgba(255, 254, 236, 0.78);      /* Soft body text on dark */
  --white-06: rgba(255, 254, 236, 0.06);      /* Ghost/inactive char fill */
  --muted: rgba(255, 254, 236, 0.45);
  --rule: rgba(255, 254, 236, 0.14);
  --surface: rgba(255, 254, 236, 0.05);
  --font-display: "Anton", sans-serif;
  --font-body: "Inter", sans-serif;
  --container: 1480px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }
html, body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { position: relative; overflow-x: hidden; cursor: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: none; }

/* === Honeycomb background — invisible at rest, fades in only while scrolling === */
.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='21' viewBox='0 0 24 21'><polygon points='12,1 23,6.25 23,14.75 12,20 1,14.75 1,6.25' fill='none' stroke='rgba(255,254,236,0.08)' stroke-width='0.7'/></svg>");
  background-size: 24px 21px;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.bg-pattern.is-scrolling { opacity: 0.55; }
main, header, footer { position: relative; z-index: 1; }

/* === Custom cursor === */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 9999;
  transition: width 0.25s var(--ease), height 0.25s var(--ease),
              background-color 0.25s var(--ease), opacity 0.25s var(--ease);
  box-shadow: 0 0 18px rgba(188, 180, 255, 0.55);
  will-change: transform;
}
.cursor.cursor--hover {
  width: 54px; height: 54px;
  background: var(--accent);
  opacity: 0.85;
  box-shadow: 0 0 36px rgba(188, 180, 255, 0.7);
}

/* === Typography === */
.micro-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
}
.bullet {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.display-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}
.display-title--pop { color: var(--pop); }
.text-link {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--white);
  transition: opacity 0.3s var(--ease);
}
.text-link:hover { opacity: 0.55; }

/* === Header === */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: opacity 0.35s var(--ease), background 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease), border-color 0.35s var(--ease);
  background: transparent;
  border-bottom: 1px solid transparent;
}
/* Light blur + translucent fill once the page is scrolled (toggled in main.js). */
.header.is-scrolled {
  background: var(--bg-blur);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rule);
}
/* Hidden over the footer — the transparent header would otherwise
   overlap the footer content (toggled in main.js). */
.header.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.header__brand { display: inline-block; }

/* Stacked lockup: bold "forme" on top, larger italic "bureau" tucked below-right. */
.wordmark {
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 0.8;
  color: var(--white);
}
.wm-forme {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: lowercase;
}
.wm-bureau {
  display: block;
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.34em;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin-left: 1.05em;
  margin-top: -0.04em;
}
.header__menu-wrap {
  position: relative;
  z-index: 51;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.header__nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.header__nav a {
  position: relative;
  opacity: 0.85;
  transition: opacity 0.3s, color 0.3s, text-shadow 0.3s;
}
.header__nav a:hover { opacity: 1; color: var(--accent); }
.header__nav a.is-active {
  opacity: 1;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
}

/* "Wow" active marker — a single glowing bar that glides between items */
.header__nav-indicator {
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent-glow);
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  transition: transform 0.5s var(--ease), width 0.5s var(--ease),
    opacity 0.35s var(--ease);
}
.header__nav-indicator.is-on { opacity: 1; }
/* gentle breathing glow once it lands */
.header__nav-indicator.is-on { animation: navGlow 2.4s var(--ease) infinite; }
@keyframes navGlow {
  0%, 100% { box-shadow: 0 0 10px var(--accent-glow), 0 0 3px var(--accent-glow); }
  50% { box-shadow: 0 0 20px var(--accent-glow), 0 0 7px var(--accent-glow); }
}

/* Contact block is hidden on desktop — surfaces only in the mobile dropdown.
   Declared BEFORE the mobile @media so the media query's display:flex wins
   (media queries don't raise specificity; later source order would override). */
.header__menu-contact { display: none; }

/* Mobile: nav collapses into a dropdown panel under the header */
@media (max-width: 900px) {
  /* Drop the wrap's positioning so the dropdown anchors to the full-width
     header (the fixed ancestor) instead of the narrow menu button. */
  .header__menu-wrap { position: static; }
  /* Backdrop blur behind the open menu — fades in, sits under the header
     bar content (brand / nav / button stay crisp), above the page. */
  .header::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--bg-deep) 35%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
  }
  .header.is-menu-open::before {
    opacity: 1;
    pointer-events: auto;
    /* Swallow scroll / zoom gestures that start on the scrim, so the page
       behind stays completely inert (body is also pinned via JS). */
    touch-action: none;
    overscroll-behavior: contain;
  }
  /* While the menu is open the page is fully blocked — neutralise the only
     interactive elements that float above the header backdrop (z-index 60). */
  body.is-menu-locked .float-cta,
  body.is-menu-locked .to-top {
    opacity: 0;
    pointer-events: none;
  }
  .header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 18px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
  }
  .header__menu-wrap.is-open .header__nav { display: flex; }
  .header__nav a {
    padding: 15px 2px;
    opacity: 1;
    border-bottom: 1px solid var(--rule);
  }
  .header__nav a:last-child { border-bottom: none; }
  /* Vertical dropdown — the gliding bar doesn't apply; accent colour is enough */
  .header__nav-indicator { display: none; }

  /* Contact block at the foot of the open mobile menu */
  .header__menu-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 2px 6px;
  }
  .header__menu-contact a {
    border-bottom: none;
    padding: 0;
  }
  .header__menu-line {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--muted);
    transition: color 0.25s var(--ease);
  }
  .header__menu-line:hover,
  .header__menu-line:active { color: var(--accent); }
  .header__menu-line--tel {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .header__menu-icons {
    display: flex;
    gap: 12px;
    margin-top: 10px;
  }
  .header__menu-icons a {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--muted);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
      background 0.3s var(--ease), box-shadow 0.3s var(--ease),
      transform 0.3s var(--ease);
  }
  .header__menu-icons a:hover,
  .header__menu-icons a:active {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-3px);
  }
  .header__menu-icons svg {
    width: 19px;
    height: 19px;
    display: block;
  }
}

.header__menu {
  background: transparent;
  border: none;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  justify-content: center;
  align-items: center;
}
.header__menu span {
  display: block;
  width: 20px; height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.3s var(--ease), width 0.3s var(--ease);
}
.header__menu span:first-child { width: 24px; }
/* Hamburger is mobile-only — desktop uses the inline nav */
@media (min-width: 901px) {
  .header__menu { display: none; }
}
/* Bars cross into an X while the menu is open */
.header__menu-wrap.is-open .header__menu span:first-child {
  width: 22px;
  transform: translateY(3.5px) rotate(45deg);
}
.header__menu-wrap.is-open .header__menu span:last-child {
  width: 22px;
  transform: translateY(-3.5px) rotate(-45deg);
}

/* Floating CTA */
.float-cta {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 60;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--pop);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--ease);
  box-shadow: 0 18px 50px rgba(188, 180, 255, 0.35);
}
.float-cta:hover { transform: scale(1.12) rotate(-6deg); }

/* Back-to-top — appears as soon as the page is scrolled, sits above the CTA */
.to-top {
  position: fixed;
  bottom: 104px; right: 32px;
  z-index: 60;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-blur);
  color: var(--white);
  border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0.35s var(--ease), color 0.3s, border-color 0.3s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* === Hero === */
.hero {
  min-height: 100vh;
  padding: 140px 40px 80px;
  display: grid;
  grid-template-columns: 1fr 1.25fr;            /* widen the right column so the bigger INTO/CONCEPTS fits */
  gap: 40px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.hero__left, .hero__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: flex-start;
}
.hero__right-head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  margin-top: auto;        /* push headline group to bottom of available space */
  margin-bottom: 8vh;      /* spacing above the pill */
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.21rem, 8.4vw, 8.6rem);    /* sized so "CONCEPTS" (longest word) fits in the right column */
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;                          /* keep each word on a single line — chars from data-split must not wrap */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.hero__title + .hero__title { margin-top: -0.18em; }
.hero__title--accent { color: var(--accent); }
.hero__title--white { color: var(--white); }
.hero__title .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Canvas fills the whole hero — no visible square boundary, petals can
   reach all the way to where headlines sit. The canvas itself is fully
   transparent (alpha-fix pass in scene.js) so text shows through. */
.hero__orb-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 95%;
  z-index: 0;
  pointer-events: none;
}
/* Force hero text/CTA columns above the WebGL canvas — opaque
   backgrounds like Aurora would otherwise hide them. */
.hero__left,
.hero__right {
  position: relative;
  z-index: 2;
}
.hero__scroll { z-index: 2; }  /* already position: absolute — only need z-index */
.hero__orb-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vmin;
  height: 60vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(188, 180, 255, 0.20) 0%,
    rgba(188, 180, 255, 0.08) 32%,
    transparent 64%
  );
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  animation: orb-halo-pulse 7s ease-in-out infinite;
}
@keyframes orb-halo-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
#orb-canvas {
  width: 100%; height: 100%;
  display: block;
}

.hero__right { align-items: flex-end; text-align: right; }
.hero__right .hero__title { align-self: flex-end; }

.hero__about {
  margin-top: 32px;
  max-width: 44ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--pop);
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--muted);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* === Sections === */
section { padding: 120px 40px; position: relative; }
.section__head { margin-bottom: 48px; }
.section__head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* === About === */
.about__monogram {
  width: clamp(200px, 22vw, 360px);
  height: auto;
  align-self: center;
  justify-self: center;
  transform: translateY(-18%);   /* lift slightly above the text baseline */
  pointer-events: none;
  user-select: none;
  overflow: visible;
}
/* Filled glyph — also the no-JS / reduced-motion fallback (always visible). */
.about__monogram .mono__base { fill: var(--accent); }
/* Self-drawing contour — hidden until the reveal script turns it on. */
.about__monogram .mono__stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
/* Foil sheen sweep at rest — driven by the script. */
.about__monogram .mono__sheen { opacity: 0; mix-blend-mode: screen; }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.about__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  letter-spacing: 0;
  max-width: 44ch;
}
.about__intro .word { opacity: 0.22; transition: opacity 0.3s; }
.about__intro p + p { margin-top: 2.4em; }
.about__ghost {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.85rem, 1.55vw, 1.4rem);   /* smaller so long lines fit */
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.6;                                /* lighter tone — softens Anton's heavy fill */
  text-align: right;
  margin-left: auto;
  padding-right: 8px;                          /* breathing room from viewport edge */
}
.about__ghost-line {
  display: block;
  white-space: nowrap;
}
.about__ghost-line:first-child { color: var(--pop); }

/* === Projects === */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.project-card {
  display: block;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.6s var(--ease);
}
.project-card:hover { transform: translateY(-6px); }
.project-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
}
.project-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.06); }
.project-card__meta {
  padding: 14px 4px 0;
  display: flex; justify-content: space-between;
  gap: 16px;
}
.project-card__meta .micro-label { color: var(--muted); }
.project-card--lg { grid-column: span 7; }
.project-card--md { grid-column: span 5; }
.project-card--sm { grid-column: span 5; }
.project-card--lg .project-card__media { aspect-ratio: 16 / 11; }
.project-card--md .project-card__media { aspect-ratio: 5 / 6; }
.project-card--sm .project-card__media { aspect-ratio: 5 / 4; }
.projects__all { margin-top: 8px; }

/* === Our work === */
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.work-card {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.6s var(--ease);
}
.work-card:hover { transform: translateY(-6px); }
.work-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
}
.work-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 0.9s var(--ease);
}
.work-card:hover .work-card__media img { transform: scale(1); }
/* Phone mockups — social-feed screenshots framed like handsets, laid out as a
   centred, lightly-scattered grid that fills the gallery column. */
.work-page__gallery:has(.phone-mockup) {
  column-count: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding-top: 12px;
}
/* iPhone 17 Pro Max — thin uniform bezel, large concentric corners,
   titanium rail, Dynamic Island, side buttons. */
.phone-mockup {
  position: relative;
  width: min(315px, 66%);
  margin: 0;
  padding: 8px;
  background: var(--bg-deep);
  border: 1.5px solid color-mix(in srgb, var(--white) 18%, transparent);
  border-radius: 48px;
  box-shadow: 0 30px 55px color-mix(in srgb, var(--bg-deep) 72%, transparent),
              0 8px 22px color-mix(in srgb, var(--bg-deep) 65%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--white) 7%, transparent);
  transform: rotate(-4deg);
  transition: transform 0.6s var(--ease);
}
.phone-mockup:nth-child(even) { transform: rotate(4deg); }
.phone-mockup:hover { transform: rotate(0deg); }
/* Titanium side buttons — left: action + volume, right: power */
.phone-mockup::before,
.phone-mockup::after {
  content: "";
  position: absolute;
  width: 2.5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--white) 24%, transparent);
}
.phone-mockup::before { left: -2.5px; top: 27%; height: 58px; }
.phone-mockup::after { right: -2.5px; top: 32%; height: 80px; }
.phone-mockup__screen {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  background: var(--bg-deep);
}
/* Dynamic Island */
.phone-mockup__screen::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  max-width: 62px;
  height: 11px;
  border-radius: 999px;
  background: var(--bg-deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 6%, transparent);
  z-index: 6;
}
.phone-mockup__screen img { display: block; width: 100%; border-radius: 0; }

/* Instagram-story chrome layered over a phone mockup */
.phone-mockup--story .phone-mockup__screen { aspect-ratio: 9 / 19.5; }
.ig-story__media { width: 100%; height: 100%; object-fit: cover; }
.ig-story {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 12px 16px;
  color: var(--white);
  font-family: var(--font-body);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-deep) 55%, transparent) 0%,
    transparent 18%,
    transparent 80%,
    color-mix(in srgb, var(--bg-deep) 55%, transparent) 100%
  );
  pointer-events: none;
}
.ig-story__bars { display: flex; gap: 4px; }
.ig-story__bar {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255, 254, 236, 0.35);
}
.ig-story__bar.is-on { background: var(--white); }
.ig-story__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  margin-bottom: auto;
  font-size: 12px;
  font-weight: 600;
}
.ig-story__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--white);
}
.ig-story__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-story__user { letter-spacing: 0.01em; }
.ig-story__time { color: var(--white-78); font-weight: 400; }
.ig-story__foot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ig-story__reply {
  flex: 1;
  padding: 9px 16px;
  border: 1px solid rgba(255, 254, 236, 0.55);
  border-radius: 999px;
  font-size: 12px;
  color: var(--white-78);
}
.ig-story__icons { display: flex; gap: 14px; }
.ig-story__icons svg { width: 22px; height: 22px; }

/* Instagram-profile chrome layered over a phone mockup.
   Screen height follows its content (header + full 6-post feed) so the
   feed reaches the bottom edge — no empty strip, no crop. */
.ig-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
}
.ig-profile__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 14px 6px;
}
.ig-profile__back { font-size: 22px; line-height: 1; }
.ig-profile__handle { font-weight: 700; font-size: 14px; }
.ig-profile__more {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ig-profile__more span {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--white);
}
.ig-profile__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 2px 14px 8px;
}
.ig-profile__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--accent);
}
.ig-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ig-profile__stats {
  flex: 1;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.ig-profile__stats span { display: flex; flex-direction: column; gap: 2px; color: var(--white-78); }
.ig-profile__stats b { font-size: 14px; color: var(--white); }
.ig-profile__bio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 14px 8px;
  line-height: 1.3;
}
.ig-profile__name { font-weight: 700; }
.ig-profile__bio span { color: var(--white); }
.ig-profile__actions {
  display: flex;
  gap: 6px;
  padding: 0 14px 10px;
}
.ig-profile__btn {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  border-radius: 8px;
  font-weight: 600;
  background: color-mix(in srgb, var(--white) 12%, transparent);
}
.ig-profile__btn--primary { background: var(--accent); color: var(--bg-deep); }
.ig-profile__tabs {
  display: flex;
  border-top: 1px solid var(--rule);
}
.ig-profile__tab {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 7px 0;
  color: var(--muted);
  border-bottom: 1.5px solid transparent;
}
.ig-profile__tab.is-on { color: var(--white); border-bottom-color: var(--white); }
.ig-profile__tab svg { width: 20px; height: 20px; }
.ig-profile__grid { overflow: hidden; }
.ig-profile__grid img { width: 100%; height: auto; display: block; }

/* Browser window mockup — full-page screenshot that slowly auto-scrolls.
   Pauses on hover; whole window links to the live site. */
.work-page__gallery:has(.browser-mockup),
.work-page__gallery.work-page__gallery--single { column-count: 1; }
.footyup-shot { display: block; margin-top: -70px; margin-bottom: 40px; transform: scale(1.1); transform-origin: center top; }
.work-page__gallery .footyup-shot img { background: none !important; border-radius: 0; }
/* JS wraps gallery images in .work-img-reveal (with a --surface placeholder bg);
   kill it for the transparent laptop so no grey panel shows behind it. */
.footyup-shot .work-img-reveal { background: none !important; border-radius: 0; overflow: visible; }

/* Laptop (MacBook-style) shell wrapping the browser window */
.laptop-mockup { display: block; }
.laptop-mockup .browser-mockup {
  width: 84%;
  margin: 0 auto;
  border-radius: 14px 14px 0 0;
  border-bottom: none;
  box-shadow: none;
}
.laptop-mockup__base {
  position: relative;
  display: block;
  width: 100%;
  height: 22px;
  border-radius: 3px 3px 11px 11px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--white) 26%, var(--bg-deep)) 0%,
    color-mix(in srgb, var(--white) 14%, var(--bg-deep)) 42%,
    color-mix(in srgb, var(--white) 6%, var(--bg-deep)) 100%
  );
  box-shadow: 0 30px 55px color-mix(in srgb, var(--bg-deep) 72%, transparent),
              0 10px 24px color-mix(in srgb, var(--bg-deep) 60%, transparent);
}
.laptop-mockup__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  max-width: 130px;
  height: 6px;
  border-radius: 0 0 8px 8px;
  background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
}
.browser-mockup {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-deep);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--bg-deep) 70%, transparent),
              0 10px 26px color-mix(in srgb, var(--bg-deep) 60%, transparent);
  text-decoration: none;
}
.browser-mockup__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--white) 6%, var(--bg-deep));
  border-bottom: 1px solid var(--rule);
}
.browser-mockup__dots { display: flex; gap: 7px; flex: 0 0 auto; }
.browser-mockup__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--white) 22%, transparent);
}
.browser-mockup__url {
  flex: 1;
  max-width: 320px;
  margin: 0 auto;
  padding: 6px 16px;
  border-radius: 999px;
  text-align: center;
  background: color-mix(in srgb, var(--white) 8%, transparent);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--white-78);
}
.browser-mockup__viewport {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: size;
}
/* Static screenshot filling the screen */
.browser-mockup__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
/* Crossfade slideshow of real site screenshots inside the screen */
.browser-mockup__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  animation: footyup-slides 24s var(--ease) infinite;
  animation-delay: calc(var(--i) * 6s);
}
.browser-mockup:hover .browser-mockup__slide { animation-play-state: paused; }
@keyframes footyup-slides {
  0% { opacity: 0; }
  2% { opacity: 1; }
  23% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .browser-mockup__slide { animation: none; }
  .browser-mockup__slide[style*="--i:0"] { opacity: 1; }
}

/* Fan arrangement — feed grid in the centre, stories fanned out to the sides.
   Sizes are percentages of the gallery column so the fan always fits.
   Below the breakpoint it falls back to the centred wrap layout. */
@media (min-width: 920px) {
  .work-page__gallery--fan:has(.phone-mockup) {
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    padding-top: 24px;
    overflow: visible;
  }
  .work-page__gallery--fan .phone-mockup {
    width: 28%;
    flex: 0 0 auto;
    margin: 0 -7.5%;
    transform-origin: bottom center;
    transition: transform 0.9s var(--ease), filter 0.9s var(--ease),
                box-shadow 0.9s var(--ease);
  }
  .work-page__gallery--fan .phone-mockup--story { filter: brightness(0.82); }
  .work-page__gallery--fan .fan--l2 { order: 1; transform: rotate(-19deg) translateY(-42px) scale(0.74); z-index: 1; }
  .work-page__gallery--fan .fan--l1 { order: 2; transform: rotate(-9deg) translateY(-16px) scale(0.87); z-index: 2; }
  .work-page__gallery--fan .fan--c  { order: 3; transform: translateY(6px) scale(1); z-index: 5; }
  .work-page__gallery--fan .fan--r1 { order: 4; transform: rotate(9deg) translateY(-16px) scale(0.87); z-index: 2; }
  .work-page__gallery--fan .fan--r2 { order: 5; transform: rotate(19deg) translateY(-42px) scale(0.74); z-index: 1; }
  .work-page__gallery--fan .fan--r3 { order: 6; transform: rotate(28deg) translateY(-64px) scale(0.66); z-index: 0; }
  .work-page__gallery--fan .phone-mockup:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.06);
    z-index: 6;
    filter: brightness(1);
    box-shadow: 0 48px 90px color-mix(in srgb, var(--bg-deep) 80%, transparent),
                0 16px 40px color-mix(in srgb, var(--bg-deep) 70%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--white) 7%, transparent);
  }
  /* Slow Ken-Burns zoom of the photo inside the phone on hover */
  .work-page__gallery--fan .phone-mockup .ig-story__media,
  .work-page__gallery--fan .phone-mockup .ig-profile__grid img {
    transition: transform 1.2s var(--ease);
  }
  .work-page__gallery--fan .phone-mockup:hover .ig-story__media,
  .work-page__gallery--fan .phone-mockup:hover .ig-profile__grid img {
    transform: scale(1.07);
  }
}
.work-card__media { position: relative; }
.work-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 28px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-deep) 60%, transparent) 0%,
    transparent 30%,
    transparent 52%,
    color-mix(in srgb, var(--bg-deep) 82%, transparent) 100%
  );
}
.work-card__name {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 78%;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2.4rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.work-card__index {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.work-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.work-card__desc { color: var(--white-78); max-width: 62%; }
.work-card__more {
  color: var(--accent);
  white-space: nowrap;
  transition: opacity 0.4s var(--ease);
}
.work-card:hover .work-card__more { opacity: 0.7; }

/* === Project page (state router) === */
/* Two-column layout: sticky description column on the left, gallery scrolls on the right. */
/* :not([hidden]) so the grid display never overrides the `hidden` attribute
   that keeps inactive project pages off-screen (author display beats UA [hidden]). */
.work-page:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  column-gap: 56px;
  align-items: start;
}
/* Sticky compact bar — Back + project name stay frozen under the header */
.work-page__bar {
  grid-column: 1 / -1;
  position: sticky;
  top: var(--header-h, 72px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 -40px 44px;
  padding: 12px 40px;
  background: var(--bg-blur);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.work-page__bar-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
}
.work-page__head {
  grid-column: 1;
  position: sticky;
  top: calc(var(--header-h, 72px) + 60px);
  align-self: start;
  max-width: none;
  margin-bottom: 0;
}
.work-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.work-page__back:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateX(-3px);
}
.work-page__label { color: var(--muted); margin-bottom: 18px; display: inline-flex; }
.work-page__title {
  font-family: var(--font-display);
  font-weight: 900;
  /* Sized so the longest word ("COLLABORATION") fits the narrow sticky column on one line. */
  font-size: clamp(1.7rem, 2.9vw, 2.3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  overflow-wrap: break-word;
}
.work-page__intro {
  margin-top: 20px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--white-78);
  max-width: 52ch;
}
.work-page__intro strong { font-weight: 600; color: var(--white); }
/* Service block — groups one service line's What we did + Results under its own header. */
.work-page__service {
  margin-top: 40px;
}
.work-page__service-name { color: var(--accent); }
.work-page__service .work-page__did { margin-top: 26px; }
.work-page__did { margin-top: 36px; max-width: 60ch; }
.work-page__did .micro-label { margin-bottom: 18px; }
.work-page__did-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  color: var(--white-78);
}
.work-page__did-list li { position: relative; padding-left: 20px; }
.work-page__did-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.work-page__stats { margin-top: 40px; }
.work-page__stats .micro-label { margin-bottom: 20px; }
.work-page__stats-grid { display: flex; flex-direction: column; gap: 22px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.stat__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Masonry flow — every image keeps its own size/aspect, equal gaps, no crop */
.work-page__gallery {
  grid-column: 2;
  column-count: 2;
  column-gap: 18px;
}
.work-page__gallery > * {
  break-inside: avoid;
  margin: 0 0 18px;
}
.work-page__gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* Smooth zoom-in reveal as each image scrolls into view (toggled by main.js).
   Initial hidden state is scoped under .js-reveal so the page degrades
   gracefully — without JS every image stays visible. */
.work-img-reveal {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
}
.js-reveal .work-card__media,
.js-reveal .work-img-reveal img {
  opacity: 0;
  transform: scale(1.09);
  will-change: opacity, transform;
  transition: opacity 0.9s var(--ease), transform 1.15s var(--ease);
}
.js-reveal .work-card__media.is-revealed,
.js-reveal .work-img-reveal img.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .work-card__media,
  .js-reveal .work-img-reveal img {
    transform: none;
    transition: opacity 0.4s ease;
  }
}

/* Soft fade curtain for route changes — gallery ↔ landing transitions
   happen underneath it, so nothing jumps. */
.route-fade {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.42s var(--ease), visibility 0.42s var(--ease);
}
.route-fade.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Route switching — the project page replaces the landing content */
body[data-route="project"] main,
body[data-route="project"] .footer,
body[data-route="project"] .float-cta { display: none; }

/* === Services === */
.services__list {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
}
.services__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 20px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.services__num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.services__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
  overflow-wrap: anywhere;
}
.services__row:hover .services__num,
.services__row:hover .services__name { color: var(--pop); }
@media (max-width: 900px) {
  .services__list { grid-template-columns: 1fr; column-gap: 0; }
  .services__row { grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 4px; }
  .services__name { font-size: clamp(1.4rem, 5vw, 2rem); }
}

/* === FAQ === */
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 8px;
  background: transparent;
  border: 0;
  text-align: left;
}
.faq__q-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.4s var(--ease);
}
.faq__q:hover .faq__q-text,
.faq__item.is-open .faq__q-text { color: var(--pop); }
.faq__icon {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--white);
  transition: background 0.4s var(--ease), transform 0.3s var(--ease);
}
.faq__icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__q:hover .faq__icon::before,
.faq__q:hover .faq__icon::after,
.faq__item.is-open .faq__icon::before { background: var(--pop); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--white-78);
  max-width: 68ch;
  padding: 0 8px 28px;
}
@media (max-width: 900px) {
  .faq { padding: 80px 24px; }
  .faq__q { padding: 22px 4px; gap: 16px; }
  .faq__a-inner p { padding: 0 4px 22px; }
}

/* === Attitude === */
.attitude {
  position: relative;
  height: 100vh;
  padding: 84px 40px 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Pulsing cue — invites scrolling so the team cards slide in (toggled in main.js) */
.attitude__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.attitude__scroll-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.attitude__scroll-hint .hint-arrow {
  width: 26px;
  height: 26px;
  color: var(--accent);
  animation: hintPulse 1.4s var(--ease) infinite;
}
@keyframes hintPulse {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(9px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .attitude__scroll-hint .hint-arrow { animation: none; }
}
.attitude__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.attitude__label { margin-bottom: 16px; display: inline-flex; }
.attitude__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 13vw, 13rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.attitude__title .char {
  display: inline-block;
  color: var(--white-06);
  transition: color 0.3s;
}
.attitude__rules {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-height: none;
}
.rule-card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 12px 20px;
  display: grid;
  gap: 6px;
}
.rule-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

/* Person card — square tile with photo filling the card and name/role
   overlaid at the bottom on a dark gradient. */
.rule-card--person {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.rule-card--person::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(34, 34, 35, 0.92) 8%, rgba(34, 34, 35, 0.45) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.rule-card--person .rule-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--surface);
}
.rule-card--person .rule-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rule-card--person .rule-card__body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.rule-card--person .rule-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 1.35vw, 1.7rem);
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0.01em;
}
.rule-card--person .micro-label {
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* === Footer === */
.footer {
  padding: 120px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  position: relative;
  z-index: 1;
}
.footer__cta {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 18vw, 18rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--pop);
}
.footer__columns {
  display: grid;
  /* Contact column = width of the word "TALK"; whole group = width of the
     "LET'S TALK" headline. Both measured live in main.js — the fallbacks
     keep a sensible layout if the script fails to load. */
  grid-template-columns: 1fr 1fr var(--talk-width, 460px);
  gap: 40px;
  max-width: var(--headline-width, 1100px);
}
.footer__col h4 {
  margin-bottom: 14px;
  color: var(--muted);
}
.footer__col p, .footer__col li, .footer__col a {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 4px;
  display: block;
}
.footer__col .micro-label { font-family: var(--font-body); }
.footer__col a { transition: opacity 0.3s; }
.footer__col a:hover { opacity: 0.6; }
.footer__parent { color: var(--muted); margin-top: 8px; font-size: 12px; letter-spacing: 0.06em; }
.footer__form { display: flex; flex-direction: column; gap: 8px; }
.footer__form input,
.footer__form textarea,
.footer__form button {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 12px 14px;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.footer__form textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
}
.footer__form input::placeholder,
.footer__form textarea::placeholder { color: var(--muted); }
.footer__form button {
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.3s, transform 0.2s;
}
.footer__form button:hover { transform: translateY(-1px); opacity: 0.85; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}
.footer__socials {
  display: flex;
  gap: 24px;
  font-family: var(--font-body);
}
.footer__socials--stack {
  flex-direction: column;
  gap: 0;
}
/* Contact form sits a touch narrower than the word TALK — a symmetric
   inset keeps it centred under the headline. */
.footer__col:last-child {
  padding-inline: calc(var(--talk-width, 460px) * 0.045);
}

/* === Responsive === */
@media (max-width: 1180px) {
  .attitude__rules { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  body { cursor: auto; }
  .cursor { display: none; }
  .hero {
    grid-template-columns: minmax(0, 1fr);   /* minmax(0,…) stops nowrap titles from blowing the column past the viewport */
    padding: 110px 24px 80px;
    gap: 20px;
  }
  .hero__left, .hero__right { align-items: stretch; text-align: left; min-width: 0; }
  .hero__right .hero__title { align-self: flex-start; text-align: left; }
  .hero__right { text-align: left; }
  .hero__right-head { margin-bottom: 4vh; }
  .hero__latest {
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 12px 20px;
    width: max-content;
  }
  /* Smaller cap so the longest word ("CONCEPTS") never clips on phones */
  .hero__title { font-size: clamp(2.5rem, 16vw, 9rem); white-space: normal; }
  .hero__orb-wrap { max-width: 100%; }
  .hero__scroll { display: none; }

  section { padding: 80px 24px; }
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__ghost { display: none; }
  .about__monogram { display: none; }
  .about__intro { min-width: 0; }

  .projects__grid { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; }
  .work-page:not([hidden]) { display: block; }
  .work-page__head { position: static; max-width: none; margin-bottom: 40px; }
  .work-page__title { font-size: clamp(2.4rem, 11vw, 4rem); }
  .work-page__gallery { column-count: 1; column-gap: 16px; }
  .work-page__gallery > * { margin-bottom: 16px; }
  .work-page__bar { margin: 0 -24px 32px; padding: 10px 24px; }
  .project-card--lg, .project-card--md, .project-card--sm { grid-column: span 1; }

  .attitude { height: auto; overflow: visible; padding: 80px 24px; }
  .attitude__scroll-hint { display: none; }
  .attitude__inner { gap: 32px; padding: 0; }
  .attitude__title { font-size: clamp(4rem, 22vw, 9rem); max-width: 100%; }
  .attitude__rules { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .footer { padding: 80px 24px 32px; }
  .footer__cta { font-size: clamp(2.6rem, 16vw, 7rem); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__columns { grid-template-columns: 1fr; }
  .footer__col { min-width: 0; }
  .footer__col:last-child { padding-inline: 0; }
  .footer__socials { flex-wrap: wrap; gap: 16px; }

  .header { padding: 16px 24px; }
  .float-cta { width: 52px; height: 52px; bottom: 20px; right: 20px; }
  .to-top { width: 46px; height: 46px; bottom: 84px; right: 20px; }
}

/* Smallest phones — one team card per row so photos stay readable */
@media (max-width: 480px) {
  .attitude__rules { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}