/* ============================================================
   PUNTTO® DESIGN STUDIO — 2026
   Monochrome: black / bone. Grid rules, oversized grotesk type,
   superposed layers built for parallax.
   ============================================================ */

:root {
  --black: #0b0b0a;
  --ink: #161614;
  --bone: #dcd8ce;
  --bone-2: #cfcbc1;
  --ivory: #e9e6df;
  --line-dark: rgba(11, 11, 10, 0.16);
  --line-light: rgba(233, 230, 223, 0.14);
  --font-display: "Inter Tight", "Helvetica Neue", sans-serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --header-h: 4.25rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
sup { font-size: 0.35em; vertical-align: super; letter-spacing: 0; }

::selection { background: var(--black); color: var(--bone); }

/* ============ CURSOR ============ */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--black);
  pointer-events: none;
  mix-blend-mode: difference;
  filter: invert(1);
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), opacity 0.3s;
  opacity: 0;
}
.cursor.is-visible { opacity: 1; }
.cursor.is-hover { width: 44px; height: 44px; }
@media (hover: none) { .cursor { display: none; } }

/* ============ MICRO LABELS ============ */
.meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--black);
}
.meta-label--light { color: var(--ivory); }
.sq {
  display: inline-block;
  width: 7px; height: 7px;
  background: currentColor;
  margin-right: 0.6em;
  transform: translateY(-1px);
}
.sq--dot { border-radius: 50%; }

/* ============ GRID LINES ============ */
.grid-lines {
  position: absolute; inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--pad);
  pointer-events: none;
  z-index: 0;
}
.grid-lines span { width: 1px; height: 100%; background: var(--line-dark); }
.grid-lines--dark span { background: var(--line-light); }

/* ============ SIDE TAB ============ */
.side-tab {
  position: fixed; left: 0; top: 50%; z-index: 90;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  background: var(--black); color: var(--bone);
  padding: 0.9rem 0.55rem;
}
.side-tab__logo { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.side-tab__label {
  writing-mode: vertical-rl;
  font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase;
}
@media (max-width: 760px) { .side-tab { display: none; } }

/* ============ HEADER ============ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  transition: background 0.45s, box-shadow 0.45s;
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--bone) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-dark);
}
.header__logo {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.35rem; letter-spacing: -0.03em;
}
.header__nav { display: flex; gap: 1.75rem; }
.header__nav a {
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  position: relative; padding: 0.25rem 0;
}
.header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--black); color: var(--bone);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.7rem 1.3rem; border-radius: 100px;
  transition: gap 0.3s var(--ease-out), background 0.3s;
}
.header__cta:hover { gap: 0.9rem; background: var(--ink); }
@media (max-width: 900px) { .header__nav { display: none; } }

/* ============ PILL SHAPES (brand motif) ============ */
.pill {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--ivory) 0%, var(--bone-2) 60%, #b9b5ab 100%);
  filter: blur(0.5px);
  will-change: transform;
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 4vh) var(--pad) 8vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% 10%, var(--ivory) 0%, transparent 55%),
    var(--bone);
}

/* ---- Dithered hero: two-tone dot-screen headline ---- */
.hero--dither { background: var(--black); }
.hero__dither {
  position: absolute; inset: 0; z-index: 3;
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated;              /* keep dots crisp, never smoothed */
  opacity: 0; transition: opacity 0.9s var(--ease-out);
}
.hero__dither.is-ready { opacity: 1; }
/* accessible headline, visually hidden (canvas carries the visual) */
.hero__title-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero--dither .hero__scroll-hint { color: var(--ivory); }

/* header stays legible over the dark hero, flips dark once scrolled onto bone */
.header__logo,
.header__nav a { color: var(--ivory); }
.header__cta { background: var(--ivory); color: var(--black); }
.header__cta:hover { background: var(--bone-2); }
.header.is-scrolled .header__logo,
.header.is-scrolled .header__nav a { color: var(--black); }
.header.is-scrolled .header__cta { background: var(--black); color: var(--bone); }
.header.is-scrolled .header__cta:hover { background: var(--ink); }

