/* Still Motion Studios — Chris Gorys */

:root {
  --bg: #0b0a09;
  --ink: #ece6da;
  --ink-2: #c4bdb0;
  --mute: #8f887c;
  --gold: #b89c62;
  --gold-2: #d4ba82;
  --on-gold: #14110b;
  --line: rgba(184, 156, 98, .22);
  --line-soft: rgba(184, 156, 98, .18);
  --gutter: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --serif: 'Instrument Serif', serif;
  --sans: 'Hanken Grotesk', sans-serif;
  --grain-opacity: .08;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--on-gold); }
a { color: inherit; text-decoration: none; }
/* Zero specificity so every component's own link colour wins, as in the design */
:where(a:hover) { color: var(--gold-2); }
:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 4px; }
button { font: inherit; }
[hidden] { display: none !important; }
img { -webkit-user-drag: none; user-select: none; }
.accent { font-style: italic; color: var(--gold-2); }

/* External-link arrow. Drawn as a mask instead of the ↗ character, which iOS
   swaps for its emoji; background: currentColor keeps it in the link's colour. */
.ext::after {
  content: '';
  display: inline-block;
  width: .72em; height: .72em;
  margin-left: .4em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.15'%3E%3Cpath d='M1.4 8.6 8.4 1.6M3 1.6h5.4V7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.15'%3E%3Cpath d='M1.4 8.6 8.4 1.6M3 1.6h5.4V7'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}
@keyframes breatheA {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: .85; }
  50% { transform: scale(1.16) translate(-2.5vw, 2vw); opacity: 1; }
}
@keyframes breatheB {
  0%, 100% { transform: scale(1.08) translate(0, 0); opacity: .7; }
  50% { transform: scale(.92) translate(2vw, -1.5vw); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}
/* Sections that jump-links target (main.js), so focus doesn't draw a ring around them */
[tabindex="-1"]:focus { outline: none; }

.page { position: relative; min-height: 100vh; background: var(--bg); }

/* ---------- Atmosphere ---------- */

.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.glow { position: absolute; filter: blur(20px); }
.glow--a {
  top: -15%; right: -10%; width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(184, 156, 98, .12), transparent 60%);
  animation: breatheA 13s ease-in-out infinite;
}
.glow--b {
  bottom: -20%; left: -15%; width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(150, 125, 80, .08), transparent 60%);
  animation: breatheB 17s ease-in-out infinite;
}

.grain {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none; overflow: hidden;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}
.grain::before {
  content: '';
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(8) infinite;
}
.grain--still::before { animation: none; }

/* ---------- Nav ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
  padding: 22px var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), padding .5s var(--ease);
}
.nav.is-scrolled {
  padding-top: 14px; padding-bottom: 14px;
  background: rgba(11, 10, 9, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav-links { display: flex; gap: clamp(18px, 3vw, 34px); align-items: center; }
.nav-link {
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
/* Five links on a phone: tighten so they stay on one row */
@media (max-width: 480px) {
  .nav-links { gap: 13px; flex-wrap: wrap; }
  .nav-link { font-size: .64rem; letter-spacing: .16em; }
}

.brand {
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink);
  display: flex; gap: 10px; align-items: center;
}
.brand-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); display: block; }

/* ---------- Shared type ---------- */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; z-index: 1; padding: clamp(80px, 13vh, 160px) 0; }
/* Hairline between stacked sections, inset to the content width (same line as the brand group heads) */
.section + .section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(min(100%, 1240px) - 2 * var(--gutter)); height: 1px;
  background: var(--line-soft);
}

.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 34px; font-weight: 600;
}
.section-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 4.8rem);
  line-height: 1; letter-spacing: -.015em;
}
.overline {
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--mute); font-weight: 500;
}

/* ---------- Image slots ---------- */

.slot {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
  background: rgba(127, 127, 127, .08);
}
.slot picture { display: contents; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot.is-empty img { display: none; }
.slot-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; text-align: center;
  font: 500 13px/1.3 system-ui, -apple-system, sans-serif; letter-spacing: .01em;
  color: var(--ink);
}
.slot-empty::after {
  content: ''; position: absolute; inset: 0;
  border: 1.5px dashed currentColor; opacity: .35;
}
.slot-empty svg { width: 28px; height: 28px; opacity: .45; }
.slot-empty span { max-width: 90%; opacity: .75; }

