*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--jg-dark);
    color: var(--jg-light);
    font-family: var(--font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }

  /* ---------- shared type ---------- */
  .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.95; margin: 0; }
  .lead {
    font-weight: 300;
    font-size: clamp(17.5px, 1.15vw, 19px);
    line-height: 1.6;
    color: #B0B2B5;
  }

  /* ---------- layout shell ---------- */
  .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 40px; }
  section { position: relative; }

  /* ---------- section header bar ---------- */
  .bar-head { display: flex; align-items: center; gap: 26px; margin-bottom: 44px; }
  .bar-head .display { font-size: clamp(30px, 4.4vw, 60px); color: var(--jg-light); white-space: nowrap; }
  .bar-stripe { flex: 1 1 auto; height: 7px; background: var(--jg-secondary); min-width: 40px; }
  .bar-head.right { flex-direction: row-reverse; }
  .bar-head.right .display { text-align: right; }

  /* ---------- HERO ---------- */
  :root { --mono: "JetBrains Mono", ui-monospace, monospace; }

  .cul-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 80px;
  }
  .cul-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .cul-hero__overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top,
        rgba(22,23,25,0.72) 0%,
        rgba(22,23,25,0.18) 45%,
        transparent 100%
      ),
      rgba(22,23,25,0.48);
  }
  .cul-hero__lattice {
    display: none;
  }
  .cul-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    max-width: 900px;
    padding: 0 64px 56px;
  }
  .cul-hero__h1 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 3.7vw, 70px);
    line-height: 1.0;
    color: #F4F4F4;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 14px;
    opacity: 0;
    animation: culFadeUp 0.9s ease 0.35s forwards;
  }
  .cul-hero__h1 em {
    color: #00BDFF;
    font-style: normal;
    display: inline;
  }
  .cul-hero__sub {
    font-family: 'Libre Franklin', sans-serif;
    font-size: clamp(17.5px, 1.05vw, 20px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: #B0B2B5;
    opacity: 0;
    animation: culFadeUp 0.9s ease 0.5s forwards;
  }
  .cul-hero__scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, #00BDFF, transparent);
    animation: culScrollPulse 2s ease infinite;
  }
  .cul-hero__awards {
    position: absolute;
    bottom: 40px;
    right: 48px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    opacity: 0;
    animation: culFadeUp 0.9s ease 0.5s forwards;
  }
  .cul-hero__award {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .cul-hero__award-logo {
    height: 60px;
    width: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
  }
  .cul-hero__award-divider {
    width: 1px;
    height: 52px;
    background: rgba(255,255,255,0.3);
    flex-shrink: 0;
  }
  .cul-hero__award-title {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    line-height: 1;
  }
  .cul-hero__award-sub {
    display: block;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 13px;
    color: #F4F4F4;
    margin-top: 5px;
    line-height: 1.3;
  }
  @keyframes culFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes culFadeIn {
    from { opacity: 0; }
    to { opacity: 0.45; }
  }
  @keyframes culScrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 0.6; }
    50% { transform: scaleY(0.6); opacity: 1; }
  }

  /* ---------- buttons ---------- */
  .btn {
    font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
    text-transform: uppercase; cursor: pointer; border: none; padding: 16px 30px;
    display: inline-flex; align-items: center; gap: 10px;
    transition: filter 250ms ease, background 250ms, color 250ms, transform 250ms ease;
    text-decoration: none;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--jg-primary); color: var(--jg-dark); border-radius: 0 24px 24px 24px; }
  .btn-primary:hover { filter: brightness(0.85); transform: translateY(-2px) scale(1.025); }
  .btn-outline {
    background: transparent; color: var(--jg-light);
    border: 1.5px solid rgba(244,244,244,0.6); border-radius: 0 24px 24px 24px;
  }
  .btn-outline:hover { background: var(--jg-light); color: var(--jg-dark); }
  .btn-ghost {
    background: transparent; color: var(--jg-primary); padding: 0;
    font-size: 14px; letter-spacing: 0.1em; display: inline-flex; gap: 10px; align-items: center;
  }
  .btn-ghost .arrow { transition: transform 220ms; }
  .btn-ghost:hover .arrow { transform: translateX(6px); }

  /* ---------- CORE VALUES ----------
     Four full-width rows. Each word is a photograph cut to the shape of its
     own letterforms via background-clip — type as aperture, not type sitting
     on a picture. Static and in colour by design: no greyscale hold, no hover
     reveal, no transition. The picture is the word, so it should read on
     landing rather than rewarding a mouse the phone will never have.
     (Replaced the .pp professional/personal split and its jagged seam, S133.) */
  .values { padding: 100px 0 110px; background: var(--jg-dark); }
  /* Headline only — the mono eyebrow and the lede paragraph were both cut, so
     the section opens straight onto the statement. Wider than the old 760px
     cap: with nothing under it, the headline is the whole header and wants to
     set at full display size rather than wrap early. */
  .values__head { max-width: 1000px; margin: 0 auto clamp(56px, 7vw, 92px); text-align: center; }
  .values__h2 {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(34px, 5vw, 72px); line-height: 0.96; letter-spacing: 0.005em;
    color: var(--jg-light); margin: 0; text-wrap: balance;
  }

  .values__rows { border-top: 1px solid rgba(244, 244, 244, 0.14); }
  .value {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    padding: clamp(30px, 4vw, 52px) 0;
    border-bottom: 1px solid rgba(244, 244, 244, 0.14);
  }
  .value__word {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(58px, 10.5vw, 168px); line-height: 0.88;
    letter-spacing: 0.005em; margin: 0;

    background-image: var(--img);
    /* --zoom / --pos are a hand-set crop, and they are in `em` on purpose: em
       is relative to font-size, so the photo scales with the glyphs and the
       crop is locked — the same part of the picture sits in the same part of
       the word at every viewport, like a PNG of the word.

       They must NOT be percentages. background-size:% resolves against the box
       WIDTH (grid-driven) while the box HEIGHT is font-size-driven; the two
       scale on different curves, the box aspect ratio drifts ~4.4->5.0 across
       the range, and the photo slides against the letters as you resize.
       Because the crop is em-based, the section's gutter no longer affects it
       and this can safely sit in the page's standard .wrap. */
    background-size: var(--zoom, cover);
    background-position: var(--pos, center);
    -webkit-background-clip: text;
    background-clip: text;
    /* transparent so the photo shows through the letterforms — which means a
       word given no --img renders as a hairline ghost, not solid type. */
    color: transparent;
    /* Cyan keyline on every word, including the one with no photograph — it is
       what holds the four together as a set, and it keeps a letter from being
       erased where a dark patch of photo meets the dark section. */
    -webkit-text-stroke: 1.5px var(--jg-primary);
  }
  .value__copy { max-width: 46ch; }
  .value__num {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.2em;
    color: var(--jg-primary); display: block; margin-bottom: 12px;
  }
  .value__line {
    font-weight: 600; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.28;
    color: var(--jg-light); margin: 0 0 14px; text-wrap: balance;
  }
  .value__body { margin: 0; }

  /* ---------- editorial feature rows ---------- */
  .feature { padding: 90px 0; }
  .feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .feature.flip .copy { order: 2; }
  .feature.flip .media { order: 1; }
  .feature .copy h3 {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--jg-light);
    font-size: clamp(34px, 4.6vw, 64px); line-height: 0.92; margin: 14px 0 22px;
  }
  .feature .copy .lead { max-width: 480px; }
  .feature .copy .btn-ghost { margin-top: 36px; }
  .feature .copy .btn { margin-top: 36px; }
  .feature .media { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; }
  .feature .media img {
    width: 100%; height: 100%; object-fit: cover;
  }
  /* photo caption overlay + corner stripe removed */
  .feature.inlay { background: var(--jg-dark-inlay); }

  /* ---------- PHOTOS ---------- */
  .photos { padding: 100px 0; }
  .gallery {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px; gap: 16px;
  }
  .gallery a { position: relative; overflow: hidden; border-radius: 4px; display: block; }
  .gallery img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 500ms ease, filter 400ms; filter: brightness(0.92);
  }
  /* hover tagline removed — the scale/brightness lift is the whole hover now */
  .gallery a:hover img { transform: scale(1.06); filter: brightness(1.05); }
  .g-wide { grid-column: span 2; }
  .g-tall { grid-row: span 2; }
  .section-foot { display: flex; justify-content: center; margin-top: 44px; }

  /* ---------- VIDEOS ---------- */
  .videos { padding: 0 0 110px; }
  .video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .video-card {
    position: relative; border-radius: 4px; overflow: hidden;
    aspect-ratio: 16 / 9; cursor: pointer;
  }
  .video-card img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.62) grayscale(0.15);
    transition: filter 400ms, transform 600ms;
  }
  .video-card:hover img { filter: brightness(0.74); transform: scale(1.03); }
  .video-card .play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 74px; height: 74px; border-radius: 50%; background: var(--jg-primary);
    display: flex; align-items: center; justify-content: center;
    transition: transform 220ms, filter 220ms; pointer-events: none;
  }
  .video-card:hover .play { transform: translate(-50%,-50%) scale(1.08); filter: brightness(1.05); }
  .video-card .play svg { margin-left: 4px; }
  .video-meta { position: absolute; left: 24px; bottom: 22px; right: 24px; pointer-events: none; }
  .video-meta .vlabel {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--jg-primary); margin: 0 0 6px;
  }
  .video-meta .vtitle {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(20px, 2vw, 30px); line-height: 1; margin: 0; color: var(--jg-light);
  }

  /* ---------- VIDEO MODAL ---------- */
  .vid-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(22,23,25,0.94);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .vid-modal.is-open { opacity: 1; pointer-events: all; }
  .vid-modal__container { position: relative; width: min(920px, 90vw); aspect-ratio: 16/9; }
  .vid-modal__close {
    position: absolute; top: -48px; right: 0;
    background: none; border: 1px solid rgba(244,244,244,0.2); color: var(--jg-light);
    font-size: 16px; width: 40px; height: 40px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.2s; line-height: 1;
    font-family: var(--font-body);
  }
  .vid-modal__close:hover { border-color: var(--jg-primary); color: var(--jg-primary); }
  .vid-modal__frame { width: 100%; height: 100%; border: none; display: block; }

  /* ---------- reveal ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 0; transform: translateY(26px);
      transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22,0.61,0.36,1);
    }
    .js .reveal.in { opacity: 1; transform: none; }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 960px) {
    .cul-hero__content { padding: 0 32px; }
  }
  @media (max-width: 600px) {
    .cul-hero__content { padding: 0 24px; }
    .cul-hero__awards { display: none; }
  }

  @media (max-width: 900px) {
    .feature .wrap { grid-template-columns: 1fr; gap: 32px; }
    /* Once stacked, every feature reads image → heading → copy → CTA.
       Desktop gets its alternating zigzag from DOM order (War Week and
       Community Partnerships are copy-first, The Mugshot is media-first),
       which left two of the three leading with a wall of text on a phone.
       Pulling .media first here normalises the stacked view without
       touching the markup or the desktop alternation. */
    .feature .media { order: -1; }
    .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .g-wide { grid-column: span 2; }
    .g-tall { grid-row: span 1; }
    .video-grid { grid-template-columns: 1fr; }

    .value { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    /* The crop is in percentages so it rides this size change intact. The
       stroke is not — it is an absolute width against type that just got a
       third smaller, so it thins to match or it closes up the counters. */
    .value__word { font-size: clamp(56px, 15vw, 104px); -webkit-text-stroke-width: 1px; }
  }
  @media (max-width: 560px) {
    .wrap { padding: 0 22px; }
    .gallery { grid-template-columns: 1fr; grid-auto-rows: 230px; }
    .g-wide { grid-column: span 1; }
  }

  /* =====================
     AWARDS STRIP
     ===================== */
  .cul-awards {
    padding: 60px 0;
    background: #0d1012;
    border-top: 1px solid rgba(0,189,255,0.08);
  }
  .cul-awards__wrap {
    max-width: var(--wrap-max);
    margin: 0 auto;
    padding: 0 48px;
    text-align: center;
  }
  .cul-awards__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .cul-awards__logos img {
    height: 44px;
    width: auto;
    opacity: 0.55;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s;
  }
  .cul-awards__logos img:hover { opacity: 0.9; }
  .cul-awards__note {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 14px;
    color: #F4F4F4;
    line-height: 1.9;
  }
  @media (max-width: 960px) { .cul-awards__wrap { padding: 0 32px; } }
  @media (max-width: 600px) {
    .cul-awards__wrap { padding: 0 24px; }
    .cul-awards__logos { gap: 28px; }
  }