.hero__title {
  position: relative; z-index: 3;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 11.5vw, 12.5rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: none;
  display: flex; flex-direction: column;
}
.hero__line { display: block; overflow: hidden; }
.hero__line-inner { display: inline-block; will-change: transform; }
.hero__line--1 { align-self: flex-start; }
.hero__line--2 { align-self: flex-end; z-index: 4; }
.hero__line--3 { align-self: flex-start; margin-left: clamp(0rem, 12vw, 16rem); }

.hero__scroll-hint {
  position: absolute; right: var(--pad); bottom: 4vh; z-index: 6;
  text-align: right; opacity: 0.6;
}

/* ============ VISION ============ */
.vision {
  position: relative;
  background: var(--black); color: var(--ivory);
  padding: clamp(6rem, 14vh, 12rem) var(--pad) clamp(5rem, 12vh, 10rem);
  overflow: hidden;
}
.vision__ghost {
  position: absolute; right: -2vw; top: 2vh; z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(12rem, 34vw, 38rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 230, 223, 0.14);
  user-select: none;
}
.vision__intro { position: relative; z-index: 2; max-width: 62rem; }
.vision__statement {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 3.4rem);
  font-weight: 400; line-height: 1.22; letter-spacing: -0.02em;
}
.vision__statement--secondary {
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  max-width: 46rem;
  margin-left: clamp(0rem, 18vw, 22rem);
  margin-top: 3.5rem;
  opacity: 0.9;
}
.vision__statement .w { opacity: 0.12; display: inline-block; }

.vision__tile {
  position: relative; z-index: 2;
  width: min(40rem, 78%);
  margin: clamp(4rem, 10vh, 8rem) 0 0 auto;
  aspect-ratio: 1 / 1;
}
.vision__tile img { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); }
.vision__tile figcaption { margin-top: 1rem; }

.vision__values { position: relative; z-index: 2; margin-top: clamp(4rem, 10vh, 8rem); }
.vision__values-title { margin-bottom: 2rem; }
.values-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-light);
}
.values-grid li {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1.6rem 1.6rem 1.6rem 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 0.85rem; line-height: 1.5; color: rgba(233, 230, 223, 0.75);
}
.values-grid em {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 400; line-height: 1;
  color: var(--ivory);
}
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; } }

/* ============ SECTION HEADS ============ */
.section-head {
  position: relative; z-index: 2;
  padding: clamp(5rem, 12vh, 9rem) var(--pad) clamp(2.5rem, 6vh, 4rem);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 10vw, 10.5rem);
  line-height: 0.95; letter-spacing: -0.045em;
}
.section-head__title sup { font-size: 0.16em; letter-spacing: 0.05em; opacity: 0.55; }
.section-head__title .ch { display: inline-block; will-change: transform; }

/* ============ PROJECTS — sticky stacking cards ============ */
.projects { position: relative; background: var(--bone); }
/* hang the meta bullet into the gutter so the label text aligns flush-left
   with the "Projects" title (and with the card titles below) */
.projects .section-head .meta-label .sq { margin-left: calc(-0.6em - 7px); }
.projects__stack { position: relative; }

.project-card {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.project-card--dark { background: var(--black); color: var(--ivory); }
.project-card--bone { background: var(--bone); color: var(--black); }
.project-card--bone:nth-child(4n) { background: var(--ivory); }

.project-card__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(18rem, 0.85fr) 1.3fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  padding: calc(var(--header-h) + 2vh) var(--pad) 4vh;
}
.project-card__num {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  letter-spacing: 0.1em;
  opacity: 0.5;
  display: block; margin-bottom: 1.25rem;
}
.project-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6.5vw, 6.5rem);
  line-height: 0.95; letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
