:root {
  --red: #f2243b;
  --red-deep: #d51a30;
  --black: #000000;
  --ink: #101010;
  --paper: #f7f6f2;
  --white: #ffffff;
  --line: rgba(0, 0, 0, 0.2);
  --line-light: rgba(255, 255, 255, 0.28);
  --display: 'Barlow Condensed', Impact, sans-serif;
  --body: 'DM Sans', Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (pointer: fine) {
  html, html * { cursor: none !important; }
}
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.site-shell { width: 100%; overflow: hidden; background: var(--black); }
.custom-cursor { position: fixed; z-index: 150; top: 0; left: 0; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid var(--red); border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: difference; transition: width 220ms var(--ease-out), height 220ms var(--ease-out), opacity 180ms ease, background 220ms ease, border-color 220ms ease; }
.custom-cursor::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--red); }
.custom-cursor span { position: absolute; top: 50%; left: 50%; color: var(--white); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, 22px); }
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-active { width: 68px; height: 68px; background: var(--red); border-color: var(--red); mix-blend-mode: normal; }
.custom-cursor.is-active::after { display: none; }
.magnetic-target { --mag-x: 0px; --mag-y: 0px; transform: translate3d(var(--mag-x), var(--mag-y), 0); transition: transform 280ms var(--ease-out); }
.tilt-card { --tilt-x: 0deg; --tilt-y: 0deg; transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transition: transform 380ms var(--ease-out); transform-style: preserve-3d; }
.reveal-on-scroll { opacity: 0; transform: translateY(44px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.scroll-progress { position: fixed; z-index: 70; top: 0; left: 0; height: 3px; background: var(--red); box-shadow: 0 0 16px rgba(242, 36, 59, .65); transition: width 80ms linear; }
.whatsapp-float { position: fixed; z-index: 80; right: 24px; bottom: 25px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 15px; color: var(--white); background: #138c4a; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; transition: background 180ms ease, box-shadow 220ms ease; }
.whatsapp-float:hover { color: var(--white); background: #0d6e3a; box-shadow: 0 16px 38px rgba(0,0,0,.3); }
.whatsapp-icon { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 17px; line-height: 1; transform: rotate(-45deg); }
.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 23px 4.1vw 19px; color: var(--white);
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out), padding 240ms var(--ease-out);
}
.site-header--scrolled { padding-top: 15px; padding-bottom: 15px; background: rgba(0, 0, 0, 0.84); backdrop-filter: blur(14px); }
.brand-mark { display: inline-flex; align-items: center; gap: 9px; padding: 0; color: inherit; background: none; cursor: pointer; }
.brand-logo { width: 105px; height: auto; display: block; transition: transform 200ms var(--ease-out); }
.brand-mark:hover .brand-logo { transform: scale(1.04); }
.brand-mark__glyph { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--display); font-size: 15px; line-height: 1; font-weight: 500; }
.brand-mark__name { font-family: var(--display); font-size: 21px; letter-spacing: .055em; line-height: 1; }
.desktop-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 50px); margin-left: 8vw; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.desktop-nav li { display: block; }
.desktop-nav button { padding: 3px 0; color: inherit; background: none; cursor: pointer; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; transition: opacity 180ms ease; }
.desktop-nav a { padding: 3px 0; color: inherit; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; transition: opacity 180ms ease; }
.desktop-nav a:hover { opacity: 1; }
.desktop-nav button:hover { opacity: 1; }
.header-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; color: var(--black); background: var(--white); border-radius: 30px; cursor: pointer; font-size: 10px; letter-spacing: .04em; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.header-cta:hover { color: var(--white); background: var(--red); }
.mobile-menu-trigger { display: none; color: inherit; background: none; cursor: pointer; }

