/* ============================================================
   JOMII.AI — style.css
   ============================================================
   Quiet on purpose. One video, big type, plenty of black.
   All the colour in this site comes from your work — that
   restraint is what makes the work look expensive.

   The dials worth knowing about are marked >>> like this <<<
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS — DARK  (the default here, like Rowan)
   ------------------------------------------------------------ */
:root {
  --bg:      #0a0a0b;
  --fg:      #f6f6f7;
  --body:    #9a9aa2;
  --muted:   #6b6b73;
  --surface: #131316;
  --border:  #232329;
  --overlay: 10, 10, 11;

  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad:     32px;   /* the page's left and right margin */
  --gap:     130px;  /* space between sections */
  --radius:  4px;    /* almost square — Rowan barely rounds anything */

  --ease:    cubic-bezier(0.16, 0.84, 0.44, 1);
}


/* ------------------------------------------------------------
   2. TOKENS — LIGHT
   ------------------------------------------------------------
   Turns on from the visitor's device, or from the button in
   the menu. Their choice is remembered.
   ------------------------------------------------------------ */
:root[data-theme="light"] {
  --bg:      #ffffff;
  --fg:      #0d0d0f;
  --body:    #5c6068;
  --muted:   #8c9099;
  --surface: #f4f4f6;
  --border:  #e2e2e7;
  --overlay: 255, 255, 255;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:      #ffffff;
    --fg:      #0d0d0f;
    --body:    #5c6068;
    --muted:   #8c9099;
    --surface: #f4f4f6;
    --border:  #e2e2e7;
    --overlay: 255, 255, 255;
  }
}


/* ------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-loading, body.menu-open { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.04;
}

p { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* The monospace voice. Used for anything that is a label,
   a link or a piece of data — never for reading text. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.5;
}

.link {
  color: var(--fg);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms var(--ease);
  cursor: pointer;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

button.link {
  border: 0;
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0 0 2px;
}

:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

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


/* ------------------------------------------------------------
   4. PRELOADER
   ------------------------------------------------------------
   Just the name and a count. It leaves the moment the page is
   ready — main.js has a ceiling so nobody is ever stuck.
   ------------------------------------------------------------ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 800ms var(--ease), visibility 800ms;
}

.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__mark {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--fg);
}

.preloader__count {
  position: absolute;
  left: var(--pad);
  bottom: 34px;
}

.preloader__bar {
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 26px;
  height: 1px;
  background: var(--border);
  overflow: hidden;
}
.preloader__fill {
  display: block; height: 100%; width: 0%;
  background: var(--fg);
  transition: width 280ms var(--ease);
}


/* ------------------------------------------------------------
   5. NAV
   ------------------------------------------------------------
   Three parts: name on the left, the booking button in the
   middle, links on the right.

   The middle button is the one thing on this site asking for
   something, so it gets the only solid shape.
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--pad);
  transition: background 400ms var(--ease), border-color 400ms var(--ease);
}

.nav--over { color: #fff; }              /* sitting over the video */
.nav--over .nav__name { color: #fff; }
.nav--over .nav__link { color: rgba(255,255,255,0.82); }
.nav--over .nav__link:hover { color: #fff; }

/* Once the film has scrolled away, the nav needs its own
   surface — white type on a white page is invisible, and this
   is the bar carrying the booking button. */
.nav--solid {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav__name {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--fg);
  justify-self: start;
}

.nav__cta {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.nav--over .nav__cta { background: #fff; color: #111; }
.nav__cta:hover { opacity: 0.86; transform: translateY(-1px); }

.nav__links {
  justify-self: end;
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav__link {
  font-size: 0.92rem;
  color: var(--body);
  transition: color 300ms var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }

/* The MENU word — phones only */
.nav__burger {
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--fg);
  cursor: pointer;
}


/* ------------------------------------------------------------
   6. MENU  (phones)
   ------------------------------------------------------------ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px var(--pad) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 400ms;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__list { list-style: none; margin: 0; padding: 0; }

.menu__item {
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--fg);
  padding: 6px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.menu.is-open .menu__item { opacity: 1; transform: none; }

.menu__foot {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}


/* ------------------------------------------------------------
   7. HERO — one video, nothing else
   ------------------------------------------------------------
   >>> The film is  videos/hero.mp4  <<<
   It fills the screen, plays silently, and loops forever.
   Everything sits on top of it.
   ------------------------------------------------------------ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: #0a0a0b;
}

.hero__media,
.hero__media video,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Just enough darkness for the type to hold. Any more and the
   film stops being the point. */
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.05) 30%,
      rgba(0,0,0,0.10) 65%,
      rgba(0,0,0,0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
}

.hero__title {
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__mark {
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #fff;
  line-height: 1;
}

.hero__sub {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.1vw, 0.9rem);
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
}

/* The two buttons on the hero. Hidden on a laptop, where these
   same links already sit in the bar at the top. Switched on in
   the phone rules further down. */
.hero__links { display: none; }

/* The words along the bottom. They tell someone what you do
   before they've scrolled a single pixel. */
.hero__services {
  position: absolute;
  z-index: 2;
  left: var(--pad); right: var(--pad); bottom: 30px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}


/* ------------------------------------------------------------
   8. SECTIONS
   ------------------------------------------------------------ */
.section { padding: var(--gap) 0; }

.wrap { padding: 0 var(--pad); }

.section-title {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  margin-bottom: 40px;
  padding: 0 var(--pad);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }


/* ------------------------------------------------------------
   9. WORKS — the gallery
   ------------------------------------------------------------
   Not a grid of thumbnails. Each piece gets the full width of
   the screen and its own moment, with the title and a line of
   context sitting on the image.

   Someone scrolling sees four or five things properly instead
   of twenty things badly.
   ------------------------------------------------------------ */
.works { display: flex; flex-direction: column; gap: 12px; }

/* Each work is an <article>, not a link. That matters: a link
   cannot legally contain another link, and every work needs a
   main link PLUS the brand's own links. So the main link is a
   transparent panel stretched over the image, and the brand
   links sit above it. */
.work {
  position: relative;
  display: block;
  height: clamp(460px, 82vh, 900px);
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius);
}

.work__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.work img,
.work video,
.work picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease);
}
/* A <picture> is just a wrapper — the img inside is the thing
   that actually has to fill the tile. */
