/* =============================================================
   Studio Ulu — static site styles
   Dark theme · Oswald (headings) + Libre Franklin (body)
   ============================================================= */

:root {
  --bg: #161616;        /* ~15% brighter than #131313 */
  --bg-soft: #202020;   /* card surfaces, kept in step */
  --surface: #0d0d0d;   /* header / footer */
  --text: #ffffff;
  --muted: #b8b8b8;
  --faint: #8a8a8a;
  --accent: #76b971;        /* green from the Studio Ulu logo */
  --accent-dk: #5a9d55;     /* darker green for hover states */
  --border: rgba(255, 255, 255, 0.10);

  --header-h: 76px;
  --wrap: 1280px;

  --font-head: "Archivo", "Segoe UI", Arial, sans-serif;   /* heavy display (gmunk-style) */
  --font-body: "Nunito", "Segoe UI", Arial, sans-serif;    /* framestore body font */
  --font-serif: "Nunito", "Segoe UI", Arial, sans-serif;   /* body copy = Nunito (kept var name) */
}

/* ------------------------------- Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* smoothing handled in JS (wheel drift + eased anchors) */
/* smooth cross-page navigation so the nav doesn't visibly "reload" between pages */
@view-transition { navigation: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 1em; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------ Layout ------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }

/* Content blocks each sit in their own subtle panel */
.block-card {
  background: var(--bg);                               /* exact same shade as the page */
  border-top: 1px solid rgba(255, 255, 255, 0.01);    /* hairline top + left only, dimmer again (~50% closer to bg) */
  border-left: 1px solid rgba(255, 255, 255, 0.01);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14);          /* whisper of depth */
  padding: 30px 34px;                                  /* hug the text (was 52/48) */
}
.block-card + .block-card { margin-top: 32px; }
@media (max-width: 700px) { .block-card { padding: 22px 20px; border-radius: 8px; } }
.section__heading {
  font-size: clamp(1.6rem, 3.5vw, 2.7rem);
  text-transform: lowercase; font-weight: 800;
  text-align: center;
  display: table;                /* shrink box to text so the underline matches title width */
  margin: 0 auto 1.4em;
}
.section__heading::before { content: "/ "; color: var(--accent); }
.section__heading::after { content: none; } /* underline removed */
.lead { font-size: 1.08rem; color: var(--muted); text-wrap: pretty; } /* slightly smaller so the intro fits 2 lines; pretty avoids orphan words */

/* ------------------------------ Header ------------------------------ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px;
  background: transparent;
  transition: background-color .35s ease, box-shadow .35s ease;
  view-transition-name: site-header;  /* keep the header stable across page transitions */
}
.header.is-solid {
  background: rgba(13, 13, 13, 0.7);   /* --surface at 70% = 30% translucent */
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px); /* frosted glass */
  box-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.header__brand { flex: 0 0 auto; display: flex; align-items: center; }
.header__logo { height: 52px; width: calc(52px * 337 / 84); display: block; pointer-events: none; } /* animated SVG logo, same height as before */
/* fly-in only when body has .logo-intro (first open / refresh, set by main.js) */
body.logo-intro .header__logo { animation: logoDrop .7s cubic-bezier(.2,.7,.3,1) .5s both; }
@keyframes logoDrop {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav { margin-left: auto; }
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 6px;
}
.nav__link {
  display: block; padding: 10px 14px;
  font-family: var(--font-head); font-weight: 400;
  text-transform: uppercase; font-size: .95rem; letter-spacing: .04em;
  color: var(--text); position: relative; white-space: nowrap; /* keep 2-word items on one line */
  transition: color .2s ease;
}
.nav__link:hover, .nav__link.is-active { color: var(--accent); }
/* mark the current page with a "/" prefix — absolutely positioned so it never shifts the
   word (or the items after it) when the active item changes; drawn in left-to-right */
.nav__link.is-active::before {
  content: "/"; color: var(--accent); font-weight: 700;
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  animation: slashDraw .4s ease both;
}
@keyframes slashDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .nav__link.is-active::before { animation: none; } }
/* pulsating "_" at the end of a highlighted item; space is always reserved so nothing shifts.
   The current page (.is-active) pulses persistently so it's already blinking right after a page change. */
