/* ==========================================================================
   Jack Ford — site styles
   Design tokens live on :root. The site is dark only.
   ========================================================================== */

:root {
  --bg: #000;
  --fg: #e8e2d8;
  --muted: rgba(232, 226, 216, 0.55);
  --line: rgba(232, 226, 216, 0.16);
  --btn-bg: #e8e2d8;
  --btn-fg: #0a0a0a;
  --hero-tint: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
  --hero-placeholder: radial-gradient(ellipse 45% 60% at 52% 45%, #3b3f52 0%, #1a1b22 45%, #060606 85%);
  --grain-opacity: 0.14;
  --accent: #c6a0ff; /* lavender, used sparingly: selection, caret, bullets, focus, hovers */
  --fg-strong: #fff;
  --faint: rgba(232, 226, 216, 0.3);
  --surface: #141414;
  --rule: rgba(255, 255, 255, 0.8);
  --on-media: #e8e2d8; /* text over the homepage videos */


  /* Atmosphere: haze, smoke and grain for the dark pages and the footer */
  --haze:
    radial-gradient(45% 40% at 18% 22%, rgba(120, 118, 150, 0.16), transparent 70%),
    radial-gradient(40% 45% at 85% 60%, rgba(160, 128, 104, 0.11), transparent 70%),
    radial-gradient(70% 45% at 50% 105%, rgba(110, 122, 140, 0.14), transparent 70%);
  --smoke-a: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271600%27 height=%271000%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27s%27 x=%270%27 y=%270%27 width=%27100%%27 height=%27100%%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.0022%27 numOctaves=%275%27 seed=%277%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.75  0 0 0 0 0.735  0 0 0 0 0.712  0 0 0 1.7 -0.72%27/%3E%3C/filter%3E%3Crect width=%27100%%27 height=%27100%%27 filter=%27url%28%23s%29%27/%3E%3C/svg%3E");
  --smoke-b: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271400%27 height=%27900%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27s%27 x=%270%27 y=%270%27 width=%27100%%27 height=%27100%%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.005%27 numOctaves=%274%27 seed=%2721%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.75  0 0 0 0 0.735  0 0 0 0 0.712  0 0 0 1.8 -0.85%27/%3E%3C/filter%3E%3Crect width=%27100%%27 height=%27100%%27 filter=%27url%28%23s%29%27/%3E%3C/svg%3E");
  --film-grain: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27s%27 x=%270%27 y=%270%27 width=%27100%%27 height=%27100%%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%272%27 seed=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 0.86  0 0 0 0 0.843  0 0 0 0 0.817  0 0 0 1 -0.45%27/%3E%3C/filter%3E%3Crect width=%27100%%27 height=%27100%%27 filter=%27url%28%23s%29%27/%3E%3C/svg%3E");

  /* Type system: display headings / mono labels / sans paragraphs */
  --font-display: "Noto Serif Display", "Didot", "Bodoni 72", "Times New Roman", serif;
  --display-stretch: 62.5%; /* extra-condensed */
  --display-weight: 300;
  --font-label: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --gutter: clamp(16px, 3vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}


*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

.label {
  font-family: var(--font-label);
  font-size: 11.5px;
  font-weight: var(--display-weight);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--accent); color: #000; }

/* Film grain over everything */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(22px, 2.2vw, 40px) var(--gutter);
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

/* Header: plain uppercase sans, Director / Photographer on the left, links on the right */
.site-nav a,
.split-label {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 100%;
  font-weight: 400;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.site-nav { margin-left: auto; } /* links sit top-right */

/* Home: the header turns solid black once you scroll, with NOVEMBER centred */
.page-home .site-header { transition: background-color 0.4s ease, padding 0.4s var(--ease); }
.page-home.is-scrolled .site-header,
.header-solid .site-header { background: var(--bg); padding-top: 16px; padding-bottom: 16px; }
/* Over the homepage videos the header stays light */
.page-home:not(.is-scrolled) .site-header { color: var(--on-media); }
.header-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(20px, 1.6vw, 30px);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.page-home.is-scrolled .header-name,
.header-solid .header-name { opacity: 1; visibility: visible; }
.site-nav a:hover { opacity: 0.6; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(18px, 1.6vw, 28px); line-height: 1; }
.site-nav li, .site-nav a { display: block; }
.site-nav a[aria-current="page"] { opacity: 0.55; }
/* Contact stands out in the header with a double underline */
.site-nav a[href="contact.html"] { text-decoration: underline double; text-decoration-thickness: 0.5px; text-underline-offset: 0.3em; text-decoration-color: var(--accent); }
.site-nav a { white-space: nowrap; }

/* ---------- Home ---------- */

/* First screen: the split. Below it: intro, featured projects, footer. */
.home-hero { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }

/* Two halves, each a looping video (or a cross-fading slideshow until the
   videos arrive), with a hairline between them. */
.split {
  position: absolute;
  inset: 0;
  background: var(--bg);
}
/* Horizontal split: weddings on top, other work on the bottom */
.split-half { position: absolute; left: 0; right: 0; overflow: hidden; background: var(--bg); }
.split-half[data-reel="left"] { top: 0; bottom: calc(50% + 1.5px); }
.split-half[data-reel="right"] { top: calc(50% + 1.5px); bottom: 0; }
/* Black and white until the cursor is over a half: then colour and a slow grow */
.split-media {
  position: absolute;
  inset: 0;
  filter: grayscale(1);
  transition: filter 0.8s ease, transform 1.2s var(--ease);
}
.split-half:hover .split-media { filter: none; transform: scale(1.06); }
@media (hover: none) {
  .split-media { filter: none; } /* touch screens can't hover, so keep the colour */
}
/* The 3px black gap between the halves shows through as a hairline */
.split-media video,
.split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-media .slide {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.6s ease, transform 0s linear 1.6s;
}
.split-media .slide.is-on {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.6s ease, transform 8s linear;
}
/* Shade the top and bottom so the menu and the name stay readable */
.split::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25) 16%, transparent 30%, transparent 58%, rgba(0, 0, 0, 0.6));
}