.work picture { display: block; }
.work picture img { transition: none; }
.work:hover img, .work:hover video, .work:hover picture { transform: scale(1.03); }

.work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.05) 100%);
}

/* Title on the left, description across the middle — the same
   arrangement holds on every work, so the eye learns it once. */
.work__info {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(220px, 26%) 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 0 44px;
  color: #fff;
  pointer-events: none;
}

.work__title { font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: #fff; }

.work__year {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
}

.work__desc {
  max-width: 62ch;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

.work__arrow {
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  align-self: end;
  padding-bottom: 44px;
  transition: transform 500ms var(--ease);
}
.work:hover .work__arrow { transform: translate(5px, -5px); }

/* The brand link has to stay clickable even though the rest of
   the caption is see-through to the mouse. */
.work__visit {
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.85);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms var(--ease), color 300ms var(--ease);
}
.work__visit:hover { color: #fff; background-size: 100% 1px; }

.work__links { display: flex; gap: 20px; margin-top: 14px; }

/* A file that isn't there yet drops out and the page closes up */
.work.is-empty { display: none; }


/* ------------------------------------------------------------
   9b. THE VIDEO GALLERY  (every film in one place)
   ------------------------------------------------------------
   Two per row, big enough to actually watch. The caption sits
   UNDER each film rather than on top of it — with this many
   pieces, text over the image would mean twenty dark bars
   competing down the page.
   ------------------------------------------------------------ */
/* >>> How many per row. Three is the dial worth knowing about:
   this page holds EVERYTHING, so it has to be scannable. Two
   would be beautiful and useless once you have thirty films. <<< */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px 22px;
  padding: 0 var(--pad);
}

.piece { margin: 0; }

.piece__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.piece__media img,
.piece__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease);
}
.piece:hover .piece__media img,
.piece:hover .piece__media video { transform: scale(1.03); }

.piece__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
}

.piece__brand { font-size: 1.05rem; color: var(--fg); font-weight: 500; }
.piece__note { margin-top: 4px; max-width: 46ch; font-size: 0.92rem; }

/* A file that isn't there yet drops out and the grid closes up */
.piece.is-empty { display: none; }


/* ------------------------------------------------------------
   9c. BRAND PAGES
   ------------------------------------------------------------
   One brand, its films, and what you actually did on each.
   The film sits left, the explanation right, so someone can
   read while it plays.
   ------------------------------------------------------------ */
.film {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 46px;
  align-items: start;
  padding: 0 var(--pad);
  margin-bottom: 90px;
}

.film__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.film__media video,
.film__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
}

.film__title { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 16px; }
.film__body { max-width: 52ch; }
.film__body p + p { margin-top: 14px; }

.film.is-empty { display: none; }

/* The stills underneath — smaller, three across, no captions.
   They're supporting evidence, not the main event. */
.stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0 var(--pad);
}

.still {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.still:hover img { transform: scale(1.04); }
.still.is-empty { display: none; }



   A list of names, each with its own links. No logos — most
   brand logos you'd be sent are low-resolution, and they'd
   fight with your work anyway.
   ------------------------------------------------------------ */
.brands { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }

.brand-row {
  display: grid;
  grid-template-columns: minmax(200px, 30%) 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.brand-row__name { font-size: 1.15rem; color: var(--fg); font-weight: 500; }
.brand-row__links { display: flex; gap: 22px; flex-wrap: wrap; }


/* ------------------------------------------------------------
   10b. FILM CONTROLS  (sound, and full view)
   ------------------------------------------------------------
   Two small buttons on every film. They sit low so they don't
   cover the subject, and they stay faintly visible rather than
   appearing on hover — a control nobody knows is there may as
   well not exist, and on a phone there is no hover at all.
   ------------------------------------------------------------ */
.media-controls {
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;   /* only the buttons themselves are clickable */
}

.media-btn {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 250ms var(--ease), background 250ms var(--ease), transform 250ms var(--ease);
}

.media-btn:hover,
.media-btn:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.72);
  transform: scale(1.06);
}

.media-btn svg { width: 17px; height: 17px; display: block; fill: currentColor; }

/* The film with sound on gets a bright button, so you can see
   at a glance which one you unmuted. */
.media-btn.is-live { opacity: 1; background: rgba(255, 255, 255, 0.92); color: #111; }


/* ------------------------------------------------------------
   10c. FULL VIEW
   ------------------------------------------------------------
   Films are cropped to one shape in the galleries so the grid
   lines up. This shows the real thing: whole frame, its own
   proportions, nothing cut off.
   ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 5vh 4vw;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease), visibility 320ms;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

/* contain, never cover — seeing the full frame is the point */
.lightbox video {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: #000;
}

.lightbox__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 250ms var(--ease), transform 250ms var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.24); transform: rotate(90deg); }
.lightbox__close svg { width: 18px; height: 18px; fill: currentColor; }

.lightbox__hint {
  position: absolute;
  bottom: 22px;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}



/* ------------------------------------------------------------
   11. SERVICES
   ------------------------------------------------------------
   Numbered, because a service list genuinely is a set of
   distinct offers you can point at — "we'll do 02 and 04".
   ------------------------------------------------------------ */
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }

.service {
  display: grid;
  grid-template-columns: 60px minmax(180px, 26%) 1fr;
  gap: 30px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}

.service__num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); padding-top: 4px; }
.service__name { font-size: 1.15rem; color: var(--fg); font-weight: 500; }
.service__desc { max-width: 66ch; }
.service__links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }


/* ------------------------------------------------------------
   12. PAGE HEADERS
   ------------------------------------------------------------ */
.page-head { padding: 190px var(--pad) 0; }

.page-head__title {
  font-size: clamp(2.6rem, 8vw, 6rem);
  letter-spacing: -0.04em;
}

.page-head__lead {
  margin-top: 22px;
  max-width: 54ch;
  font-size: 1.05rem;
}

.back { display: inline-block; margin-bottom: 22px; }


/* ------------------------------------------------------------
   13. CONTACT
   ------------------------------------------------------------ */
.contact {
  display: grid;
  grid-template-columns: minmax(160px, 18%) 1fr minmax(200px, 22%);
  gap: 50px;
  padding: 0 var(--pad);
  align-items: start;
}

.field { margin-bottom: 46px; }

.field label {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 8px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 1.05rem;
  transition: border-color 350ms var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--fg);
}

.field textarea { resize: vertical; min-height: 110px; }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.submit {
  padding: 14px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 350ms var(--ease), border-color 350ms var(--ease);
}
.submit:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.form-note { margin-top: 16px; }
.form-note[hidden] { display: none; }

.info-block { margin-bottom: 44px; }
.info-block__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.info-block__value { color: var(--fg); font-size: 1.05rem; }
.info-block__value a { display: block; }

.calendar {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 640px;
}
.calendar-note { padding: 22px; }


/* ------------------------------------------------------------
   14. CLOSING CALL TO ACTION
   ------------------------------------------------------------ */
.cta {
  padding: 0 var(--pad) var(--gap);
}

.cta__inner {
  border-top: 1px solid var(--border);
  padding-top: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 26px;
  flex-wrap: wrap;
}

.cta__title { font-size: clamp(1.7rem, 4.5vw, 3rem); }