.nav__link::after { content: "_"; color: var(--accent); opacity: 0; pointer-events: none; }
.nav__link:hover::after,
.nav__link.is-active::after { animation: navCursor 1.1s ease-in-out infinite; }
@keyframes navCursor { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
  .nav__link:hover::after, .nav__link.is-active::after { animation: none; opacity: 1; }
}
/* only one cursor at a time: hovering any item silences the current-page cursor unless it's the one hovered */
.nav__list:hover .nav__link.is-active:not(:hover)::after { animation: none; opacity: 0; }

.header__badges { display: flex; align-items: center; gap: 10px; margin-left: 18px; flex-shrink: 0; }
.badge { width: auto; opacity: .95; flex-shrink: 0; } /* keep badges from scaling down when cramped */
.badge--tpn { height: 34px; }
.badge--disney { height: 24px; } /* ~30% smaller so it matches the TPN badge */

/* Hamburger (mobile only) */
.hamburger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.hamburger span {
  display: block; height: 2px; width: 100%; background: var(--text);
  border-radius: 2px; transition: transform .3s ease, opacity .2s ease, background-color .2s ease;
}
.hamburger:hover span { background: var(--accent); } /* colour on hover */
.hamburger span + span { margin-top: 5px; }

/* ------------------------------- Hero ------------------------------- */
.hero {
  position: relative;
  width: 100%;
  /* fills the viewport minus a peek big enough to reveal the whole tagline line below */
  height: calc(100vh - 200px);
  height: calc(100dvh - 200px);
  min-height: 420px;
  background: #000;
  overflow: hidden;
}
/* Scroll hint — bouncing chevron that scrolls to the intro on click */
.scroll-hint {
  display: inline-block; vertical-align: middle;
  position: relative; top: -0.17em;   /* nudged back up ~10% of a line from -0.07 */
  width: 72px; height: 72px; margin-left: 8px; padding: 0;   /* 50% larger */
  background: transparent; border: 0; cursor: pointer;
  color: var(--accent); opacity: .9;
  animation: hintBounce 1.8s ease-in-out infinite;
}
.scroll-hint svg { width: 100%; height: 100%; }
.scroll-hint:hover { opacity: 1; }
.scroll-hint--m { display: none; } /* mobile-only chevron (under the first paragraph); shown in the phone media query */
@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }
.crt-hero {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; background: #000;
  pointer-events: none; /* let the page scroll over the effect */
}
/* --------------------------- Intro / info --------------------------- */
.intro { text-align: center; max-width: none; margin: 0 auto; } /* fill the card, matching the feature-grid width in the next card */
.intro .lead { max-width: none; margin-bottom: 1.1em; } /* full width like the grid; space multiple paragraphs */
.intro .lead:last-child { margin-bottom: 0; }
/* any writeup wrapped in a frame spans the full frame width (matches the landing page) */
.block-card .lead, .block-card .prose { max-width: none; }
.block-card .lead + .lead { margin-top: 1.1em; }
.intro h2 { font-size: clamp(1.6rem, 3.5vw, 2.7rem); text-transform: lowercase; font-weight: 800; margin: 0 0 1.4em; white-space: nowrap; } /* keep the scroll arrow next to "shape" */
.intro h2::before { content: "/ "; color: var(--accent); }
.inline-link {
  color: var(--accent); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.inline-link:hover { border-bottom-color: var(--accent); }

.feature-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* even 3 + 3 for the 6 features */
  gap: 28px; margin-top: 0; text-align: left;
}
@media (max-width: 760px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } }
/* Section/card titles: lowercase, heavier, with a "/" prefix */
.feature h3 { color: var(--accent); font-size: 1.2rem; text-transform: lowercase; font-weight: 700; }
.feature h3::before { content: "/ "; color: var(--accent); }

/* propagate the lowercase "/" heavy title treatment to inner-page titles (body-prefixed to beat later rules) */
body .page-head h1, body .card h3, body .reel h2, body .post h2 { text-transform: lowercase; font-weight: 700; }
.page-head h1::before, .card h3::before, .reel h2::before, .post h2::before { content: "/ "; color: var(--accent); }
.feature p { color: var(--muted); font-size: .98rem; margin: 0; }

/* Body paragraph text: Nunito, normal weight, mixed case */
.lead, .intro p, .feature p, .prose p, .card p, .bio__body p, .post p, .reel p, .contact-info p {
  font-family: var(--font-serif); font-weight: 400; text-transform: none;
}