.home-name {
  position: absolute;
  z-index: 2;
  color: var(--on-media);
  /* tucked into the bottom-left corner: the same small gap below the letters as beside them */
  --corner: clamp(10px, 0.9vw, 16px);
  left: var(--corner);
  bottom: calc(var(--corner) * 2.2 - 0.12em); /* a little more room below than beside; the line box sits ~0.12em below the capitals */
  margin: 0;
  font-family: "Archivo", "Arial Black", "Helvetica Neue", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 104px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: inset(-0.5em -1em 0 -1em); /* rises from behind its bottom edge on load */
}
.home-name span { display: inline-block; }
/* Section names in the bottom-right corner of each half */
.split-label {
  position: absolute;
  z-index: 1;
  /* far right, sitting in the lower third of its half; the negative margin
     keeps the text on the gutter line while leaving room for the hover box */
  right: var(--gutter);
  top: 66.67%;
  margin: 0 -0.9em 0 0;
  color: var(--on-media);
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  padding: 0.75em 0.9em; /* room for the hover box */
  transform: translateY(-50%);
  transform-origin: 100% 50%;
  transition: transform 0.6s var(--ease), text-shadow 0.3s ease;
}
/* Hovering a half: a black box swipes in from the left behind its label, which grows a little */
.split-label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s var(--ease);
}
.split-half:hover .split-label { transform: translateY(-50%) scale(1.12); text-shadow: none; }
.split-half:hover .split-label::before { transform: scaleX(1); }
/* Shade the bottom of the top half so its label reads over bright footage */
.split-half[data-reel="left"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.45));
}
.home-name { pointer-events: none; } /* hovering the name keeps the half underneath lit */
/* Each half is a link to the Projects page with its filter picked */
.split-link { position: absolute; inset: 0; z-index: 1; }