.cta__button {
  display: inline-flex;
  padding: 15px 32px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.98rem;
  font-weight: 500;
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.cta__button:hover { opacity: 0.88; transform: translateY(-2px); }


/* ------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------ */
.footer {
  padding: 30px var(--pad);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; }


/* ------------------------------------------------------------
   16. SMALLER SCREENS
   ------------------------------------------------------------
   On a phone the caption moves off the middle of the image and
   sits at the bottom, where there's room to read it.
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  :root { --gap: 90px; }

  .contact { grid-template-columns: 1fr; gap: 40px; }
  .service { grid-template-columns: 44px 1fr; }
  .service__desc { grid-column: 2; }
  .brand-row { grid-template-columns: 1fr; gap: 10px; }

  /* Film above its explanation, rather than a squeezed column */
  .film { grid-template-columns: 1fr; gap: 24px; margin-bottom: 66px; }

  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --pad: 20px; --gap: 76px; }

  .nav { grid-template-columns: 1fr auto; }
  .nav__cta { display: none; }        /* it moves into the menu */
  .nav__links { display: none; }
  .nav__burger { display: block; justify-self: end; }
  .nav--over .nav__burger { color: #fff; }

  .hero__title { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Column, so the buttons sit under the name rather than
     beside it. */
  .hero__inner {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .hero__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    width: 100%;
    max-width: 320px;
  }

  .hero__link {
    padding: 14px 22px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    transition: opacity 300ms var(--ease), background 300ms var(--ease);
  }

  /* One outlined, one solid. Two identical buttons make someone
     stop and choose; this way the eye lands on the booking one
     first and the other is still there if they'd rather look
     around before committing. */
  .hero__link--ghost {
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
  }
  .hero__link--ghost:active { background: rgba(255, 255, 255, 0.14); }

  .hero__link--solid { background: #fff; color: #111; }
  .hero__link--solid:active { opacity: 0.85; }

  /* The service words would collide with the buttons on a short
     screen, and the buttons are the more useful of the two. */
  .hero__services { display: none; }

  .work { height: 78vh; }
  .work__info {
    grid-template-columns: 1fr;
    align-content: end;
    align-items: start;
    gap: 12px;
    padding: 0 22px 30px;
  }
  .work__arrow { display: none; }
  .work::after {
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 55%);
  }

  /* ----------------------------------------------------------
     FEATURED WORK BECOMES A CAROUSEL
     ----------------------------------------------------------
     Stacked vertically, three full-height covers meant three
     screens of scrolling before anyone reached the brands. Side
     by side, a thumb gets through all three in two flicks.

     This is scroll-snap rather than a JavaScript slider: real
     momentum, works with a thumb, keeps keyboard and screen
     reader behaviour intact, and there's no script to break.

     Note there are NO negative margins here. Pulling the strip
     out past the page edge made the whole page 20px wider than
     the screen, which let the entire site slide sideways — the
     stray movement that reads as "weird spaces".

     Instead the strip carries the normal page padding, and
     scroll-padding makes each cover snap to that same margin,
     so the carousel lines up with everything above and below it.
     ---------------------------------------------------------- */
  #work .works {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* no bouncing the page sideways */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 0 var(--pad);
    scroll-padding-left: var(--pad);

    scrollbar-width: none;            /* Firefox */
  }

  #work .works::-webkit-scrollbar { display: none; }   /* Safari, Chrome */

  #work .work {
    /* >>> The gap left over is the peek. <<< At full width there
       is no hint anything follows and nobody swipes. */
    flex: 0 0 86%;
    height: 64vh;
    scroll-snap-align: start;
  }

  .field-pair { grid-template-columns: 1fr; gap: 0; }

  /* One film per row on a phone. Two would be too small to
     read anything in. */
  .grid { grid-template-columns: 1fr; gap: 40px; }

  /* Stills stay two across — they're supporting shots, and a
     single column would make the page endless. */
  .stills { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .media-btn { width: 34px; height: 34px; }
  .media-btn svg { width: 15px; height: 15px; }

  /* Edge to edge on a phone — the screen is the frame */
  .lightbox { padding: 0; }
  .lightbox video { max-height: 100vh; border-radius: 0; }
  .lightbox__hint { display: none; }

  .menu__cta {
    display: inline-flex;
    margin-top: 26px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--fg);
    color: var(--bg);
    font-weight: 500;
  }
}

@media (min-width: 761px) {
  .menu__cta { display: none; }
}


/* ------------------------------------------------------------
   17. REDUCED MOTION
   ------------------------------------------------------------
   Some people get motion sickness from autoplaying video and
   moving pages. If their device asks for less movement, we
   give them less.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}