/* ----------------------------- Partners ----------------------------- */
.partner-strip {
  overflow: hidden; padding: 12px 0;
  max-width: none; margin: 0 auto;   /* full card width, matching the paragraph + grid */
  /* fade the strip edges so logos slide in/out softly */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partner-track {
  display: flex; align-items: center; width: max-content;
  animation: partnerScroll 40s linear infinite;
}
.partner-strip:hover .partner-track { animation-play-state: paused; }
@keyframes partnerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* two copies + equal per-item margin -> seamless loop */
}
/* per-item margin (not track gap) so the two copies tile with no half-gap jump at the loop */
.partner { flex: 0 0 auto; margin-right: 32px; } /* closer together */
.partner img {
  height: 90px; width: auto; object-fit: contain;  /* +30% again (was 69px); pre-rendered white PNGs */
  opacity: .8; transition: opacity .3s ease;
}
.partner img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .partner-track { animation: none; } }

/* --------------------------- Poster wall ---------------------------- */
.poster-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;               /* small gap around posters */
  margin-top: 1.4em;
}
.poster {
  margin: 0; position: relative; overflow: hidden;
  background: var(--bg-soft); aspect-ratio: 800 / 1185; /* real movie-poster ratio, no square crop */
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .9); /* smaller + closer drop shadow */
}
.poster img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.poster:hover img { transform: scale(1.06); }
.poster__title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  font-family: var(--font-head); text-transform: uppercase;
  font-size: .82rem; letter-spacing: .03em;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.poster:hover .poster__title { opacity: 1; transform: none; }

/* ------------------------------ Content ----------------------------- */
.page-head {
  padding: calc(var(--header-h) + 56px) 0 20px;
  text-align: center;
}
.page-head h1 {
  font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase;
  display: table; margin: 0 auto;   /* shrink to text so underline matches title width */
}
.page-head h1::after { content: none; } /* underline removed */
.prose { max-width: 820px; margin: 0 auto; }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; }