.hero-section { position: relative; min-height: min(1000px, 100vh); height: 100svh; overflow: hidden; background: #1a0809; isolation: isolate; }
.hero-section__grain { position: absolute; z-index: 4; inset: 0; opacity: .12; pointer-events: none; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.hero-section__image-wrap { position: absolute; top: 0; right: 0; width: 69%; height: 100%; overflow: hidden; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 7% 65%); }
.hero-section__image { width: 100%; height: 100%; object-fit: cover; object-position: 53% center; filter: saturate(.8) contrast(1.05); transform: scale(1.035); animation: hero-drift 12s ease-in-out infinite alternate; }
.hero-section__image-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 0, 0, .86) 0%, rgba(11, 0, 0, .2) 38%, rgba(11, 0, 0, .05) 72%, rgba(0, 0, 0, .34) 100%), linear-gradient(0deg, rgba(0, 0, 0, .58), transparent 42%); }
@keyframes hero-drift { from { transform: scale(1.035) translate3d(0,0,0); } to { transform: scale(1.07) translate3d(-1.2%, -1%, 0); } }
.hero-section__copy { position: absolute; z-index: 5; left: 8.5vw; bottom: 18.5vh; width: min(600px, 58vw); }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 26px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow--light { color: rgba(255, 255, 255, .82); }
.eyebrow__line { display: inline-block; width: 37px; height: 1px; background: currentColor; }
.hero-section h1 { margin: 0; color: var(--white); font-family: var(--display); font-size: clamp(72px, 12.4vw, 190px); line-height: .79; font-weight: 400; letter-spacing: -.045em; text-transform: uppercase; }
.hero-section h1 em, h2 em { color: var(--red); font-style: normal; }
.hero-section__intro { width: 220px; margin: 34px 0 0 8px; color: rgba(255, 255, 255, .76); font-size: 11px; line-height: 1.55; }
.hero-section__meta { position: absolute; z-index: 5; left: 4.1vw; bottom: 25px; display: flex; gap: 35px; color: rgba(255,255,255,.58); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.hero-section__scroll { position: absolute; z-index: 5; right: 4.1vw; bottom: 23px; display: flex; align-items: center; gap: 18px; padding: 0; color: rgba(255,255,255,.7); background: none; cursor: pointer; font-size: 8px; letter-spacing: .14em; }
.hero-section__scroll svg { animation: nudge 1.7s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.hero-section__stamp { position: absolute; z-index: 5; top: 18%; right: 11%; color: rgba(255,255,255,.75); font-family: var(--display); font-size: 47px; line-height: .6; font-weight: 300; transform: rotate(12deg); }
.hero-section__stamp span { padding-left: 21px; }

.section-pad { padding: 44px 8.5vw 55px; }
.section-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 95px; color: rgba(255,255,255,.72); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.section-kicker--dark { color: rgba(0,0,0,.6); }
.section-kicker--light { color: rgba(255,255,255,.64); }
.kicker-number { color: var(--red); }
.kicker-rule { width: min(145px, 16vw); height: 1px; background: currentColor; opacity: .45; }
.manifesto-section { position: relative; min-height: 780px; color: var(--white); background: var(--red); }
.manifesto-grid { display: grid; grid-template-columns: 16% 1fr; gap: 8%; }
.manifesto-label { padding-top: 10px; font-size: 9px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.manifesto-heading-wrap { max-width: 870px; }
.manifesto-section h2, .services-section h2, .work-section h2, .contact-section h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.045em; text-transform: uppercase; }
.manifesto-section h2 { max-width: 850px; font-size: clamp(64px, 10.2vw, 148px); line-height: .82; }
.manifesto-section h2 span { display: block; padding-left: 16%; color: var(--black); }
.manifesto-copy-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 15%; max-width: 640px; margin: 65px 0 0 16%; }
.manifesto-copy-row p { margin: 0; font-size: 15px; line-height: 1.4; }
.manifesto-copy-small { align-self: end; font-size: 10px !important; line-height: 1.55 !important; opacity: .72; }
.manifesto-bottom-line, .services-footer, .work-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 125px; padding-top: 14px; border-top: 1px solid var(--line-light); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }

.services-section { color: var(--black); background: var(--paper); }
.services-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14%; align-items: end; margin-bottom: 84px; }
.services-section h2 { font-size: clamp(75px, 12vw, 170px); line-height: .77; }
.services-intro > p { max-width: 315px; margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.services-list { border-top: 1px solid var(--line); }
.service-row { position: relative; display: grid; grid-template-columns: 9% 1.35fr 1fr 32px; gap: 2%; align-items: center; width: 100%; min-height: 86px; padding: 14px 0; color: var(--black); border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; transition: color 180ms ease, padding 240ms var(--ease-out); }
.service-row::after { content: ''; position: absolute; z-index: 0; left: -2.6vw; right: -2.6vw; top: 0; bottom: 0; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform 260ms var(--ease-out); }
.service-row > span { position: relative; z-index: 1; }
.service-row:hover, .service-row--active { padding-left: 2.2%; padding-right: 2.2%; color: var(--white); }
.service-row:hover::after, .service-row--active::after { transform: scaleY(1); }
.service-row__number { align-self: start; padding-top: 5px; color: var(--red); font-size: 9px; letter-spacing: .14em; }
.service-row--active .service-row__number { color: rgba(255,255,255,.7); }
.service-row__title { font-family: var(--display); font-size: clamp(33px, 4vw, 57px); line-height: .9; text-transform: uppercase; }
.service-row__note { max-width: 190px; font-size: 10px; line-height: 1.4; opacity: .65; }
.service-row__icon { display: grid; place-items: center; justify-self: end; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }
.services-footer { margin-top: 67px; border-top-color: var(--line); color: rgba(0,0,0,.6); }

.motion-section { position: relative; color: var(--white); background: #111; }
.motion-section::before { content: 'MOTION'; position: absolute; top: 13%; right: -2%; color: rgba(242,36,59,.08); font-family: var(--display); font-size: clamp(160px, 30vw, 430px); line-height: .7; pointer-events: none; transform: rotate(-90deg); transform-origin: center; }
.motion-heading-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 10%; align-items: end; margin-bottom: 74px; }
.motion-section h2 { margin: 0; font-family: var(--display); font-size: clamp(76px, 12vw, 170px); line-height: .76; font-weight: 400; letter-spacing: -.045em; text-transform: uppercase; }
.motion-heading-row > p { max-width: 265px; margin: 0 0 5px; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.5; }
.motion-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 27px; align-items: start; }
.motion-card { min-width: 0; }
.motion-card--side { margin-top: 105px; }
.motion-video-wrap { position: relative; overflow: hidden; background: #252525; }
.motion-card--main .motion-video-wrap { aspect-ratio: 1.33 / 1; }
.motion-card--side .motion-video-wrap { aspect-ratio: .78 / 1; }
.motion-video { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.8) contrast(1.07); transition: transform 800ms var(--ease-out), filter 500ms ease; }
.motion-card:hover .motion-video { transform: scale(1.05); filter: saturate(1.12) contrast(1.05); }
.motion-video-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.32), transparent 38%, rgba(0,0,0,.66)); }
.motion-card__tag, .motion-card__play { position: absolute; z-index: 1; color: var(--white); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.motion-card__tag { top: 17px; left: 18px; }
.motion-card__play { right: 17px; bottom: 17px; display: inline-flex; align-items: center; gap: 9px; }
.motion-card h3 { margin: 16px 0 0; font-family: var(--display); font-size: clamp(31px, 4.2vw, 57px); font-weight: 400; line-height: .88; text-transform: uppercase; }
.motion-site-strip { position: relative; z-index: 1; display: grid; grid-template-columns: 18% 1fr 48px; gap: 5%; align-items: center; margin-top: 85px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.motion-site-strip__label { color: var(--red); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.motion-site-strip__text { font-family: var(--display); font-size: clamp(28px, 4vw, 51px); line-height: .86; text-transform: uppercase; }
.motion-site-strip__orb { display: grid; place-items: center; width: 40px; height: 40px; color: var(--black); background: var(--red); border-radius: 50%; }
.motion-site-strip__orb span { font-size: 23px; transform: rotate(-45deg); }

.work-section { background: var(--black); }
.work-heading-row { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10%; align-items: end; margin-bottom: 75px; }
.work-section h2 { font-size: clamp(76px, 12.3vw, 175px); line-height: .76; }
.work-heading-row > p { max-width: 245px; margin: 0 0 7px; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.45; }
.work-grid { display: grid; grid-template-columns: minmax(0, 1.23fr) minmax(270px, .77fr); gap: 26px; align-items: start; }
.work-card { min-width: 0; }
.work-card--tall { margin-top: 95px; }
.work-card__image-wrap { position: relative; overflow: hidden; background: #262626; }
.work-card--wide .work-card__image-wrap { aspect-ratio: 1.1 / 1; }
.work-card--tall .work-card__image-wrap { aspect-ratio: .77 / 1; }
.work-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.work-card--wide .work-card__image { object-position: center; }
.work-card--tall .work-card__image { object-position: 50% center; }
.work-card:hover .work-card__image { transform: scale(1.045); }
.work-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 45%); pointer-events: none; }
.work-card__number { position: absolute; top: 17px; left: 18px; color: var(--white); font-size: 9px; letter-spacing: .12em; }
.work-card__arrow { position: absolute; right: 17px; bottom: 17px; display: grid; place-items: center; width: 39px; height: 39px; color: var(--white); border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: transparent; cursor: pointer; transition: color 180ms ease, background 180ms ease; }
.work-card:hover .work-card__arrow { color: var(--black); background: var(--white); }
.work-card__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,.24); }
.work-card__caption h3 { margin: 0; font-family: var(--display); font-size: 32px; font-weight: 400; line-height: .95; text-transform: uppercase; }
.work-card__caption span { color: rgba(255,255,255,.56); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.work-card--statement { display: flex; flex-direction: column; justify-content: space-between; min-height: 345px; padding: 25px; color: var(--black); background: var(--red); }
.statement-mark { align-self: end; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--black); border-radius: 50%; font-family: var(--display); font-size: 35px; line-height: .8; }
.work-card--statement p { max-width: 220px; margin: 0; font-family: var(--display); font-size: 42px; line-height: .82; text-transform: uppercase; }
.work-card--statement span { font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.work-footer { margin-top: 82px; border-top-color: rgba(255,255,255,.25); color: rgba(255,255,255,.6); }

.contact-section { position: relative; color: var(--black); background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14%; align-items: end; min-height: 480px; }
.contact-overline { margin: 0 0 27px; color: var(--red); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.contact-section h2 { font-size: clamp(92px, 15vw, 210px); line-height: .72; }
.contact-side { padding-bottom: 10px; }
.contact-side > p { max-width: 285px; margin: 0 0 44px; font-size: 13px; line-height: 1.48; }
.contact-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; min-width: 240px; padding: 14px 16px; color: var(--white); background: var(--black); border: 1px solid var(--black); font-size: 12px; transition: color 180ms ease, background 180ms ease; }
.contact-button:hover { color: var(--black); background: transparent; }
.contact-marquee { position: relative; left: 50%; width: 100vw; overflow: hidden; margin-top: 130px; padding: 12px 0; color: var(--white); background: var(--red); white-space: nowrap; font-family: var(--display); font-size: 37px; letter-spacing: .01em; text-transform: uppercase; transform: translateX(-50%); }
.contact-marquee span { display: inline-block; animation: marquee 18s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.site-footer { padding: 28px 4.1vw 20px; color: var(--white); background: var(--black); }
.footer-top { display: flex; align-items: center; justify-content: space-between; min-height: 120px; border-bottom: 1px solid rgba(255,255,255,.25); }
.footer-logo-image { width: clamp(185px, 24vw, 330px); height: auto; display: block; }
.footer-logo span { margin-left: 7px; font-family: var(--body); font-size: 11px; vertical-align: top; }
.footer-tagline { margin-left: 8vw; color: rgba(255,255,255,.6); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.back-top { display: inline-flex; align-items: center; gap: 7px; padding: 0; color: inherit; background: transparent; cursor: pointer; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.back-top svg { transform: rotate(-45deg); }
.footer-bottom { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 20px; padding-top: 17px; color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 6px; transition: color 180ms ease; }
.footer-bottom a:hover { color: var(--red); }

.mobile-menu { position: fixed; z-index: 100; inset: 0; display: none; flex-direction: column; padding: 25px 6vw; color: var(--white); background: var(--red); }
.mobile-menu.is-open { display: flex; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__logo { width: 112px; }
.mobile-menu__top button { padding: 0; color: inherit; background: none; cursor: pointer; }
.mobile-menu__links { display: flex; flex-direction: column; margin-top: 18vh; border-top: 1px solid rgba(0,0,0,.35); }
.mobile-menu__links button, .mobile-menu__links a { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; color: inherit; border-bottom: 1px solid rgba(0,0,0,.35); background: none; cursor: pointer; font-family: var(--display); font-size: 52px; line-height: .9; text-align: left; text-transform: uppercase; }
.mobile-menu__links span { font-family: var(--body); font-size: 9px; letter-spacing: .12em; }
.mobile-menu__caption { margin-top: auto; margin-bottom: 15px; color: rgba(0,0,0,.67); font-size: 11px; line-height: 1.5; }

@media (max-width: 800px) {
  .custom-cursor { display: none; }
  .whatsapp-float { right: 16px; bottom: 16px; padding: 12px; }
  .whatsapp-float > span:last-child { display: none; }
  .reveal-on-scroll { opacity: 1; transform: none; }
  .tilt-card { transform: none; }
  .site-header { padding: 19px 5vw; }
  .site-header--scrolled { padding-top: 14px; padding-bottom: 14px; }
  .desktop-nav, .header-cta { display: none; }
  .mobile-menu-trigger { display: block; }
  .hero-section { min-height: 760px; height: 100svh; }
  .hero-section__image-wrap { width: 100%; clip-path: none; }
  .hero-section__image-shade { background: linear-gradient(0deg, rgba(11,0,0,.86), transparent 55%), linear-gradient(90deg, rgba(11,0,0,.35), transparent 65%); }
  .hero-section__copy { left: 6vw; bottom: 20vh; width: 88vw; }
  .hero-section h1 { font-size: clamp(70px, 19vw, 135px); }
  .hero-section__intro { width: 215px; margin-top: 26px; }
  .hero-section__meta { left: 6vw; bottom: 22px; }
  .hero-section__meta span:first-child { display: none; }
  .hero-section__scroll { right: 6vw; bottom: 20px; }
  .hero-section__stamp { top: 17%; right: 8%; font-size: 36px; }
  .brand-logo { width: 92px; }
  .section-pad { padding: 32px 6vw 44px; }
  .section-kicker { margin-bottom: 65px; gap: 9px; font-size: 8px; }
  .kicker-rule { width: 31px; }
  .manifesto-section { min-height: auto; }
  .manifesto-grid { display: block; }
  .manifesto-label { margin-bottom: 30px; }
  .manifesto-section h2 { font-size: clamp(66px, 18vw, 130px); }
  .manifesto-section h2 span { padding-left: 11%; }
  .manifesto-copy-row { display: block; margin: 42px 0 0 11%; }
  .manifesto-copy-row p { max-width: 320px; font-size: 14px; }
  .manifesto-copy-small { margin-top: 28px; max-width: 230px !important; }
  .manifesto-bottom-line, .services-footer, .work-footer { gap: 15px; margin-top: 85px; font-size: 7px; }
  .manifesto-bottom-line span:nth-child(2), .services-footer span:first-child { display: none; }
  .services-intro, .work-heading-row, .contact-grid { display: block; }
  .services-intro { margin-bottom: 58px; }
  .services-section h2 { font-size: clamp(78px, 20vw, 145px); }
  .services-intro > p { margin: 38px 0 0 22%; max-width: 245px; font-size: 12px; }
  .service-row { grid-template-columns: 12% 1fr 30px; gap: 5px; min-height: 77px; }
  .service-row::after { left: -6vw; right: -6vw; }
  .service-row__title { font-size: clamp(30px, 8.2vw, 53px); }
  .service-row__note { display: none; }
  .work-heading-row { margin-bottom: 52px; }
  .work-section h2 { font-size: clamp(79px, 20vw, 150px); }
  .work-heading-row > p { margin: 34px 0 0 23%; }
  .work-grid { display: block; }
  .work-card--tall { width: 77%; margin: 62px 0 0 auto; }
  .work-card--statement { width: 77%; min-height: 270px; margin: 46px 0 0 auto; }
  .work-card--statement p { font-size: 35px; }
  .work-card__caption h3 { font-size: 28px; }
  .motion-section::before { top: 18%; right: -17%; font-size: 190px; }
  .motion-heading-row { display: block; margin-bottom: 53px; }
  .motion-section h2 { font-size: clamp(78px, 20vw, 150px); }
  .motion-heading-row > p { margin: 34px 0 0 23%; }
  .motion-grid { display: block; }
  .motion-card--side { width: 77%; margin: 60px 0 0 auto; }
  .motion-site-strip { grid-template-columns: 1fr 40px; gap: 18px; margin-top: 70px; }
  .motion-site-strip__label { grid-column: 1 / -1; }
  .motion-site-strip__text { font-size: 34px; }
  .contact-grid { min-height: auto; }
  .contact-section h2 { font-size: clamp(94px, 23vw, 173px); }
  .contact-side { margin: 57px 0 0 24%; }
  .contact-side > p { font-size: 12px; }
  .contact-marquee { margin-top: 92px; font-size: 30px; }
  .footer-top { display: block; padding: 38px 0 34px; }
  .footer-logo-image { display: block; width: 215px; }
  .footer-tagline { display: block; margin: 25px 0 33px; }
  .footer-bottom { grid-template-columns: 1fr 1fr; gap: 13px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Portfolio templates */
.portfolio-page, .project-page { min-height: 100vh; color: var(--white); background: var(--black); }
.portfolio-hero { padding-top: 180px; padding-bottom: 75px; background: var(--red); }
.portfolio-hero h1, .project-detail h1 { margin: 28px 0 0; font-family: var(--display); font-size: clamp(90px, 15vw, 220px); line-height: .73; font-weight: 400; letter-spacing: -.05em; text-transform: uppercase; }
.portfolio-hero h1 em { color: var(--black); font-style: normal; }
.portfolio-lead { max-width: 330px; margin: 45px 0 0 17%; font-size: 13px; line-height: 1.5; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 26px; background: var(--black); }
.portfolio-card { min-width: 0; background: #151515; transition: transform 380ms var(--ease-out), background 180ms ease; }
.portfolio-card:hover { background: #242424; }
.portfolio-card__image { aspect-ratio: 1.2 / .85; overflow: hidden; background: #292929; }
.portfolio-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 650ms var(--ease-out); }
.portfolio-card:hover .portfolio-card__image img { transform: scale(1.05); }
.portfolio-card__body { padding: 22px 24px 28px; }
.portfolio-card__body > span { color: var(--red); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.portfolio-card__body h2 { margin: 11px 0 10px; font-family: var(--display); font-size: clamp(35px, 5vw, 68px); font-weight: 400; line-height: .84; text-transform: uppercase; }
.portfolio-card__body p { max-width: 320px; margin: 0; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.45; }
.portfolio-empty { padding: 100px 0; color: rgba(255,255,255,.6); }
.project-back { display: inline-block; color: inherit; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; opacity: .75; }
.project-detail { padding-top: 170px; }
.project-detail .eyebrow { margin-top: 90px; }
.project-featured-image { max-height: 680px; margin: 70px 0 60px; overflow: hidden; }
.project-featured-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-content { max-width: 700px; margin: 50px auto 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; }
.project-content h2, .project-content h3 { color: var(--white); font-family: var(--display); font-weight: 400; line-height: .9; text-transform: uppercase; }
@media (max-width: 800px) {
  .portfolio-hero { padding-top: 135px; padding-bottom: 54px; }
  .portfolio-hero h1, .project-detail h1 { font-size: clamp(76px, 20vw, 150px); }
  .portfolio-lead { margin-left: 23%; }
  .portfolio-grid { display: block; padding-top: 46px; }
  .portfolio-card { margin-bottom: 28px; }
  .project-detail { padding-top: 135px; }
  .project-detail .eyebrow { margin-top: 58px; }
  .project-featured-image { margin-top: 45px; }
}


/* Notebook-safe hero spacing: keeps the fixed header clear of the opening copy. */
@media (min-width: 900px) and (max-height: 850px) {
  .site-header { padding-top: 14px; padding-bottom: 12px; }
  .site-header--scrolled { padding-top: 10px; padding-bottom: 10px; }
  .hero-section__copy { left: 7.5vw; bottom: 10vh; width: min(680px, 62vw); }
  .hero-section h1 { font-size: clamp(64px, 10.2vw, 154px); line-height: .8; }
  .hero-section__intro { margin-top: 24px; }
}