/* ---------- Hero ---------- */

.hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
/* The caption would sit behind the title; an empty hero just stays dark */
.hero-media .slot-empty { display: none; }
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, #0b0a09 3%, rgba(11, 10, 9, .25) 48%, rgba(11, 10, 9, .55) 100%),
    linear-gradient(to right, rgba(11, 10, 9, .6), transparent 60%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 0 calc(var(--gutter) + 40px) clamp(54px, 9vh, 110px) var(--gutter);
  pointer-events: none;
}
.hero-kicker { margin-bottom: 26px; }
.hero-kicker::before { content: ''; width: 42px; height: 1px; background: var(--gold); display: block; }
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  line-height: .88; letter-spacing: -.025em; text-transform: uppercase;
  display: flex; flex-direction: column;
}
.hero-lede {
  margin-top: 30px; max-width: 440px;
  font-size: 1.05rem; color: var(--ink-2); line-height: 1.7;
  text-wrap: pretty;
}

/* ---------- Players ---------- */

.player {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
.player-idle { position: absolute; inset: 0; }
.player-idle.is-playable { cursor: pointer; }
/* Muted shot loop over the poster (main.js initPreviews); fades in once playing */
.player .player-preview {
  object-fit: cover; background: transparent;
  opacity: 0; transition: opacity .6s var(--ease);
  pointer-events: none;
}
.player .player-preview.is-ready { opacity: 1; }
.player iframe,
.player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 10, 9, .7), transparent 45%);
}
.play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .4s var(--ease), background .4s;
}
.play svg { display: block; }
/* Landscape players (films, events): a bare white triangle, no bubble */
.play--lg, .play--sm {
  border: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.play--lg svg, .play--sm svg {
  fill: var(--ink); margin-left: 6px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .65));
  transition: fill .4s;
}
.play--lg { width: 96px; height: 96px; }
.play--lg svg { width: 72px; height: 72px; }
.play--sm { width: 76px; height: 76px; }
.play--sm svg { width: 56px; height: 56px; }
.play--lg:hover, .play--sm:hover { transform: translate(-50%, -50%) scale(1.09); background: none; }
.play--lg:hover svg, .play--sm:hover svg { fill: var(--gold-2); }  /* same hover as the brand videos */


/* ---------- Featured film ---------- */

.feature { margin-top: 56px; }
.feature-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  margin-top: 40px; align-items: end;
}
.feature-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1; margin-top: 14px;
}
.feature-logline {
  color: var(--ink-2); font-size: 1.02rem;
  margin-top: 18px; max-width: 46ch; text-wrap: pretty;
}
.credits { display: flex; flex-wrap: wrap; gap: 28px; }
.work .credits { margin-top: 28px; }
.credit { border-top: 1px solid var(--line); padding-top: 12px; min-width: 150px; }
.credit-label {
  display: block; font-size: .66rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--mute);
}
.credit-value { display: block; font-family: var(--serif); font-size: 1.3rem; margin-top: 4px; }
.text-link {
  align-self: flex-end;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 600;
  border-bottom: 1px solid rgba(184, 156, 98, .4);
  padding-bottom: 4px;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* scroll-margin keeps the heading clear of the fixed nav when /#awards is jumped to */
.awards { margin-top: 56px; scroll-margin-top: 100px; }
/* Inside a two-column film card (films page): full width under the player and text */
.work > .awards { grid-column: 1 / -1; margin-top: 0; }
.awards-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; margin-bottom: 8px;
}
.awards-kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.awards-kicker::before { content: ''; width: 28px; height: 1px; background: var(--gold); display: block; }
.awards-meta { display: flex; align-items: center; gap: 18px; }
.awards-tally { font-size: .74rem; letter-spacing: .08em; color: var(--mute); }