/* Home intro: headline left, paragraph right */
.home-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: clamp(80px, 9vw, 140px) var(--gutter) clamp(90px, 11vw, 180px);
}
.home-headline {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 100%;
  font-weight: 700;
  font-size: clamp(30px, 2.9vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.home-intro { max-width: 37em; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: clamp(15px, 1.05vw, 19px); line-height: 1.5; }
.home-intro p { margin: 0 0 24px; }
.home-talk { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid currentColor; letter-spacing: 0.12em; }
.home-talk:hover { opacity: 0.6; }

/* Featured projects: one large on the left, two stacked on the right */
.home-featured { padding: 0 var(--gutter); }
.featured {
  display: grid;
  grid-template-columns: 2.03fr 1fr;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feat a { display: flex; flex-direction: column; height: 100%; }
.feat .shot { position: relative; aspect-ratio: 16 / 9; background: #000; }
.feat-big { grid-row: span 2; }
.feat-big .shot { flex: 1; aspect-ratio: auto; min-height: 0; }
.feat .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 18px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
}
.feat a:hover .feat-arrow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.feat-arrow svg { width: 16px; height: 16px; } /* drawn, so phones don't swap in an emoji arrow */
.feat-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 0.85vw, 15px);
}
.feat-type { color: var(--muted); font-weight: 400; }

/* Team: two framed photos side by side, each name over its photo's bottom edge, role below */
.home-team { padding: clamp(120px, 14vw, 240px) var(--gutter) 0; }
.home-team .home-headline { margin-bottom: clamp(56px, 6vw, 100px); }
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}
.member-stage { position: relative; margin-bottom: 0.45em; font-size: clamp(34px, 4.2vw, 96px); }
.member-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 55% 40%; }
/* Team photos sit in black and white until the cursor is over them (touch screens show colour) */
img.member-photo { filter: grayscale(1); transition: filter 0.8s ease; }
.member:hover img.member-photo { filter: none; }
@media (hover: none) { img.member-photo { filter: none; } }
.page-about img.member-photo { filter: none; } /* About page: always in colour */
.member-photo-empty {
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  color: var(--muted);
}
.member-name {
  position: absolute;
  left: 8%;
  bottom: -0.38em;
  margin: 0;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: inherit;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
}
.member-role { margin: 0 0 0 8%; padding-top: 16px; color: var(--muted); } /* lines up with the name; padding, not margin, so it adds to the gap under the name */
.member-placeholder .member-name { color: var(--muted); }

