:root {
  --black: #090909;
  --off: #f2f0eb;
  --red: #e31b23;
  --muted: #979797;
  --line: rgba(242,240,235,.16);
  --max: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--off); font-family: Manrope, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.nav { height: 88px; max-width: var(--max); margin: auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.brand { font-size: 25px; font-weight: 800; letter-spacing: -.08em; }
.brand span, footer span { color: var(--red); }
.nav nav { display: flex; gap: 38px; margin-left: 70px; }
.nav nav a { color: #9e9e9e; font-size: 13px; font-weight: 600; transition: color .2s; }
.nav nav a:hover, .nav nav a.active { color: var(--off); }
.nav-cta { font-size: 12px; font-weight: 700; border: 1px solid var(--line); padding: 12px 16px; border-radius: 100px; }
.nav-cta span, .text-link span { color: var(--red); }
.hero { min-height: 710px; max-width: var(--max); margin: auto; padding: 120px 32px 90px; position: relative; }
.hero-kicker, .section-label { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .16em; color: #999; }
.hero-kicker { display: flex; align-items: center; gap: 10px; }
.hero-kicker span { width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
h1 { font-size: clamp(70px, 10.5vw, 154px); line-height: .87; letter-spacing: -.075em; margin: 42px 0 34px; font-weight: 800; max-width: 1050px; }
h1 em, h2 span { color: var(--red); font-style: normal; }
.hero-copy { max-width: 410px; margin: 52px 0 0 0; color: #aaa; font-size: 16px; line-height: 1.65; }
.hero-actions { margin: 35px 0 0 0; display: flex; align-items: center; gap: 28px; }
.button { display: inline-flex; gap: 25px; align-items: center; padding: 16px 19px; font-size: 12px; font-weight: 800; }
.button-red { background: var(--red); color: white; }
.button-red:hover { background: #ff2931; }
.text-link { font-size: 12px; font-weight: 700; }
.hero-mark { position: absolute; right: 32px; bottom: 90px; font: 11px "DM Mono"; color: #555; }
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 32px; align-items: center; padding: 18px 0; animation: scroll 25s linear infinite; font: 12px "DM Mono"; letter-spacing: .1em; }
.marquee b { color: var(--red); font-size: 13px; }
@keyframes scroll { to { transform: translateX(-50%); } }
.section-pad { max-width: var(--max); margin: auto; padding: 130px 32px; }
.section-top { display: flex; justify-content: space-between; align-items: end; margin-bottom: 45px; }
.project-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px 24px; }
.project-large { grid-row: span 2; }
.project-image { height: 500px; position: relative; overflow: hidden; background: #151515; }
.project:not(.project-large) .project-image { height: 240px; }
.project-image::after, .work-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 35%, rgba(0,0,0,.45)); transition: transform .5s; }
.project:hover .project-image::after { transform: scale(1.08); }
.project-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font: 9px "DM Mono"; letter-spacing: .12em; border: 1px solid rgba(255,255,255,.4); padding: 7px 9px; }
.play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; display: grid; place-items: center; font-size: 11px; padding-left: 2px; backdrop-filter: blur(5px); }
.project-one { background: radial-gradient(circle at 70% 35%, #b3141d 0, #481017 28%, #171014 58%, #0a0a0a 100%); }
.project-two { background: radial-gradient(circle at 30% 70%, #e31b23 0, #67151a 30%, #171717 65%, #080808 100%); }
.project-three { background: linear-gradient(135deg, #111 0%, #2c2020 45%, #d51a23 100%); }
.project-four { background: radial-gradient(circle at 70% 30%, #8b1118, #1d1314 50%, #0b0b0b); }
.project-five { background: linear-gradient(125deg, #111, #2b1013 45%, #e31b23); }
.project-six { background: radial-gradient(circle at 35% 40%, #d81c24, #321115 40%, #090909 75%); }
.project-meta { display: flex; justify-content: space-between; padding: 18px 0 0; border-top: 1px solid var(--line); margin-top: 14px; }
.project-meta h3 { font-size: 17px; margin: 0 0 5px; }
.project-meta span { font: 9px "DM Mono"; color: #777; }
.statement { background: var(--off); color: var(--black); padding: 145px 32px; }
.statement-inner { max-width: var(--max); margin: auto; }
.statement .section-label { color: #777; margin-bottom: 65px; }
.statement h2 span { color: var(--red); }
.contact-strip { max-width: var(--max); margin: auto; padding: 125px 32px; display: flex; justify-content: space-between; align-items: center; }
.circle-button { width: 150px; height: 150px; border-radius: 50%; background: var(--red); display: grid; place-content: center; text-align: center; font-size: 14px; font-weight: 800; line-height: 1.15; transition: transform .25s; }
.circle-button span { display: block; margin-top: 7px; }
.circle-button:hover { transform: rotate(-8deg) scale(1.05); }
footer { max-width: var(--max); margin: auto; border-top: 1px solid var(--line); padding: 25px 32px 40px; display: flex; justify-content: space-between; color: #777; font: 9px "DM Mono"; letter-spacing: .06em; }
.page-hero, .contact-hero { max-width: var(--max); margin: auto; padding: 105px 32px 95px; border-bottom: 1px solid var(--line); }
.page-hero h1, .contact-hero h1 { margin-bottom: 25px; }
.page-hero p, .contact-hero p { color: #999; max-width: 440px; line-height: 1.6; }
.filters { max-width: var(--max); margin: auto; padding: 32px; display: flex; gap: 10px; }
.filter { background: transparent; color: #777; border: 1px solid var(--line); padding: 10px 15px; font: 10px "DM Mono"; cursor: pointer; border-radius: 100px; }
.filter.active, .filter:hover { color: white; border-color: var(--red); background: var(--red); }
.work-grid { max-width: var(--max); margin: auto; padding: 20px 32px 130px; display: grid; grid-template-columns: 1fr 1fr; gap: 65px 24px; }
.work-card.wide { grid-column: span 2; }
.work-visual { height: 440px; position: relative; overflow: hidden; }
.work-card:not(.wide) .work-visual { height: 380px; }
.work-number { position: absolute; right: 18px; bottom: 15px; font: 11px "DM Mono"; z-index: 2; }
.work-info { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 14px; }
.work-info h2 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.03em; }
.work-info p, .work-info > span { margin: 0; color: #777; font: 9px "DM Mono"; }
.work-cta { padding: 130px 32px; text-align: center; background: #0e0e0e; }
.work-cta .section-label { margin-bottom: 30px; }
.work-cta h2 { font-size: clamp(50px, 7vw, 90px); line-height: .9; letter-spacing: -.06em; margin: 0 0 45px; }
.contact-hero { padding-bottom: 110px; }
.contact-grid { max-width: var(--max); margin: auto; padding: 100px 32px 150px; display: grid; grid-template-columns: 1.5fr .5fr; gap: 10%; }
.big-email { display: inline-block; font-size: clamp(28px, 4vw, 56px); letter-spacing: -.055em; font-weight: 700; margin: 45px 0; border-bottom: 2px solid var(--red); padding-bottom: 8px; }
.big-email span { color: var(--red); font-size: .55em; vertical-align: top; }
.contact-line { height: 1px; background: var(--line); }
.social-links { display: flex; gap: 30px; padding-top: 25px; }
.social-links a { font-size: 11px; color: #aaa; }
.social-links span { color: var(--red); }
.contact-aside { border-left: 1px solid var(--line); padding-left: 35px; }
.contact-aside ul { list-style: none; padding: 30px 0 0; margin: 0; }
.contact-aside li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
@media (max-width: 750px) {
  .nav { padding: 0 20px; height: 72px; }
  .nav nav { gap: 17px; margin: 0; }
  .nav-cta { display: none; }
  .hero { padding: 90px 20px 70px; min-height: 620px; }
  h1 { font-size: clamp(62px, 17vw, 100px); }
  .hero-copy, .hero-actions { margin-left: 0; }
  .hero-mark { right: 20px; bottom: 60px; }
  .section-pad { padding: 90px 20px; }
  .intro-content { grid-template-columns: 1fr; gap: 40px; margin-top: 45px; }
  .project-grid, .work-grid { grid-template-columns: 1fr; gap: 45px; }
  .project-large, .work-card.wide { grid-column: auto; grid-row: auto; }
  .project-image, .project:not(.project-large) .project-image, .work-visual, .work-card:not(.wide) .work-visual { height: 330px; }
  .statement, .contact-strip { padding: 90px 20px; }
  .contact-strip { align-items: flex-start; gap: 45px; flex-direction: column; }
  .circle-button { width: 125px; height: 125px; }
  footer { padding: 22px 20px 30px; gap: 15px; flex-wrap: wrap; }
  footer div:nth-child(2) { display: none; }
  .page-hero, .contact-hero { padding: 80px 20px; }
  .filters { padding: 25px 20px; overflow-x: auto; }
  .work-grid { padding: 15px 20px 90px; }
  .contact-grid { grid-template-columns: 1fr; padding: 80px 20px; gap: 65px; }
  .contact-aside { border-left: 0; border-top: 1px solid var(--line); padding: 30px 0 0; }
  .social-links { flex-wrap: wrap; }
}

.intro-content strong { color: var(--off); font-weight: 800; }

.about-lead { margin-top: 8px !important; }
@media (max-width: 750px) {
  .stats-row { grid-template-columns: 1fr; }
  
}


@media (max-width: 750px) {
  .analytics-head { align-items: start; flex-direction: column; gap: 25px; }
  .analytics-total { text-align: left; }
  .analytics-stats { grid-template-columns: 1fr 1fr; }
  .analytics-stats div:nth-child(2) { border-right: 0; }
  .analytics-stats div:nth-child(3), .analytics-stats div:nth-child(4) { border-top: 1px solid var(--line); padding-top: 20px; }
  .analytics-stats div:nth-child(3) { padding-left: 0; }
}

.intro-content { display:grid; grid-template-columns:1.25fr .75fr; gap:9%; margin-top:70px; align-items:start; }
.intro h2 { font-size:clamp(52px, 6vw, 88px); line-height:.94; letter-spacing:-.07em; margin:0; }
.intro h2 span { color:var(--red); }
.about-copy { max-width:500px; }
.about-copy p { color:#aaa; font-size:16px; line-height:1.7; margin:0 0 30px; }
.about-copy p:first-child { margin-top:3px; }
.about-copy strong { color:var(--off); font-weight:800; }

.statement h2 { font-size:clamp(44px,6vw,82px); line-height:.95; letter-spacing:-.065em; margin:0; }
.contact-strip h2 { font-size:clamp(44px,6vw,82px); line-height:.95; letter-spacing:-.065em; margin:0; }

@media (max-width:750px) {
  .analytics { margin-top:60px; }
  .analytics-head { height:52px; padding:0 18px; }
  .impact-layout { grid-template-columns:1fr; height:auto; }
  .impact-visual {
    height:245px;
    border-right:0;
    border-bottom:1px solid rgba(242,240,235,.14);
  }
  .impact-visual svg {
    left:18px;
    right:18px;
    width:calc(100% - 36px);
    height:175px;
  }
  .impact-grid { display:none; }
  .impact-caption { left:18px; right:18px; }
  .impact-stats { grid-template-columns:repeat(3,1fr); }
  .impact-stat {
    min-height:120px;
    padding:20px 14px;
    border-right:1px solid rgba(242,240,235,.12);
  }
  .impact-stat:last-child { border-right:0; }
  .impact-stat strong { font-size:30px; }
  .impact-stat p { font-size:8px; }
}
/* Reference-matched impact panel */
.analytics {
  margin-top: 70px;
  border: 1px solid rgba(242,240,235,.16);
  background: #090909;
  overflow: hidden;
}
.analytics-head {
  height: 48px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(242,240,235,.12);
}
.analytics-head .section-label {
  font-size: 9px;
  color: #a0a0a0;
}
.impact-layout {
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  height: 210px;
}
.impact-visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(242,240,235,.13);
}
.impact-grid {
  position: absolute;
  inset: 26px 20px 31px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(242,240,235,.055) 0,
    rgba(242,240,235,.055) 1px,
    transparent 1px,
    transparent 33.333%
  );
}
.impact-visual svg {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 25px;
  width: calc(100% - 40px);
  height: 165px;
  overflow: visible;
  z-index: 2;
}
.impact-fill {
  fill: url(#impactFill);
}
.impact-line {
  fill: none;
  stroke: var(--red);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(227,27,35,.45));
}
.impact-dot {
  fill: var(--red);
  filter:
    drop-shadow(0 0 5px rgba(227,27,35,.95))
    drop-shadow(0 0 14px rgba(227,27,35,.72));
}
.impact-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  color: #4f4f4f;
  font: 7px "DM Mono";
  letter-spacing: .11em;
  z-index: 3;
}
.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
}
.impact-stat {
  display: flex;
  align-items: center;
  padding: 0 19px;
  border-right: 1px solid rgba(242,240,235,.12);
}
.impact-stat:last-child {
  border-right: 0;
}
.impact-stat > div {
  width: 100%;
}
.impact-stat span {
  display: block;
  color: var(--red);
  font: 8px "DM Mono";
  letter-spacing: .11em;
  margin-bottom: 8px;
}
.impact-stat strong {
  display: block;
  font-size: clamp(27px, 2.8vw, 42px);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 800;
}
.impact-stat p {
  color: #777;
  font-size: 8px;
  line-height: 1.45;
  margin: 10px 0 0;
  max-width: 120px;
}
@media (max-width:750px) {
  .analytics { margin-top: 55px; }
  .analytics-head { height: 45px; padding: 0 16px; }
  .impact-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .impact-visual {
    height: 215px;
    border-right: 0;
    border-bottom: 1px solid rgba(242,240,235,.13);
  }
  .impact-visual svg {
    left: 16px;
    right: 16px;
    width: calc(100% - 32px);
    height: 165px;
  }
  .impact-grid { left:16px; right:16px; }
  .impact-caption { left:16px; right:16px; }
  .impact-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .impact-stat {
    min-height: 115px;
    padding: 18px 12px;
  }
  .impact-stat strong { font-size: 28px; }
  .impact-stat p { font-size: 7px; }
}

.section-red { color: var(--red); }
.nav nav { gap: 28px; margin-left: auto; margin-right: 30px; }
.nav nav a { text-transform: uppercase; letter-spacing: .08em; }
.nav nav a.active { color: var(--off); }
.nav nav a.active::after { content:""; display:inline-block; width:5px; height:5px; background:var(--red); border-radius:50%; margin:0 0 2px 8px; }

/* Consistent section rhythm */
.intro-content {
  margin-top: 40px;
}
.statement .section-label,
.contact-strip .section-label {
  margin-bottom: 40px;
}
.contact-strip > div:first-child {
  display: block;
}


@media (max-width:750px) {
  .intro-content {
    margin-top: 40px;
  }
  .statement .section-label,
  .contact-strip .section-label {
    margin-bottom: 40px;
  }
  .analytics {
    margin-top: 55px;
  }
  .analytics-head {
    height: 55px;
    padding: 0 18px;
  }
  .impact-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .impact-visual {
    height: 215px;
    border-right: 0;
    border-bottom: 1px solid rgba(242,240,235,.12);
  }
  .impact-visual svg {
    left: 18px;
    right: 18px;
    width: calc(100% - 36px);
    height: 175px;
  }
  .impact-caption {
    left: 18px;
    right: 18px;
  }
  .impact-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .impact-stat {
    min-height: 115px;
    padding: 18px 12px;
  }
  .impact-stat strong {
    font-size: 30px;
  }
  .impact-stat p {
    font-size: 8px;
  }
}


/* =========================================================
   GRAPH SECTION - REFERENCE MATCH
   ========================================================= */
.analytics {
  margin-top: 62px;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.analytics-head {
  height: 28px;
  padding: 0;
  display: flex;
  align-items: flex-start;
  border: 0 !important;
}
.analytics-head .section-label {
  font: 500 11px "DM Mono";
  letter-spacing: .13em;
  color: #c7c7c7;
}
.impact-layout {
  display: grid;
  grid-template-columns: 52.3% 47.7%;
  height: 205px;
  border: 0 !important;
}
.impact-visual {
  position: relative;
  overflow: hidden;
  border: 0 !important;
}
.impact-grid {
  display: none !important;
}
.impact-visual svg {
  position: absolute;
  left: 12px;
  right: 42px;
  bottom: 20px;
  width: calc(100% - 54px);
  height: 184px;
  overflow: visible;
  z-index: 2;
}
.impact-fill {
  fill: url(#impactFill);
  opacity: .78;
}
.impact-line {
  fill: none;
  stroke: #ff2029 !important;
  stroke-width: 3.6px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
  filter:
    drop-shadow(0 0 2px rgba(255,32,41,.95))
    drop-shadow(0 0 6px rgba(255,32,41,.55)) !important;
  shape-rendering: geometricPrecision;
}
.impact-dot {
  fill: #ff2630 !important;
  stroke: none !important;
  filter:
    drop-shadow(0 0 3px rgba(255,38,48,1))
    drop-shadow(0 0 8px rgba(255,38,48,1))
    drop-shadow(0 0 17px rgba(255,38,48,.82))
    drop-shadow(0 0 30px rgba(255,38,48,.42)) !important;
}
.impact-caption {
  position: absolute;
  left: 12px;
  right: 42px;
  bottom: 3px;
  display: flex;
  justify-content: space-between;
  color: #505050;
  font: 7px "DM Mono";
  letter-spacing: .09em;
  z-index: 3;
}
.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 195px;
}
.impact-stat {
  display: flex;
  align-items: center;
  padding: 0 37px;
  border-left: 1px solid rgba(242,240,235,.12);
  border-right: 0;
}
.impact-stat:last-child {
  border-right: 0;
}
.impact-stat > div {
  width: 100%;
}
.impact-stat span {
  display: block;
  color: var(--red);
  font: 8px "DM Mono";
  letter-spacing: .12em;
  margin-bottom: 11px;
}
.impact-stat strong {
  display: block;
  color: #f2f0eb;
  font-size: 45px;
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 800;
}
.impact-stat p {
  color: #858585;
  font-size: 10px;
  line-height: 1.45;
  margin: 14px 0 0;
  max-width: 160px;
}

@media (max-width:750px) {
  .analytics {
    margin-top: 55px;
  }
  .analytics-head {
    height: 25px;
    padding: 0;
  }
  .impact-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .impact-visual {
    height: 205px;
  }
  .impact-visual svg {
    left: 0;
    right: 18px;
    width: calc(100% - 18px);
    height: 184px;
  }
  .impact-caption {
    left: 0;
    right: 18px;
  }
  .impact-stats {
    height: 130px;
    grid-template-columns: repeat(3,1fr);
  }
  .impact-stat {
    padding: 18px 12px;
  }
  .impact-stat strong {
    font-size: 29px;
  }
  .impact-stat p {
    font-size: 8px;
  }
}

/* Slightly larger graph, same compact horizontal footprint */
.impact-visual svg {
  height: 205px;
  bottom: 12px;
}
.impact-line {
  stroke-width: 4px !important;
}

/* Final graph sizing: scale the existing compact path up, do not lengthen it */
.impact-visual {
  overflow: visible !important;
}
.impact-visual svg {
  height: 205px !important;
  bottom: 8px !important;
  left: 12px !important;
  right: 42px !important;
  width: calc(100% - 54px) !important;
  overflow: visible !important;
}
.impact-line {
  stroke-width: 4.5px !important;
}
.impact-dot {
  r: 7px;
}

/* Larger, more legible stats */
.impact-stat {
  padding-left: 42px;
  padding-right: 42px;
}
.impact-stat span {
  font-size: 9px;
  margin-bottom: 13px;
}
.impact-stat strong {
  font-size: 52px;
  line-height: .86;
}
.impact-stat p {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 15px;
  max-width: 175px;
}

@media (max-width:750px) {
  .impact-visual {
    overflow: visible !important;
  }
  .impact-visual svg {
    left: 0 !important;
    right: 18px !important;
    width: calc(100% - 18px) !important;
    height: 205px !important;
    bottom: 8px !important;
  }
  .impact-stat {
    padding: 18px 12px;
  }
  .impact-stat span {
    font-size: 8px;
  }
  .impact-stat strong {
    font-size: 34px;
  }
  .impact-stat p {
    font-size: 9px;
  }
}

/* Graph final alignment: enlarge the existing path in-place so it fills the
   visual area, without changing the path data or endpoint. */
.impact-visual svg {
  height: 215px !important;
  bottom: 3px !important;
  left: 8px !important;
  right: 28px !important;
  width: calc(100% - 36px) !important;
  transform: translateX(1px);
  transform-origin: 50% 50%;
}

/* =========================================================
   FEATURED WORK
   ========================================================= */
.featured-work-v2 {
  max-width: 1415px;
  margin: 0 auto;
  padding: 125px 0 35px;
}
.featured-work-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
}
.featured-work-head a {
  color:#f2f0eb;
  font-size:12px;
  font-weight:800;
}
.featured-work-head a span { color:var(--red); margin-left:5px; font-size:16px; }

.featured-work-grid {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:18px;
}
.featured-side {
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:18px;
}
.featured-card {
  display:block;
  color:#f2f0eb;
  min-width:0;
}
.featured-media {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0b0b0b;
  border:1px solid rgba(242,240,235,.12);
}
.featured-card-main .featured-media {
  height:100%;
  min-height:440px;
  aspect-ratio:auto;
}
.media-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  background:
    radial-gradient(circle at 72% 22%, rgba(227,27,35,.14), transparent 28%),
    linear-gradient(135deg,#0e0e0e,#050505);
}
.media-placeholder span {
  font:500 11px "DM Mono";
  color:#aaa;
  letter-spacing:.12em;
}
.media-placeholder small {
  margin-top:7px;
  color:#444;
  font:8px "DM Mono";
  letter-spacing:.1em;
}
.featured-play {
  position:absolute;
  top:20px;
  right:20px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  font-size:16px;
}
.featured-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:14px 2px 0;
}
.featured-meta h3 {
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
}
.featured-meta p {
  margin:5px 0 0;
  color:#777;
  font-size:10px;
}
.featured-meta > span {
  color:#555;
  font:8px "DM Mono";
  padding-top:3px;
}

@media (max-width:900px) {
  .featured-work-v2 { padding:100px 22px 25px; }
  .featured-work-grid { grid-template-columns:1fr; }
  .featured-card-main .featured-media { min-height:0; aspect-ratio:16/9; }
}
@media (max-width:600px) {
  .featured-work-head { align-items:flex-start; gap:20px; }
  .featured-work-head a { font-size:10px; }
  .featured-side { gap:25px; }
}

html {
  scroll-behavior: smooth;
}
.about-v2,
.featured-work-v2,
.approach-v2,
.start-v2 {
  scroll-margin-top: 42px;
}

/* Selected Work: homepage feature section */
html {
  scroll-behavior: smooth;
}
#about,
#selected-work,
#approach,
#start {
  scroll-margin-top: 40px;
}
.selected-work {
  max-width: 1415px;
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 35px;
}
.selected-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.selected-work-head .text-link {
  font-size: 12px;
  font-weight: 700;
}
.selected-work-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
}
.selected-project {
  display: block;
  color: #f2f0eb;
}
.selected-project-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}
.selected-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #090909;
  border: 1px solid rgba(242,240,235,.12);
}
.selected-project-large .selected-media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 430px;
}
.selected-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background:
    radial-gradient(circle at 72% 20%, rgba(227,27,35,.15), transparent 29%),
    linear-gradient(135deg, #0e0e0e, #050505);
}
.selected-placeholder span {
  font: 500 11px "DM Mono";
  letter-spacing: .12em;
  color: #aaa;
}
.selected-placeholder small {
  margin-top: 7px;
  color: #444;
  font: 8px "DM Mono";
  letter-spacing: .1em;
}
.selected-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
}
.selected-project-info {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 2px 0;
}
.selected-project-info h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.selected-project-info p {
  margin: 5px 0 0;
  color: #777;
  font-size: 10px;
}
.selected-project-info > span {
  padding-top: 3px;
  color: #555;
  font: 8px "DM Mono";
}

@media (max-width: 1100px) {
  .nav nav {
    gap: 15px;
  }
  .nav nav a {
    font-size: 9px;
  }
}
@media (max-width: 900px) {
  .selected-work {
    padding-left: 22px;
    padding-right: 22px;
  }
  .selected-work-grid {
    grid-template-columns: 1fr;
  }
  .selected-project-large .selected-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 700px) {
  .nav nav a:nth-child(3),
  .nav nav a:nth-child(4) {
    display: none;
  }
  .selected-work-head {
    align-items: flex-start;
    gap: 20px;
  }
}

/* =========================================================
   SELECTED WORK - MATCH ORIGINAL REFERENCE
   ========================================================= */
.selected-work {
  max-width: 1680px;
  margin: 0 auto;
  padding: 92px 0 90px;
}
.selected-work-head {
  margin-bottom: 45px;
}
.selected-work-head .section-label {
  font-size: 10px;
  letter-spacing: .16em;
}
.selected-work-head .text-link {
  font-size: 12px;
  font-weight: 800;
}
.selected-work-grid {
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  align-items: start;
}
.selected-project-side {
  gap: 66px;
}
.selected-media {
  border: 0;
  background: #090909;
  aspect-ratio: auto;
  height: 263px;
}
.selected-project-large .selected-media {
  height: 565px;
  min-height: 565px;
}
.selected-placeholder {
  padding: 0;
  background:
    radial-gradient(ellipse at 65% 30%, rgba(227,27,35,.72) 0%, rgba(132,16,24,.42) 25%, rgba(15,10,12,.8) 62%, #090909 100%);
}
.selected-project-side .selected-placeholder {
  background:
    radial-gradient(ellipse at 42% 45%, rgba(227,27,35,.72) 0%, rgba(110,18,24,.4) 27%, rgba(13,12,13,.86) 68%, #090909 100%);
}
.selected-placeholder span {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(242,240,235,.55);
  color: #e8e6e1;
  font-size: 9px;
  letter-spacing: .12em;
}
.selected-placeholder small {
  display: none;
}
.selected-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 62px;
  height: 62px;
  border: 1px solid rgba(242,240,235,.75);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f2f0eb;
  font-size: 14px;
  padding-left: 3px;
}
.selected-project-info {
  border-top: 1px solid rgba(242,240,235,.16);
  padding: 20px 0 0;
}
.selected-project-info h3 {
  font-size: 18px;
  line-height: 1.1;
}
.selected-project-info p {
  display: none;
}
.selected-project-info > span {
  color: #777;
  font-size: 9px;
  letter-spacing: .08em;
}
.selected-project-large .selected-project-info {
  position: relative;
}
.selected-project-large .selected-project-info::after {
  content: "Short-form / Social-first";
  position: absolute;
  right: 0;
  top: 23px;
  color: #777;
  font: 9px "DM Mono";
  letter-spacing: .04em;
}
.selected-project-side .selected-project-info {
  padding-top: 20px;
}
.selected-project-side .selected-project-info::after {
  position: absolute;
  right: 0;
  top: 23px;
  color: #777;
  font: 9px "DM Mono";
  letter-spacing: .04em;
}
.selected-project-side .selected-project:first-child .selected-project-info {
  position: relative;
}
.selected-project-side .selected-project:first-child .selected-project-info::after {
  content: "YouTube / Storytelling";
}
.selected-project-side .selected-project:last-child .selected-project-info {
  position: relative;
}
.selected-project-side .selected-project:last-child .selected-project-info::after {
  content: "Brand / Social content";
}

@media (max-width: 1100px) {
  .selected-work {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 900px) {
  .selected-work-grid {
    grid-template-columns: 1fr;
  }
  .selected-project-large .selected-media {
    height: 480px;
    min-height: 0;
  }
  .selected-project-side {
    gap: 40px;
  }
}
@media (max-width: 600px) {
  .selected-work {
    padding-left: 20px;
    padding-right: 20px;
  }
  .selected-project-large .selected-media {
    height: 360px;
  }
  .selected-media {
    height: 210px;
  }
  .selected-project-info h3 {
    font-size: 15px;
  }
}

/* Selected Work: align with the main site content rather than viewport edges */
.selected-work {
  max-width: 1415px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 92px;
  padding-bottom: 90px;
}
@media (max-width: 1500px) {
  .selected-work {
    margin-left: 5.5vw;
    margin-right: 5.5vw;
  }
}
@media (max-width: 900px) {
  .selected-work {
    margin-left: 22px;
    margin-right: 22px;
  }
}

/* Home is the top hero */
#home {
  scroll-margin-top: 40px;
}

.selected-youtube-wrap{position:absolute;inset:0;overflow:hidden;background:#090909}
.selected-youtube-wrap iframe{width:100%;height:100%;border:0;display:block}

.selected-youtube-wrap{background:#090909}
.selected-youtube-wrap iframe{background:#090909}

.selected-youtube-wrap{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  background:#090909;
  text-decoration:none;
}
.selected-youtube-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s ease;
}
.selected-youtube-wrap:hover img{transform:scale(1.015)}
.selected-youtube-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  border:1px solid rgba(242,240,235,.8);
  border-radius:50%;
  display:grid;
  place-items:center;
  padding-left:3px;
  color:#f2f0eb;
  background:rgba(0,0,0,.12);
}

/* =========================================================
   SELECTED WORK - CLEAN FINAL LAYOUT
   ========================================================= */
.selected-work {
  max-width: 1415px !important;
  margin: 0 auto !important;
  padding: 92px 0 90px !important;
}
.selected-work-head {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-bottom:45px !important;
}
.selected-work-grid {
  display:grid !important;
  grid-template-columns: 1.55fr 1fr !important;
  gap:28px !important;
  align-items:start !important;
}
.selected-project {
  display:block !important;
  width:100% !important;
  color:#f2f0eb !important;
  text-decoration:none !important;
  min-width:0 !important;
}
.selected-project-side {
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:66px !important;
  min-width:0 !important;
}
.selected-media,
.selected-project-large .selected-media {
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 9 !important;
  overflow:hidden !important;
  background:#090909 !important;
  border:0 !important;
}
.selected-project-large .selected-media {
  aspect-ratio:16 / 9 !important;
}
.selected-youtube-wrap {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  cursor:pointer !important;
  overflow:hidden !important;
  background:#090909 !important;
}
.selected-youtube-wrap img {
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  transition:transform .45s ease !important;
}
.selected-youtube-wrap:hover img {
  transform:scale(1.015) !important;
}
.selected-youtube-play {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:62px !important;
  height:62px !important;
  border:1px solid rgba(242,240,235,.8) !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  padding-left:3px !important;
  color:#f2f0eb !important;
  background:rgba(0,0,0,.15) !important;
  font-size:13px !important;
}
.selected-placeholder {
  position:absolute !important;
  inset:0 !important;
  padding:0 !important;
}
.selected-placeholder span {
  position:absolute !important;
  top:18px !important;
  left:18px !important;
}
.selected-project-info {
  position:relative !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:20px !important;
  width:100% !important;
  box-sizing:border-box !important;
  border-top:1px solid rgba(242,240,235,.16) !important;
  padding:20px 0 0 !important;
}
.selected-project-info h3 {
  margin:0 !important;
  font-size:18px !important;
  line-height:1.1 !important;
}
.selected-project-info p {
  display:none !important;
}
.selected-project-info > span {
  position:static !important;
  color:#777 !important;
  font:9px "DM Mono" !important;
  letter-spacing:.04em !important;
  white-space:nowrap !important;
}
.selected-project-large .selected-project-info::after,
.selected-project-side .selected-project-info::after {
  display:none !important;
}

/* In-page YouTube player */
body.video-open { overflow:hidden; }
.video-modal {
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
}
.video-modal.is-open { display:flex; }
.video-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
}
.video-modal-dialog {
  position:relative;
  z-index:2;
  width:min(1100px,90vw);
  aspect-ratio:16 / 9;
  background:#050505;
  border:1px solid rgba(242,240,235,.16);
  box-shadow:0 30px 100px rgba(0,0,0,.6);
}
.video-modal-frame,
.video-modal-frame iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.video-modal-close {
  position:absolute;
  z-index:3;
  right:-46px;
  top:-46px;
  width:38px;
  height:38px;
  border:1px solid rgba(242,240,235,.35);
  border-radius:50%;
  background:#090909;
  color:#f2f0eb;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
@media (max-width:1500px) {
  .selected-work {
    margin-left:5.5vw !important;
    margin-right:5.5vw !important;
  }
}
@media (max-width:900px) {
  .selected-work {
    margin-left:22px !important;
    margin-right:22px !important;
  }
  .selected-work-grid {
    grid-template-columns:1fr !important;
  }
  .selected-project-side {
    gap:40px !important;
  }
  .video-modal-dialog {
    width:92vw;
  }
  .video-modal-close {
    right:0;
    top:-48px;
  }
}

/* Featured video: play inline, never open/enlarge a modal */
.selected-youtube-inline{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  background:#090909 !important;
}
.selected-youtube-inline iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  border:0 !important;
}
.selected-youtube-inline img,
.selected-youtube-inline .selected-youtube-play{
  display:none !important;
}

/* Instagram Reel cards */
.selected-instagram-media {
  background:#090909 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.selected-instagram-media iframe {
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  background:#090909 !important;
}
.selected-instagram-project .selected-project-info {
  min-height:64px;
}

/* Selected Work: two Instagram Reels side-by-side, portrait format */
.selected-project-side {
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows:auto !important;
  gap:24px !important;
  align-items:start !important;
}
.selected-instagram-project .selected-media {
  aspect-ratio:9 / 16 !important;
  max-height:none !important;
  background:#090909 !important;
}
.selected-instagram-media iframe {
  width:100% !important;
  height:100% !important;
  display:block !important;
  border:0 !important;
}
.selected-instagram-project .selected-project-info {
  padding-top:16px !important;
  min-height:auto !important;
}
.selected-instagram-project .selected-project-info h3 {
  font-size:16px !important;
}
@media (max-width:900px) {
  .selected-project-side {
    grid-template-columns:1fr !important;
  }
  .selected-instagram-project .selected-media {
    max-width:420px;
  }
}

/* Keep Instagram's native player controls available inside each portrait card. */
.selected-instagram-media {
  cursor:pointer !important;
}
.selected-instagram-media iframe {
  pointer-events:auto !important;
}

/* Keep Selected Work titles on one line */
.selected-instagram-project .selected-project-info {
  flex-wrap:nowrap !important;
}
.selected-instagram-project .selected-project-info > div {
  min-width:0 !important;
  flex:1 1 auto !important;
}
.selected-instagram-project .selected-project-info h3 {
  white-space:nowrap !important;
  font-size:clamp(13px, 1.05vw, 17px) !important;
  letter-spacing:-0.02em !important;
}
.selected-instagram-project .selected-project-info > span {
  flex:0 0 auto !important;
}

/* Small fullscreen control that sits inside the Instagram card */
.selected-instagram-media {
  position:relative !important;
}
.instagram-fullscreen {
  position:absolute !important;
  right:12px !important;
  bottom:12px !important;
  z-index:10 !important;
  width:38px !important;
  height:38px !important;
  border:1px solid rgba(242,240,235,.45) !important;
  border-radius:50% !important;
  background:rgba(0,0,0,.65) !important;
  color:#f2f0eb !important;
  font-size:19px !important;
  line-height:1 !important;
  cursor:pointer !important;
  display:grid !important;
  place-items:center !important;
  padding:0 0 2px !important;
}
.instagram-fullscreen:hover {
  background:rgba(0,0,0,.9) !important;
  border-color:rgba(242,240,235,.8) !important;
}
@media (max-width:900px) {
  .selected-instagram-project .selected-project-info h3 {
    font-size:15px !important;
  }
}

/* Selected Work title formatting: compact, consistent, single-line */
.selected-project-info {
  align-items:baseline !important;
  gap:28px !important;
}
.selected-project-info > div {
  min-width:0 !important;
  flex:1 1 auto !important;
}
.selected-project-info h3 {
  margin:0 !important;
  white-space:nowrap !important;
  font-size:16px !important;
  line-height:1.15 !important;
  letter-spacing:-0.02em !important;
}
.selected-project-info > span {
  flex:0 0 auto !important;
  white-space:nowrap !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.03em !important;
}
.selected-instagram-project .selected-project-info {
  gap:18px !important;
}
.selected-instagram-project .selected-project-info h3 {
  font-size:14px !important;
}
.selected-instagram-project .selected-project-info > span {
  font-size:8px !important;
}
.selected-project-large .selected-project-info h3 {
  font-size:16px !important;
}
@media (max-width:900px) {
  .selected-project-info {
    gap:14px !important;
  }
  .selected-project-info h3,
  .selected-project-large .selected-project-info h3 {
    font-size:14px !important;
  }
  .selected-instagram-project .selected-project-info h3 {
    font-size:13px !important;
  }
}

/* Rise & Dine local video */
.local-video-media {
  position:relative !important;
  overflow:hidden !important;
  background:#090909 !important;
}
.selected-local-video {
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  background:#090909 !important;
}
.local-video-fullscreen {
  z-index:20 !important;
}


/* Portrait social videos: preserve their vertical format in fullscreen */
.selected-local-video {
  aspect-ratio: 9 / 16;
}

.selected-local-video:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* WebKit fullscreen support */
.selected-local-video:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  background: #000 !important;
}

/* Keep the supplied GB mark crisp and correctly proportioned */
.brand {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.brand img {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  object-fit: contain !important;
}

/* Seamless infinite buzzword strip */
.marquee-track.seamless-loop,
.ticker-track.seamless-loop,
.buzzword-track.seamless-loop,
.keywords-track.seamless-loop {
  width:max-content !important;
  animation: buzzword-loop 28s linear infinite !important;
  will-change:transform;
}
@keyframes buzzword-loop {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}

/* Compact primary navigation with Home hover menu */
.site-nav {
  display:flex;
  align-items:center;
  gap:2.2rem;
  position:relative;
  z-index:100;
}
.site-nav .nav-main-link {
  color:#f4f2ee;
  text-decoration:none;
  position:relative;
}
.site-nav .nav-home {
  position:relative;
  padding-bottom:1rem;
  margin-bottom:-1rem;
}
.site-nav .nav-dropdown {
  position:absolute;
  top:calc(100% + 1rem);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:240px;
  padding:0.7rem;
  background:#090909;
  border:1px solid rgba(255,255,255,.12);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.site-nav .nav-dropdown a {
  display:block;
  padding:.7rem .8rem;
  color:#aaa;
  text-decoration:none;
  white-space:nowrap;
}
.site-nav .nav-dropdown a:hover {
  color:#fff;
}
.site-nav .nav-home:hover .nav-dropdown,
.site-nav .nav-home:focus-within .nav-dropdown {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 760px) {
  .site-nav { gap:1rem; }
  .site-nav .nav-dropdown { left:0; transform:translateY(-6px); }
  .site-nav .nav-home:hover .nav-dropdown,
  .site-nav .nav-home:focus-within .nav-dropdown { transform:translateY(0); }
}

/* v53 navigation */
.site-nav {
  display:flex;
  align-items:center;
  gap:2.2rem;
  position:relative;
  z-index:1000;
}
.site-nav .nav-main-link {
  color:#f4f2ee;
  text-decoration:none;
  position:relative;
}
.site-nav .nav-home {
  position:relative;
  padding-bottom:1.25rem;
  margin-bottom:-1.25rem;
}
.site-nav .nav-dropdown {
  position:absolute;
  top:calc(100% + 0.35rem);
  left:0;
  min-width:250px;
  padding:.65rem;
  background:#090909;
  border:1px solid rgba(255,255,255,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.site-nav .nav-dropdown::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-.5rem;
  height:.6rem;
}
.site-nav .nav-dropdown a {
  display:block;
  padding:.72rem .8rem;
  color:#aaa;
  text-decoration:none;
  white-space:nowrap;
}
.site-nav .nav-dropdown a:hover,
.site-nav .nav-dropdown a:focus-visible {
  color:#fff;
}
.site-nav .nav-home:hover .nav-dropdown,
.site-nav .nav-home:focus-within .nav-dropdown,
.site-nav .nav-dropdown:hover {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.contact-link {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.contact-arrow {
  color:#ed1c24;
  font-size:1.05em;
  line-height:1;
}

/* Prevent adjacent duplicate marquee separators */
.marquee-track .marquee-dot + .marquee-dot,
.ticker-track .marquee-dot + .marquee-dot,
.buzzword-track .marquee-dot + .marquee-dot,
.keywords-track .marquee-dot + .marquee-dot,
.marquee-track .dot + .dot,
.ticker-track .dot + .dot,
.buzzword-track .dot + .dot,
.keywords-track .dot + .dot {
  display:none !important;
}

@media (max-width:760px) {
  .site-nav { gap:1rem; }
  .site-nav .nav-dropdown { left:0; }
}

/* v54: top navigation is Home / Work / Contact only */
.nav-cta { display:none !important; }

/* v56 final logo/name */
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}
.brand .site-name {
  display:inline-block;
  color:#f2f0eb;
  font-family:Manrope, sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.02em;
}

/* v56 seamless marquee: two identical copies, no gap at the join */
.marquee {
  overflow:hidden !important;
  white-space:nowrap;
}
.marquee-track {
  display:flex !important;
  width:max-content !important;
  gap:0 !important;
  padding:0 !important;
  animation:marquee-seamless 24s linear infinite !important;
  will-change:transform;
}
.marquee-copy {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:32px;
  padding:18px 32px 18px 0;
  font:12px "DM Mono";
  letter-spacing:.1em;
}
.marquee-copy b {
  color:var(--red);
  font-size:13px;
  flex:0 0 auto;
}
@keyframes marquee-seamless {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}

/* v57: correct logo + name layout */
header.nav .brand {
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  overflow:visible !important;
  flex:0 0 auto !important;
}
header.nav .brand img {
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  display:block !important;
  object-fit:contain !important;
}
header.nav .brand .site-name {
  display:block !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  color:#f2f0eb !important;
  font-family:Manrope,sans-serif !important;
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
}

/* v57: genuinely continuous ticker */
.marquee {
  width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.marquee-track {
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  width:max-content !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  animation:marquee-v57 24s linear infinite !important;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.marquee-copy {
  display:flex !important;
  flex:0 0 auto !important;
  width:max-content !important;
  align-items:center !important;
  gap:32px !important;
  padding:18px 32px 18px 0 !important;
  margin:0 !important;
}
.marquee-copy + .marquee-copy {
  padding-left:0 !important;
}
.marquee-copy b {
  display:inline-block !important;
  flex:0 0 auto !important;
  color:var(--red) !important;
}
@keyframes marquee-v57 {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(-50%,0,0); }
}

/* v59: exact-width marquee loop */
.marquee {
  width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.marquee-track {
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  width:max-content !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  animation:none !important;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.marquee-copy {
  display:flex !important;
  flex:0 0 auto !important;
  width:max-content !important;
  align-items:center !important;
  gap:32px !important;
  padding:18px 32px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.marquee-copy b {
  display:inline-block !important;
  flex:0 0 auto !important;
  color:var(--red) !important;
}

/* v60 work page */
.work-page-projects {
  width: min(100% - 120px, 1680px);
  margin: 0 auto;
  padding: 70px 0 140px;
}
.work-project {
  padding: 0 0 100px;
  margin: 0 0 100px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.work-project:last-child {
  margin-bottom:0;
}
.work-project-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:38px;
}
.work-project-header h2 {
  margin:0;
  font-size:clamp(28px,2.4vw,44px);
  line-height:1;
  letter-spacing:-.04em;
}
.work-project-header p {
  margin:14px 0 0;
  color:rgba(255,255,255,.48);
  font-size:14px;
  letter-spacing:.08em;
}
.work-project-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
}
.work-placeholder {
  min-height:420px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 48% 52%, rgba(238,25,34,.7), rgba(238,25,34,.12) 42%, rgba(0,0,0,.15) 72%),
    #111;
  border:1px solid rgba(255,255,255,.06);
}
.work-placeholder:nth-child(2) {
  min-height:300px;
  background:
    radial-gradient(circle at 55% 45%, rgba(238,25,34,.42), rgba(238,25,34,.08) 40%, rgba(0,0,0,.2) 75%),
    #111;
}
.work-placeholder span {
  position:absolute;
  top:22px;
  left:22px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.45);
  font-family:monospace;
  font-size:11px;
  letter-spacing:.16em;
}
.work-placeholder i {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:28px;
  font-weight:300;
}
@media (max-width: 800px) {
  .work-page-projects { width:calc(100% - 40px); padding-top:45px; }
  .work-project-grid { grid-template-columns:1fr; }
  .work-placeholder, .work-placeholder:nth-child(2) { min-height:300px; }
  .work-project-header p { font-size:11px; line-height:1.5; }
}

/* v61 work filters */
.work-filters {
  width:min(100% - 120px, 1680px);
  margin:0 auto;
  padding:50px 0 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.work-filter {
  appearance:none;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:rgba(255,255,255,.58);
  padding:11px 18px;
  border-radius:999px;
  font:inherit;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.work-filter:hover {
  color:#fff;
  border-color:rgba(255,255,255,.5);
}
.work-filter.is-active {
  background:#f2f0eb;
  color:#090909;
  border-color:#f2f0eb;
}
.work-project.is-filtered-out {
  display:none;
}
@media (max-width:800px) {
  .work-filters {
    width:calc(100% - 40px);
    overflow-x:auto;
    padding-top:30px;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .work-filters::-webkit-scrollbar { display:none; }
  .work-filter { flex:0 0 auto; }
}

/* v63 work intro */
.work-intro {
  width: min(100% - 120px, 1680px);
  min-height: 590px;
  margin: 0 auto;
  padding: 110px 0 90px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-sizing: border-box;
}
.work-intro h1 {
  margin: 0;
  max-width: 1250px;
  font-size: clamp(76px, 9vw, 170px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 800;
}
.work-intro h1 span {
  color: var(--red);
}
.work-intro p {
  margin: 40px 0 0;
  color: rgba(255,255,255,.58);
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -.02em;
}
@media (max-width: 800px) {
  .work-intro {
    width: calc(100% - 40px);
    min-height: 500px;
    padding: 75px 0 65px;
  }
  .work-intro h1 {
    font-size: clamp(58px, 15vw, 100px);
  }
  .work-intro p {
    font-size: 16px;
  }
  .work-intro-break {
    display: none;
  }
}

/* v64: restore the work page's centred content width */
.work-page.site-container {
  width: min(100% - 120px, 1680px);
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.work-page.site-container .work-intro,
.work-page.site-container .work-filters {
  width: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  .work-page.site-container {
    width: calc(100% - 40px);
  }
}

@media (max-width: 600px) {
  .work-page.site-container {
    width: calc(100% - 32px);
  }
}

/* v65: work page uses the exact same container as the homepage */
.work-page.site-container {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.work-page.site-container .work-intro,
.work-page.site-container .work-filters {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

.work-page.site-container .work-intro {
  min-height: 590px;
}

.work-page.site-container .work-filters {
  padding-top: 50px;
}

@media (max-width: 800px) {
  .work-page.site-container {
    width: 100%;
  }

  .work-page.site-container .work-intro,
  .work-page.site-container .work-filters {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* v66 FINAL: Work page aligned to the homepage container */
main.work-page.site-container {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

main.work-page.site-container .work-intro,
main.work-page.site-container .work-filters,
main.work-page.site-container .work-projects {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

main.work-page.site-container .work-intro {
  padding-left: 32px;
  padding-right: 32px;
}

main.work-page.site-container .work-filters {
  padding-left: 32px;
  padding-right: 32px;
}

@media (max-width: 800px) {
  main.work-page.site-container {
    width: 100%;
  }

  main.work-page.site-container .work-intro,
  main.work-page.site-container .work-filters {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Clean Work concept */
.clean-work-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:72px 28px;
  width:100%;
  max-width:none;
  padding:72px 32px 140px;
  box-sizing:border-box;
}

.clean-project {
  min-width:0;
}

.clean-project-media {
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#171717;
  border:1px solid rgba(255,255,255,.12);
}

.clean-project-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 58% 48%, rgba(235,25,32,.7), rgba(20,20,20,.12) 48%, rgba(8,8,8,.8) 100%);
}

.clean-project-placeholder span {
  position:absolute;
  left:22px;
  top:20px;
  font-family:inherit;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
}

.clean-project-placeholder button {
  width:58px;
  height:58px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.65);
  background:transparent;
  color:#fff;
  font-size:14px;
  display:grid;
  place-items:center;
  padding-left:3px;
  cursor:pointer;
}

.clean-project-index {
  position:absolute;
  z-index:2;
  right:18px;
  top:18px;
  color:rgba(255,255,255,.42);
  font-size:11px;
  letter-spacing:.12em;
}

.clean-project-meta {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:30px;
  padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:12px;
}

.clean-project-meta h2 {
  margin:0;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:600;
}

.clean-project-meta p {
  margin:0;
  max-width:48%;
  text-align:right;
  color:rgba(255,255,255,.46);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.03em;
}

.clean-project.is-filtered-out {
  display:none;
}

@media (max-width:900px) {
  .clean-work-grid {
    grid-template-columns:1fr;
    gap:54px;
    padding:55px 20px 100px;
  }

  .clean-project-meta {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .clean-project-meta p {
    max-width:none;
    text-align:left;
  }
}

/* Multi-video Work layout */
.longform-feature,
.client-work-section {
  width:100%;
  box-sizing:border-box;
}

.longform-feature {
  padding:80px 32px 0;
}

.longform-feature-top,
.client-work-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.client-work-kicker {
  display:block;
  margin-bottom:10px;
  color:rgba(255,255,255,.48);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.longform-feature h2,
.client-work-header h2 {
  margin:0;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:600;
}

.client-work-count {
  flex:0 0 auto;
  color:rgba(255,255,255,.38);
  font-size:10px;
  letter-spacing:.12em;
  white-space:nowrap;
}

.longform-feature-media {
  position:relative;
  aspect-ratio:16/8.7;
  margin-top:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 55% 48%, rgba(235,25,32,.78), rgba(32,20,22,.25) 42%, rgba(8,8,8,.94) 100%);
  border:1px solid rgba(255,255,255,.13);
}

.longform-feature-media > span {
  position:absolute;
  left:24px;
  top:22px;
  color:rgba(255,255,255,.88);
  font-size:11px;
  letter-spacing:.12em;
}

.longform-feature-media button,
.multi-video-media button {
  width:62px;
  height:62px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.62);
  background:transparent;
  color:#fff;
  display:grid;
  place-items:center;
  padding-left:4px;
  font-size:14px;
  cursor:pointer;
  position:absolute;
  inset:0;
  margin:auto;
}

.client-work-section {
  padding:105px 32px 0;
}

.client-work-header {
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.13);
}

.client-video-row {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  padding-top:22px;
}

.multi-video-card {
  min-width:0;
}

.multi-video-media {
  position:relative;
  aspect-ratio:9/16;
  max-height:620px;
  overflow:hidden;
  background:
    radial-gradient(circle at 58% 44%, rgba(235,25,32,.62), rgba(28,22,23,.3) 42%, rgba(8,8,8,.95) 100%);
  border:1px solid rgba(255,255,255,.11);
}

.multi-video-media > span {
  position:absolute;
  left:15px;
  top:15px;
  color:rgba(255,255,255,.82);
  font-size:9px;
  letter-spacing:.11em;
}

.multi-video-media button {
  width:52px;
  height:52px;
  font-size:12px;
}

.multi-video-caption {
  padding-top:11px;
  color:rgba(255,255,255,.4);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.longform-feature.is-filtered-out,
.client-work-section.is-filtered-out {
  display:none;
}

@media (max-width:900px) {
  .longform-feature,
  .client-work-section {
    padding-left:20px;
    padding-right:20px;
  }

  .client-video-row {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:560px) {
  .longform-feature,
  .client-work-section {
    padding-top:65px;
  }

  .longform-feature-top,
  .client-work-header {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }

  .client-video-row {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .longform-feature h2,
  .client-work-header h2 {
    font-size:24px;
  }
}

/* Cleaner multi-video Work layout */
.longform-feature {
  width:82%;
  margin:0 auto;
  padding:76px 0 0;
}

.longform-feature-top {
  padding-bottom:17px;
  border-bottom:1px solid rgba(255,255,255,.13);
}

.longform-feature h2 {
  font-size:26px;
  font-weight:600;
}

.longform-feature-media {
  aspect-ratio:16/8.2;
  margin-top:18px;
}

.client-work-section {
  width:100%;
  padding:100px 32px 0;
  box-sizing:border-box;
}

.client-work-header {
  align-items:center;
  padding-bottom:15px;
}

.client-work-kicker {
  margin-bottom:6px;
  font-size:10px;
}

.client-work-header h2 {
  font-size:21px;
  font-weight:600;
}

.client-work-count {
  font-size:9px;
}

.client-video-row {
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  padding-top:18px;
  max-width:1080px;
}

.multi-video-media {
  aspect-ratio:9/14;
  max-height:none;
}

.multi-video-media > span {
  left:12px;
  top:12px;
  font-size:8px;
}

.multi-video-media button {
  width:46px;
  height:46px;
  font-size:11px;
}

.multi-video-caption {
  padding-top:8px;
  font-size:9px;
}

@media (max-width:1100px) {
  .client-video-row {
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width:800px) {
  .longform-feature {
    width:100%;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
  }

  .client-work-section {
    padding-left:20px;
    padding-right:20px;
  }

  .client-video-row {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:560px) {
  .client-video-row {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .client-work-section {
    padding-top:70px;
  }
}

/* Real project media */
.longform-youtube {
  overflow:hidden;
  background:#000;
}
.longform-youtube iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.multi-video-media {
  overflow:hidden;
}
.portfolio-video {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#000;
}

/* v62: Juventus + Arsenal x Stanley 1913 paired */
.client-work-tags {
  margin:8px 0 0;
  color:rgba(255,255,255,.42);
  font-size:10px;
  line-height:1.5;
}
.paired-client-sections {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:42px;
  padding-top:105px;
}
.paired-client-sections .client-work-section {
  padding:0;
}
.paired-client-sections .client-video-row {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.paired-client-sections .client-work-header {
  align-items:flex-start;
  flex-direction:column;
  gap:10px;
}
.paired-client-sections .client-work-count {
  position:absolute;
  right:0;
  top:0;
}
.paired-client-sections .client-work-header {
  position:relative;
}
@media (max-width:800px) {
  .paired-client-sections {
    grid-template-columns:1fr;
    gap:70px;
    padding-top:70px;
  }
  .paired-client-sections .client-video-row {
    grid-template-columns:1fr 1fr;
  }
}

/* v64: compact Juventus + Arsenal x Stanley pairing */
.paired-client-sections:first-of-type {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  align-items:start;
  gap:36px;
}

.paired-client-sections:first-of-type .client-video-row {
  gap:14px;
}

.paired-client-sections:first-of-type .client-work-section:first-child .client-video-row {
  grid-template-columns:1fr;
}

.paired-client-sections:first-of-type .client-work-section:nth-child(2) .client-video-row {
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.paired-client-sections:first-of-type .client-work-section:nth-child(2) .multi-video-media {
  aspect-ratio:9/14;
}

@media (max-width:800px) {
  .paired-client-sections:first-of-type {
    grid-template-columns:1fr;
    gap:55px;
  }

  .paired-client-sections:first-of-type .client-work-section:nth-child(2) .client-video-row {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* v66 clean, complete work layout */
.client-work-tags {
  margin:8px 0 0;
  color:rgba(255,255,255,.42);
  font-size:10px;
  line-height:1.5;
}
.longform-youtube iframe {
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.portfolio-video {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#000;
}
.client-video-row {
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.paired-client-sections {
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:36px;
  padding:105px 32px 0;
  box-sizing:border-box;
}
.paired-client-sections-second {
  grid-template-columns:1fr 1fr;
}
.paired-client-sections .client-work-section {
  padding:0;
}
.paired-client-sections .client-work-section:first-child .client-video-row {
  grid-template-columns:1fr;
}
.paired-client-sections .client-work-section:nth-child(2) .client-video-row {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.paired-client-sections-second .client-work-section .client-video-row {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:800px) {
  .paired-client-sections {
    grid-template-columns:1fr;
    gap:60px;
    padding:70px 20px 0;
  }
  .paired-client-sections .client-work-section:nth-child(2) .client-video-row,
  .paired-client-sections-second .client-work-section .client-video-row {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* v67: smaller Juventus card and no filter-induced blank space */
.paired-client-sections:first-of-type .client-work-section:first-child .multi-video-card {
  width:72%;
}

.paired-client-sections:first-of-type .client-work-section:first-child .client-video-row {
  justify-items:start;
}

/* Hide empty paired wrappers when filtering leaves only one side hidden */
.paired-client-sections:has(.client-work-section.is-filtered-out):has(.client-work-section:not(.is-filtered-out)) {
  display:block;
  padding-top:0;
}

.paired-client-sections .client-work-section.is-filtered-out {
  display:none;
}

.paired-client-sections {
  padding-top:72px;
}

/* When a filter is active, sections should not retain the original
   decorative vertical spacing above the first visible result. */
.longform-feature.is-filtered-out + .client-work-section,
.client-work-section.is-filtered-out + .client-work-section {
  margin-top:0;
}

/* Lyle & Scott metadata sits directly under the title */
.longform-feature-top > div {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.longform-feature-top .longform-tags {
  margin:8px 0 0;
  color:rgba(255,255,255,.46);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.03em;
}

/* v69: consistent filter spacing and compact featured project on filtered views */

/* All filter keeps the Lyle & Scott feature large. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
  padding: 56px 0 48px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media,
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-video,
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .feature-video {
  max-width: 620px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
  font-size: clamp(24px, 2.4vw, 40px);
  margin-bottom: 6px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-tags {
  margin-top: 4px;
}

/* Filters and the first visible project always have the same breathing room. */
.work-filter-bar {
  margin-bottom: 72px !important;
}

.work-projects,
.work-grid,
.client-work-list,
.client-work-section {
  scroll-margin-top: 32px;
}

/* Remove large inherited top gaps when a filter hides the feature or sections. */
body[data-active-filter]:not([data-active-filter="all"]) .work-projects,
body[data-active-filter]:not([data-active-filter="all"]) .client-work-list,
body[data-active-filter]:not([data-active-filter="all"]) .client-work-section {
  margin-top: 0;
}

body[data-active-filter="fashion"] .work-projects,
body[data-active-filter="fashion"] .client-work-list,
body[data-active-filter="fashion"] .client-work-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep the first visible filtered section at a consistent distance from filters. */
body[data-active-filter]:not([data-active-filter="all"]) .client-work-section:first-of-type {
  padding-top: 0;
}

/* Hide the Lyle & Scott feature on filters where it does not belong. */
body[data-active-filter="fashion"] .longform-feature-filterable,
body[data-active-filter="originals"] .longform-feature-filterable {
  display: none;
}

/* v69 correction: Lyle feature exists in the current markup */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(240px, .55fr);
  gap:32px;
  padding:0 0 56px;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media,
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-video,
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .feature-video {
  max-width:none;
  width:100%;
}
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
  font-size:clamp(22px,2.2vw,34px);
}
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
  align-self:end;
}
body[data-active-filter="fashion"] .longform-feature-filterable,
body[data-active-filter="originals"] .longform-feature-filterable {
  display:none;
}

/* One consistent gap from the filter controls to the first visible project. */
.work-filters {
  margin-bottom:64px !important;
}
.work-filters + .longform-feature,
.work-filters + .client-work-section,
.work-filters + .work-projects {
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Avoid blank space left by hidden sections in filtered layouts. */
body[data-active-filter] .is-filtered-out {
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* v70: unified filter spacing */
.work-filters {
  margin-bottom: 96px !important;
}

/* Lyle & Scott: unchanged on All */
body[data-active-filter="all"] .longform-feature-filterable {
  /* preserve the original feature styling */
}

/* Filtered views: same design, simply smaller and left-aligned */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
  display:block;
  padding:0 0 56px;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.12);
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  margin-bottom:24px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top > div {
  align-items:flex-start;
  text-align:left;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
  font-size:clamp(26px, 2.7vw, 46px);
  line-height:1.05;
  margin:0;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-tags {
  margin:8px 0 0;
  text-align:left;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
  width:100%;
  max-width:100%;
  margin:0;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media iframe {
  width:100%;
  display:block;
}

/* The first visible section after the filters starts at exactly the same
   vertical position regardless of which filter is selected. */
.work-filters + .longform-feature,
.work-filters + .client-work-section,
.work-filters + .work-projects {
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Don't let paired sections introduce a different first-item gap. */
body[data-active-filter]:not([data-active-filter="all"]) .paired-client-sections {
  padding-top:0;
}

/* v71: smaller Lyle & Scott feature on filtered views */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
  max-width: 820px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
  font-size: clamp(22px, 2.15vw, 34px);
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-tags {
  font-size: 10px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
  margin-bottom: 18px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
  max-width: 820px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media iframe {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* v72: compact Lyle & Scott on non-All filters */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
  max-width: 720px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1.1;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
  margin-bottom: 16px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
  width: 100%;
  max-width: 720px;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}

/* Remove any old feature-label spacing left behind after removing 01 / FEATURE. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
  align-items: flex-start;
  justify-content: flex-start;
}

/* v73: filtered views hide the category kicker above each project */
body[data-active-filter]:not([data-active-filter="all"]) .client-work-section .client-work-kicker {
  display:none;
}

/* Keep the Lyle & Scott player at its true 16:9 shape so the iframe
   is never cropped by the feature container. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
  aspect-ratio:16 / 9;
  height:auto;
  overflow:hidden;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media iframe {
  width:100%;
  height:100%;
  aspect-ratio:auto;
  display:block;
  border:0;
}


/* v75: restored work-page closing CTA */
main.work-page .work-cta {
  width: 100%;
  box-sizing: border-box;
  margin-top: 120px;
  padding: 130px 32px 140px;
  text-align: center;
  background: #0e0e0e;
}
main.work-page .work-cta .section-label {
  margin-bottom: 30px;
}
main.work-page .work-cta h2 {
  margin: 0 0 45px;
  font-size: clamp(50px, 7vw, 90px);
  line-height: .9;
  letter-spacing: -.06em;
}
main.work-page .work-cta h2 em {
  font-style: italic;
}
main.work-page .work-cta .button {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  padding: 16px 19px;
  font-size: 12px;
  font-weight: 800;
}
main.work-page .work-cta .button span {
  color: #fff;
}
@media (max-width: 800px) {
  main.work-page .work-cta {
    margin-top: 90px;
    padding: 90px 20px 100px;
  }
}

/* v76: keep Adidas and Under Armour videos at the same visual scale as the other short-form work */
.paired-client-sections-second .client-work-section .client-video-row {
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-width:540px;
  gap:16px;
}
.paired-client-sections-second .client-work-section .multi-video-media {
  width:100%;
  max-width:none;
}
@media (max-width:800px) {
  .paired-client-sections-second .client-work-section .client-video-row {
    max-width:none;
  }
}

/* v77: refined closing CTA spacing */
main.work-page .work-cta {
  margin-top: 80px;
}
main.work-page .work-cta h2 {
  margin-top: 0;
}

/* v77: back-to-top control */
.back-to-top {
  display: flex;
  width: fit-content;
  margin: 0 auto 72px;
  padding: 13px 20px;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.back-to-top:hover {
  border-color: rgba(255,255,255,.5);
  color: #fff;
  transform: translateY(-2px);
}
.back-to-top span {
  color: #ed1c24;
  font-size: 13px;
  line-height: 1;
}
@media (max-width:800px) {
  .back-to-top {
    margin-bottom: 50px;
  }
}

/* v78: slightly larger separation between the closing CTA and Back to Top */
main.work-page .work-cta {
  margin-bottom: 42px;
}

/* v79: tighter contact title-to-email spacing */
.contact-page .contact-email {
  margin-top: 32px;
}

/* v82: tighten contact page spacing */
.contact-hero {
  padding-bottom: 75px;
}
.contact-grid {
  padding-top: 70px;
}
.contact-aside ul {
  padding-top: 15px;
}
@media (max-width:800px) {
  .contact-hero {
    padding-bottom: 60px;
  }
  .contact-grid {
    padding-top: 55px;
  }
  .contact-aside ul {
    padding-top: 10px;
  }
}

/* v83: small white LinkedIn mark */
.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.linkedin-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #fff;
}
.linkedin-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}


/* v86: understated multi-video carousel behind the home hero */
.hero {
  overflow: hidden;
  isolation: isolate;
}
.hero > *:not(.hero-video-carousel) {
  position: relative;
  z-index: 2;
}
.hero-video-carousel {
  position: absolute;
  inset: 42px 0 34px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  opacity: .78;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.hero-video-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  transform: translate3d(-50%, 0, 0);
  animation: none;
  will-change: transform;
}
.hero-video-card {
  flex: 0 0 245px;
  width: 245px;
  aspect-ratio: 9 / 14;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  opacity: .65;
  transform: scale(.92);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.hero-video-card video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,7,7,.62) 0%, rgba(7,7,7,.30) 22%, rgba(7,7,7,.22) 50%, rgba(7,7,7,.30) 78%, rgba(7,7,7,.66) 100%),
    linear-gradient(180deg, rgba(7,7,7,.36) 0%, rgba(7,7,7,.08) 48%, rgba(7,7,7,.60) 100%);
}
@keyframes hero-video-scroll {
  from { transform: translate3d(-25%, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 900px) {
  .hero-video-card {
    flex-basis: 190px;
    width: 190px;
  }
  .hero-video-track {
    gap: 18px;
    animation-duration: 23s;
  }
}
@media (max-width: 760px) {
  .hero-video-carousel {
    inset: 54px 0 30px;
  }
  .hero-video-card {
    flex-basis: 155px;
    width: 155px;
    border-radius: 10px;
    opacity: .65;
  }
  .hero-video-track {
    gap: 14px;
  }
  .hero-video-overlay {
    background:
      linear-gradient(90deg, rgba(7,7,7,.82), rgba(7,7,7,.48), rgba(7,7,7,.82)),
      linear-gradient(180deg, rgba(7,7,7,.58), rgba(7,7,7,.75));
  }
}

/* v95: continuous buzzword ticker */
.marquee-track {
  animation: none !important;
  gap: 0 !important;
  width: max-content !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}
.marquee-copy {
  flex: 0 0 auto !important;
  width: max-content !important;
}


















/* v108: static impact graph, animation removed */
.impact-line {
  fill: none;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
}
.impact-dot {
  opacity: 1 !important;
}


/* v109: subtle pulse on the graph's existing glow */
.impact-glow {
  animation: impact-glow-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes impact-glow-pulse {
  0%, 100% {
    opacity: .55;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .impact-glow {
    animation: none;
    opacity: .75;
  }
}


/* v110: actual SVG glow layer pulses independently */
.impact-dot-glow {
  fill: #ff2630;
  stroke: none;
  opacity: .45;
  filter:
    drop-shadow(0 0 5px rgba(255,38,48,.95))
    drop-shadow(0 0 14px rgba(255,38,48,.85))
    drop-shadow(0 0 28px rgba(255,38,48,.55));
  transform-box: fill-box;
  transform-origin: center;
  animation: impact-dot-glow-pulse 1.8s ease-in-out infinite;
}
@keyframes impact-dot-glow-pulse {
  0%, 100% {
    opacity: .35;
    transform: scale(.88);
  }
  50% {
    opacity: .85;
    transform: scale(1.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .impact-dot-glow {
    animation: none;
    opacity: .55;
  }
}


/* v112: dedicated phone optimisation layer
   Desktop styles above remain unchanged. */
@media (max-width: 600px) {
  html {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  /* Navigation */
  .site-nav {
    width: 100%;
    height: 68px;
    padding: 0 18px;
    box-sizing: border-box;
  }

  .site-nav .nav-logo,
  .site-nav .logo,
  .site-nav .brand {
    max-width: 145px;
  }

  .site-nav nav,
  .site-nav .nav-links {
    gap: 14px;
  }

  .site-nav nav a,
  .site-nav .nav-links a {
    font-size: 9px;
    white-space: nowrap;
  }

  /* Home hero */
  .hero {
    min-height: 650px;
    padding: 78px 20px 58px;
    box-sizing: border-box;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(52px, 16vw, 82px);
    line-height: .9;
    letter-spacing: -.055em;
  }

  .hero-kicker {
    font-size: 9px;
    letter-spacing: .08em;
    margin-bottom: 24px;
  }

  .hero-copy {
    max-width: 330px;
    margin-top: 42px;
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-actions {
    margin-top: 28px;
    gap: 18px;
    flex-wrap: wrap;
  }

  .hero-actions a {
    font-size: 10px;
  }

  /* Keep the background carousel visible but controlled on a phone. */
  .hero-video-carousel {
    inset: 55px 0 25px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .hero-video-track {
    gap: 12px;
  }

  .hero-video-card {
    flex-basis: 145px;
    width: 145px;
    border-radius: 9px;
    opacity: .40;
  }

  /* Home sections */
  .intro,
  .statement,
  .analytics,
  .featured-work-v2,
  .selected-work,
  .contact-strip {
    width: 100%;
    box-sizing: border-box;
  }

  .intro-content,
  .statement-inner,
  .analytics,
  .featured-work-v2,
  .selected-work {
    padding-left: 20px;
    padding-right: 20px;
  }

  .intro-content {
    margin-top: 30px;
  }

  .statement h2 {
    font-size: clamp(34px, 10vw, 52px);
    line-height: .98;
  }

  .analytics {
    margin-top: 48px;
  }

  .analytics-head {
    padding: 0;
  }

  .analytics-stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .impact-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .impact-copy {
    padding: 0;
  }

  .impact-visual {
    width: 100%;
    min-height: 220px;
    margin-top: 28px;
    overflow: visible !important;
  }

  .impact-visual svg {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    right: 0 !important;
  }

  .featured-work-v2 {
    padding-top: 70px;
  }

  .featured-work-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Work page */
  main.work-page.site-container {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .work-intro {
    width: calc(100% - 40px);
    min-height: 430px;
    padding: 72px 0 55px;
    margin: 0 20px;
    box-sizing: border-box;
  }

  .work-intro h1 {
    font-size: clamp(52px, 16vw, 82px);
    line-height: .9;
  }

  .work-filters {
    width: calc(100% - 40px);
    margin: 0 20px;
    padding-top: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .work-filters::-webkit-scrollbar {
    display: none;
  }

  .work-filters button,
  .work-filters a {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 8px 12px;
  }

  .longform-feature,
  .client-work-section,
  .paired-client-sections {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  .longform-feature {
    padding-top: 60px;
  }

  .longform-feature-top,
  .client-work-header {
    gap: 12px;
  }

  .longform-feature-top h2,
  .client-work-header h2 {
    font-size: 20px;
    line-height: 1.05;
  }

  .client-video-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .client-video-card {
    min-width: 0;
  }

  .client-video-card video,
  .client-video-card iframe {
    width: 100%;
    max-width: 100%;
  }

  .paired-client-sections,
  .paired-client-sections-first,
  .paired-client-sections-second {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-top: 58px;
  }

  .clean-work-grid {
    grid-template-columns: 1fr;
    gap: 46px;
    padding: 45px 20px 80px;
  }

  .clean-project-meta {
    align-items: flex-start;
  }

  .clean-project-title {
    font-size: 18px;
  }

  .work-cta {
    margin-top: 65px !important;
    padding: 70px 20px 80px !important;
    box-sizing: border-box;
  }

  .back-to-top {
    margin-bottom: 35px;
  }

  /* Contact page */
  .contact-hero {
    width: 100%;
    box-sizing: border-box;
    padding: 78px 20px 45px;
  }

  .contact-hero h1 {
    font-size: clamp(52px, 16vw, 82px);
    line-height: .9;
  }

  .contact-grid {
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 45px 20px 70px;
  }

  .contact-email {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(24px, 7vw, 38px);
  }

  .contact-aside {
    width: 100%;
  }

  /* Prevent horizontal overflow from media and long titles. */
  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }

  .work-page h1,
  .work-page h2,
  .work-page h3,
  .contact-page h1,
  .contact-page h2,
  .contact-page h3 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .site-nav {
    padding: 0 14px;
  }

  .site-nav nav,
  .site-nav .nav-links {
    gap: 10px;
  }

  .site-nav nav a,
  .site-nav .nav-links a {
    font-size: 8px;
  }

  .hero,
  .contact-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-copy {
    max-width: 290px;
  }

  .client-video-row {
    gap: 9px;
  }

  .work-filters {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }
}


/* v113: dedicated mobile navigation and mobile-first layout.
   These rules are completely isolated from desktop. */
.mobile-menu-toggle,
.mobile-menu {
  display: none;
}

@media (max-width: 600px) {
  /* Hide the desktop navigation on phones. */
  header.nav {
    height: 64px;
    min-height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
  }

  header.nav .site-nav {
    display: none !important;
  }

  header.nav .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  header.nav .brand img {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
  }

  header.nav .site-name {
    font-size: 12px;
    white-space: nowrap;
  }

  .mobile-menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px 7px;
    margin: 0;
    border: 0;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 1101;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 26px;
    height: 1px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }

  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(7, 7, 7, .98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-menu-inner {
    height: 100%;
    padding: 115px 24px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .mobile-menu-label {
    margin-bottom: 34px;
    font-size: 9px;
    letter-spacing: .14em;
    color: #777;
  }

  .mobile-menu-inner > a {
    color: #fff;
    text-decoration: none;
    font-size: clamp(42px, 14vw, 62px);
    line-height: .95;
    letter-spacing: -.045em;
    margin-bottom: 22px;
  }

  .mobile-menu-inner > a span {
    color: #e31b23;
    font-size: .55em;
    vertical-align: top;
    margin-left: 5px;
  }

  .mobile-menu-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
  }

  /* Phone page rhythm */
  main {
    width: 100%;
    box-sizing: border-box;
  }

  .hero {
    min-height: 620px;
    padding: 72px 20px 52px;
  }

  .hero h1 {
    font-size: clamp(50px, 16vw, 72px);
    line-height: .9;
  }

  .hero-copy {
    max-width: 315px;
    margin-top: 44px;
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-actions {
    margin-top: 26px;
  }

  /* Background carousel becomes a subtle mobile visual rather than dominating. */
  .hero-video-carousel {
    inset: 60px 0 20px;
  }

  .hero-video-track {
    gap: 12px;
  }

  .hero-video-card {
    width: 135px;
    flex-basis: 135px;
    border-radius: 9px;
    opacity: .32;
  }

  /* Home content */
  .intro-content,
  .statement,
  .analytics,
  .featured-work-v2,
  .selected-work {
    box-sizing: border-box;
  }

  .statement h2 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .analytics-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Work */
  .work-intro {
    min-height: 390px;
    padding: 66px 0 48px;
  }

  .work-intro h1 {
    font-size: clamp(50px, 16vw, 72px);
  }

  .work-filters {
    padding-top: 20px;
    padding-bottom: 4px;
  }

  .longform-feature {
    padding-top: 52px;
  }

  .client-video-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .client-work-section {
    padding-top: 58px;
  }

  .client-work-header h2,
  .longform-feature-top h2 {
    font-size: 18px;
  }

  .paired-client-sections {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-top: 55px;
  }

  .work-cta {
    margin-top: 55px !important;
    padding: 65px 20px 70px !important;
  }

  /* Contact */
  .contact-hero {
    padding: 68px 20px 40px;
  }

  .contact-hero h1 {
    font-size: clamp(50px, 16vw, 72px);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 40px 20px 65px;
  }

  .contact-email {
    font-size: clamp(22px, 6.5vw, 34px);
    line-height: 1.05;
  }
}

@media (max-width: 380px) {
  header.nav {
    padding-left: 15px;
    padding-right: 15px;
  }

  .hero,
  .contact-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1,
  .work-intro h1,
  .contact-hero h1 {
    font-size: 49px;
  }

  .mobile-menu-inner {
    padding-left: 20px;
  }

  .client-video-row {
    gap: 8px;
  }
}


/* v114: phone-specific refinements requested */
.about-title-mobile {
  display: none;
}

@media (max-width: 600px) {
  /* Safe phone margins and compact header */
  header.nav {
    padding: 0 16px;
    height: 58px;
    min-height: 58px;
  }

  header.nav .brand {
    margin-left: 0;
  }

  .mobile-menu-toggle {
    position: fixed;
    top: 9px;
    right: 14px;
    width: 40px;
    height: 40px;
    padding: 9px 6px;
    z-index: 1200;
  }

  /* Keep the hamburger comfortably inside phone safe margins. */
  .mobile-menu {
    padding-top: 0;
  }

  /* Home: bring hero title closer to the top */
  .hero {
    min-height: 590px;
    padding-top: 38px;
  }

  /* Tighten title -> buzzword strip -> About rhythm */
  .hero + .marquee {
    margin-top: -8px;
  }

  .marquee {
    min-height: 40px;
    height: 40px;
  }

  .intro {
    padding-top: 30px !important;
  }

  /* About heading becomes two compact columns:
     Creative / thinking | Sharp / editing */
  .about-title-desktop {
    display: none !important;
  }

  .about-title-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    font-size: clamp(34px, 10.8vw, 48px);
    line-height: .9;
    letter-spacing: -.055em;
    margin: 0;
  }

  .about-title-mobile span {
    display: block;
  }

  .about-copy {
    width: 100%;
    margin-top: 28px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 18px;
  }

  .about-copy p {
    margin: 0;
  }

  .about-copy p:nth-of-type(3),
  .about-copy .text-link {
    grid-column: 1 / -1;
  }

  /* Impact label and graph closer together */
  .analytics {
    margin-top: 34px !important;
  }

  .impact-layout {
    gap: 0 !important;
  }

  .impact-visual {
    margin-top: 10px !important;
    min-height: 190px;
  }

  /* Stats -> selected work tighter */
  .selected-work {
    padding-top: 42px !important;
  }

  .selected-work-head {
    margin-bottom: 20px !important;
  }

  /* Featured Lyle & Scott video smaller, comfortably within phone margins */
  .selected-project-large .selected-media {
    height: 250px !important;
    min-height: 0 !important;
    max-height: 250px !important;
  }

  .selected-project-large .selected-media iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* The two social videos sit side by side, with their titles above them. */
  .selected-project-side {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .selected-project-side .selected-instagram-project {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
  }

  .selected-project-side .selected-project-info {
    order: -1 !important;
    margin-bottom: 8px !important;
  }

  .selected-project-side .selected-project-info h3 {
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .selected-project-side .selected-project-info > span {
    display: none !important;
  }

  .selected-project-side .selected-media {
    width: 100% !important;
    max-width: none !important;
    height: 190px !important;
  }

  .selected-project-side .selected-local-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Make the transition from the white About/analytics area into black
     Selected Work feel tighter. */
  .selected-work {
    margin-top: 0 !important;
  }

  .statement {
    margin-top: 38px !important;
    padding-top: 52px !important;
  }

  .contact-strip {
    margin-top: 34px !important;
    padding: 58px 20px 70px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
  }

  .contact-strip > div {
    width: 100%;
  }

  /* Replace circular CTA with a centred rectangular button. */
  .contact-strip .circle-button {
    width: 100px !important;
    height: 48px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10px;
    line-height: 1;
  }

  .contact-strip .circle-button br {
    display: none;
  }

  /* Work: title and filters sit closer together */
  .work-intro {
    min-height: 360px;
    padding-top: 48px;
    padding-bottom: 30px;
  }

  .work-filters {
    padding-top: 8px !important;
  }

  /* Juventus is intentionally smaller on the phone */
  .selected-project-side .selected-instagram-project:last-child .selected-media {
    height: 165px !important;
  }

  /* Contact: What I Do first, then email. Services in one row. */
  .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px !important;
    padding-top: 30px !important;
  }

  .contact-aside {
    order: -1 !important;
    border: 0 !important;
    padding: 0 !important;
  }

  .contact-aside .section-label {
    margin-bottom: 16px;
  }

  .contact-aside ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 0 !important;
    margin: 0 !important;
  }

  .contact-aside li {
    font-size: 10px;
    line-height: 1.2;
  }

  .contact-main {
    order: 1 !important;
  }

  .contact-main .section-label {
    margin-bottom: 18px;
  }

  .big-email {
    font-size: clamp(23px, 7vw, 34px);
    line-height: 1;
  }
}

@media (max-width: 380px) {
  .mobile-menu-toggle {
    right: 12px;
  }

  .about-copy {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }

  .about-title-mobile {
    gap: 8px;
    font-size: 35px;
  }

  .contact-aside ul {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 12px;
  }

  .selected-project-large .selected-media {
    height: 220px !important;
    max-height: 220px !important;
  }

  .selected-project-side .selected-media,
  .selected-project-side .selected-instagram-project:last-child .selected-media {
    height: 150px !important;
  }
}


/* v115: Lyle & Scott is never shown in Fashion */
body[data-active-filter="fashion"] [data-project="lyle-scott"] {
  display: none !important;
}


/* v116: final mobile home spacing and selected-work framing */
@media (max-width: 600px) {
  /* Hero: remove the large dead space between the CTA buttons and buzzword strip. */
  .hero {
    min-height: 440px !important;
    padding-bottom: 28px !important;
  }

  .hero-actions {
    margin-top: 22px !important;
  }

  /* Keep the marquee text vertically centred between its two rules. */
  .marquee {
    height: 40px !important;
    min-height: 40px !important;
    display: flex;
    align-items: center;
  }

  .marquee-track {
    height: 40px !important;
    padding: 0 !important;
    align-items: center !important;
  }

  /* About: the copy must sit below the two-column heading, not in a
     desktop-style second grid column. */
  .intro-content {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 22px !important;
  }

  .about-copy {
    margin-top: 20px !important;
  }

  /* Remove the large empty rhythm before Impact / Reach. */
  .analytics {
    margin-top: 24px !important;
  }

  /* Pull the graph visually closer to the Impact / Reach label. */
  .analytics-head {
    height: 20px !important;
  }

  .impact-visual {
    margin-top: 2px !important;
    min-height: 158px !important;
    height: 158px !important;
  }

  .impact-visual svg {
    height: 150px !important;
    bottom: 0 !important;
  }

  /* Stats -> Selected Work */
  .selected-work {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 18px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .selected-work-head {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
    gap: 10px !important;
  }

  .selected-work-head > * {
    min-width: 0;
  }

  .selected-work-head .text-link {
    white-space: nowrap;
  }

  .selected-work-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    box-sizing: border-box !important;
  }

  /* Keep the featured horizontal video fully inside its frame. */
  .selected-project-large {
    width: 100% !important;
    min-width: 0 !important;
  }

  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .selected-project-large .selected-media iframe,
  .selected-youtube-inline,
  .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep the YouTube label safely inside the viewport. */
  .selected-project-large .selected-project-info {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .selected-project-large .selected-project-info > span {
    display: block !important;
    font-size: 8px !important;
    margin-top: 3px !important;
  }

  /* The two social videos are true 9:16 portraits and fit side by side. */
  .selected-project-side {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }

  .selected-project-side .selected-instagram-project {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .selected-project-side .selected-project-info {
    order: -1 !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  .selected-project-side .selected-project-info h3 {
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Restore the Instagram tags and keep them inside the card. */
  .selected-project-side .selected-project-info > span {
    display: block !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  .selected-project-side .selected-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .selected-project-side .selected-local-video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16 !important;
    object-fit: cover !important;
    display: block !important;
  }
}


/* v117: final mobile home spacing + selected work media cleanup */
@media (max-width: 600px) {
  /* About copy: reduce the dense two-column feel without changing the content. */
  .about-copy {
    display: block !important;
    margin-top: 24px !important;
  }

  .about-copy p {
    font-size: 14px !important;
    line-height: 1.48 !important;
    margin: 0 0 18px !important;
  }

  .about-copy p:nth-of-type(3) {
    margin-top: 4px !important;
  }

  .about-copy .text-link {
    display: inline-block;
    margin-top: 2px;
  }

  /* Give the graph a little breathing room from the stat row. */
  .impact-visual {
    min-height: 215px !important;
    margin-top: 6px !important;
  }

  .impact-caption {
    bottom: 0 !important;
  }

  .impact-stats {
    margin-top: 16px !important;
  }

  .impact-stat {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .impact-stat strong {
    font-size: 28px !important;
  }

  .impact-stat p {
    font-size: 9px !important;
    line-height: 1.45 !important;
  }

  /* Pull Selected Work back up after the analytics block. */
  .selected-work {
    padding-top: 20px !important;
  }

  .selected-work-head {
    margin-bottom: 18px !important;
  }

  /* Lyle & Scott: title/tag above, then a contained landscape player. */
  .selected-project-large {
    display: flex !important;
    flex-direction: column !important;
  }

  .selected-project-large .selected-project-info {
    order: -1 !important;
    margin-bottom: 8px !important;
  }

  .selected-project-large .selected-project-info h3 {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .selected-project-large .selected-project-info > span {
    font-size: 8px !important;
  }

  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-wrap,
  .selected-project-large .selected-youtube-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Keep both vertical social videos identical in size and containment. */
  .selected-project-side {
    margin-top: 24px !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .selected-project-side .selected-project-info {
    margin-bottom: 8px !important;
    min-height: 30px;
  }

  .selected-project-side .selected-project-info h3 {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .selected-project-side .selected-media {
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .selected-project-side .selected-local-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16 !important;
    object-fit: cover !important;
  }
}


/* v118: selected work mobile spacing and card consistency */
@media (max-width: 600px) {
  /* Bring Selected Work noticeably closer to the analytics stats. */
  .selected-work {
    padding-top: 4px !important;
    margin-top: 0 !important;
  }

  .selected-work-head {
    margin-bottom: 16px !important;
  }

  /* Keep the two social cards identical and fully visible. */
  .selected-project-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .selected-project-side .selected-instagram-project {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* One-line titles, same smaller font size on both cards. */
  .selected-project-side .selected-project-info {
    min-height: 0 !important;
    height: 30px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .selected-project-side .selected-project-info h3 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 !important;
  }

  .selected-project-side .selected-project-info > span {
    flex: 0 0 auto !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  /* Both videos use the same true 9:16 box and cannot be cropped by a
     fixed height. */
  .selected-project-side .selected-media,
  .selected-project-side .selected-instagram-project:last-child .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9 / 16 !important;
    overflow: hidden !important;
  }

  .selected-project-side .selected-local-video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    aspect-ratio: 9 / 16 !important;
    background: #090909 !important;
  }
}


/* v119: mobile spacing and Work-page project alignment */
@media (max-width: 600px) {

  /* HOME: tighten the end of Selected Work into Approach, then give
     Approach a slightly more deliberate separation from Start a Project. */
  .statement {
    margin-top: 16px !important;
    padding-top: 44px !important;
    padding-bottom: 54px !important;
  }

  .contact-strip {
    margin-top: 24px !important;
    padding-top: 52px !important;
  }

  /* WORK: copy -> filters -> first project title. */
  .work-intro {
    min-height: 0 !important;
    padding-top: 48px !important;
    padding-bottom: 16px !important;
  }

  .work-intro p {
    margin-bottom: 0 !important;
  }

  .work-filters {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
    margin-bottom: 26px !important;
  }

  /* Lyle & Scott keeps the exact same title position whether All or a
     matching filter is active. */
  .longform-feature.longform-feature-filterable {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .longform-feature-filterable .longform-feature-top {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.13);
  }

  .longform-feature-filterable .longform-feature-top h2 {
    font-size: 16px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .longform-feature-filterable .longform-tags {
    margin: 5px 0 0 !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
  }

  /* Every client project uses the same title/tag treatment as Lyle &
     Scott: title left, tags right, sitting directly above the videos. */
  .client-work-section {
    padding-top: 30px !important;
  }

  .client-work-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
  }

  .client-work-header > div {
    display: contents !important;
  }

  .client-work-header .client-work-kicker {
    display: none !important;
  }

  .client-work-header h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
  }

  .client-work-header .client-work-tags {
    flex: 0 0 auto !important;
    margin: 2px 0 0 !important;
    max-width: 42% !important;
    text-align: right !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    color: rgba(255,255,255,.46) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .client-work-section .client-video-row {
    margin-top: 12px !important;
  }

  /* Juventus has one video, so make it a little larger than the normal
     two-column cards and centre it. */
  .client-work-section.juventus-project .client-video-row {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .client-work-section.juventus-project .multi-video-card {
    width: 72% !important;
    max-width: 72% !important;
    margin: 0 auto !important;
  }

  .client-work-section.juventus-project .multi-video-media {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .client-work-section.juventus-project .portfolio-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Keep the final CTA closer to the last project, and the back-to-top
     closer to the CTA. */
  .work-page .work-cta {
    margin-top: 48px !important;
    padding-top: 58px !important;
    padding-bottom: 70px !important;
  }

  .work-page .work-cta h2 {
    margin-bottom: 38px !important;
  }

  .work-page + .back-to-top,
  .work-page ~ .back-to-top {
    margin-top: -18px !important;
    margin-bottom: 28px !important;
  }
}


/* v120: Work page mobile filter-state Lyle & Scott + smaller Juventus */
@media (max-width: 600px) {

  /* Filtered Lyle & Scott feature matches the All-filter feature exactly
     in title scale, spacing and video footprint. */
  body.filter-active .longform-feature-filterable,
  .work-page.filter-active .longform-feature-filterable {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body.filter-active .longform-feature-filterable .longform-feature-top,
  .work-page.filter-active .longform-feature-filterable .longform-feature-top {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }

  body.filter-active .longform-feature-filterable .longform-feature-top h2,
  .work-page.filter-active .longform-feature-filterable .longform-feature-top h2 {
    font-size: 16px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  body.filter-active .longform-feature-filterable .longform-feature-video,
  .work-page.filter-active .longform-feature-filterable .longform-feature-video {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.filter-active .longform-feature-filterable .longform-feature-video iframe,
  body.filter-active .longform-feature-filterable .longform-feature-video video,
  .work-page.filter-active .longform-feature-filterable .longform-feature-video iframe,
  .work-page.filter-active .longform-feature-filterable .longform-feature-video video {
    width: 100% !important;
    display: block !important;
  }

  /* Juventus: still larger than the two-up social cards, but no longer
     dominates the mobile Work page. */
  .client-work-section.juventus-project .multi-video-card {
    width: 58% !important;
    max-width: 58% !important;
  }
}


/* v121: make every visible filter use the exact All-filter Lyle & Scott
   feature treatment. Lyle remains hidden where it does not belong. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
  display: block !important;
  width: 82% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 76px 0 0 !important;
  border: 0 !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
  display: block !important;
  padding-bottom: 17px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
  align-self: auto !important;
  text-align: left !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
  font-size: 26px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-tags {
  margin: 8px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 8.2 !important;
  height: auto !important;
  margin-top: 18px !important;
  overflow: hidden !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media iframe {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  display: block !important;
  border: 0 !important;
}

/* Mobile: literally use the same dimensions as the All filter. */
@media (max-width: 600px) {
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    width: 100% !important;
    max-width: none !important;
    padding: 52px 20px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
    padding-bottom: 17px !important;
    margin: 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-tags {
    margin: 8px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 16 / 8.2 !important;
    height: auto !important;
    margin-top: 18px !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media iframe {
    width: 100% !important;
    height: 100% !important;
  }

  /* Juventus: clean, centred single-card treatment. */
  .client-work-section.juventus-project .client-video-row {
    display: flex !important;
    justify-content: center !important;
  }

  .client-work-section.juventus-project .multi-video-card {
    width: 52% !important;
    max-width: 210px !important;
    margin: 0 auto !important;
  }
}


/* v122: filtered Work sections use the same vertical rhythm as All.
   Juventus uses the same video-card size as the other two-up videos. */
@media (max-width: 600px) {

  /* Keep the filtered Lyle feature and the following projects at the
     same section spacing used by the All view. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    margin-bottom: 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section {
    padding-top: 30px !important;
    margin-top: 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section:first-of-type {
    padding-top: 30px !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section + .client-work-section {
    padding-top: 30px !important;
  }

  /* Match the All-filter Lyle-to-project and project-to-project rhythm. */
  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section .client-video-row {
    margin-top: 12px !important;
  }

  /* Juventus is no longer a special larger card. */
  .client-work-section.juventus-project .client-video-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: normal !important;
  }

  .client-work-section.juventus-project .multi-video-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .client-work-section.juventus-project .multi-video-media {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .client-work-section.juventus-project .portfolio-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}


/* v123: Work-page filter spacing and centred Juventus card.
   Filtered Lyle starts at exactly the same point as the All filter.
   All other section gaps retain the All-filter rhythm. */
@media (max-width: 600px) {

  /* The All view has no extra padding between the filter bar and the
     Lyle title. Remove the extra filtered-view padding that was causing
     the large blank area seen in Branded/Sports. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Keep every filtered project section on the same rhythm as All. */
  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section {
    padding-top: 30px !important;
    margin-top: 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section + .client-work-section {
    padding-top: 30px !important;
  }

  /* Juventus is one vertical card, but exactly the same width as each
     card in the two-column video rows. Centre it rather than stretching
     it across the row. */
  .client-work-section.juventus-project .client-video-row {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .client-work-section.juventus-project .multi-video-card {
    width: calc((100% - 10px) / 2) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  .client-work-section.juventus-project .multi-video-media {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .client-work-section.juventus-project .portfolio-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}


/* v124: Lyle & Scott title hierarchy.
   All filter = larger title. Other filters = smaller title. */
@media (max-width: 600px) {

  /* Filtered Lyle & Scott title is deliberately smaller than All. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  /* All-filter Lyle & Scott keeps the larger title. */
  body[data-active-filter="all"] .longform-feature-filterable h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}


/* v125: final mobile navigation, home title colour and contact refinements */
@media (max-width: 600px) {

  /* The menu uses one bold hamburger/X control. Hide the second X button
     so there can never be two X symbols at once. */
  .mobile-menu-close {
    display: none !important;
  }

  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    top: 7px !important;
    right: 12px !important;
    padding: 8px 5px !important;
  }

  .mobile-menu-toggle span {
    width: 32px !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 1px !important;
  }

  .mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .mobile-menu-label {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
  }

  /* Home: Creative thinking is white, Sharp editing stays red. */
  .about-title-mobile span:first-child {
    color: #f2f0eb !important;
  }

  .about-title-mobile span:last-child {
    color: #e31b23 !important;
  }

  /* Contact: bring the hero title closer to the top/header. */
  .contact-page .contact-hero {
    padding-top: 42px !important;
    padding-bottom: 68px !important;
  }

  /* Contact: centre What I Do between a top and bottom rule. */
  .contact-page .contact-aside {
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-left: 0 !important;
    padding: 20px 0 18px !important;
    text-align: center !important;
  }

  .contact-page .contact-aside .section-label {
    text-align: center !important;
    margin: 0 0 14px !important;
  }

  .contact-page .contact-aside ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .contact-page .contact-aside li {
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  /* Contact: tighten Get in touch -> email, and move the rule with it
     while preserving the spacing beneath the rule. */
  .contact-page .contact-main .section-label {
    margin-bottom: 10px !important;
  }

  .contact-page .big-email {
    margin: 28px 0 18px !important;
    padding-bottom: 8px !important;
  }

  .contact-page .contact-line {
    margin: 0 !important;
  }

  .contact-page .social-links {
    padding-top: 25px !important;
  }

  /* Ensure Lyle & Scott can never render on Fashion, even when a broader
     filtered-feature rule sets display:block. */
  body[data-active-filter="fashion"] [data-project="lyle-scott"],
  body[data-active-filter="fashion"] .longform-feature-filterable[data-project="lyle-scott"] {
    display: none !important;
    visibility: hidden !important;
  }
}


/* v126: final mobile alignment refinements */
@media (max-width: 600px) {

  /* Home About: centre the heading and both copy columns within the
     phone viewport instead of allowing the block to sit right-heavy. */
  .intro-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .about-heading {
    width: 100% !important;
    text-align: center !important;
  }

  .about-title-mobile {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    text-align: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  .about-title-mobile span {
    width: 100% !important;
    text-align: center !important;
  }

  .about-copy {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 14px !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  .about-copy p {
    width: 100% !important;
    text-align: center !important;
  }

  .about-copy p:nth-of-type(3),
  .about-copy .text-link {
    text-align: center !important;
  }

  /* Contact: put all four What I Do items on one centred line.
     The title sits centrally between the rules. */
  .contact-page .contact-aside {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 0 18px !important;
    text-align: center !important;
  }

  .contact-page .contact-aside .section-label {
    width: 100% !important;
    margin: 0 0 16px !important;
    text-align: center !important;
  }

  .contact-page .contact-aside ul {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: center !important;
    justify-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .contact-page .contact-aside li {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }
}


/* v127: restore About text alignment while centring the block itself */
@media (max-width: 600px) {
  .intro-content {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: translateX(-6px) !important;
  }

  .about-heading {
    text-align: left !important;
  }

  .about-title-mobile {
    text-align: left !important;
    justify-items: stretch !important;
  }

  .about-title-mobile span {
    text-align: left !important;
  }

  .about-copy {
    text-align: left !important;
    justify-items: stretch !important;
  }

  .about-copy p {
    text-align: left !important;
  }

  .about-copy p:nth-of-type(3),
  .about-copy .text-link {
    text-align: left !important;
  }

  /* Contact: match the Work page's title-to-top distance. */
  .contact-page .contact-hero {
    padding-top: 48px !important;
    padding-bottom: 25px !important;
  }

  /* Pull What I Do closer to the main title. */
  .contact-page .contact-grid {
    padding-top: 20px !important;
    gap: 34px !important;
  }
}


/* v128: final Contact mobile vertical rhythm */
@media (max-width: 600px) {
  /* Contact title: use the same compact top offset as the Work title,
     with no extra hero heading margin pushing it down. */
  .contact-page .contact-hero {
    padding-top: 32px !important;
    padding-bottom: 18px !important;
  }

  .contact-page .contact-hero h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Remove the extra empty runway before the footer. */
  .contact-page .contact-grid {
    padding-bottom: 20px !important;
  }

  .contact-page + .back-to-top {
    margin-bottom: 20px !important;
  }

  .contact-page ~ footer {
    margin-top: 0 !important;
  }
}


/* v129: Contact mobile viewport balance */
@media (max-width: 600px) {
  /* Give the Contact title a little more breathing room below the header. */
  .contact-page .contact-hero {
    padding-top: 52px !important;
  }

  /* Let the Contact page fill the available phone viewport so the footer
     does not sit halfway up the screen with a large black void underneath. */
  main.contact-page {
    min-height: calc(100svh - 68px - 82px) !important;
    box-sizing: border-box !important;
  }
}


/* v130: Contact mobile final spacing */
@media (max-width: 600px) {
  /* Remove the viewport-filling stretch that created the large blank area
     beneath LinkedIn. The Back to Top control can now follow the content. */
  main.contact-page {
    min-height: 0 !important;
  }

  /* Slightly more breathing room between the main title and What I Do. */
  .contact-page .contact-hero {
    padding-bottom: 28px !important;
  }

  .contact-page .contact-grid {
    padding-bottom: 10px !important;
  }

  /* GB in the open menu uses the same muted grey as the other small labels. */
  .mobile-menu-label {
    color: #777 !important;
  }

  /* Keep the mobile hero carousel visible enough to actually read as a
     background visual without competing with the hero copy. */
  .hero-video-carousel {
    opacity: .48 !important;
  }

  .hero-video-overlay {
    background:
      linear-gradient(90deg, rgba(7,7,7,.74), rgba(7,7,7,.40), rgba(7,7,7,.74)),
      linear-gradient(180deg, rgba(7,7,7,.52), rgba(7,7,7,.68)) !important;
  }
}


/* v131: Homepage carousel layer fix + Contact mobile rhythm */
.hero {
  position: relative;
  isolation: isolate;
}
.hero-video-carousel {
  z-index: 1 !important;
}
.hero-video-track {
  position: relative;
  z-index: 1 !important;
}
.hero-video-overlay {
  z-index: 1 !important;
  pointer-events: none;
}
.hero > *:not(.hero-video-carousel):not(.hero-video-overlay) {
  position: relative;
  z-index: 3 !important;
}

@media (max-width: 600px) {
  /* Contact should finish directly after its content, rather than stretching
     to the phone viewport height. */
  main.contact-page {
    min-height: unset !important;
    height: auto !important;
    margin-bottom: 0 !important;
  }

  .contact-page .contact-hero {
    padding-bottom: 34px !important;
  }

  .contact-page .contact-grid {
    gap: 46px !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .contact-page .contact-aside {
    padding-top: 24px !important;
    padding-bottom: 22px !important;
  }

  .contact-page .contact-main .section-label {
    margin-bottom: 14px !important;
  }

  .contact-page .big-email {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
  }

  .contact-page .social-links {
    padding-top: 28px !important;
  }

  .contact-page + .back-to-top {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
}

/* v132: stronger mobile hero carousel */
@media (max-width: 600px) {
  .hero-video-carousel {
    opacity: .72 !important;
  }

  .hero-video-overlay {
    background:
      linear-gradient(90deg, rgba(7,7,7,.58), rgba(7,7,7,.28), rgba(7,7,7,.58)),
      linear-gradient(180deg, rgba(7,7,7,.38), rgba(7,7,7,.55)) !important;
  }

  /* Keep Contact content compact. Do not stretch the page to the viewport. */
  main.contact-page {
    min-height: 0 !important;
    height: auto !important;
  }

  .contact-page .contact-grid {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    gap: 30px !important;
  }

  .contact-page + .back-to-top {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .contact-page ~ footer {
    margin-top: 0 !important;
  }

  footer {
    padding-bottom: 24px !important;
  }
}


/* v134: Contact mobile final vertical balance */
@media (max-width: 600px) {
  main.contact-page {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Use the available space for the actual Contact content, not a blank
     runway after the footer. */
  .contact-page .contact-grid {
    gap: 42px !important;
    padding-top: 30px !important;
    padding-bottom: 22px !important;
  }

  .contact-page .big-email {
    font-size: clamp(26px, 7.6vw, 38px) !important;
    margin-top: 34px !important;
    margin-bottom: 24px !important;
  }

  .contact-page .social-links {
    padding-top: 30px !important;
  }

  .contact-page + .back-to-top {
    margin-top: 10px !important;
    margin-bottom: 26px !important;
    padding: 15px 22px !important;
  }

  .contact-page ~ footer {
    margin-top: 0 !important;
    padding-bottom: 24px !important;
  }
}


/* v135: Contact smiley + final mobile vertical balance */
.contact-smiley {
  color: var(--red);
  width: 52px;
  height: 38px;
  margin: 48px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-smiley svg {
  width: 52px;
  height: auto;
  display: block;
}
@media (max-width: 600px) {
  .contact-page .social-links {
    padding-bottom: 0 !important;
  }

  .contact-smiley {
    width: 56px;
    height: 40px;
    margin: 58px auto 14px;
  }

  .contact-smiley svg {
    width: 56px;
  }

  .contact-page + .back-to-top {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
  }

  .contact-page ~ footer {
    margin-top: 0 !important;
  }
}


/* v136: Contact LinkedIn spacing and scale */
@media (max-width: 600px) {
  .contact-page .social-links {
    padding-top: 40px !important;
  }

  .contact-page .linkedin-link {
    font-size: 18px !important;
    gap: 10px !important;
  }

  .contact-page .linkedin-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .contact-page .social-links > a > span:last-child {
    font-size: 18px !important;
  }

  .contact-smiley {
    margin-top: 62px !important;
    margin-bottom: 16px !important;
  }
}


/* v137: Make the mobile homepage carousel clearly visible */
@media (max-width: 600px) {
  .hero-video-carousel {
    opacity: .88 !important;
  }

  .hero-video-overlay {
    background:
      linear-gradient(90deg, rgba(7,7,7,.34), rgba(7,7,7,.12), rgba(7,7,7,.34)),
      linear-gradient(180deg, rgba(7,7,7,.20), rgba(7,7,7,.34)) !important;
  }
}


/* v143: JBL + Hollister paired project layout
   JBL stays on the left, Hollister on the right, matching the existing
   Juventus / Arsenal Stanley paired treatment. */
.paired-client-sections-third {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 42px;
  width: 100%;
  box-sizing: border-box;
}

.paired-client-sections-third .client-work-section {
  min-width: 0;
}

.paired-client-sections-third .client-video-row {
  width: 100%;
  gap: 12px;
}

/* Give JBL's two videos a little more room within its half. */
.paired-client-sections-third > .client-work-section:first-child .multi-video-card {
  min-width: 0;
}

.paired-client-sections-third > .client-work-section:first-child .client-video-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paired-client-sections-third > .client-work-section:first-child .multi-video-media {
  width: 100%;
}

/* Hollister's single video sits cleanly on the right, matching the
   single-video treatment used in the paired projects. */
.paired-client-sections-third > .client-work-section:last-child .client-video-row {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 600px) {
  .paired-client-sections-third {
    grid-template-columns: 1fr;
    gap: 52px;
    padding-top: 58px;
  }

  .paired-client-sections-third .client-video-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .paired-client-sections-third > .client-work-section:last-child .client-video-row {
    grid-template-columns: 1fr;
  }
}

/* v145: JBL + Hollister exact paired layout */
.jbl-hollister-pair {
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
  gap: 36px !important;
  align-items: start !important;
  padding-top: 72px !important;
}
.jbl-hollister-pair > .client-work-section {
  padding: 0 !important;
  min-width: 0 !important;
}
.jbl-hollister-pair > .client-work-section:first-child .client-video-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.jbl-hollister-pair > .client-work-section:last-child .client-video-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
.jbl-hollister-pair .multi-video-card,
.jbl-hollister-pair .multi-video-media,
.jbl-hollister-pair video {
  width: 100% !important;
  max-width: 100% !important;
}
.jbl-hollister-pair .multi-video-media {
  aspect-ratio: 9 / 14 !important;
}
@media (max-width: 800px) {
  .jbl-hollister-pair {
    grid-template-columns: 1fr !important;
    gap: 55px !important;
    padding-top: 58px !important;
  }
  .jbl-hollister-pair > .client-work-section:first-child .client-video-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .jbl-hollister-pair > .client-work-section:last-child .client-video-row {
    grid-template-columns: 1fr !important;
  }
}

/* v146: JBL + Hollister use the same project sizing as standard paired work */
.jbl-hollister-pair {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:36px !important;
  align-items:start !important;
  padding-top:72px !important;
}
.jbl-hollister-pair > .client-work-section {
  width:100% !important;
  min-width:0 !important;
  padding:0 !important;
}
.jbl-hollister-pair .client-work-header {
  width:100% !important;
}
.jbl-hollister-pair .client-video-row {
  width:100% !important;
}
.jbl-hollister-pair > .client-work-section:first-child .client-video-row {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
.jbl-hollister-pair > .client-work-section:last-child .client-video-row {
  display:grid !important;
  grid-template-columns:1fr !important;
}
.jbl-hollister-pair .multi-video-card,
.jbl-hollister-pair .multi-video-media,
.jbl-hollister-pair video {
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.jbl-hollister-pair .multi-video-media {
  aspect-ratio:9 / 14 !important;
}
@media (max-width:600px) {
  .jbl-hollister-pair {
    grid-template-columns:1fr !important;
    gap:52px !important;
    padding-top:58px !important;
  }
  .jbl-hollister-pair > .client-work-section:first-child .client-video-row {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .jbl-hollister-pair > .client-work-section:last-child .client-video-row {
    grid-template-columns:1fr !important;
  }
}

/* v147: clean JBL/Hollister pair. One wrapper only. */
.jbl-hollister-pair {
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 36px !important;
  align-items: start !important;
  padding: 72px 0 0 !important;
  margin: 0 !important;
}
.jbl-hollister-pair > .client-work-section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.jbl-hollister-pair > .client-work-section:first-child .client-video-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
}
.jbl-hollister-pair > .client-work-section:last-child .client-video-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: none !important;
}
.jbl-hollister-pair .multi-video-card,
.jbl-hollister-pair .multi-video-media,
.jbl-hollister-pair video {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .jbl-hollister-pair {
    grid-template-columns: 1fr !important;
    gap: 52px !important;
    padding: 58px 20px 0 !important;
  }
  .jbl-hollister-pair > .client-work-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* v148: Hollister video matches the size of one JBL video */
.jbl-hollister-pair > .client-work-section:last-child .client-video-row {
  width: calc((100% - 14px) / 2) !important;
  max-width: none !important;
  margin: 0 !important;
}
.jbl-hollister-pair > .client-work-section:last-child .multi-video-card {
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 600px) {
  .jbl-hollister-pair > .client-work-section:last-child .client-video-row {
    width: 100% !important;
  }
}

/* v149: give Hollister its own slight offset within the right column */
.jbl-hollister-pair > .client-work-section:last-child {
  padding-left: 28px !important;
}
@media (max-width: 600px) {
  .jbl-hollister-pair > .client-work-section:last-child {
    padding-left: 0 !important;
  }
}

/* v150: centre Hollister video beneath its title */
.jbl-hollister-pair > .client-work-section:last-child .client-work-header {
  width: calc((100% - 14px) / 2) !important;
}
.jbl-hollister-pair > .client-work-section:last-child .client-video-row {
  margin-left: 0 !important;
}
@media (max-width: 600px) {
  .jbl-hollister-pair > .client-work-section:last-child .client-work-header,
  .jbl-hollister-pair > .client-work-section:last-child .client-video-row {
    width: 100% !important;
  }
}


/* v159: featured projects use the exact same base system as Rise & Dine. */
.featured-paired-projects {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 20px !important;
  row-gap: 72px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 105px 32px 0 !important;
  box-sizing: border-box !important;
}

.featured-paired-projects > .client-work-section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* JBL: exactly two standard Rise & Dine cards on the left. */
.featured-paired-projects > .client-work-section:nth-child(1) {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
}
.featured-paired-projects > .client-work-section:nth-child(1) .client-video-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

/* Hollister and Juventus: one standard Rise & Dine card each. */
.featured-paired-projects > .client-work-section:nth-child(2) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  transform: translateX(-10px) translateY(-8px) !important;
}
.featured-paired-projects > .client-work-section:nth-child(3) {
  grid-column: 4 !important;
  grid-row: 1 !important;
}
.featured-paired-projects > .client-work-section:nth-child(2) .client-video-row,
.featured-paired-projects > .client-work-section:nth-child(3) .client-video-row {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

/* Stanley: its own row, three cards, retaining the v155-style compact row. */
.featured-paired-projects > .client-work-section:nth-child(4) {
  grid-column: 1 / span 3 !important;
  grid-row: 2 !important;
}
.featured-paired-projects > .client-work-section:nth-child(4) .client-video-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

/* Rise & Dine's base typography and header structure. */
.featured-paired-projects .client-work-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 40px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
}
.featured-paired-projects .client-work-header > div {
  display: block !important;
  min-width: 0 !important;
}
.featured-paired-projects .client-work-kicker {
  display: block !important;
  margin-bottom: 10px !important;
}
.featured-paired-projects .client-work-header h2 {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
.featured-paired-projects .client-work-tags {
  margin: 8px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,.46) !important;
  white-space: normal !important;
}
.featured-paired-projects .client-video-row {
  display: grid !important;
  padding-top: 22px !important;
}
.featured-paired-projects .multi-video-media {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  max-height: 620px !important;
}
.featured-paired-projects .portfolio-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 600px) {
  /* Same page margins and base section rhythm as Rise & Dine. */
  .featured-paired-projects {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 52px !important;
    padding: 58px 20px 0 !important;
    box-sizing: border-box !important;
  }

  .featured-paired-projects > .client-work-section {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    transform: none !important;
  }

  /* Use the exact same two-column video sizing as Rise & Dine. */
  .featured-paired-projects > .client-work-section:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .featured-paired-projects > .client-work-section:nth-child(1) .client-video-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Hollister + Juventus: one normal Rise & Dine card each. */
  .featured-paired-projects > .client-work-section:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .featured-paired-projects > .client-work-section:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .featured-paired-projects > .client-work-section:nth-child(2) .client-video-row,
  .featured-paired-projects > .client-work-section:nth-child(3) .client-video-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Stanley: three equal cards on one line, as requested previously. */
  .featured-paired-projects > .client-work-section:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
  .featured-paired-projects > .client-work-section:nth-child(4) .client-video-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Rise & Dine header structure: title, then the full tag line below it. */
  .featured-paired-projects .client-work-header {
    display: block !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
  }
  .featured-paired-projects .client-work-header > div {
    display: block !important;
    width: 100% !important;
  }
  .featured-paired-projects .client-work-kicker {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
  .featured-paired-projects .client-work-header h2 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }
  .featured-paired-projects .client-work-tags {
    display: block !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .featured-paired-projects .client-video-row {
    padding-top: 12px !important;
  }

  .featured-paired-projects .multi-video-media,
  .featured-paired-projects .portfolio-video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}

/* v160: match the featured project cards to the exact Rise & Dine card scale. */
.featured-paired-projects {
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 !important;
  padding-left: 32px !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.featured-paired-projects > .client-work-section:nth-child(2) {
  transform: none !important;
}

.featured-paired-projects .client-video-row {
  max-width: 1080px !important;
}

@media (max-width: 600px) {
  .featured-paired-projects {
    max-width: none !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* v161: final desktop alignment for the featured projects. */
@media (min-width: 601px) {
  /* Keep the three single-project headers/videos on the same top line as JBL,
     while using the available space on the right to separate the projects. */
  .featured-paired-projects > .client-work-section:nth-child(2) {
    transform: translate(24px, -30px) !important;
    width: calc(100% - 24px) !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(3) {
    transform: translate(40px, -30px) !important;
    width: calc(100% - 40px) !important;
  }

  /* Keep the featured vertical cards at the same 9:16 dimensions as Rise & Dine. */
  .featured-paired-projects > .client-work-section:nth-child(2) .multi-video-media,
  .featured-paired-projects > .client-work-section:nth-child(3) .multi-video-media {
    aspect-ratio: 9 / 16 !important;
    max-height: none !important;
  }

  /* Stanley gets a small size increase without changing its three-video layout. */
  .featured-paired-projects > .client-work-section:nth-child(4) {
    grid-column: 1 / span 3 !important;
    width: calc(100% + 18px) !important;
  }
  .featured-paired-projects > .client-work-section:nth-child(4) .client-video-row {
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  /* Mobile remains on the established Rise & Dine sizing/layout. */
  .featured-paired-projects > .client-work-section:nth-child(2),
  .featured-paired-projects > .client-work-section:nth-child(3) {
    transform: none !important;
    width: 100% !important;
  }
}

/* v162: restore full Rise & Dine card width for Hollister and Juventus.
   Horizontal separation is achieved with translation only, never by shrinking
   the project columns. */
@media (min-width: 601px) {
  .featured-paired-projects > .client-work-section:nth-child(2),
  .featured-paired-projects > .client-work-section:nth-child(3) {
    width: 100% !important;
    max-width: none !important;
    align-self: start !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(2) {
    transform: translateX(24px) translateY(-30px) !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(3) {
    transform: translateX(40px) translateY(-30px) !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(2) .client-video-row,
  .featured-paired-projects > .client-work-section:nth-child(3) .client-video-row,
  .featured-paired-projects > .client-work-section:nth-child(2) .multi-video-media,
  .featured-paired-projects > .client-work-section:nth-child(3) .multi-video-media {
    width: 100% !important;
  }
}

/* v163: align Hollister and Juventus with JBL on desktop.
   Keep their full Rise & Dine card dimensions and only use horizontal
   translation to separate the projects. */
@media (min-width: 601px) {
  .featured-paired-projects > .client-work-section:nth-child(2),
  .featured-paired-projects > .client-work-section:nth-child(3) {
    align-self: start !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(2) {
    transform: translateX(24px) !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(3) {
    transform: translateX(40px) !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(2) .multi-video-media,
  .featured-paired-projects > .client-work-section:nth-child(3) .multi-video-media {
    aspect-ratio: 9 / 16 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* v164: keep the featured project video tops on the same baseline as JBL/Rise & Dine.
   The wrapped desktop tag lines were pushing Hollister and Juventus down. */
@media (min-width: 601px) {
  .featured-paired-projects > .client-work-section:nth-child(2) .client-work-tags,
  .featured-paired-projects > .client-work-section:nth-child(3) .client-work-tags {
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(2) .client-video-row,
  .featured-paired-projects > .client-work-section:nth-child(3) .client-video-row {
    padding-top: 22px !important;
  }
}


/* v165: balance the three featured single-project columns on desktop.
   Keep JBL fixed, place Hollister midway between JBL video 02 and Juventus,
   and move Juventus further right while retaining the same card size. */
@media (min-width: 601px) {
  .featured-paired-projects > .client-work-section:nth-child(2) {
    transform: translateX(32px) !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(3) {
    transform: translateX(100px) !important;
  }
}

/* v169: mirror the JBL outer margin for Juventus and centre Hollister between them. */
@media (min-width: 601px) {
  .featured-paired-projects > .client-work-section:nth-child(2) {
    transform: translateX(54px) !important;
  }

  .featured-paired-projects > .client-work-section:nth-child(3) {
    transform: translateX(113px) !important;
  }
}

/* v170: mobile social-project sizing and tag alignment.
   Juventus uses the same card width as Hollister, and all work-project
   headers use the same compact title/tag line as Rise & Dine. */
@media (max-width: 600px) {
  /* Juventus is one normal Rise & Dine-sized card, matching Hollister exactly. */
  .featured-paired-projects > .client-work-section.juventus-project .multi-video-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .featured-paired-projects > .client-work-section.juventus-project .multi-video-row,
  .featured-paired-projects > .client-work-section.juventus-project .client-video-row {
    width: 100% !important;
  }

  /* Match Rise & Dine's mobile title/tag arrangement across all social work. */
  .work-page .client-work-section .client-work-header,
  .work-page .featured-paired-projects .client-work-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .work-page .client-work-section .client-work-header > div,
  .work-page .featured-paired-projects .client-work-header > div {
    display: contents !important;
  }

  .work-page .client-work-section .client-work-kicker,
  .work-page .featured-paired-projects .client-work-kicker {
    display: none !important;
  }

  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  .work-page .client-work-section .client-work-tags,
  .work-page .featured-paired-projects .client-work-tags {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 58% !important;
    margin: 2px 0 0 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: visible !important;
    color: rgba(255,255,255,.46) !important;
  }
}


/* v171: clean mobile project headers and Fashion filter ordering. */
@media (max-width: 600px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2 {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  .work-page .client-work-section .client-work-tags,
  .work-page .featured-paired-projects .client-work-tags {
    flex: 0 1 58% !important;
    max-width: 58% !important;
    font-size: 6px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: right !important;
    word-break: normal !important;
  }
}

/* Align all homepage impact-stat blocks to the same top baseline */
.impact-stat {
  align-items: flex-start;
  padding-top: 37px;
}

@media (max-width:750px) {
  .impact-stat {
    align-items: flex-start;
    padding-top: 18px;
  }
}

/* Final stats alignment: keep all three stat blocks anchored to the same top edge. */
.impact-stats {
  align-items: start;
}
.impact-stat {
  align-items: flex-start;
  padding-top: 34px;
}

@media (max-width:750px) {
  .impact-stats {
    align-items: start;
  }
  .impact-stat {
    align-items: flex-start;
    padding-top: 32px;
  }
}

/* v173: align the Clients stat with the first two stats */
.impact-stat:nth-child(3) > div {
  transform: translateY(-2px);
}

@media (max-width:750px) {
  .impact-stat:nth-child(3) > div {
    transform: translateY(-2px);
  }
}


/* by shredski filter */
.work-filter-shredski {
  position: relative !important;
  color: transparent !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  overflow: hidden !important;
  isolation: isolate;
  text-shadow: none !important;
  -webkit-text-fill-color: transparent !important;
}

/* Gradient outline */
.work-filter-shredski::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, #f8f3ef 0%, #9eedf2 24%, #9ab9ff 47%, #c7a8ff 62%, #f5c7e6 80%, #fff0c8 100%);
  background-size: 180% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  animation: shredski-border-shine 5s ease-in-out infinite;
}

/* Gradient text */
.work-filter-shredski::after {
  content: "by shredski";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(115deg, #f8f3ef 0%, #9eedf2 24%, #9ab9ff 47%, #c7a8ff 62%, #f5c7e6 80%, #fff0c8 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  z-index: 1;
  animation: shredski-text-shine 5s ease-in-out infinite;
}

/* Hover / selected: fill the button and switch the label to black */
.work-filter-shredski:hover,
.work-filter-shredski.is-active {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  background: linear-gradient(115deg, #f8f3ef 0%, #9eedf2 24%, #9ab9ff 47%, #c7a8ff 62%, #f5c7e6 80%, #fff0c8 100%) !important;
  background-size: 180% 100% !important;
  animation: shredski-fill-shine 5s ease-in-out infinite;
}

.work-filter-shredski:hover::before,
.work-filter-shredski.is-active::before {
  opacity: 0;
}

.work-filter-shredski:hover::after,
.work-filter-shredski.is-active::after {
  color: #050505;
  -webkit-text-fill-color: #050505;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  animation: none;
}

@keyframes shredski-border-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes shredski-text-shine {
  0%, 100% { background-position: 0% 50%; filter: brightness(1); }
  50% { background-position: 100% 50%; filter: brightness(1.18); }
}

@keyframes shredski-fill-shine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Keep Lyle & Scott out of Fashion regardless of filter state. */
body[data-active-filter="fashion"] [data-project="lyle-scott"] {
  display: none !important;
}

/* Keep the empty by shredski filter genuinely empty. */
body[data-active-filter="by-shredski"] .longform-feature,
body[data-active-filter="by-shredski"] .client-work-section,
body[data-active-filter="by-shredski"] .featured-paired-projects {
  display: none !important;
}


/* v178: unify project title scale and filter-to-project spacing.
   Every project title follows the Rise & Dine title size, regardless of filter. */
@media (min-width: 601px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2,
  .work-page .longform-feature-filterable .longform-feature-top h2 {
    font-size: 21px !important;
    line-height: 1.1 !important;
  }

  /* Filtered views use the same filter-to-Lyle spacing as All. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    padding-top: 80px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 600px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2,
  .work-page .longform-feature-filterable .longform-feature-top h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  /* Keep the filter-to-first-project gap identical to All. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Lyle & Scott is never part of Fashion, including filtered/JS states. */
body[data-active-filter="fashion"] .longform-feature-filterable[data-project="lyle-scott"],
body[data-active-filter="fashion"] [data-project="lyle-scott"] {
  display: none !important;
  visibility: hidden !important;
}

/* v179: filtered project spacing and Lyle & Scott exclusions */
@media (min-width: 601px) {
  /* Match the Lyle & Scott title size in filtered views to its All-filter size. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
    font-size:26px !important;
    line-height:1.1 !important;
  }

  /* Remove inherited project gaps on filtered views. The first visible group
     gets the same top spacing as the All filter's first project. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature,
  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section,
  body[data-active-filter]:not([data-active-filter="all"]) .featured-paired-projects,
  body[data-active-filter]:not([data-active-filter="all"]) .paired-client-sections {
    margin-top:0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section {
    padding-top:0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .featured-paired-projects,
  body[data-active-filter]:not([data-active-filter="all"]) .paired-client-sections {
    padding-top:0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    padding-top:0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
    padding-top:76px !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .is-filtered-empty {
    display:none !important;
  }
}

@media (max-width: 600px) {
  /* Same Lyle & Scott title size as the All filter on mobile. */
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
    font-size:24px !important;
    line-height:1.05 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature,
  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section,
  body[data-active-filter]:not([data-active-filter="all"]) .featured-paired-projects,
  body[data-active-filter]:not([data-active-filter="all"]) .paired-client-sections {
    margin-top:0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .client-work-section {
    padding-top:0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .featured-paired-projects,
  body[data-active-filter]:not([data-active-filter="all"]) .paired-client-sections,
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    padding-top:0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
    padding-top:65px !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .is-filtered-empty {
    display:none !important;
  }
}

/* Lyle & Scott is never shown in Fashion, Originals or by shredski. */
body[data-active-filter="fashion"] [data-project="lyle-scott"],
body[data-active-filter="originals"] [data-project="lyle-scott"],
body[data-active-filter="by-shredski"] [data-project="lyle-scott"] {
  display:none !important;
  visibility:hidden !important;
}


/* v180: match the filter-to-first-project gap to the All filter exactly.
   The JS marks the first visible project/group with .is-first-filtered-group. */
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
  margin-top: 0 !important;
  padding-top: 76px !important;
}

@media (max-width: 560px) {
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
    margin-top: 0 !important;
    padding-top: 65px !important;
  }
}

/* v181: filtered Lyle & Scott must use the exact same geometry as All.
   Do not resize, left-align, or otherwise compact the project when a filter is active. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
  width:82% !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:76px 0 0 !important;
  display:block !important;
  border:0 !important;
  box-sizing:border-box !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  flex-direction:row !important;
  gap:40px !important;
  padding-bottom:17px !important;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.13) !important;
  text-align:left !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top > div {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:left !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
  font-size:26px !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
  font-weight:600 !important;
  margin:0 !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-tags {
  margin:8px 0 0 !important;
  font-size:11px !important;
  line-height:1.4 !important;
  text-align:left !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
  width:100% !important;
  max-width:none !important;
  aspect-ratio:16/8.2 !important;
  height:auto !important;
  margin-top:18px !important;
  overflow:hidden !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media iframe {
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  display:block !important;
  border:0 !important;
}

@media (max-width:600px) {
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:65px 20px 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-top {
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:14px !important;
    padding-bottom:17px !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable h2 {
    font-size:24px !important;
    line-height:1.05 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-tags {
    font-size:11px !important;
    margin:8px 0 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable .longform-feature-media {
    margin-top:18px !important;
    aspect-ratio:16/8.2 !important;
  }
}

/* v182: make every visible Lyle & Scott filter state use the exact All-filter geometry.
   This override intentionally comes last so older filter-specific rules cannot resize it. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] {
  width:82% !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:76px 0 0 !important;
  box-sizing:border-box !important;
  display:block !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top {
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  flex-direction:row !important;
  gap:40px !important;
  padding-bottom:17px !important;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.13) !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] h2 {
  font-size:26px !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
  font-weight:600 !important;
  margin:0 !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] .longform-tags {
  margin:8px 0 0 !important;
  font-size:11px !important;
  line-height:1.4 !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-media {
  width:100% !important;
  max-width:none !important;
  margin-top:18px !important;
  aspect-ratio:16/8.2 !important;
  height:auto !important;
}

/* The All-filter distance from the filter controls to the first Lyle project is
   the reference. Do not add any additional first-group padding to Lyle. */
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"] {
  padding-top:76px !important;
  margin-top:0 !important;
}

/* Lyle & Scott is never shown in Fashion, Originals or by shredski. */
body[data-active-filter="fashion"] .longform-feature-filterable[data-project="lyle-scott"],
body[data-active-filter="originals"] .longform-feature-filterable[data-project="lyle-scott"],
body[data-active-filter="by-shredski"] .longform-feature-filterable[data-project="lyle-scott"] {
  display:none !important;
}

@media (max-width:600px) {
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:65px 20px 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top {
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:14px !important;
    padding-bottom:17px !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] h2 {
    font-size:24px !important;
    line-height:1.05 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"] {
    padding-top:65px !important;
  }
}

/* v183: final filter spacing correction.
   The All view gets its first-project spacing from .work-filters margin-bottom.
   Filtered views must not add another padding/margin on the first visible group. */
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group,
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable,
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.client-work-section,
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.featured-paired-projects,
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.paired-client-sections {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove the old filtered Lyle top padding. The filter bar's margin-bottom is
   the only spacing between the buttons and the first project, matching All. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep filtered Lyle typography identical to the All view. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] h2 {
  font-size: 26px !important;
  line-height: 1.1 !important;
}

@media (max-width: 600px) {
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] h2 {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }
}


/* v184: definitive filter layout reset.
   Filtered views must use the same distance from the filter controls to the
   first project as the All view. Hidden projects must also be removed from
   layout completely, including legacy filter rules above. */
body[data-active-filter]:not([data-active-filter="all"]) .longform-feature.is-filtered-out,
body[data-active-filter]:not([data-active-filter="all"]) .client-work-section.is-filtered-out {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .featured-paired-projects.is-filtered-empty,
body[data-active-filter]:not([data-active-filter="all"]) .paired-client-sections.is-filtered-empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Desktop: All's first project is the longform feature, which has 76px of
   internal top spacing. Give the first filtered project the same 76px. */
@media (min-width: 801px) {
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
    margin-top: 0 !important;
    padding-top: 76px !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable {
    padding-top: 76px !important;
  }
}

/* Mobile: All's first longform project has no extra top padding, so the
   filtered first project starts at the same point after the filter bar. */
@media (max-width: 800px) {
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.client-work-section,
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable,
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.featured-paired-projects,
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.paired-client-sections {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* v185: filtered views inherit the exact measured All-filter distance from
   the filter controls to the first visible project. This removes the guesswork
   from fixed padding values and keeps desktop/mobile aligned with All. */
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
  margin-top: 0 !important;
  padding-top: var(--filter-reference-gap, 0px) !important;
}

@media (max-width: 600px) {
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
    margin-top: 0 !important;
    padding-top: var(--filter-reference-gap, 0px) !important;
  }
}

/* v185b: the featured Lyle block has older, more-specific padding rules.
   Override those only when it is the first filtered project. */
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"] {
  padding-top: var(--filter-reference-gap, 0px) !important;
  margin-top: 0 !important;
}


/* v186: final fix for filter-to-project spacing.
   The measured All gap includes the first project's own top padding.
   Applying that total as padding doubled the spacing. Filtered projects now
   use the same normal first-project padding as the All view. */
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group {
  margin-top: 0 !important;
  padding-top: 80px !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"] {
  margin-top: 0 !important;
  padding-top: 80px !important;
}

@media (max-width: 800px) {
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group,
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"] {
    margin-top: 0 !important;
    padding-top: 80px !important;
  }
}

@media (max-width: 600px) {
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group,
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"] {
    margin-top: 0 !important;
    padding-top: 52px !important;
  }
}


/* v187: definitive filter spacing. Filtered projects must sit at the same
   distance below the filter bar as the All view. Do not add project padding
   on top of the filter bar's existing bottom margin. */
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group,
body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep the first filtered project from inheriting the old All-only feature
   padding. The filter bar's margin-bottom is the sole gap before it. */
body[data-active-filter]:not([data-active-filter="all"]) .work-filters + .longform-feature-filterable,
body[data-active-filter]:not([data-active-filter="all"]) .work-filters + .client-work-section,
body[data-active-filter]:not([data-active-filter="all"]) .work-filters + .featured-paired-projects {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 600px) {
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group,
  body[data-active-filter]:not([data-active-filter="all"]) .is-first-filtered-group.longform-feature-filterable[data-project="lyle-scott"],
  body[data-active-filter]:not([data-active-filter="all"]) .longform-feature-filterable[data-project="lyle-scott"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* v188: keep every Work project title at the exact Rise & Dine scale in
   All and every filtered view. Older filter-specific rules must not enlarge
   Lyle & Scott or any other project title. */
.work-page .client-work-section .client-work-header h2,
.work-page .featured-paired-projects .client-work-header h2,
.work-page .longform-feature-filterable .longform-feature-top h2 {
  font-size: 21px !important;
  line-height: 1.1 !important;
}

@media (max-width: 600px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2,
  .work-page .longform-feature-filterable .longform-feature-top h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

/* v189: final project-title and video-caption spacing refinement.
   Lyle & Scott titles stay deliberately smaller, matching the compact
   project-title treatment used throughout the Work filters. Captions sit
   a little further below each video without changing top-of-page spacing. */
.work-page .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top h2 {
  font-size: 18px !important;
  line-height: 1.08 !important;
}

.work-page .multi-video-caption {
  padding-top: 18px !important;
}

@media (max-width: 600px) {
  .work-page .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top h2 {
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  .work-page .multi-video-caption {
    padding-top: 18px !important;
  }
}

/* v190: final targeted Lyle & Scott title size */
.lyle-scott-title {
  font-size: 18px !important;
  line-height: 1.05 !important;
}
@media (max-width: 600px) {
  .lyle-scott-title {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }
}

/* v191: lock every Work project title to the Rise & Dine reference size.
   This is intentionally the final rule so older filter-specific rules cannot
   enlarge individual projects. */
@media (min-width: 601px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2,
  .work-page .longform-feature-filterable .longform-feature-top h2,
  .work-page .longform-feature h2 {
    font-size: 21px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 600px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2,
  .work-page .longform-feature-filterable .longform-feature-top h2,
  .work-page .longform-feature h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

/* v192: final title-size lock.
   Rise & Dine is the reference: 30px on desktop and 18px on mobile.
   Apply the same size to every Work project title, including filtered Lyle & Scott. */
@media (min-width: 601px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2,
  .work-page .longform-feature-filterable .longform-feature-top h2,
  .work-page .longform-feature .longform-feature-top h2 {
    font-size: 30px !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 600px) {
  .work-page .client-work-section .client-work-header h2,
  .work-page .featured-paired-projects .client-work-header h2,
  .work-page .longform-feature-filterable .longform-feature-top h2,
  .work-page .longform-feature .longform-feature-top h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 600 !important;
  }
}

/* v193: Lyle & Scott title on the All filter matches its Branded title size. */
body.work-page[data-active-filter="all"] .longform-feature-filterable .longform-feature-top h2 {
  font-size: 30px !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  font-weight: 600 !important;
}
@media (max-width: 600px) {
  body.work-page[data-active-filter="all"] .longform-feature-filterable .longform-feature-top h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

/* v194: Lyle & Scott title must match the larger reference shown on the
   Branded view. The All-filter title was still being reduced by an older
   project-specific rule. */
.work-page .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top h2,
.work-page .longform-feature-filterable[data-project="lyle-scott"] h2 {
  font-size: 38px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 600 !important;
}

@media (max-width: 600px) {
  .work-page .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top h2,
  .work-page .longform-feature-filterable[data-project="lyle-scott"] h2 {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }
}

/* v195: final Lyle & Scott title size */
.work-page .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top h2,
.work-page .longform-feature-filterable[data-project="lyle-scott"] h2 {
  font-size: 30px !important;
  line-height: 1.1 !important;
}

@media (max-width: 600px) {
  .work-page .longform-feature-filterable[data-project="lyle-scott"] .longform-feature-top h2,
  .work-page .longform-feature-filterable[data-project="lyle-scott"] h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

/* v196: Branded and Sports project titles match the reference title scale */
body[data-active-filter="branded"] .work-page .client-work-section .client-work-header h2,
body[data-active-filter="branded"] .work-page .featured-paired-projects .client-work-header h2,
body[data-active-filter="branded"] .work-page .longform-feature-filterable .longform-feature-top h2,
body[data-active-filter="sports"] .work-page .client-work-section .client-work-header h2,
body[data-active-filter="sports"] .work-page .featured-paired-projects .client-work-header h2,
body[data-active-filter="sports"] .work-page .longform-feature-filterable .longform-feature-top h2 {
  font-size: 30px !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  font-weight: 600 !important;
}

@media (max-width: 600px) {
  body[data-active-filter="branded"] .work-page .client-work-section .client-work-header h2,
  body[data-active-filter="branded"] .work-page .featured-paired-projects .client-work-header h2,
  body[data-active-filter="branded"] .work-page .longform-feature-filterable .longform-feature-top h2,
  body[data-active-filter="sports"] .work-page .client-work-section .client-work-header h2,
  body[data-active-filter="sports"] .work-page .featured-paired-projects .client-work-header h2,
  body[data-active-filter="sports"] .work-page .longform-feature-filterable .longform-feature-top h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

/* v197: Fashion filter ordering and alignment.
   Tesoro appears first, with Hollister directly beneath it and aligned to the
   same left edge. This only applies while Fashion is active. */
body[data-active-filter="fashion"] .featured-paired-projects.fashion-filter-layout {
  display: block !important;
  width: 82% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body[data-active-filter="fashion"] .featured-paired-projects.fashion-filter-layout
.client-work-section[data-project="hollister"] {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 600px) {
  body[data-active-filter="fashion"] .featured-paired-projects.fashion-filter-layout {
    width: 100% !important;
  }
}

/* v198: Fashion filter order/alignment */
body[data-active-filter="fashion"] .featured-paired-projects.fashion-filter-layout {
  display: none !important;
}
body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="tesoro-globe"],
body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="hollister"] {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* v199: Filtered project cards do not show the small category/kicker label.
   The All view keeps the existing labels. */
body[data-active-filter]:not([data-active-filter="all"]) .work-page .client-work-kicker,
body[data-active-filter]:not([data-active-filter="all"]) .work-page .featured-paired-projects .client-work-kicker {
  display: none !important;
}

/* v199: Give every video row proper breathing room underneath the videos.
   This affects the space below the row only, not the filter/header spacing. */
.work-page .client-video-row {
  padding-bottom: 42px !important;
}

@media (max-width: 600px) {
  .work-page .client-video-row {
    padding-bottom: 36px !important;
  }
}

/* v200: Consistent breathing room underneath every Work video.
   The reference spacing is 72px after the video's caption/media before the
   next project begins. */
.work-page .client-work-section {
  padding-bottom: 72px !important;
}

.work-page .longform-feature {
  padding-bottom: 72px !important;
}

/* Lyle & Scott has no separate video caption, so the spacing starts directly
   after its media block. */
.work-page .longform-feature .longform-feature-media {
  margin-bottom: 0 !important;
}

@media (max-width: 600px) {
  .work-page .client-work-section {
    padding-bottom: 56px !important;
  }

  .work-page .longform-feature {
    padding-bottom: 56px !important;
  }
}

/* v201: tighter, consistent breathing room beneath every Work project */
.work-page .client-work-section,
.work-page .longform-feature {
  padding-bottom: 32px !important;
}

@media (max-width: 600px) {
  .work-page .client-work-section,
  .work-page .longform-feature {
    padding-bottom: 24px !important;
  }
}

/* v202: exact Work-page video breathing room from the supplied full-screen
   reference. Target is approximately 70px from the bottom of each video
   caption/media to the next project content. Apply consistently everywhere. */
.work-page .client-video-row {
  padding-bottom: 40px !important;
}

.work-page .client-work-section {
  padding-bottom: 30px !important;
}

.work-page .longform-feature {
  padding-bottom: 70px !important;
}

@media (max-width: 600px) {
  .work-page .client-video-row {
    padding-bottom: 40px !important;
  }

  .work-page .client-work-section {
    padding-bottom: 30px !important;
  }

  .work-page .longform-feature {
    padding-bottom: 70px !important;
  }
}

/* v203: match the supplied reference exactly.
   The previous rules stacked row padding + section padding + the next
   section's top padding, creating the oversized gap. Remove those stacked
   values and use one single 70px project-to-project gap. */
.work-page .client-video-row {
  padding-bottom: 0 !important;
}

.work-page .client-work-section {
  padding-bottom: 0 !important;
}

/* Standard Work projects: one clean gap between the previous video's
   caption and the next project's kicker/title. */
.work-page > .client-work-section {
  padding-top: 70px !important;
}

.work-page > .client-work-section:first-of-type {
  padding-top: 0 !important;
}

/* Lyle & Scott uses the same single gap before the next project. */
.work-page .longform-feature {
  padding-bottom: 0 !important;
}

.work-page .longform-feature + .client-work-section {
  padding-top: 70px !important;
}

/* Project groups use the same spacing between their project blocks. */
.work-page .paired-client-sections,
.work-page .featured-paired-projects {
  row-gap: 70px !important;
}

@media (max-width: 600px) {
  .work-page > .client-work-section,
  .work-page .longform-feature + .client-work-section {
    padding-top: 56px !important;
  }

  .work-page .paired-client-sections,
  .work-page .featured-paired-projects {
    row-gap: 56px !important;
  }
}

/* v204: remove the small category/kicker label above every Work project title.
   Keep the descriptive platform tags beneath the title unchanged. */
.work-page .client-work-kicker,
.work-page .longform-kicker,
.work-page .project-kicker {
  display: none !important;
}

/* v205: match Lyle & Scott's bottom breathing room to the other Work projects.
   The paired-project wrapper follows the Lyle feature, so target the feature
   itself rather than relying on a direct-sibling selector. */
.work-page .longform-feature-filterable[data-project="lyle-scott"] {
  margin-bottom: 70px !important;
  padding-bottom: 0 !important;
}

@media (max-width: 600px) {
  .work-page .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 56px !important;
  }
}


/* v206: consistent breathing room beneath the requested Work projects */
.work-page .longform-feature-filterable[data-project="lyle-scott"] {
  margin-bottom: 70px !important;
}

.work-page body[data-active-filter="fashion"] .client-work-section[data-project="hollister"],
body[data-active-filter="fashion"] .work-page .client-work-section[data-project="hollister"],
.work-page[data-active-filter="fashion"] .client-work-section[data-project="hollister"] {
  margin-bottom: 70px !important;
}

@media (max-width: 600px) {
  .work-page .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 56px !important;
  }

  .work-page body[data-active-filter="fashion"] .client-work-section[data-project="hollister"],
  body[data-active-filter="fashion"] .work-page .client-work-section[data-project="hollister"],
  .work-page[data-active-filter="fashion"] .client-work-section[data-project="hollister"] {
    margin-bottom: 56px !important;
  }
}


/* v207: definitive bottom spacing for Lyle & Scott and Fashion Hollister.
   The filtered featured wrapper has legacy rules that zero its top padding,
   so the gap is applied to the actual next visible project group. */
@media (min-width: 601px) {
  /* Branded/Sports: 70px from the bottom of Lyle & Scott to JBL/Hollister/Juventus. */
  body[data-active-filter="branded"] main.work-page > .featured-paired-projects,
  body[data-active-filter="sports"] main.work-page > .featured-paired-projects {
    margin-top: 70px !important;
    padding-top: 0 !important;
  }

  /* Fashion: 70px after Hollister's video/project block. */
  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="hollister"] {
    margin-bottom: 0 !important;
    padding-bottom: 70px !important;
  }
}

@media (max-width: 600px) {
  /* Branded/Sports: 56px from the bottom of Lyle & Scott to the next project group. */
  body[data-active-filter="branded"] main.work-page > .featured-paired-projects,
  body[data-active-filter="sports"] main.work-page > .featured-paired-projects {
    margin-top: 56px !important;
    padding-top: 0 !important;
  }

  /* Fashion: 56px after Hollister's video/project block. */
  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="hollister"] {
    margin-bottom: 0 !important;
    padding-bottom: 56px !important;
  }
}


/* v208: correct the project-to-project spacing on filtered views */
@media (min-width: 601px) {
  /* Fashion: Tesoro is first, so the requested gap belongs below Tesoro.
     Hollister returns to its normal spacing. */
  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="tesoro-globe"] {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }

  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="hollister"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Originals: give every Originals project the same 70px breathing room
     below its video row before the next project. */
  body[data-active-filter="originals"] main.work-page > .client-work-section[data-categories~="originals"] {
    margin-bottom: 70px !important;
  }
}

@media (max-width: 600px) {
  /* Fashion: gap below Tesoro only. */
  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="tesoro-globe"] {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }

  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="hollister"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Originals: same 56px breathing room below every Originals project. */
  body[data-active-filter="originals"] main.work-page > .client-work-section[data-categories~="originals"] {
    margin-bottom: 56px !important;
  }
}


/* v209 FIX: All filter Lyle & Scott bottom spacing
   Apply the breathing room as padding on the actual Lyle & Scott section
   so it cannot collapse against the following paired project group. */
@media (min-width: 601px) {
  body[data-active-filter="all"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 0 !important;
    padding-bottom: 70px !important;
  }
}

@media (max-width: 600px) {
  body[data-active-filter="all"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 0 !important;
    padding-bottom: 56px !important;
  }
}

/* v210: All filter Lyle & Scott spacing must match the filtered reference.
   The 70px bottom space belongs to Lyle itself. Do not add another 70px
   from the following client section, or the visible gap doubles. */
@media (min-width: 601px) {
  body[data-active-filter="all"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] + .client-work-section {
    padding-top: 0 !important;
  }
}

@media (max-width: 600px) {
  body[data-active-filter="all"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] + .client-work-section {
    padding-top: 0 !important;
  }
}


/* v214: Rise & Dine to JBL uses the same project spacing as the rest of the
   Work page.  Keep the existing project order and only correct this gap. */
@media (min-width: 601px) {
  body[data-active-filter="all"] main.work-page > .featured-paired-projects {
    padding-top: 70px !important;
  }
}

@media (max-width: 600px) {
  body[data-active-filter="all"] main.work-page > .featured-paired-projects {
    padding-top: 56px !important;
  }
}


/* v221: preserve each video's native frame without changing page spacing/layout */
.multi-video-media {
  overflow: hidden;
}
.multi-video-media .portfolio-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* v222: final Work-page video breathing room
   70px desktop / 56px mobile below each project's video row/media.
   This is the only spacing change in this version. */

@media (min-width: 601px) {
  /* Standard top-level projects: the gap belongs after the video's caption. */
  .work-page > .client-work-section {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }

  /* Lyle & Scott: 70px from the bottom of its feature video to the next project. */
  .work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }

  /* Rise & Dine -> featured project group: use the same 70px gap. */
  .work-page > .featured-paired-projects {
    padding-top: 0 !important;
    row-gap: 70px !important;
  }

  .work-page > .client-work-section[data-categories~="originals"] {
    margin-bottom: 70px !important;
  }

  /* Filtered first-project spacing comes from the filter bar, not this rule. */
  body[data-active-filter="branded"] main.work-page > .featured-paired-projects,
  body[data-active-filter="sports"] main.work-page > .featured-paired-projects {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="tesoro-globe"] {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }

  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="hollister"] {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 600px) {
  /* Standard top-level projects: 56px below the video's caption. */
  .work-page > .client-work-section {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }

  /* Lyle & Scott: 56px from the bottom of its feature video to the next project. */
  .work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }

  /* Rise & Dine -> featured project group: same 56px gap. */
  .work-page > .featured-paired-projects {
    padding-top: 0 !important;
    row-gap: 56px !important;
  }

  .work-page > .client-work-section[data-categories~="originals"] {
    margin-bottom: 56px !important;
  }

  body[data-active-filter="branded"] main.work-page > .featured-paired-projects,
  body[data-active-filter="sports"] main.work-page > .featured-paired-projects {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="tesoro-globe"] {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }

  body[data-active-filter="fashion"] main.work-page > .client-work-section[data-project="hollister"] {
    margin-bottom: 0 !important;
  }
}

/* v223: definitive Work-page project spacing.
   One, and only one, bottom gap per visible project block.
   Desktop: 70px. Mobile: 56px. Remove wrapper/row spacing that can stack
   with the project margin and create larger or smaller gaps. */
@media (min-width: 601px) {
  .work-page .client-work-section,
  .work-page .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }

  .work-page .featured-paired-projects,
  .work-page .paired-client-sections {
    row-gap: 0 !important;
    padding-top: 0 !important;
  }

  /* Never add a second gap from the wrapper itself. */
  .work-page .featured-paired-projects,
  .work-page .paired-client-sections {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Filtered first-project positioning is controlled separately and must not
     inherit the project-to-project bottom spacing as a top gap. */
  .work-page .work-filters + .longform-feature,
  .work-page .work-filters + .client-work-section,
  .work-page .work-filters + .featured-paired-projects,
  .work-page .work-filters + .paired-client-sections {
    margin-top: 0 !important;
  }
}

@media (max-width: 600px) {
  .work-page .client-work-section,
  .work-page .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }

  .work-page .featured-paired-projects,
  .work-page .paired-client-sections {
    row-gap: 0 !important;
    padding-top: 0 !important;
  }

  .work-page .featured-paired-projects,
  .work-page .paired-client-sections {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .work-page .work-filters + .longform-feature,
  .work-page .work-filters + .client-work-section,
  .work-page .work-filters + .featured-paired-projects,
  .work-page .work-filters + .paired-client-sections {
    margin-top: 0 !important;
  }
}

/* v224: exact project-to-project breathing room, no stacked spacing.
   Every visible Work project block has exactly 70px below it on desktop
   and 56px on mobile. Wrapper padding/gaps are zero so nothing doubles. */
@media (min-width: 601px) {
  /* Reset legacy vertical spacing that can stack with the project gap. */
  .work-page > .longform-feature-filterable[data-project="lyle-scott"],
  .work-page > .client-work-section,
  .work-page .featured-paired-projects > .client-work-section,
  .work-page .paired-client-sections > .client-work-section,
  .work-page .paired-client-sections-second > .client-work-section,
  .work-page .paired-client-sections-third > .client-work-section,
  .work-page .jbl-hollister-pair > .client-work-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .work-page > .featured-paired-projects,
  .work-page > .paired-client-sections,
  .work-page > .paired-client-sections-second,
  .work-page > .paired-client-sections-third,
  .work-page > .jbl-hollister-pair {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    row-gap: 0 !important;
  }

  /* One gap after every actual project block. */
  .work-page > .longform-feature-filterable[data-project="lyle-scott"],
  .work-page > .client-work-section,
  .work-page .featured-paired-projects > .client-work-section,
  .work-page .paired-client-sections > .client-work-section,
  .work-page .paired-client-sections-second > .client-work-section,
  .work-page .paired-client-sections-third > .client-work-section,
  .work-page .jbl-hollister-pair > .client-work-section {
    margin-bottom: 70px !important;
  }

  /* The gap after Rise & Dine is supplied by Rise & Dine itself, not the
     following featured wrapper. */
  .work-page > .featured-paired-projects {
    padding-top: 0 !important;
  }

  /* No extra top spacing when Branded/Sports begins with Lyle & Scott. */
  body[data-active-filter="branded"] main.work-page > .featured-paired-projects,
  body[data-active-filter="sports"] main.work-page > .featured-paired-projects {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* All-filter Lyle uses its own 70px bottom margin only. */
  body[data-active-filter="all"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 600px) {
  .work-page > .longform-feature-filterable[data-project="lyle-scott"],
  .work-page > .client-work-section,
  .work-page .featured-paired-projects > .client-work-section,
  .work-page .paired-client-sections > .client-work-section,
  .work-page .paired-client-sections-second > .client-work-section,
  .work-page .paired-client-sections-third > .client-work-section,
  .work-page .jbl-hollister-pair > .client-work-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 56px !important;
  }

  .work-page > .featured-paired-projects,
  .work-page > .paired-client-sections,
  .work-page > .paired-client-sections-second,
  .work-page > .paired-client-sections-third,
  .work-page > .jbl-hollister-pair {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    row-gap: 0 !important;
  }

  .work-page > .featured-paired-projects {
    padding-top: 0 !important;
  }

  body[data-active-filter="branded"] main.work-page > .featured-paired-projects,
  body[data-active-filter="sports"] main.work-page > .featured-paired-projects {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-active-filter="all"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }
}

/* v225: All-filter Rise & Dine -> next project spacing only.
   The All view needs the slightly tighter desktop gap used elsewhere.
   Mobile remains 56px. No other spacing is changed. */
@media (min-width: 601px) {
  body[data-active-filter="all"] main.work-page > .client-work-section[data-categories="originals"] {
    margin-bottom: 56px !important;
  }
}


/* v226: Lyle & Scott -> next project spacing on Branded/Sports.
   Desktop: 70px. Mobile: 56px. No other spacing changes. */
@media (min-width: 601px) {
  body[data-active-filter="branded"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"],
  body[data-active-filter="sports"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 600px) {
  body[data-active-filter="branded"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"],
  body[data-active-filter="sports"] main.work-page > .longform-feature-filterable[data-project="lyle-scott"] {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }
}

/* v227: final project gap consistency.
   Rise & Dine -> JBL on All uses the same 70px desktop / 56px mobile gap
   as every other project. No wrapper gap is added. */
@media (min-width: 601px) {
  body[data-active-filter="all"] main.work-page > .client-work-section[data-categories="originals"] {
    margin-bottom: 70px !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 600px) {
  body[data-active-filter="all"] main.work-page > .client-work-section[data-categories="originals"] {
    margin-bottom: 56px !important;
    padding-bottom: 0 !important;
  }
}

/* v229: tighten All-filter Rise & Dine -> featured group to match the reference.
   Do not alter other project spacing. */
@media (min-width: 601px) {
  body[data-active-filter="all"] main.work-page > .client-work-section[data-categories="originals"] {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 600px) {
  body[data-active-filter="all"] main.work-page > .client-work-section[data-categories="originals"] {
    margin-bottom: 0 !important;
  }
}

/* v230: EA Sports x EFL uses the same native 9:16 card frame as the other Work videos.
   The previous 9:14 container plus contain created visible side margins inside each card. */
.client-work-section[data-project="ea-efl"] .client-video-row {
  width: 100% !important;
  max-width: 1080px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.client-work-section[data-project="ea-efl"] .multi-video-media {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  max-height: none !important;
}

.client-work-section[data-project="ea-efl"] .portfolio-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* v231: Rise & Dine uses its native 9:16 frame, matching the EA/EFL cards.
   Prevent the 9:14 container from creating side margins around the 9:16 video. */
.client-work-section[data-categories="originals"] .multi-video-media {
  aspect-ratio: 9 / 16 !important;
  max-height: none !important;
}
.client-work-section[data-categories="originals"] .multi-video-media .portfolio-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}


/* v233 homepage side navigation */
.home-side-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 125px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1100;
  border-right: 1px solid rgba(255,255,255,.12);
  background: rgba(5,5,5,.10);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.home-side-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  color: rgba(244,242,238,.58);
  text-decoration: none;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  line-height: 1.25;
  overflow: hidden;
  transition: color .22s ease;
}

.home-side-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,59,59,.30) 0%, rgba(255,59,59,.13) 45%, rgba(0,255,185,0) 100%);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .22s ease, transform .22s ease;
}

.home-side-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff3b3b;
  opacity: 0;
  transition: opacity .22s ease;
}

.home-side-link span {
  position: relative;
  z-index: 1;
}

.home-side-link:hover,
.home-side-link:focus-visible,
.home-side-link.is-active {
  color: #fff;
}

.home-side-link.is-active::before,
.home-side-link.is-active::after {
  opacity: 1;
}

.home-side-link.is-active::before {
  transform: translateX(0);
}

@media (max-width: 760px) {
  .home-side-nav {
    display: none;
  }
}

/* v233: homepage uses the fixed section rail instead of the Home hover dropdown */
body#top .site-nav .nav-dropdown {
  display: none !important;
}

/* v234 homepage side navigation hover state */
body#top .home-side-link:hover::before,
body#top .home-side-link:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}
body#top .home-side-link:hover::after,
body#top .home-side-link:focus-visible::after {
  opacity: 1;
}

/* v235: side navigation adapts to the white Approach section */
.home-side-nav .home-side-link {
  transition: color .35s ease;
}

.home-side-nav.on-light-section .home-side-link {
  color: rgba(9,9,9,.58);
}

.home-side-nav.on-light-section .home-side-link:hover,
.home-side-nav.on-light-section .home-side-link:focus-visible,
.home-side-nav.on-light-section .home-side-link.is-active {
  color: #090909;
}

.home-side-nav.on-light-section .home-side-link::after {
  background: #ff3b3b;
}

.home-side-nav.on-light-section .home-side-link::before {
  background: linear-gradient(90deg, rgba(255,59,59,.30) 0%, rgba(255,59,59,.13) 45%, rgba(255,59,59,0) 100%);
}

/* v236: homepage section scroll progress */
.home-side-scroll-track {
  position: absolute;
  right: -9px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: rgba(255,255,255,.16);
  pointer-events: none;
  overflow: hidden;
}

.home-side-scroll-progress {
  display: block;
  width: 100%;
  height: 0%;
  background: #ff3b3b;
  transition: height .12s linear;
}

.home-side-nav.on-light-section .home-side-scroll-track {
  background: rgba(9,9,9,.14);
}

.home-side-nav.on-light-section .home-side-scroll-progress {
  background: #ff3b3b;
}

/* v237: reliable light-section navigation colours */
body#top .home-side-nav.on-light-section .home-side-link,
body#top .home-side-nav.on-light-section .home-side-link span {
  color: rgba(9,9,9,.58) !important;
}

body#top .home-side-nav.on-light-section .home-side-link:hover,
body#top .home-side-nav.on-light-section .home-side-link:focus-visible,
body#top .home-side-nav.on-light-section .home-side-link.is-active,
body#top .home-side-nav.on-light-section .home-side-link:hover span,
body#top .home-side-nav.on-light-section .home-side-link:focus-visible span,
body#top .home-side-nav.on-light-section .home-side-link.is-active span {
  color: #090909 !important;
}

body#top .home-side-nav.on-light-section .home-side-scroll-track {
  background: rgba(9,9,9,.14);
}

body#top .home-side-nav.on-light-section .home-side-scroll-progress {
  background: #ff3b3b;
}

/* v238: the menu/page divider is the scroll-progress line */
.home-side-nav {
  --scroll-progress: 0%;
  border-right: 0 !important;
}

.home-side-nav::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: rgba(255,255,255,.16);
  pointer-events: none;
}

.home-side-nav::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: var(--scroll-progress);
  background: #ff3b3b;
  pointer-events: none;
  transition: height .12s linear;
}

.home-side-nav.on-light-section::before {
  background: rgba(9,9,9,.14);
}

.home-side-nav.on-light-section::after {
  background: #ff3b3b;
}

/* The old separate progress line is no longer used. */
.home-side-scroll-track {
  display: none !important;
}

/* v239: full-height divider and reliable white-section colours */
body#top .home-side-nav {
  position: fixed !important;
  z-index: 1100 !important;
  --scroll-progress: 0%;
  border-right: 0 !important;
}

body#top .home-side-nav::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  height: 100% !important;
  background: rgba(255,255,255,.28) !important;
  opacity: 1 !important;
  z-index: 1200 !important;
  pointer-events: none !important;
}

body#top .home-side-nav::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: -1px !important;
  width: 2px !important;
  height: var(--scroll-progress) !important;
  background: #ff3b3b !important;
  opacity: 1 !important;
  z-index: 1201 !important;
  pointer-events: none !important;
  transition: height .1s linear !important;
}

body#top .home-side-nav.on-light-section::before {
  background: rgba(9,9,9,.22) !important;
}

body#top .home-side-nav .home-side-link {
  transition: color .35s ease !important;
}

body#top .home-side-nav.on-light-section .home-side-link,
body#top .home-side-nav.on-light-section .home-side-link span {
  color: #090909 !important;
}

body#top .home-side-nav.on-light-section .home-side-link:hover,
body#top .home-side-nav.on-light-section .home-side-link:focus-visible,
body#top .home-side-nav.on-light-section .home-side-link.is-active,
body#top .home-side-nav.on-light-section .home-side-link:hover span,
body#top .home-side-nav.on-light-section .home-side-link:focus-visible span,
body#top .home-side-nav.on-light-section .home-side-link.is-active span {
  color: #090909 !important;
}

body#top .home-side-nav:not(.on-light-section) .home-side-link,
body#top .home-side-nav:not(.on-light-section) .home-side-link span {
  color: rgba(244,242,238,.58);
}

body#top .home-side-nav:not(.on-light-section) .home-side-link:hover,
body#top .home-side-nav:not(.on-light-section) .home-side-link:focus-visible,
body#top .home-side-nav:not(.on-light-section) .home-side-link.is-active,
body#top .home-side-nav:not(.on-light-section) .home-side-link:hover span,
body#top .home-side-nav:not(.on-light-section) .home-side-link:focus-visible span,
body#top .home-side-nav:not(.on-light-section) .home-side-link.is-active span {
  color: #fff;
}

/* v240: explicit full-height menu/page divider */
body#top .home-side-nav {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 125px !important;
  z-index: 99999 !important;
  border-right: 0 !important;
  overflow: visible !important;
}

body#top .home-side-divider {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  display: block !important;
  background: rgba(255,255,255,.28) !important;
  z-index: 999999 !important;
  pointer-events: none !important;
}

body#top .home-side-divider-progress {
  position: absolute !important;
  top: 0 !important;
  left: -1px !important;
  width: 2px !important;
  height: 0 !important;
  display: block !important;
  background: #ed1c24 !important;
}

body#top .home-side-nav.on-light-section .home-side-divider {
  background: rgba(9,9,9,.25) !important;
}

body#top .home-side-nav.on-light-section .home-side-link,
body#top .home-side-nav.on-light-section .home-side-link span {
  color: #090909 !important;
}

body#top .home-side-nav:not(.on-light-section) .home-side-link,
body#top .home-side-nav:not(.on-light-section) .home-side-link span {
  color: rgba(244,242,238,.65) !important;
}

body#top .home-side-nav:not(.on-light-section) .home-side-link.is-active,
body#top .home-side-nav:not(.on-light-section) .home-side-link.is-active span,
body#top .home-side-nav:not(.on-light-section) .home-side-link:hover,
body#top .home-side-nav:not(.on-light-section) .home-side-link:hover span {
  color: #fff !important;
}

/* v241 FINAL: real full-height menu/page divider */
body#top .home-side-nav {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: 125px !important;
  height: 100vh !important;
  z-index: 999999 !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

body#top .home-side-divider {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 2px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255,255,255,.35) !important;
  opacity: 1 !important;
  z-index: 1000000 !important;
  pointer-events: none !important;
}

body#top .home-side-divider-progress {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 2px !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ed1c24 !important;
  opacity: 1 !important;
  z-index: 1000001 !important;
}

body#top.home-light-section .home-side-divider {
  background: rgba(9,9,9,.30) !important;
}

body#top.home-light-section .home-side-link,
body#top.home-light-section .home-side-link span {
  color: #090909 !important;
}

body#top.home-dark-section .home-side-link,
body#top.home-dark-section .home-side-link span {
  color: rgba(244,242,238,.65) !important;
}

body#top.home-dark-section .home-side-link.is-active,
body#top.home-dark-section .home-side-link.is-active span,
body#top.home-dark-section .home-side-link:hover,
body#top.home-dark-section .home-side-link:hover span {
  color: #fff !important;
}

@media (max-width:760px) {
  body#top .home-side-nav {
    display: none !important;
  }
}

/* v242: gradient belongs to the currently active side-menu section */
body#top .home-side-link::before {
  opacity: 0 !important;
  transform: translateX(-8px) !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

body#top .home-side-nav[data-active-section="top"] .home-side-link[data-section="top"]::before,
body#top .home-side-nav[data-active-section="about"] .home-side-link[data-section="about"]::before,
body#top .home-side-nav[data-active-section="selected-work"] .home-side-link[data-section="selected-work"]::before,
body#top .home-side-nav[data-active-section="approach"] .home-side-link[data-section="approach"]::before,
body#top .home-side-nav[data-active-section="start"] .home-side-link[data-section="start"]::before {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

body#top .home-side-link:hover::before,
body#top .home-side-link:focus-visible::before {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* v243: FINAL SIDENAV, intentionally self-contained */
body#top .home-side-nav{
 position:fixed!important; left:0!important; top:0!important; bottom:0!important;
 width:125px!important; height:100vh!important; display:flex!important;
 flex-direction:column!important; justify-content:center!important;
 z-index:2147483647!important; background:transparent!important;
 border:0!important; overflow:visible!important; padding:0!important;
}
body#top .home-side-rail{
 position:absolute!important; top:0!important; right:0!important; bottom:0!important;
 width:2px!important; height:100%!important; display:block!important;
 background:rgba(255,255,255,.30)!important; pointer-events:none!important;
}
body#top .home-side-progress{
 position:absolute!important; left:0!important; top:0!important;
 width:2px!important; height:0!important; display:block!important;
 background:#ed1c24!important;
}
body#top .home-side-link{
 position:relative!important; display:flex!important; align-items:center!important;
 min-height:52px!important; width:100%!important; padding:0 20px!important;
 color:rgba(244,242,238,.62)!important; text-decoration:none!important;
 font-family:'DM Mono',monospace!important; font-size:10px!important;
 line-height:1.25!important; overflow:hidden!important;
}
body#top .home-side-link::before{
 content:""!important; position:absolute!important; inset:0!important;
 background:linear-gradient(90deg,rgba(237,28,36,.34),rgba(237,28,36,.12) 48%,transparent)!important;
 opacity:0!important; transform:translateX(-8px)!important;
 transition:opacity .22s ease,transform .22s ease!important;
}
body#top .home-side-link span{position:relative!important;z-index:2!important;}
body#top .home-side-link.is-active::before,
body#top .home-side-link:hover::before,
body#top .home-side-link:focus-visible::before{
 opacity:1!important; transform:translateX(0)!important;
}
body#top .home-side-link.is-active,
body#top .home-side-link.is-active span,
body#top .home-side-link:hover,
body#top .home-side-link:hover span{color:#fff!important;}

body#top .home-side-nav.is-light .home-side-rail{background:rgba(9,9,9,.25)!important;}
body#top .home-side-nav.is-light .home-side-link,
body#top .home-side-nav.is-light .home-side-link span{color:#090909!important;}
body#top .home-side-nav.is-light .home-side-link.is-active,
body#top .home-side-nav.is-light .home-side-link.is-active span,
body#top .home-side-nav.is-light .home-side-link:hover,
body#top .home-side-nav.is-light .home-side-link:hover span{color:#090909!important;}
body#top .home-side-nav.is-light .home-side-progress{background:#ed1c24!important;}

@media(max-width:760px){body#top .home-side-nav{display:none!important;}}

/* v244: active gradient follows the clicked/current section */
body#top .home-side-link::before {
  opacity: 0 !important;
  transform: translateX(-8px) !important;
}
body#top .home-side-link.is-active::before {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
body#top .home-side-link:hover::before,
body#top .home-side-link:focus-visible::before {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* v246: align all home section labels and smooth the light/dark menu transition */
@media (min-width: 761px) {
  .selected-work {
    max-width: 1320px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }

  .statement-inner {
    max-width: 1320px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }

  .home-side-link,
  .home-side-link span {
    transition:
      color .55s cubic-bezier(.22,1,.36,1),
      opacity .55s cubic-bezier(.22,1,.36,1) !important;
  }

  .home-side-rail,
  .home-side-progress {
    transition: background-color .55s cubic-bezier(.22,1,.36,1) !important;
  }
}


/* v248: selected work alignment + visible scroll rail + bold side menu */
@media (min-width: 761px) {
  /* All three Selected Work videos start on exactly the same Y line. */
  .selected-project-large {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .selected-project-large .selected-media {
    margin-top: 0 !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }

  .selected-project-side {
    margin-top: 0 !important;
  }

  .selected-project-side .selected-project,
  .selected-project-side .selected-media {
    margin-top: 0 !important;
  }

  /* Strong, always-visible divider. Red progress sits directly over it. */
  body#top .home-side-rail {
    width: 3px !important;
    background: rgba(255,255,255,.38) !important;
    opacity: 1 !important;
    display: block !important;
  }

  body#top .home-side-progress {
    width: 3px !important;
    background: #ed1c24 !important;
    opacity: 1 !important;
    display: block !important;
    min-height: 2px !important;
    z-index: 3 !important;
  }

  /* Bold side-menu options. */
  body#top .home-side-link,
  body#top .home-side-link span {
    font-weight: 700 !important;
    letter-spacing: .02em !important;
  }
}

/* v249: exact Selected Work proportions + robust side rail */
@media (min-width: 761px) {
  /* Lyle & Scott is a 16:9 landscape player, matching its actual video
     ratio rather than a forced fixed height. This keeps its top edge aligned
     with the two 9:16 cards while making the card proportionate. */
  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-wrap,
  .selected-project-large .selected-youtube-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* The divider itself is the scroll indicator. */
  body#top .home-side-nav {
    border-right: 2px solid rgba(255,255,255,.32) !important;
    box-sizing: border-box !important;
  }

  body#top .home-side-rail {
    right: -2px !important;
    width: 4px !important;
    background: transparent !important;
    border: 0 !important;
  }

  body#top .home-side-progress {
    left: 0 !important;
    width: 4px !important;
    min-height: 0 !important;
    background: #ed1c24 !important;
    box-shadow: 0 0 7px rgba(237,28,36,.45) !important;
  }

  /* Make the menu visibly bold even if the loaded mono font has no bold face. */
  body#top .home-side-link,
  body#top .home-side-link span {
    font-weight: 900 !important;
    -webkit-text-stroke: .18px currentColor !important;
  }
}



/* v252: restore v242 side-menu typography + fine-tune Lyle & Scott */
@media (min-width: 761px) {
  /* v242 menu typography */
  body#top .home-side-link,
  body#top .home-side-link span {
    font-weight: 400 !important;
    -webkit-text-stroke: 0 !important;
    letter-spacing: .04em !important;
  }

  /* Lyle & Scott: between v249 and v251, keeping the same top alignment
     while bringing the bottom edge closer to the portrait cards. */
  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.90 / 1 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-inline,
  .selected-project-large .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

/* v253: final Selected Work alignment */
@media (min-width: 761px) {
  /* Match the bottom edge of Lyle & Scott to the portrait cards. */
  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.835 / 1 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-inline,
  .selected-project-large .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Keep 02 / SELECTED WORK together on one line, matching 01 and 04. */
  #selected-work .section-label {
    white-space: nowrap !important;
    width: max-content !important;
    display: block !important;
    flex: 0 0 auto !important;
  }
}

/* v254: Selected Work labels and side-menu line */
@media (min-width: 761px) {
  /* The featured player height is mathematically matched to the two
     9:16 cards in the 1.55fr / 1fr / 28px desktop grid. */
  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.744 / 1 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-inline,
  .selected-project-large .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Make Lyle & Scott's title/tag use the exact same info-row treatment
     as the two cards beside it. */
  .selected-project-large .selected-project-info {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 20px 0 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .selected-project-large .selected-project-info h3 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  .selected-project-large .selected-project-info > span {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    font: 8px "DM Mono" !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    color: #777 !important;
  }

  /* Keep 02 / SELECTED WORK on one line without changing the rail width. */
  body#top .home-side-link[data-section="selected-work"] {
    overflow: visible !important;
    white-space: nowrap !important;
  }

  body#top .home-side-link[data-section="selected-work"] span {
    white-space: nowrap !important;
    display: inline-block !important;
  }
}

/* v255: slightly wider homepage side menu */
@media (min-width: 761px) {
  body#top .home-side-nav {
    width: 145px !important;
  }

  body#top .home-side-link {
    padding-left: 20px !important;
    padding-right: 16px !important;
  }
}

/* v256: restore Lyle & Scott size and align its title/tag */
@media (min-width: 761px) {
  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2.08 / 1 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-inline,
  .selected-project-large .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .selected-project-large .selected-project-info {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 20px 0 0 !important;
    margin: 0 !important;
    height: auto !important;
  }

  .selected-project-large .selected-project-info h3 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  .selected-project-large .selected-project-info > span {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
}

/* v257: rebalance Selected Work columns so the featured player is the
   correct size without forcing the two portrait cards down. */
@media (min-width: 761px) {
  .selected-work-grid {
    grid-template-columns: 1.65fr 1fr !important;
    gap: 28px !important;
  }

  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.90 / 1 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-inline,
  .selected-project-large .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

/* v258: final Lyle & Scott alignment */
@media (min-width: 761px) {
  .selected-project-large .selected-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.98 / 1 !important;
    overflow: hidden !important;
  }

  .selected-project-large .selected-youtube-inline,
  .selected-project-large .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .selected-project-large .selected-project-info {
    margin: 0 !important;
    padding-top: 20px !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  .selected-project-large .selected-project-info h3,
  .selected-project-large .selected-project-info > span {
    margin-top: 0 !important;
  }
}

/* v259: final Selected Work vertical alignment */
@media (min-width: 761px) {
  /* Add the ~7px needed to make the featured player and its info row
     finish at exactly the same Y level as the portrait cards. */
  .selected-project-large .selected-media {
    aspect-ratio: 1.955 / 1 !important;
  }

  .selected-project-large .selected-youtube-inline,
  .selected-project-large .selected-youtube-inline iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Nudge the two portrait cards right while reducing the grid gap by the
     same amount, so their spacing from Lyle & Scott remains unchanged. */
  .selected-project-side {
    transform: translateX(7px) !important;
  }

  .selected-work-grid {
    column-gap: 21px !important;
  }
}


/* Keep the homepage buzzword marquee clear of the fixed side navigation. */
@media (min-width: 901px) {
  body#top .marquee {
    margin-left: 145px !important;
    width: calc(100% - 145px) !important;
  }
}

/* About heading colour and style */
@media (min-width: 901px) {
  .about-title-desktop span {
    display: block;
    font-style: normal !important;
  }
  .about-title-desktop span:first-child {
    color: #f2f0eb !important;
  }
  .about-title-desktop span:last-child {
    color: #e31b23 !important;
  }
}


/* Clean homepage carousel entrance */
.hero-video-carousel {
  opacity: 0 !important;
  visibility: hidden;
  animation: hero-carousel-fallback .4s ease-out .7s forwards;
}
.hero-video-carousel.is-ready {
  opacity: .88 !important;
  visibility: visible;
  animation: none;
}
@keyframes hero-carousel-fallback {
  from { opacity: 0; visibility: hidden; }
  to { opacity: .88; visibility: visible; }
}

/* Single-paragraph About copy */
.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-copy > p {
  margin-bottom: 0 !important;
}

/* Give the single About paragraph more breathing room before the CTA. */
.about-copy > p {
  margin-bottom: 32px !important;
}

.hero-video-carousel { min-height: 180px; }


/* v355: desktop brand alignment */
@media (min-width: 901px) {
  header.nav {
    position: relative !important;
  }

  header.nav .brand {
    position: absolute !important;
    left: 160px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
}

/* v356: move the desktop brand closer to the side rail */
@media (min-width: 901px) {
  header.nav .brand {
    left: 128px !important;
  }
}

/* v363: brand aligned to the left edge of the desktop nav container */
@media (min-width: 901px) {
  header.nav .brand {
    left: -30px !important;
  }
}

/* v365: restore Work + Contact brand position. Homepage only keeps its
   custom full-width header positioning. */
@media (min-width: 901px) {
  body:not(.home-dark-section) header.nav .brand {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}


/* v373: By Shredski gallery */
#by-shredski-gallery {
  width: 100%;
  margin: 0 0 70px;
  position: relative;
  z-index: 1;
  display: none;
}

body[data-active-filter="by-shredski"] #by-shredski-gallery {
  display: block !important;
}

#by-shredski-gallery .by-shredski-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 12px;
  width: 100%;
  align-items: start;
}

#by-shredski-gallery .by-shredski-item {
  margin: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  background: transparent;
  align-self: start;
}

#by-shredski-gallery .by-shredski-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .25s ease, opacity .25s ease;
}

#by-shredski-gallery .by-shredski-item:hover img {
  transform: scale(1.02);
}

@media (max-width: 900px) {
  #by-shredski-gallery .by-shredski-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  #by-shredski-gallery .by-shredski-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* By Shredski image viewer */
.by-shredski-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 7vh 9vw;
  background: rgba(0,0,0,.78);
}

.by-shredski-lightbox.is-open {
  display: flex;
}

.by-shredski-lightbox img {
  display: block;
  max-width: 82vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.by-shredski-lightbox-close {
  position: absolute;
  top: calc(7vh - 4px);
  right: calc(9vw - 4px);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 34px;
  line-height: 40px;
  cursor: pointer;
}

/* v377: unified lightbox close control */
.portfolio-video-lightbox .lightbox-close,
.by-shredski-lightbox .by-shredski-lightbox-close {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 40px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 2147483647 !important;
  transform: none !important;
}
.portfolio-video-lightbox .lightbox-close::before,
.portfolio-video-lightbox .lightbox-close::after {
  display: none !important;
}
.portfolio-video-lightbox .lightbox-close:hover,
.by-shredski-lightbox .by-shredski-lightbox-close:hover {
  opacity: .7 !important;
}


/* v378: shared close-button appearance. Position is calculated from the media bounds in JS. */
.portfolio-video-lightbox .lightbox-close,
.by-shredski-lightbox .by-shredski-lightbox-close {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 40px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 2147483647 !important;
}
.portfolio-video-lightbox .lightbox-close::before,
.portfolio-video-lightbox .lightbox-close::after { display: none !important; }
.portfolio-video-lightbox .lightbox-close:hover,
.by-shredski-lightbox .by-shredski-lightbox-close:hover { opacity: .7 !important; }


/* v379: final unified close control. Both lightboxes use the same X and
   position it just outside the top-right corner of the displayed media. */
.portfolio-video-lightbox .lightbox-close,
.by-shredski-lightbox .by-shredski-lightbox-close {
  position: fixed !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 40px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 2147483647 !important;
  transform: none !important;
}
.portfolio-video-lightbox .lightbox-close::before,
.portfolio-video-lightbox .lightbox-close::after { display: none !important; }


/* v381: close button is anchored to the media itself.
   Videos and By Shredski use the exact same X treatment. */
.portfolio-video-lightbox .lightbox-video-wrap,
.by-shredski-lightbox .by-shredski-media {
  position: relative !important;
}

.portfolio-video-lightbox .lightbox-close,
.by-shredski-lightbox .by-shredski-lightbox-close {
  position: absolute !important;
  top: 0 !important;
  right: -62px !important;
  left: auto !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 40px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 2147483647 !important;
  transform: none !important;
}

#by-shredski-gallery .by-shredski-media {
  position: relative;
  width: 100%;
  line-height: 0;
}

#by-shredski-gallery .by-shredski-wii-golf {
  grid-column: span 2;
}

#by-shredski-gallery .by-shredski-wii-golf .by-shredski-media {
  width: 100%;
}

@media (max-width: 600px) {
  #by-shredski-gallery .by-shredski-wii-golf {
    grid-column: span 2;
  }

  .portfolio-video-lightbox .lightbox-close,
  .by-shredski-lightbox .by-shredski-lightbox-close {
    right: 4px !important;
    top: 4px !important;
  }
}


/* v388: final By Shredski fixes. Wii Golf spans exactly two gallery slots,
   the duplicate UFO is removed, and the image viewer uses the exact same
   close control and media-relative positioning as the video viewer. */
#by-shredski-gallery .by-shredski-wii-golf {
  grid-column: span 2 !important;
  align-self: center !important;
}

.by-shredski-lightbox .by-shredski-lightbox-wrap {
  position: relative !important;
  width: fit-content !important;
  max-width: 82vw !important;
  max-height: 84vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.by-shredski-lightbox .by-shredski-lightbox-wrap > img {
  display: block !important;
  max-width: 82vw !important;
  max-height: 84vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.portfolio-video-lightbox .lightbox-close,
.by-shredski-lightbox .by-shredski-lightbox-close {
  position: absolute !important;
  top: 0 !important;
  right: -62px !important;
  left: auto !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  line-height: 40px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 2147483647 !important;
  transform: none !important;
}

@media (max-width: 600px) {
  .by-shredski-lightbox .by-shredski-lightbox-wrap {
    max-width: 92vw !important;
  }
  .by-shredski-lightbox .by-shredski-lightbox-wrap > img {
    max-width: 92vw !important;
    max-height: 90vh !important;
  }
  .portfolio-video-lightbox .lightbox-close,
  .by-shredski-lightbox .by-shredski-lightbox-close {
    right: 4px !important;
    top: 4px !important;
  }
}


/* v388: remove the thin edge/seam visible on the Tesoro Globe video cards. */
.client-work-section[data-project="tesoro-globe"] .multi-video-media {
  border: 0 !important;
  box-shadow: none !important;
}


/* v390: keep the More Work CTA below the By Shredski gallery and remove the
   persistent one-pixel/seam effect visible on Tesoro Globe videos. */
.client-work-section[data-project="tesoro-globe"] .multi-video-media,
.client-work-section[data-project="tesoro-globe"] .multi-video-media video {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.client-work-section[data-project="tesoro-globe"] .multi-video-media video {
  margin-right: -1px !important;
  width: calc(100% + 1px) !important;
}
.portfolio-video-lightbox .lightbox-video-wrap video {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* v393: the lightbox sizes the video to its exact intrinsic aspect ratio in JS.
   Keep the wrapper clipped so no renderer/background sliver can appear at the edge. */
.portfolio-video-lightbox .lightbox-video-wrap {
  overflow: hidden !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}
.portfolio-video-lightbox .lightbox-video-wrap video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: none !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* v410: all Work-page video previews fill their true 9:16 cards.
   Do not letterbox portrait videos inside the preview frame. */
.multi-video-media .portfolio-video {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 9 / 16 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
}

/* Tesoro: remove the old one-pixel compensation that created the dark seam. */
.client-work-section[data-project="tesoro-globe"] .multi-video-media video {
  width: 100% !important;
  margin-right: 0 !important;
}

/* v411: all Work-page video cards use a fixed 9:16 preview frame.
   The source video is cropped to fill the frame, so native landscape/other
   aspect ratios cannot introduce black side bars or change card height. */
.multi-video-media {
  aspect-ratio: 9 / 16 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 620px !important;
  overflow: hidden !important;
}
.multi-video-media .portfolio-video {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}


/* v415: keep the video close button visible outside the media frame. */
.portfolio-video-lightbox .lightbox-video-wrap { overflow: visible !important; }

/* v417: tighten featured project sections after Hollister removal */
@media (min-width: 601px) {
  .featured-paired-projects {
    column-gap: 18px !important;
  }
  .featured-paired-projects > .client-work-section {
    min-width: 0 !important;
  }
}


/* v422: Sports filter spacing only. All filter stays exactly as v417. */
@media (min-width: 601px) {
  body[data-active-filter="sports"] .featured-paired-projects > .client-work-section:nth-child(1) {
    position: relative !important;
    left: 120px !important;
  }

  body[data-active-filter="sports"] .featured-paired-projects > .client-work-section.juventus-project {
    position: relative !important;
    left: -120px !important;
  }
}

/* v423: mobile-only refinements */
@media (max-width: 600px) {
  /* Keep the Shredski grid format, but give it a little breathing room
     from the phone edges. */
  #by-shredski-gallery {
    width: calc(100% - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Fit all Work filters on one line without horizontal scrolling. */
  .work-filters {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .work-filters .work-filter {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    font-size: 8px !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }

  /* Video lightbox becomes a true phone-sized viewer. Native controls
     provide the playbar and pause/play button. */
  .portfolio-video-lightbox {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: none !important;
  }

  .portfolio-video-lightbox .lightbox-video-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  .portfolio-video-lightbox video {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
  }

  .portfolio-video-lightbox .lightbox-close {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 2147483647 !important;
  }

  /* Move the About block slightly left without changing text alignment. */
  .intro-content {
    transform: translateX(-14px) !important;
  }

  /* Align the Approach and Start a Project section labels with
     02 / Selected Work, while leaving Contact unchanged. */
  .statement-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .statement-inner > .section-label,
  .contact-strip > div:first-child > .section-label {
    text-align: left !important;
  }

  .contact-strip > div:first-child {
    text-align: left !important;
  }
}

/* v424: final mobile alignment */
@media (max-width: 600px) {
  /* Keep Approach's 03 label on the same left edge as the other
     homepage section titles. */
  .statement {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .statement-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Shift only the About heading block left slightly. The text remains
     left-aligned and the two-column formatting is unchanged. */
  .about-heading {
    transform: translateX(-10px) !important;
  }
}


/* External-link arrow */
.css-arrow {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 5px !important;
  flex: 0 0 8px !important;
  vertical-align: middle !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M3 1H9V7' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M3 1H9V7' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Let's talk CTA */
.circle-button .circle-talk {
  display: inline-block !important;
  white-space: nowrap !important;
}

.circle-button .circle-talk-first,
.circle-button .circle-talk-line {
  display: inline !important;
}

.circle-button .circle-talk-line .css-arrow {
  margin-left: 7px !important;
  vertical-align: middle !important;
}

/* Centre Let's talk inside the circle */
.circle-button .circle-talk {
  position: relative;
  top: -3px;
}

/* By Shredski MP4s */
#by-shredski-gallery .by-shredski-media > video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: contain !important;
  cursor: pointer !important;
}

/* By Shredski MP4 lightbox */
.by-shredski-lightbox .by-shredski-lightbox-wrap > video {
  display: none;
  width: auto !important;
  height: auto !important;
  max-width: 82vw !important;
  max-height: 84vh !important;
  object-fit: contain !important;
}

@media (max-width: 600px) {
  .by-shredski-lightbox .by-shredski-lightbox-wrap > video {
    max-width: 92vw !important;
    max-height: 90vh !important;
  }
}

/* Final mobile By Shredski video lightbox fix */
@media (max-width: 600px) {
  .by-shredski-lightbox .by-shredski-lightbox-wrap {
    width: auto !important;
    height: auto !important;
    max-width: 94vw !important;
    max-height: calc(100dvh - 40px) !important;
  }

  .by-shredski-lightbox .by-shredski-lightbox-wrap > video {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 94vw !important;
    max-height: calc(100dvh - 40px) !important;
    object-fit: contain !important;
  }
}

/* iPhone By Shredski video lightbox */
@media (max-width: 600px) {
  .by-shredski-lightbox {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .by-shredski-lightbox .by-shredski-lightbox-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .by-shredski-lightbox .by-shredski-lightbox-wrap > video {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    object-fit: contain !important;
  }
}

/* Mobile portfolio video player */
@media (max-width: 600px) {
  .portfolio-video-lightbox {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .portfolio-video-lightbox .lightbox-video-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .portfolio-video-lightbox .lightbox-video-wrap video {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    object-fit: contain !important;
  }

  .portfolio-video-lightbox .lightbox-close {
    z-index: 2147483647 !important;
  }
}

/* Final mobile By Shredski lightbox sizing */
@media (max-width: 600px) {
  .by-shredski-lightbox {
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .by-shredski-lightbox .by-shredski-lightbox-wrap {
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .by-shredski-lightbox .by-shredski-lightbox-wrap > img,
  .by-shredski-lightbox .by-shredski-lightbox-wrap > video {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    object-fit: contain !important;
  }
}


/* Fix mobile By Shredski image lightbox */
@media (max-width: 600px) {
  .by-shredski-lightbox .by-shredski-lightbox-wrap > img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    object-fit: contain !important;
  }
}

/* Final mobile By Shredski photo positioning */
@media (max-width: 600px) {
  .by-shredski-lightbox .by-shredski-lightbox-wrap > img {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    margin: 0 !important;
  }
}

/* By Shredski lightbox close button */
@media (max-width: 600px) {
  .by-shredski-lightbox .by-shredski-lightbox-close {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
  }
}


/* Final mobile Work video player */
@media (max-width: 600px) {
  .portfolio-video-lightbox {
    padding: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
  }

  .portfolio-video-lightbox .lightbox-video-wrap {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
  }

  .portfolio-video-lightbox .lightbox-video-wrap > video {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  .portfolio-video-lightbox .lightbox-close {
    display: none !important;
  }
}