/* Prev/next only where there's a mouse; touch screens swipe */
.awards-nav { display: none; gap: 8px; }
@media (hover: hover) and (pointer: fine) {
  .awards-nav { display: flex; }
}
.awards-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(184, 156, 98, .35); background: transparent;
  color: var(--gold-2); font-size: .9rem; line-height: 1;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s, opacity .3s;
}
.awards-arrow:hover:not(:disabled) { color: var(--ink); border-color: var(--gold-2); background: rgba(184, 156, 98, .08); }
.awards-arrow:disabled { opacity: .3; cursor: default; }

/* One swipeable row of laurels. Edge fades show there's more; main.js
   toggles .is-scrolled / .is-end as the row moves. */
.laurels {
  --fade-l: 0px;
  --fade-r: 56px;
  list-style: none;
  display: flex; gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 20px 0 6px;
  border-top: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
.laurels::-webkit-scrollbar { display: none; }
.laurels.is-scrolled { --fade-l: 56px; }
.laurels.is-end { --fade-r: 0px; }
.laurels:focus-visible { outline-offset: -2px; }

.laurel {
  flex: 0 0 auto; width: 204px;
  display: flex; align-items: center; gap: 4px;
  scroll-snap-align: start;
  color: var(--gold);
}
.laurel-branch { flex: 0 0 auto; width: 24px; height: 72px; }
.laurel-branch--r { transform: scaleX(-1); }
.laurel-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.laurel-tag {
  font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 600; line-height: 1.35;
}
.laurel-name {
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.12;
  color: var(--ink); text-wrap: balance;
}
.laurel-year { font-size: .66rem; letter-spacing: .08em; color: var(--mute); }
.laurel--muted { color: rgba(143, 136, 124, .6); }
.laurel--muted .laurel-tag { color: var(--mute); }

/* ---------- Work cards (films page, events) ---------- */

.work-list { margin-top: 56px; }
.work-list > .work + .work {
  /* Same space above and below the divider. The card above ends on an awards strip whose
     own bottom padding (6px) already adds to the space above, so the top side gets it back. */
  --gap: clamp(20px, 2.4vh, 28px);
  margin-top: var(--gap);
  padding-top: calc(var(--gap) + 6px);
  border-top: 1px solid var(--line-soft);
}
.work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.work-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1; margin-top: 14px;
}
.work-logline {
  color: var(--ink-2); font-size: 1rem;
  margin-top: 16px; max-width: 44ch; text-wrap: pretty;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.chip {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 7px 16px; border: 1px solid var(--line); border-radius: 40px;
  color: var(--ink-2);
}
a.chip { border-color: rgba(184, 156, 98, .35); color: var(--gold-2); }
a.chip:hover { border-color: var(--gold-2); color: var(--ink); }

/* ---------- Section heads, banded sections, "see more" ---------- */

.section--band { background: linear-gradient(180deg, transparent, rgba(22, 20, 15, .6), transparent); }
/* Title, then its note directly underneath */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.section-note { color: var(--ink-2); font-size: 1.05rem; max-width: 46ch; text-wrap: pretty; }
.more { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- Portraits ---------- */

.portraits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px; margin-top: 56px;
}
@media (min-width: 600px) {
  .portraits-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 2:3 is the camera's native frame, so portraits show uncropped */
.portrait { aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; }

/* ---------- Brand & social (vertical video) ---------- */

.reels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 14px;
  margin-top: 56px;
}
@media (min-width: 700px) {
  .reels { grid-template-columns: repeat(3, 1fr); gap: 44px 24px; }
}
@media (min-width: 1000px) {
  .reels { grid-template-columns: repeat(4, 1fr); }
}
/* Vertical brand videos: frameless, with a small bare play icon in the bottom-right corner */
.player--vertical { aspect-ratio: 9 / 16; border: 0; border-radius: 2px; background: transparent; }
/* Keep native playback controls light on the dark brand/social video cards. */
.player--vertical > video { color-scheme: dark; }
.player--vertical > video::-webkit-media-controls-current-time-display,
.player--vertical > video::-webkit-media-controls-time-remaining-display {
  color: #fff;
}
/* Once the preview loop has faded in, drop the poster under it so no edge of it can peek out */
.player-idle.is-previewing .slot { visibility: hidden; }
.player--vertical .play {
  top: auto; left: auto; right: 8px; bottom: 8px; transform: none;
  width: 34px; height: 34px; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.player--vertical .play svg {
  width: 22px; height: 22px; margin: 0; fill: var(--ink);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7));
  transition: fill .3s;
}
.player--vertical .play:hover { transform: scale(1.12); background: none; }
.player--vertical .play:hover svg { fill: var(--gold-2); }
.reel .overline { margin-top: 18px; font-size: .62rem; letter-spacing: .22em; }
.reel-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.05; margin-top: 8px;
}

