/* ============================================================
   Michael Holyk — portfolio
   ============================================================ */

:root {
  --cream:      #f6f5f2;   /* off-white, less beige */
  --cream-line: #e7e5df;
  --black:      #0a0a0a;
  --ink:        #1b1917;   /* warm near-black text */
  --muted:      #a09b8f;   /* letter-spaced labels */
  --muted-dark: #6f6a5f;   /* on cream */
  --muted-light:#8b8579;   /* faded serif on dark */

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap:  1200px;
  --pad:   clamp(1.5rem, 5vw, 5rem);
  --hero-pad: clamp(1.5rem, 2.6vw, 3.5rem);  /* tighter inset for the hero (logo + headline aligned) */
  --logo-h: clamp(28px, 3vw, 44px);          /* one consistent logo height everywhere */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-y: scroll;            /* always reserve the scrollbar space… */
  scrollbar-gutter: stable;     /* …so the layout never shifts between pages */
}

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Eyebrow labels ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dark);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}
.eyebrow__rule {
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}
.eyebrow--plain { color: var(--muted); }
.eyebrow--dark  { color: #6c6c6c; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  /* Not a full screen: a full-height hero leaves a big dead middle on tall
     displays and phones, and hides the fact there's a page below. */
  min-height: clamp(520px, 78svh, 820px);
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("assets/hero-poster.jpg") center 45% / cover no-repeat;   /* the loop's first frame — fallback when motion is reduced */
  filter: grayscale(100%) contrast(1.02);
}

/* On mobile the frame crops hard — hold Michael and the crew in shot rather
   than filling the screen with the car bonnet */
@media (max-width: 600px) {
  .hero__bg { background-position: center; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Darkens the film so the white headline pops: a deep fade up from the bottom,
     a softer one in from the left where the headline sits, a light veil overall,
     and the original fade under the nav. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 65%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 60%),
    rgba(0,0,0,0.12);
}

.hero__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--hero-pad);
}
.logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}

.hero__headline {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 var(--hero-pad) clamp(2.5rem, 6vw, 5rem);
}
.hero__headline h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.24;
  letter-spacing: 0.003em;
  max-width: none;
  text-shadow: 0 1px 30px rgba(0,0,0,0.35);
}
.hero__headline h1 .line { display: block; text-wrap: balance; }   /* phones: no lone “content”. */
.hero__headline em { font-style: italic; }