.project-card__desc {
  margin-top: 1.5rem;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.65;
  max-width: 26rem;
  opacity: 0.82;
}
.project-card__media {
  position: relative;
  height: min(78vh, 46rem);
  overflow: hidden;
}
.project-card__media img {
  will-change: transform;
  transform: scale(1.15);
}

@media (max-width: 860px) {
  /* un-stack: cards flow as normal blocks so every CTA scrolls fully into
     view instead of being covered by the next pinned card */
  .project-card { position: static; height: auto; min-height: 0; }
  .project-card__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: calc(var(--header-h) + 3vh);
    padding-bottom: 7vh;
  }
  .project-card__media { height: 46vh; order: -1; }
  .project-card__desc { max-width: none; }
}

/* ============ PROJECT CARD — CTA button ============ */
.project-card__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 2.2rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 0.75rem 1.5rem;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: inherit;
  transition: background 0.35s, color 0.35s, gap 0.3s var(--ease-out);
}
.project-card__cta span { transition: transform 0.3s var(--ease-out); }
.project-card--dark .project-card__cta:hover { background: var(--ivory); color: var(--black); gap: 1rem; }
.project-card--bone .project-card__cta:hover { background: var(--black); color: var(--bone); gap: 1rem; }
.project-card__cta--disabled {
  opacity: 0.32;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

/* ============ PROJECT DETAIL PAGE ============ */
.project-detail__cover {
  position: relative;
  height: min(92vh, 58rem);
  background: var(--black);
  overflow: hidden;
}
.project-detail__cover img { transform: scale(1.18); will-change: transform; }

.project-detail__info {
  display: grid;
  grid-template-columns: 1.5fr minmax(15rem, 0.55fr);
  gap: clamp(2.5rem, 6vw, 8rem);
  align-items: start;
  padding: clamp(4.5rem, 11vh, 8rem) var(--pad);
  background: var(--bone);
}
.project-detail__num {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  letter-spacing: 0.1em;
  opacity: 0.5;
  display: block; margin-bottom: 1.25rem;
}
.project-detail__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 9vw, 9.5rem);
  line-height: 0.95; letter-spacing: -0.045em;
  margin-bottom: 1.5rem;
}
.project-detail__desc {
  margin-top: 1.5rem;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.65;
  max-width: 32rem;
  opacity: 0.82;
}
.project-detail__meta { margin: 0; border-top: 1px solid var(--line-dark); }
.project-detail__meta-row {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.project-detail__meta dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.project-detail__meta dd { margin: 0; font-size: 0.9rem; line-height: 1.6; opacity: 0.72; }

@media (max-width: 860px) {
  .project-detail__cover { height: 62vh; }
  .project-detail__info { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============ BENTO GRID ============ */
.bento-section {
  background: var(--bone);
  padding: 0 var(--pad) clamp(5rem, 12vh, 9rem);
}
.bento-section__kicker { margin-bottom: 1.75rem; }
/* Justified (Flickr-style) layout: JS positions each cell absolutely so every
   image keeps its true aspect ratio — nothing is cropped. Until JS runs, a
   simple stacked fallback shows (also the final layout on mobile). */
.bento {
  --bento-gap: clamp(0.5rem, 1vw, 0.9rem);
  display: flex;
  flex-direction: column;
  gap: var(--bento-gap);
}
.bento__cell {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--bone-2);
}
/* natural ratio — override the global `img { height:100%; object-fit:cover }`
   so stacked images render full, uncropped */
.bento__cell img { width: 100%; height: auto; object-fit: contain; will-change: transform; }

/* desktop/tablet: JS has measured and switched to justified rows */
.bento.is-justified { display: block; position: relative; }
.bento.is-justified .bento__cell { position: absolute; }
/* inside a fixed justified box the image fills exactly (box IS the image ratio,
   so cover === no crop) */
.bento.is-justified .bento__cell img { height: 100%; object-fit: cover; }

/* ============ PROJECT NARRATIVE — condensed challenge/approach/result ============ */
.project-narrative {
  background: var(--bone);
  padding: clamp(0.5rem, 2vh, 2rem) var(--pad) clamp(4rem, 10vh, 7rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.4vw, 4rem);
  border-top: 1px solid var(--line-dark);
}
.project-narrative__label { margin-bottom: 1.1rem; }
.project-narrative__text {
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.62;
  opacity: 0.78;
  max-width: 36ch;
}
@media (max-width: 820px) {
  .project-narrative { grid-template-columns: 1fr; gap: 2.5rem; }
  .project-narrative__text { max-width: none; }
}

/* ============ PROJECT STATEMENT — closing phrase, intro to the work ============ */
.project-statement {
  background: var(--black);
  color: var(--bone);
  padding: clamp(6rem, 18vh, 13rem) var(--pad);
  text-align: center;
  overflow: hidden;
}
.project-statement__inner {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7.6vw, 7rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  max-width: 22ch;
  margin: 0 auto;
}
.project-statement__line { display: block; overflow: hidden; padding: 0.04em 0; }
.project-statement__line-inner { display: block; will-change: transform; }

/* ============ SERVICES — accordion ============ */
.services {
  position: relative;
  background: var(--black); color: var(--ivory);
  padding-bottom: clamp(5rem, 12vh, 9rem);
  overflow: hidden;
}
.section-head--light .meta-label { color: var(--ivory); }

.accordion {
  position: relative; z-index: 2;
  margin: 0 var(--pad);
  border-top: 1px solid var(--line-light);
}
.accordion__item { border-bottom: 1px solid var(--line-light); }
.accordion__head {
  width: 100%;
  display: flex; align-items: baseline; gap: clamp(1.5rem, 4vw, 4rem);
  background: none; border: 0; color: inherit;
  font-family: var(--font-display);
  text-align: left;
  padding: clamp(1.4rem, 3vh, 2.2rem) 0;
  cursor: pointer;
  transition: padding-left 0.45s var(--ease-out);
}
.accordion__head:hover { padding-left: 1.25rem; }
.accordion__num { font-size: clamp(1rem, 1.6vw, 1.5rem); opacity: 0.45; }
.accordion__name {
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  font-weight: 400; letter-spacing: -0.035em; line-height: 1;
  flex: 1;
}
.accordion__toggle {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 300;
  transition: transform 0.45s var(--ease-out);
}
.accordion__item.is-open .accordion__toggle { transform: rotate(45deg); }
.accordion__body {
  overflow: hidden;
  height: 0;
}
.accordion__list {
  list-style: none;
  columns: 3; column-gap: 3rem;
  padding: 0 0 clamp(1.8rem, 4vh, 2.8rem) clamp(2.5rem, 7vw, 8rem);
}
.accordion__list li {
  font-size: 0.9rem; line-height: 2.1;
  color: rgba(233, 230, 223, 0.75);
  break-inside: avoid;
}
.accordion__list li::before { content: "•  "; opacity: 0.5; }
@media (max-width: 760px) {
  .accordion__list { columns: 1; padding-left: 0; }
}

/* ============ PHOTOGRAPHY — horizontal strip ============ */
.photography { position: relative; background: var(--ivory); overflow: hidden; }
.photo-strip-wrap { position: relative; }
.photo-strip {
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding: 2vh var(--pad) 10vh;
  width: max-content;
  will-change: transform;
}
.photo-item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 460px);
  aspect-ratio: 0.86;
  overflow: hidden;
}
.photo-item--tall { aspect-ratio: 0.72; width: clamp(220px, 23vw, 420px); }
.photo-item--wide { aspect-ratio: 1.42; width: clamp(320px, 38vw, 660px); }
.photo-item img { transform: scale(1.12); will-change: transform; }
.photo-item figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  color: #fff;
  mix-blend-mode: difference;
  font-size: 0.5625rem;
}
@media (max-width: 860px) {
  .photo-strip-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .photo-strip { padding-bottom: 4rem; }
}