/* Team / services cards */
.cards { display: grid; gap: 32px; }
/* same frame treatment as the landing-page block-cards, one shade off the page (#171717) */
.card {
  background: #171717;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  border-left: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
  padding: 30px 34px;
}
/* landing-page block-cards that hold a table/grid get the same fill */
.block-card--panel { background: #171717; border-top-color: rgba(255,255,255,.02); border-left-color: rgba(255,255,255,.02); }
.card h3 { color: var(--accent); text-transform: uppercase; font-size: 1.35rem; }
.card p { color: var(--muted); margin: 0; }
@media (min-width: 760px) { .cards--2 { grid-template-columns: 1fr 1fr; } }

/* Team bio cards with photo */
.bio { display: grid; grid-template-columns: 74px 1fr; gap: 22px; align-items: start; }
/* crop frame: smaller than the photo, so the image shows at original scale and the
   frame just crops a tighter window of it (instead of scaling the whole image down) */
.bio__frame {
  width: 74px; height: 74px; border-radius: 20px;
  border: 2px solid var(--accent); background: var(--bg);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: box-shadow .3s ease;
}
.bio__photo {
  width: 82px; height: 82px; max-width: none; flex: 0 0 auto; object-fit: cover; display: block;
  filter: grayscale(.4);
  transition: transform .3s ease, filter .3s ease;
}
.bio__frame:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.bio__frame:hover .bio__photo { transform: scale(1.06); filter: grayscale(0); }
.bio__body h3 { margin-bottom: .35em; }
@media (max-width: 480px) {
  .bio { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Showreels video players */
.reel { margin-bottom: 56px; }
.reel h2 { text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem); }
.reel p { color: var(--muted); max-width: 820px; }
.reel__frame {
  background: #000; border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; margin-top: 16px;
}
.reel__frame video { width: 100%; height: auto; display: block; }
.unmute-btn {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 18px; border-radius: 4px; font-size: .95rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.unmute-btn:hover { background: var(--accent-dk); }

/* Contact */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info a { color: var(--accent); }
.form label { display: block; margin: 0 0 16px; font-size: .95rem; }
.form span { display: block; margin-bottom: 6px; color: var(--muted); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.form input, .form textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); font: inherit; border-radius: 4px;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
/* contact intro on a single line (wraps again on narrow screens) */
.contact-intro { max-width: none; }
.contact-intro .lead { max-width: none; white-space: nowrap; }
@media (max-width: 940px) { .contact-intro .lead { white-space: normal; } }
.form__fallback { margin: 16px 0 0; font-size: .9rem; color: var(--faint); }
.form__fallback .inline-link { color: var(--accent); }
.copy-email {
  background: none; border: 0; padding: 0; margin: 0 .15em; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
}
.copy-email:hover { color: var(--accent-dk); }
.btn {
  display: inline-block; cursor: pointer;
  background: var(--accent); color: #fff; border: 0;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em;
  padding: 13px 34px; border-radius: 4px; font-size: 1rem;
  transition: background .2s ease;
}
.btn:hover { background: var(--accent-dk); }

/* News */
.post { padding: 28px 0; border-bottom: 1px solid var(--border); }
.post:last-child { border-bottom: 0; }
.post h2 { text-transform: uppercase; font-size: 1.5rem; margin-bottom: .1em; }
.post__date { color: var(--faint); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .8em; }
.post p { color: var(--muted); }

/* ------------------------------ Footer ------------------------------ */
.footer { background: var(--surface); border-top: 1px solid var(--border); font-size: .88rem; }
/* compact single-row footer, ~header height; the two parts run together, centered,
   joined by a green "/" separator */
.footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 8px 24px; box-sizing: border-box;
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 14px; text-align: center;
  color: var(--faint); font-size: .86rem;
}
.footer__legal, .footer__links { margin: 0; }
.footer__addr a { color: inherit; }
.footer__addr a:hover { color: var(--accent); }
.footer__sep { color: var(--accent); font-weight: 700; }
.footer__copy { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.footer__addr { color: var(--faint); }
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--accent); }

/* Inner pages need clearance below the fixed header */
body:not([data-page="home"]) main { display: block; }
#intro { scroll-margin-top: var(--header-h); padding-top: 30px; padding-bottom: 0; } /* top peek for the tagline; no bottom gap so the footer meets the poster frame */
#partners { scroll-margin-top: var(--header-h); } /* scroll-hint target clears the fixed header */
#why { scroll-margin-top: var(--header-h); } /* mobile scroll-hint target clears the fixed header */

/* ============================ Responsive ============================ */
@media (max-width: 1180px) {
  .header__badges { display: none; } /* drop badges before they crowd the nav */
}

@media (max-width: 1080px) {
  .hamburger { display: block; }
  .header { gap: 0; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--surface);
    margin: 0; overflow: hidden;
    /* hidden: faded out + slid up above its place (slides down from the top) */
    opacity: 0; transform: translateY(-24px); visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  /* revealed: fade in while sliding down from the top (reverses on close) */
  .header.nav-open .nav {
    opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
    border-top: 1px solid var(--border);
    transition: opacity .3s ease, transform .3s ease, visibility 0s;
  }
  .header.nav-open { background: var(--surface); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; }
  .nav__link { padding: 14px 24px; font-size: 1.05rem; }
  .hamburger { margin-left: auto; }
  /* animate burger into an X */
  .header.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header.nav-open .hamburger span:nth-child(2) { opacity: 0; }
  .header.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .section { padding: 52px 0; }
  /* Hero is "just big enough": it fills the screen minus the room the tagline + first
     paragraph + scroll chevron need, so all three sit above the fold on load. ~380px
     is the measured height of that intro block on a phone. */
  .hero { height: calc(100vh - 380px); height: calc(100dvh - 380px); min-height: 200px; }
  /* Keep section/tagline titles on a single line on phones (they wrapped before) */
  .section__heading, .intro h2 {
    white-space: nowrap;
    font-size: clamp(0.8rem, 4.1vw, 1.6rem);
  }
  .block-card { padding: 22px 16px; }               /* a touch more width for the one-line titles */
  /* on phones the chevron leaves the tagline and appears under the first paragraph */
  .intro h2 .scroll-hint { display: none; }
  .scroll-hint--m { display: block; width: 34px; height: 34px; margin: 0.4em auto 0; top: 0; }
  .poster-wall { grid-template-columns: repeat(2, 1fr); }
  .partner-strip { gap: 28px; }
  .partner img { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { scroll-behavior: auto; }
}