/* ---------- Social ---------- */
.social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin: 0;
  padding: 0;
}
.social a {
  display: inline-flex;
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.social a:hover { opacity: 1; transform: translateY(-1px); }
.social--light a { color: #fff; }
.social--dark a  { color: var(--ink); }
.social--dark a:hover { opacity: 1; }

/* ---------- Top nav (page links, shared across all pages) ---------- */
.topnav {
  display: flex;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  margin-left: auto;
  margin-right: clamp(1.2rem, 3vw, 2.4rem);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.topnav a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.topnav a:hover { opacity: 0.55; }
/* On the dark hero the links read white */
.hero__nav .topnav a { color: #fff; }

/* Mobile: nav drops to its own centred row under the logo + socials */
/* Subtle inline text link (e.g. the Jake Bugg video) — inherits colour,
   thin underline that firms up on hover */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  transition: text-decoration-color 0.2s ease;
}
.text-link:hover { text-decoration-color: currentColor; }

@media (max-width: 600px) {
  .hero__nav, .topbar { flex-wrap: wrap; }
  .topnav {
    order: 3;
    width: 100%;
    margin: 0.8rem 0 0;
    justify-content: center;
  }
}

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.section--cream { background: var(--cream); color: var(--ink); }
.section--dark  { background: var(--black); color: #f4f2ec; }

/* ============================================================
   INTRODUCTION + CLIENTS
   ============================================================ */
.intro { padding-block: clamp(5rem, 12vw, 11rem); }
/* Wider container for the introduction + clients than the rest of the page */
.intro .wrap { max-width: 1440px; }

.intro__grid {
  display: grid;
  grid-template-columns: minmax(13rem, max-content) minmax(0, 1fr);   /* shared label width so Introduction + Selected Clients rows align; grows if a label is longer */
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  max-width: 64rem;              /* keep the label + text from stretching too wide */
}
.intro__grid .eyebrow { padding-top: 0.7em; }

.intro__lead {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 2.05rem);
  line-height: 1.5;
  font-weight: 400;
  max-width: none;               /* the grid column sets the measure now */
  color: #2a2723;
}
.intro__lead em     { font-style: italic; }
.intro__lead strong { font-weight: 600; }

.rule {
  border: 0;
  border-top: 1px solid var(--cream-line);
  margin: clamp(3.5rem, 9vw, 8rem) 0 clamp(2.2rem, 4vw, 3.5rem);
}

.clients__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}


.clients__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(3.2rem, 6vw, 5.5rem) 1.5rem;
  align-items: center;
  text-align: center;
}
.clients__grid li {
  color: #8a8377;                 /* more present at rest, so the type mix reads */
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.1;
  cursor: default;
  transition: color 0.35s ease;
}
.clients__grid li:hover { color: var(--ink); }   /* rolls over to ink */

/* ============================================================
   THE WORK + CONTACT — large statements
   ============================================================ */
.work    { padding-block: clamp(6rem, 15vw, 13rem); }
.contact { padding-top: clamp(6rem, 15vw, 13rem); }

.work__inner,
.contact__inner { padding-left: clamp(0px, 4vw, 2.5rem); }

.work__inner .eyebrow,
.contact__inner .eyebrow { margin-bottom: clamp(1.8rem, 3.4vw, 3rem); }

.statement {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.55rem, 2.7vw, 2.5rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
  max-width: 40ch;
}
.statement em { font-style: italic; }
.statement .muted { color: #fff; }
.statement--dark { color: var(--ink); max-width: 44ch; }

/* The Work — let the lines run full-width instead of wrapping into a clump */
.statement--wide { max-width: none; }
.statement--wide .line { display: block; white-space: nowrap; }
.statement a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.statement a:hover { border-color: currentColor; }
.statement strong { font-weight: 600; }

/* ---- The Work — FEATURE treatment (test): full-height, dramatic, PDF-inspired ---- */
.work--feature {
  padding-block: clamp(6rem, 14vw, 11rem);
  min-height: clamp(620px, 82vh, 880px);
  /* Three columns: the text sits in the middle one, which is exactly as wide as
     its widest line, so the block is truly centred at every screen size. The
     showreel spans all three, edge to edge. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-content: center;
}
.work--feature > .reel { grid-column: 1 / -1; width: 100%; }   /* full width even when its height cap kicks in */
/* Both text blocks share the middle column, so the statement, signature and
   statistic start on one left edge and the rule matches the text. */
.work--feature > .wrap { grid-column: 2; width: auto; max-width: 100%; margin-inline: 0; }
.work--feature .work__inner { width: 100%; padding-left: 0; }   /* the column is already centred; no extra inset */
.statement--feature {
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);   /* stays under the hero H1 — that's the page's main claim */
  line-height: 1.28;
  letter-spacing: 0.002em;
}
.work__meta { margin-top: clamp(3rem, 7vw, 6rem); }
.work__rule { display: block; height: 1px; width: 100%; background: rgba(244, 242, 236, 0.16); }
.work__signature {
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: 0.005em;
  color: rgba(244, 242, 236, 0.55);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--cream-line);
  margin-top: clamp(6rem, 14vw, 12rem);
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
}
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer__copy {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Footer icons black (not grey) to match the copyright */
.footer .social a { color: var(--ink); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.hero .reveal { transition-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hero__headline h1 .line,
  .statement--wide .line { white-space: normal; }
}

@media (max-width: 720px) {
  .intro__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .intro__grid .eyebrow { padding-top: 0; }
  .clients__grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1rem; }   /* 16 names: two even columns of eight, nothing left alone on a last row */
  .work__inner, .contact__inner { padding-left: 0; }
  .hero__headline h1 { max-width: 100%; }
}

/* On phones the hand-set line breaks (chosen for desktop) wrap again and leave
   orphans — let the statement flow as one paragraph instead. */
@media (max-width: 620px) {
  .statement--feature { font-size: clamp(1.45rem, 6.4vw, 1.85rem); line-height: 1.34; }
  .statement--feature .line { display: inline; }
  .statement--feature .line::after { content: " "; }
}


/* ============================================================
   Newsletter signup (Netlify Forms) — usable on any page
   ============================================================ */
.signup {
  border-top: 1px solid var(--cream-line);
  padding-top: clamp(2.2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.signup .eyebrow { margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.signup__blurb {
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  max-width: 46ch;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: #5f5b52;
}
.signup__form { margin: 0; }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__srlabel {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.signup__row {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  max-width: 26rem;
  flex-wrap: wrap;
}
.signup__input {
  flex: 1 1 10rem;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.65rem 0.1rem;
  border-radius: 0;
  transition: opacity 0.25s ease;
}
.signup__input::placeholder { color: var(--muted); }
.signup__input:focus { outline: none; border-bottom-width: 2px; }
.signup__btn {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.signup__btn:hover { opacity: 0.78; }
.signup__btn[disabled] { opacity: 0.5; cursor: default; }
.signup__msg {
  margin: 0.9rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  min-height: 1em;
}
.signup__msg.is-ok  { color: var(--ink); }
.signup__msg.is-err { color: #a3402f; }

/* ---------- Hero loop (proxy until the real cut lands) ----------
   Sits above the still, which stays as poster + fallback. Same grayscale
   treatment so motion and photograph read identically. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: grayscale(100%) contrast(1.02);
  z-index: 0;
}
@media (max-width: 600px) {
  .hero__video { object-position: center; }   /* subjects move around the frame shot to shot; centre is the safest crop */
}
/* No motion for anyone who has asked not to have it — the still shows through */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---------- Showreel (dark section) ---------- */
.reel {
  position: relative;
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  /* Full width but cinema height, so it doesn't swallow the screen. The player
     centres a 16:9 film inside this strip; the bars either side are black on
     black, so they don't read. */
  aspect-ratio: 2.4 / 1;
  max-height: 68svh;
  background: #000;
  overflow: hidden;
}
/* On a phone the strip would be a letterbox sliver — go back to 16:9 */
@media (max-width: 700px) {
  .reel { aspect-ratio: 16 / 9; }
}
/* Cover frame is black and white like the rest of the page; the film itself
   plays in colour, in the lightbox below */
.reel__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.02);
}
.reel__button {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}
.reel__button:hover { background: rgba(0, 0, 0, 0.12); }
.reel__icon {
  width: clamp(48px, 6vw, 68px);
  height: clamp(48px, 6vw, 68px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  position: relative;
}
.reel__icon::after {                       /* plain triangle, optically centred */
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
}
.reel__label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Showreel lightbox — the film opens over the page ----------
   The player box is exactly 16:9, sized to fit the screen either way round,
   so the film fills it with no bars. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
  background: rgba(8, 8, 8, 0.95);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox__player {
  position: relative;
  width: min(100%, calc((100vh - 10rem) * 16 / 9));
  width: min(100%, calc((100svh - 10rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.lightbox__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lightbox__close {
  position: absolute;
  top: clamp(0.6rem, 2vw, 1.4rem);
  right: clamp(0.6rem, 2vw, 1.4rem);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { opacity: 1; }
html.lightbox-open { overflow: hidden; }   /* page doesn't scroll behind it */

/* One statistic on the whole site, and this is it */
.reel__stat {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  color: rgba(244, 242, 236, 0.72);
}

/* ---------- Founder quotes — a swipeable strip, not a carousel.
   No dots, no auto-advance; you scroll it like a page. ---------- */
/* Sits between the dark band and Get in touch — both of which bring their own
   generous padding, so keep this section's own spacing modest or the gaps stack. */
.quotes { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Same inset as the Work and Get in touch blocks — the page keeps one left edge */
.quotes .wrap > * { padding-left: clamp(0px, 4vw, 2.5rem); }
/* Get in touch doesn't need its full lead-in when quotes precede it */
.quotes + .contact { padding-top: clamp(3rem, 7vw, 5.5rem); }
.quotes .eyebrow { margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Wide: all three side by side, nothing hidden. */
.quotes__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
/* Narrow: becomes a swipeable strip rather than three cramped columns. */
@media (max-width: 860px) {
  .quotes__track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 22rem);
    padding-bottom: 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .quotes__item { scroll-snap-align: start; }
}
.quote { margin: 0; display: flex; flex-direction: column; height: 100%; }
.quote__text {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.42;
  color: var(--ink);
}
.quote__text::before { content: "\201C"; }
.quote__text::after  { content: "\201D"; }
.quote__cite {
  margin-top: auto;
  padding-top: clamp(1.1rem, 2.2vw, 1.6rem);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
/* Works unchanged if the strip is moved into the dark section */
.section--dark .quote__text { color: #f4f2ec; }
.section--dark .quote__cite { color: rgba(244, 242, 236, 0.6); }

/* The site's one statistic — give it the weight of a statement */
.reel__stat {
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);   /* matches the statement; its punch comes from white + isolation, not size */
  line-height: 1.16;
  letter-spacing: -0.004em;
  color: #fff;
}
.reel__stat em { font-style: italic; color: rgba(244, 242, 236, 0.62); white-space: nowrap; }   /* ‘and counting.’ never splits */