/* Standalone pages: clear the fixed nav */
.section--intro { padding-top: clamp(140px, 22vh, 220px); }
/* Films page ends on an awards strip: keep it close to the divider above Contact */
.films-page .section--intro { padding-bottom: clamp(20px, 2.4vh, 28px); }
/* ...and the same space again between that divider and the Contact label (+6px: see .work + .work) */
.films-page .section--contact { padding-top: calc(clamp(20px, 2.4vh, 28px) + 6px); }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 600;
  padding: 14px 26px;
  border: 1px solid rgba(184, 156, 98, .35); border-radius: 40px;
  color: var(--gold-2);
  transition: color .4s, border-color .4s, background .4s;
}
.btn:hover { color: var(--ink); border-color: var(--gold-2); background: rgba(184, 156, 98, .08); }
.btn-arrow { letter-spacing: 0; font-size: .9rem; transition: transform .4s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Contact ---------- */

.section--contact { text-align: center; }
.section--contact .wrap { display: flex; flex-direction: column; align-items: center; }
.contact-note {
  color: var(--ink-2); margin-top: 22px; max-width: 46ch;
  font-size: 1.05rem; text-wrap: pretty;
}
.contact-label {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-top: 44px; font-weight: 600;
}
.contact-email {
  display: inline-block; margin-top: 14px;
  font-family: var(--serif); font-size: clamp(1.8rem, 4.8vw, 3.2rem);
  color: var(--ink); line-height: 1.2;
  border-bottom: 1px solid rgba(184, 156, 98, .3);
  transition: color .4s, border-color .4s;
}
.contact-email:hover { color: var(--gold-2); border-bottom-color: var(--gold); }

/* ---------- Contact over the on-set collage (subpages) ---------- */

.section--collage { overflow: hidden; }
.section--collage > .wrap { position: relative; z-index: 1; }
.section--collage::before { z-index: 2; } /* keep the divider line above the collage */

/* ---------- About + contact (home) ---------- */

.section--about { padding: clamp(110px, 18vh, 200px) 0; overflow: hidden; }
.section--about::before { display: none; } /* the collage is the divider */
.about-bg { position: absolute; inset: 0; z-index: 0; }
.about-bg picture { display: contents; }
.about-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fade into the page at top and bottom, and darken behind the centred text */
.about-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(11, 10, 9, .5) 16%, rgba(11, 10, 9, .5) 84%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(11, 10, 9, .7), transparent 72%);
}
/* About, then contact underneath, both centred and straight on the collage (no panel) */
.about-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(72px, 11vh, 120px);
}
.about-text, .about-contact { display: flex; flex-direction: column; align-items: center; }
.about-body {
  margin-top: 24px; max-width: 52ch;
  color: var(--ink); font-size: 1.08rem; line-height: 1.75; text-wrap: pretty;
}

/* ---------- Footer ---------- */

.footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line);
  margin-top: clamp(40px, 8vh, 100px);
}
.footer .wrap {
  padding-top: 36px; padding-bottom: 36px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer .brand { font-size: .84rem; }
.footer small { color: var(--mute); font-size: .74rem; letter-spacing: .08em; }

/* ---------- Brand groups (who sourced the work) ---------- */

.group-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.group-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.group-note { color: var(--ink-2); font-size: .95rem; max-width: 52ch; text-wrap: pretty; }
.group-note .text-link { margin-left: 6px; white-space: nowrap; }  /* stays inline after the sentence */
.group-head + .reels { margin-top: 32px; }