/* ---------- Contact panel (opened from any Contact / Let's talk link) ---------- */
.talk {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.35s ease;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
.talk[hidden] { display: none; } /* closed: fully out of the way */
.talk.is-open { opacity: 1; }
.talk.no-anim, .talk.no-anim .talk-side, .talk.no-anim .talk-main { transition: none; }
.talk-open, .talk-open body { overflow: hidden; }
/* Both sides drop down into place as it opens, the form a beat later */
.talk-side, .talk-main {
  transform: translateY(-40px);
  transition: transform 0.6s var(--ease);
}
.talk-main { transition-delay: 0.05s; }
.talk.is-open .talk-side, .talk.is-open .talk-main { transform: none; }

.talk-side {
  background: #f4f1ec;
  color: #0a0a0a;
  padding: clamp(56px, 6vw, 110px) clamp(24px, 3vw, 56px);
}
.talk-side-title { margin: 0 0 16px; font-weight: 700; font-size: clamp(30px, 2.6vw, 50px); line-height: 1.1; letter-spacing: -0.01em; }
.talk-side-text { margin: 0 0 32px; font-size: clamp(16px, 1.2vw, 21px); }
.talk-mail { font-family: var(--font-label); font-size: clamp(13px, 0.95vw, 16px); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.talk-mail:hover { opacity: 0.6; }

.talk-main {
  position: relative;
  background: #000;
  color: #f4f1ec;
  padding: clamp(80px, 8vw, 140px) clamp(24px, 3.5vw, 64px) 64px;
}
.talk-close { position: absolute; top: clamp(18px, 2vw, 32px); right: clamp(24px, 3.5vw, 64px); font-size: clamp(18px, 1.4vw, 24px); }
.talk-close:hover { opacity: 0.6; }
.talk-form { max-width: 900px; }
.talk-title { margin: 0 0 12px; font-weight: 700; font-size: clamp(34px, 3.2vw, 60px); line-height: 1.05; letter-spacing: -0.01em; }
.talk-intro { margin: 0 0 clamp(36px, 4vw, 64px); font-size: clamp(16px, 1.2vw, 21px); color: rgba(244, 241, 236, 0.7); }
.talk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 2.6vw, 44px) clamp(20px, 2vw, 36px); }
.talk-wide { grid-column: 1 / -1; }
.talk-field { display: grid; gap: 10px; }
.talk-field span { font-size: clamp(14px, 1vw, 17px); color: rgba(244, 241, 236, 0.75); }
.talk-field em { font-style: normal; opacity: 0.6; }
.talk-field input,
.talk-field textarea {
  width: 100%;
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(244, 241, 236, 0.35);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: clamp(19px, 1.5vw, 26px);
  transition: border-color 0.25s;
}
.talk-field textarea { resize: vertical; min-height: 3.2em; }
.talk-field input::placeholder { color: rgba(244, 241, 236, 0.25); }
.talk-field input:focus,
.talk-field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.talk-field.is-invalid input { border-bottom-color: #e08a8a; }
.talk-actions { display: flex; align-items: center; gap: 24px; margin-top: clamp(40px, 4vw, 64px); }
.talk-submit {
  padding: 18px 44px;
  border-radius: 999px;
  background: #f4f1ec;
  color: #000;
  font-family: var(--font-label);
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.talk-submit:hover { transform: translateY(-2px); }
.talk-status { margin: 0; color: rgba(244, 241, 236, 0.7); }

/* Sections fade up as they come into view */
.reveal-ready { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1.2s var(--ease); }
.reveal-ready.is-in { opacity: 1; transform: none; }

/* ---------- Page intro ----------
   Home: both halves zoom in from oversized (the right a beat later)
   while NOVEMBER rises from behind its baseline and the header fades in.
   About: the story and header fade in; the team fades up on scroll.
   Contact: SAY HI rises up while the header and form fade in.
   Work: WORK rises up while the header, info row and projects fade in.
   Project: the title rises while the cover settles in and the rest fades.
   `backwards` fill only holds the start frame. */

.intro:not(.intro-play) .split-media,
.intro:not(.intro-play) .project-kicker,
.intro:not(.intro-play) .project-media,
.intro:not(.intro-play) .video-link,
.intro:not(.intro-play) .project-brief,
.intro:not(.intro-play) .about-story,
.intro:not(.intro-play) .pricing-intro,
.intro:not(.intro-play) .price-grid,
.intro:not(.intro-play) .projects-intro,
.intro:not(.intro-play) .filters,
.intro:not(.intro-play) .project-grid,
.intro:not(.intro-play) .contact-block,
.intro:not(.intro-play) .contact-role,
.intro:not(.intro-play) .site-header,
.intro:not(.intro-play) .split-label { opacity: 0; }
.intro:not(.intro-play) .marquee-group,
.intro:not(.intro-play) .home-name span,
.intro:not(.intro-play) .project-title span { transform: translateY(110%); }

.intro-play .split-media { animation: intro-zoom 1.8s cubic-bezier(0.33, 1, 0.68, 1) backwards; }
.intro-play .split-half + .split-half .split-media { animation-delay: 0.15s; }
.intro-play .marquee-group,
.intro-play .home-name span,
.intro-play .project-title span { animation: intro-rise 1s var(--ease) 0.35s backwards; }
.intro-play .site-header,
.intro-play .split-label,
.intro-play .project-kicker,
.intro-play .project-media,
.intro-play .video-link,
.intro-play .project-brief,
.intro-play .pricing-intro,
.intro-play .price-grid,
.intro-play .projects-intro,
.intro-play .filters,
.intro-play .project-grid,
.intro-play .contact-block,
.intro-play .contact-role,
.intro-play .about-story { animation: intro-fade 1s ease 0.35s backwards; }

@keyframes intro-zoom {
  0% { opacity: 0; transform: scale(1.3); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes intro-rise {
  from { transform: translateY(110%); }
  to { transform: none; }
}
@keyframes intro-settle {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: none; }
}
@keyframes intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Inner pages ---------- */

.page-inner main {
  min-height: 100vh;
  padding: clamp(24px, 3.5vw, 56px) var(--gutter) 80px calc(var(--gutter) + 200px);
}

/* Work */
/* Projects page: intro, filter, three-column grid (cards share the .feat styles) */
.page-work main { padding: clamp(120px, 11vw, 180px) var(--gutter) 120px; }

/* Pricing: intro, then three boxes (photography, film, both) */
.page-pricing main { padding: clamp(120px, 11vw, 180px) var(--gutter) clamp(40px, 5vw, 80px); }
.pricing-intro { max-width: 52em; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: clamp(15px, 1.05vw, 19px); line-height: 1.5; }
.pricing-intro .home-headline { margin-bottom: 20px; }
.pricing-intro p { margin: 0; max-width: 46em; }
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: clamp(48px, 5vw, 90px);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
.price-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 40px);
  background: #161616; /* dark grey, no outline */
}
/* Film & Photography: the off-white of the contact panel, black text */
.price-card-both { background: #f4f1ec; color: #0a0a0a; }
.price-card-both .price-total { border-top-color: rgba(10, 10, 10, 0.2); }
.price-card-both .price-total-label { color: rgba(10, 10, 10, 0.55); }
.price-card-both .price-list li::before { background: currentColor; } /* lavender is too faint on the off-white box */
.price-title { margin: 0 0 clamp(20px, 2vw, 32px); font-weight: 700; font-size: clamp(22px, 1.7vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
.price-list { flex: 1; margin: 0 0 clamp(28px, 3vw, 48px); padding: 0; list-style: none; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; }
.price-list li { position: relative; padding-left: 1.1em; }
.price-list li + li { margin-top: 0.45em; }
.price-list li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--accent); }
.price-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid rgba(232, 226, 216, 0.18); }
.price-total-label { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.price-amount { font-stretch: 125%; font-weight: 900; font-size: clamp(28px, 2.4vw, 44px); line-height: 1; }
/* Prices left blank for now: hide the Total row but keep each box the same height */
.price-total:has(.price-amount:empty) { visibility: hidden; }
.pricing-talk { margin-top: clamp(36px, 4vw, 64px); }
@media (max-width: 1100px) { .price-grid { grid-template-columns: 1fr 1fr; } .price-card-both { grid-column: 1 / -1; } }
.projects-intro {
  max-width: 64em;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.5;
}
.projects-intro .home-headline { margin-bottom: 20px; }
.projects-intro p { margin: 0 0 16px; max-width: 46em; }
.projects-intro .home-talk { margin-top: 18px; }
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: clamp(56px, 6vw, 96px) 0 clamp(28px, 3vw, 48px);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 1.05vw, 18px);
}
.filters-label { color: var(--faint); }
.filters button { color: var(--muted); transition: color 0.2s; }
.filters button:hover,
.filters button[aria-pressed="true"] { color: var(--fg); }
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-grid .feat[hidden] { display: none; }
@media (max-width: 1100px) and (min-width: 761px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }

/* Project: client/type, title, film or cover, the brief + details, then photos */
.page-project main { padding: clamp(104px, 9vw, 160px) var(--gutter) clamp(48px, 5vw, 96px); }
.project-head { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; }
.project-kicker { margin: 0 0 6px; font-size: clamp(13px, 0.95vw, 16px); color: var(--muted); }
.project-title {
  margin: 0;
  clip-path: inset(-0.5em -1em 0 -1em); /* rises from behind the bottom edge on load */
  font-weight: 700;
  font-size: clamp(34px, 3vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.project-title span { display: inline-block; }
.project-media { margin-top: clamp(28px, 3vw, 56px); }
.project-cover { position: relative; }
.project-cover img { display: block; width: 100%; height: auto; }
.project-cover.has-video { aspect-ratio: 16 / 9; } /* the loop sets the shape; the image fills it until the video plays */
.project-cover.has-video img { height: 100%; object-fit: cover; }
.project-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.project-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The brief (left) and the details column (right) */
.project-brief {
  display: grid;
  grid-template-columns: minmax(0, 46em) minmax(12em, auto);
  justify-content: space-between;
  gap: 48px;
  margin: clamp(56px, 6vw, 110px) 0 clamp(64px, 7vw, 130px);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
.brief-title { margin: 0 0 18px; font-weight: 700; font-size: clamp(26px, 2vw, 38px); line-height: 1.1; letter-spacing: -0.01em; }
.brief-body p { margin: 0 0 1em; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.5; }
.brief-typed {
  min-height: 3em; /* room for two lines, so nothing below jumps while it types */
  margin: clamp(28px, 3vw, 48px) 0 0;
  font-family: var(--font-label);
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.5;
}
.typed-caret {
  display: inline-block;
  width: 0.09em;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: var(--accent);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.brief-meta { margin: 0; font-size: clamp(13px, 0.9vw, 15px); }
.brief-meta dt { margin: 22px 0 0; font-weight: 600; }
.brief-meta dt:first-child { margin-top: 0; }
.brief-meta dd { display: grid; gap: 3px; margin: 10px 0 0; font-family: var(--font-label); }

/* Photos: one at a time, as big as the screen allows (--ar is width / height) */
.project-gallery { display: grid; gap: clamp(16px, 2vw, 36px); }
.gallery-row { display: flex; justify-content: center; gap: clamp(12px, 1.4vw, 24px); }
.gallery-row .shot { flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); }
.gallery-row .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-single .shot,
.gallery-full .shot,
.gallery-big .shot { flex: none; width: min(100%, calc((100vh - 120px) * var(--ar))); }
/* Varied (Wedding Photography): big, three across, small to one side, two across */
.gallery-small-right { justify-content: flex-end; }
.gallery-small-left { justify-content: flex-start; }
.gallery-small-right .shot,
.gallery-small-left .shot { flex: none; width: min(34%, calc((100vh - 120px) * var(--ar))); }

.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  background: #000 center / cover no-repeat;
  overflow: hidden;
}
.video-play::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); transition: background 0.4s; }
.video-play:hover::before { background: rgba(0, 0, 0, 0.1); }
.video-play-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 104px);
  height: clamp(64px, 7vw, 104px);
  border: 1px solid #e8e2d8;
  border-radius: 50%;
  color: #e8e2d8;
  transition: transform 0.6s var(--ease), background-color 0.3s, color 0.3s;
}
.video-play-icon svg { width: 32%; height: 32%; margin-left: 6%; }
.video-play:hover .video-play-icon { transform: scale(1.08); background: #e8e2d8; color: #0a0a0a; }
.video-link { display: block; margin-top: 12px; text-align: right; color: var(--muted); }
.video-link:hover { color: var(--fg); }

/* Same slow hover zoom as the Work page thumbnails */
.shot { overflow: hidden; }
.shot img, .shot-video { transition: transform 1.2s var(--ease); }
.shot:hover img, .shot:hover .shot-video { transform: scale(1.05); }

/* About */
.page-about main { padding: 0; }

/* Our story (white), then the team section shared with home */
/* Headline on top, then the two paragraphs side by side */
.about-story { display: block; padding-top: clamp(150px, 14vw, 240px); }
.about-story .home-headline { margin-bottom: clamp(28px, 3vw, 56px); }
/* "Introducing" in the headline sans, "November" below it in the wide wordmark face, a little bigger */
.about-title-intro, .about-title-name { display: block; }
.about-title-name {
  margin-top: 0.08em;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 1.3em;
  line-height: 1;
  text-transform: uppercase;
}
.about-story-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: clamp(17px, 1.3vw, 23px); line-height: 1.5; color: var(--fg-strong); }
.about-story-text p { margin: 0 0 1em; }
/* Scope of work under the left paragraph */
.about-scope-title { margin: 0 0 0.5em; font-size: 1em; font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.about-scope { margin: 0; padding: 0; list-style: none; }
.about-scope li { position: relative; padding-left: 1.1em; }
.about-scope li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--accent); }
.page-about .home-team { padding-top: 0; }