/* ============ TEAM ============ */
.team {
  position: relative;
  background: var(--bone);
  padding-bottom: clamp(5rem, 12vh, 9rem);
  overflow: hidden;
}
.team__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  padding: 0 var(--pad);
}
.team-card { position: relative; }
.team-card__photo {
  position: relative;
  aspect-ratio: 0.78;
  overflow: hidden;
  background: var(--bone-2);
}
.team-card__photo img {
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.06);
  transition: transform 0.8s var(--ease-out);
}
.team-card:hover .team-card__photo img { transform: scale(1.12); }

.team-card__photo--abstract {
  background:
    radial-gradient(130% 110% at 20% 0%, #f4f2ec 0%, var(--bone-2) 58%, #a8a49a 100%);
  display: flex; align-items: center; justify-content: center;
}
.team-card__photo--abstract-dark {
  background:
    radial-gradient(130% 110% at 80% 100%, #3a3936 0%, var(--ink) 55%, var(--black) 100%);
}
.team-card__photo--abstract-dark .team-card__initial { color: var(--bone); }
.team-card__initial {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 400; letter-spacing: -0.05em;
  color: var(--black);
}
.pill--card {
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(244, 242, 236, 0.9), rgba(168, 164, 154, 0.35));
  position: absolute;
  transition: transform 1s var(--ease-out);
}
.pill--card-a { width: 42%; height: 88%; left: -14%; top: -28%; transform: rotate(38deg); }
.pill--card-b { width: 34%; height: 72%; right: -10%; bottom: -24%; transform: rotate(38deg); }
.team-card:hover .pill--card-a { transform: rotate(38deg) translateY(6%); }
.team-card:hover .pill--card-b { transform: rotate(38deg) translateY(-6%); }

.team-card__meta { padding-top: 1.25rem; }
.team-card__meta h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 500; letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.team-card__bio {
  margin-top: 0.75rem;
  font-size: 0.82rem; line-height: 1.6; opacity: 0.72;
}
@media (max-width: 1280px) { .team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1020px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team__grid { grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.footer {
  position: relative;
  background: var(--black); color: var(--ivory);
  min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) var(--pad) 2rem;
  overflow: hidden;
}
.footer__pills { position: absolute; inset: 0; z-index: 0; opacity: 0.55; }
.pill--f1 { width: 28vw; height: 80vh; left: -14vw; top: -26vh; transform: rotate(38deg); }
.pill--f2 { width: 20vw; height: 62vh; right: -8vw; bottom: -22vh; transform: rotate(38deg); }
.pill--f3 { width: 9vw; height: 30vh; right: 18vw; top: -10vh; transform: rotate(38deg); opacity: 0.6; }
.footer__pills .pill {
  background: linear-gradient(145deg, #2b2a28 0%, #1c1b1a 60%, #121110 100%);
}

.footer__kicker { position: relative; z-index: 2; margin-bottom: 3rem; }
.footer__title {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 11.5rem);
  line-height: 0.98; letter-spacing: -0.045em;
  display: flex; flex-direction: column;
}
.footer__line { display: block; overflow: hidden; }
.footer__line-inner { display: inline-block; will-change: transform; }

.footer__contact {
  position: relative; z-index: 2;
  margin-top: 4rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.9rem;
}
.footer__pill {
  display: inline-flex; align-items: center; gap: 0.75rem;
  border: 1px solid rgba(233, 230, 223, 0.35);
  border-radius: 100px;
  padding: 1.05rem 2.1rem;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.4s, color 0.4s, gap 0.3s var(--ease-out);
}
.footer__pill:hover { background: var(--ivory); color: var(--black); }
.footer__pill--mail:hover { gap: 1.2rem; }
.footer__flag {
  width: 32px; height: 22px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
}

.footer__bottom {
  position: relative; z-index: 2;
  width: 100%;
  margin-top: auto;
  padding-top: clamp(4rem, 10vh, 7rem);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer__bottom .meta-label { opacity: 0.55; }