/* Background is pure black everywhere (Jack's call): the haze, smoke and
   grain layers below are switched off but kept in case he wants them back. */
.page-work::before, .page-work::after,
.page-contact::before, .page-contact::after,
.site-footer::before, .site-footer::after { display: none !important; }

/* ---------- Atmosphere ----------
   Work and Contact get a drifting haze behind the whole page; the
   About and project pages get it in the footer only. Two smoke layers
   drift at different speeds for a little depth, with film grain on top. */

.page-work::before,
.page-contact::before,
.page-work::after,
.page-contact::after {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
}
.page-work::before,
.page-contact::before {
  background: var(--haze), var(--smoke-a) center / cover no-repeat;
  opacity: 0.11;
  animation: atmos-drift 60s ease-in-out infinite alternate;
}
.page-work::after,
.page-contact::after {
  background: var(--film-grain) 0 0 / 220px; /* grain only */
  opacity: 0.12;
  animation: atmos-drift-b 38s ease-in-out infinite alternate;
}

/* Contact sits a touch quieter than Work */
.page-contact::before { opacity: 0.09; }
.page-contact::after { opacity: 0.1; }

.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.page-about .site-footer::before,
.page-home .site-footer::before,
.page-inner:not(.page-work) .site-footer::before,
.page-about .site-footer::after,
.page-home .site-footer::after,
.page-inner:not(.page-work) .site-footer::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: var(--haze), var(--smoke-a) center / cover no-repeat;
  opacity: 0.11;
  /* rise out of the plain black above */
  -webkit-mask-image: linear-gradient(transparent, #000 35%);
  mask-image: linear-gradient(transparent, #000 35%);
  animation: atmos-drift 60s ease-in-out infinite alternate;
}
/* Footer grain on its own layer, so the smoke can be thinner than the grain */
.page-about .site-footer::after,
.page-home .site-footer::after,
.page-inner:not(.page-work) .site-footer::after {
  background: var(--film-grain) 0 0 / 220px;
  opacity: 0.16;
  animation: none;
}

@keyframes atmos-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
@keyframes atmos-drift-b {
  from { transform: translate3d(4%, 1%, 0); }
  to { transform: translate3d(-4%, -2%, 0); }
}

/* ---------- Footer ----------
   Huge NOVEMBER across the full width, a hairline, Quick links, and the
   copyright bottom-right. On every page except Contact. */

.site-footer {
  container-type: inline-size;
  margin-top: clamp(100px, 12vw, 200px);
  padding: 0 var(--gutter) clamp(24px, 2.5vw, 40px);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
.footer-name {
  margin: 0;
  padding-top: 0.04em;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 13.26cqw; /* NOVEMBER fills the footer's width edge to edge */
  line-height: 0.82;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: inset(-0.2em -1em 0 -1em); /* rises from behind its bottom edge */
}
.footer-name span { display: inline-block; margin-left: -0.072em; } /* pull the N's side bearing back to the edge */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: clamp(24px, 2.4vw, 40px) calc(-1 * var(--gutter)) 0;
  padding: clamp(40px, 3.6vw, 64px) var(--gutter) 0;
  border-top: 1px solid var(--rule);
}
.footer-links { grid-column: 1; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-links a { font-size: clamp(15px, 0.95vw, 17px); }
.footer-links a { transition: color 0.25s; }
.footer-links a:hover { color: var(--accent); }
.footer-base {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(20px, 2vw, 36px);
  margin-top: clamp(56px, 6vw, 100px);
  font-size: clamp(13px, 0.8vw, 15px);
  color: var(--muted);
}
.footer-legal { margin: 0; }

/* Reveal on scroll (classes added by main.js): the name rises, the rest fades */
/* Fade + slide up: the name rises from its baseline, then the line, links and © follow */
.site-footer.reveal .footer-name span { opacity: 0; transform: translateY(105%); }
.site-footer.reveal .footer-cols,
.site-footer.reveal .footer-base { opacity: 0; transform: translateY(40px); }
.site-footer.reveal.is-in .footer-name span,
.site-footer.reveal.is-in .footer-cols,
.site-footer.reveal.is-in .footer-base { opacity: 1; transform: none; transition: opacity 1s ease, transform 1.2s var(--ease); }
.site-footer.reveal.is-in .footer-cols { transition-delay: 0.2s; }
.site-footer.reveal.is-in .footer-base { transition-delay: 0.35s; }

/* Scrolling marquee (Contact's SAY HI) */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight);
  font-size: clamp(6.23rem, 26.45vw, 35.29rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-transform: uppercase;
}
.marquee-group span { padding: 0 0.12em; }
.marquee-group svg { width: 0.32em; height: 0.32em; margin: 0 0.1em; flex: none; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Contact */
.page-contact main { padding: 0 0 clamp(24px, 2.5vw, 40px); }
.page-contact .site-header { position: absolute; }

.say-hi {
  margin-top: clamp(150px, 20vh, 240px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.say-hi .marquee-track { animation-duration: 30s; }

.contact-block { padding: clamp(48px, 7vh, 96px) var(--gutter) 0; }
.contact-kicker { margin: 0 0 6px 2vw; }
.contact-mail {
  font-size: clamp(32px, 3vw, 64px);
  line-height: 1.2;
  color: var(--accent);
  transition: opacity 0.2s;
}
.contact-mail:hover { opacity: 0.7; }

.contact-form {
  display: grid;
  gap: 28px;
  width: min(100%, max(560px, 47vw));
  margin-top: clamp(32px, 4vw, 56px);
}
.contact-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-legend { padding: 0; margin-bottom: 14px; font-family: var(--font-label); font-size: 17px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 10px; }
.field-label { font-family: var(--font-label); font-size: 13px; }
.field-label-lg { font-size: 17px; }
.field-label em { font-style: normal; color: var(--muted); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 22px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { min-height: 170px; padding: 16px 22px; border-radius: 28px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.form-actions { display: flex; align-items: center; gap: 24px; }
.form-send {
  padding: 12px 34px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 15px;
  transition: background-color 0.25s, color 0.25s;
}
.form-send:hover { background: var(--fg); color: var(--bg); }
.form-status { margin: 0; color: var(--muted); }

.contact-role { margin-top: clamp(64px, 10vw, 160px); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  .site-header {
    align-items: center;
    padding: 16px;
    background: linear-gradient(var(--bg), transparent);
  }
  .page-home .site-header { background: none; }
  .site-nav a { font-size: 11px; letter-spacing: 0; }
  .split-label { font-size: 11px; right: 16px; }
  .site-nav ul { gap: 10px; }

  .marquee-group { font-size: 27.98vw; }
  .home-name { font-size: 11.5vw; }
  .header-name { position: static; transform: none; font-size: 14px; } /* phones: left of the links */
  .home-about { grid-template-columns: 1fr; gap: 24px; padding: 72px 16px 80px; }
  .home-featured { padding: 0 16px; }
  .featured { grid-template-columns: 1fr; gap: 28px; }
  .feat-big { grid-row: auto; }
  .feat-big .shot { aspect-ratio: 16 / 9; }
  .home-team { padding: 100px 16px 0; }
  .talk { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .talk-main { order: -1; padding: 72px 16px 48px; }
  .talk-close { right: 16px; top: 18px; }
  .talk-side { padding: 40px 16px 56px; }
  .talk-fields { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; gap: 64px; } /* phones: stacked */
  .member-stage { font-size: 10vw; }


  .page-inner main { padding: 96px 16px 64px; }
  .page-work main, .page-pricing main { padding-top: 112px; }
  .price-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-project main { padding: 96px 16px 40px; }
  .project-brief { grid-template-columns: 1fr; gap: 36px; margin: 48px 0 56px; }
  .gallery-small-right .shot, .gallery-small-left .shot { width: 62%; }
  .page-about main { padding: 0; }
  .page-contact main { padding: 0 0 24px; }
  .page-contact .site-header { background: none; }
  .say-hi { margin-top: 120px; }
  .contact-block { padding: 40px 16px 0; }
  .contact-kicker { margin-left: 0; }
  .contact-mail { font-size: 8.4vw; }
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .about-story { padding-top: 110px; }
  .about-story-text { grid-template-columns: 1fr; gap: 0; }
  .about-scope { columns: 2; column-gap: 16px; margin-bottom: 1.6em; } /* phones: three bullets per column, space before the next paragraph */
  .about-scope li { break-inside: avoid; }
  .page-about .home-team { padding-top: 0; }
  .site-footer { padding: 0 16px 24px; }
  .footer-cols { grid-template-columns: 1fr; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

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

/* Very small phones: keep NOVEMBER and the four header links on one line */
@media (max-width: 370px) {
  .header-name { font-size: 12px; }
  .site-nav ul { gap: 8px; }
  .site-nav a { font-size: 10.5px; }
}