/* Build B2: fonts. The three Adobe Typekit faces copied from another agency's subscription (neue-haas-grotesk-display 500/600, roc-grotesk 400)
   are replaced by open-licence (SIL OFL 1.1) Inter Tight (display/headlines/UI) and Archivo (body), self-hosted, latin subset, same weights as before. */
@font-face { font-family: "Inter Tight"; src: url("assets/fonts/inter-tight-latin-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; size-adjust: 92%; }
@font-face { font-family: "Inter Tight"; src: url("assets/fonts/inter-tight-latin-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; size-adjust: 92%; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-latin-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  --bg: oklch(97.96% 0.0017 67.8);
  --surface: oklch(100% 0 89.88);
  --fg: oklch(0% 0 0);
  --muted: oklch(51.03% 0 89.88);
  --border: oklch(86.78% 0.0076 80.72);
  --accent: var(--orange); /* r2 item 3: was a yellow, oklch(86.62% 0.1682 89.21) */
  --teal: oklch(76.93% 0.1264 177.36);
  --black: #000000;
  --white: #ffffff;
  --orange: #eb5423;       /* r2 item 3: the logo orange, measured from assets/taazzle/taazzle-logo-orange-dark.png */
  --orange-ink: #c43e12;   /* darker shade of the same orange, ONLY for small orange text on light grounds (4.89:1 on --ground) */
  --yellow: var(--orange); /* old token name kept so every rule, including the hero reel, now paints the logo orange */
  --ground: #f9f8f7;
  --line: #d6d3ce;
  --teal-hex: #3eceb3;
  --display: "Inter Tight", Helvetica, Arial, sans-serif; /* Build B2: was neue-haas-grotesk-display */
  --body: "Archivo", Helvetica, Arial, sans-serif; /* Build B2: was roc-grotesk */
  --gutter: clamp(20px, 3.35vw, 54px);
  --header-h: 112px;
  --notice-h: 0px;
  /* motion tokens — the two reference easings, plus the durations every new rule derives from.
     --dur-scene mirrors the JS xPercent tween length so CSS and JS cannot drift apart. */
  --ease-expo-out: cubic-bezier(.16,1,.3,1);
  --ease-expo-in-out: cubic-bezier(.87,0,.13,1);
  --dur-fast: .32s;
  --dur-wipe: .52s;
  --dur-scene: 2s;
  --wipe-stagger: .09s;
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--black); scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--black); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
body.menu-open { overflow: hidden; }
img, video { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
/* two-tone focus ring — black outline reads on light/orange surfaces, orange outer ring reads on black surfaces */
:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; box-shadow: 0 0 0 8px var(--yellow); }
.skip-link { position: fixed; left: 16px; top: 12px; transform: translateY(-140%); padding: 12px 16px; background: var(--black); color: var(--white); z-index: 200; }
.skip-link:focus { transform: translateY(0); }

.preview-notice { display: none; }
.site-header { height: var(--header-h); display: grid; grid-template-columns: minmax(170px, 1fr) auto auto; align-items: center; gap: 36px; padding: 0 var(--gutter); position: relative; z-index: 80; background: var(--ground); }
.site-header.over-media { position: absolute; top: var(--notice-h); left: 0; right: 0; background: transparent; color: var(--white); }
.wordmark { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: .86; letter-spacing: -.055em; word-spacing: 0.143em; text-transform: uppercase; width: max-content; }
.wordmark span { display: block; }
.wordmark img { width: 170px; height: auto; max-height: 56px; object-fit: contain; }
.logo-on-light img { width: 190px; }
.main-nav { display: flex; align-items: center; gap: clamp(24px, 4vw, 68px); font-family: var(--display); font-weight: 600; }
.main-nav a { position: relative; padding: 14px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 2px; background: currentColor; transition: right .22s ease; }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }
.menu-button { width: 46px; height: 46px; border: 1px solid currentColor; background: transparent; display: none; place-items: center; cursor: pointer; }
.menu-button::before, .menu-button::after { content: ""; width: 25px; height: 1px; background: currentColor; position: absolute; transition: transform .2s ease; }
.menu-button::before { transform: translateY(-5px); }
.menu-button::after { transform: translateY(5px); }
.menu-button[aria-expanded="true"]::before { transform: rotate(45deg); }
.menu-button[aria-expanded="true"]::after { transform: rotate(-45deg); }

.hero { min-height: calc(100vh - var(--notice-h)); position: relative; overflow: hidden; background: var(--black); color: var(--white); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; will-change: transform; }
/* initial loader — the real Taazzle mark travels right-to-left while the page becomes drawable */
html.is-loading { overflow: hidden; }
.initial-loader { position: fixed; inset: 0; z-index: 400; display: grid; align-items: center; overflow: hidden; background: var(--black); color: var(--white); pointer-events: auto; opacity: 1; transition: opacity var(--dur-fast) ease; }
.initial-loader__track { width: 100%; overflow: hidden; }
.initial-loader__logo { width: clamp(190px, 23vw, 360px); height: auto; margin-left: auto; margin-right: 0; animation: loader-logo-pass 1.15s var(--ease-expo-in-out) infinite; will-change: transform, opacity; }
.initial-loader.is-clear { opacity: 0; pointer-events: none; }
@keyframes loader-logo-pass {
  0% { transform: translateX(115%); opacity: 0; }
  16% { opacity: 1; }
  84% { opacity: 1; }
  100% { transform: translateX(calc(-100vw - 115%)); opacity: 0; }
}

/* route wipe — two stacked panels, ground leading black in, black leading out. bottom→top, no orange wash */
.page-wipe { position: fixed; inset: 0; z-index: 300; background: transparent; pointer-events: none; }
.page-wipe::before, .page-wipe::after { content: ""; position: absolute; inset: 0; transform: translateY(100%); transition: transform var(--dur-wipe) var(--ease-expo-in-out); }
.page-wipe::before { z-index: 1; background: var(--ground); }
.page-wipe::after { z-index: 2; background: var(--black); }
.page-wipe.is-covering::before { transform: translateY(0); }
.page-wipe.is-covering::after { transform: translateY(0); transition-delay: var(--wipe-stagger); }
.page-wipe.is-revealing::before, .page-wipe.is-revealing::after { transform: translateY(0); transition: none; }
.page-wipe.is-revealing.is-clear::before { transform: translateY(-100%); transition: transform var(--dur-wipe) var(--ease-expo-in-out) var(--wipe-stagger); }
.page-wipe.is-revealing.is-clear::after { transform: translateY(-100%); transition: transform var(--dur-wipe) var(--ease-expo-in-out); }
.page-wipe__logo { position: absolute; top: 50%; right: 0; z-index: 3; width: clamp(190px, 23vw, 360px); height: auto; opacity: 0; transform: translate(115%, -50%); pointer-events: none; }
.page-wipe.is-covering .page-wipe__logo { animation: wipe-logo-pass .68s var(--ease-expo-in-out) both; }
.page-wipe.is-revealing .page-wipe__logo { display: none; }
@keyframes wipe-logo-pass {
  0%, 18% { transform: translate(115%, -50%); opacity: 0; }
  34% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(calc(-100vw - 115%), -50%); opacity: 0; }
}
/* one navigation at a time — the overlay itself is pointer-events:none, so it keeps rendering and animating */
html.is-navigating { cursor: progress; }
html.is-navigating body { pointer-events: none; }
html.is-navigating .page-wipe { pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.72) 55%, rgba(0,0,0,.82)); pointer-events: none; }
.hero-content { position: relative; z-index: 2; min-height: calc(100vh - var(--notice-h)); display: grid; grid-template-rows: 1fr auto; align-items: center; padding: calc(var(--header-h) + 56px) var(--gutter) 44px; }
.hero-title { margin: 0 auto; max-width: 1220px; font-family: var(--display); font-size: clamp(74px, 11vw, 174px); font-weight: 500; letter-spacing: -.015em; word-spacing: 0; line-height: 1; text-align: center; text-wrap: balance; }
.hero-title span { display: block; }
.hero-footer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.hero-kicker { max-width: 480px; font-size: 18px; }
.hero-kicker strong { display: block; font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; }
.hero-motion-toggle { position: absolute; z-index: 4; top: calc(var(--header-h) + 16px); right: var(--gutter); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid currentColor; background: var(--black); color: var(--white); font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .07em; cursor: pointer; transition: background .2s ease, color .2s ease; }
.hero-motion-toggle:hover { background: var(--yellow); color: var(--black); }
.hero-motion-toggle:active { background: var(--black); color: var(--yellow); }
.text-link { font-family: var(--display); font-weight: 600; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; }
.text-link::after { content: "→"; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; transition: background .2s ease, color .2s ease; }
.text-link:hover::after { background: var(--yellow); color: var(--black); border-color: var(--yellow); }

.section { padding: clamp(78px, 9vw, 148px) var(--gutter); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 2.2fr) auto; align-items: end; gap: 30px; margin-bottom: 58px; }
.eyebrow { margin: 0; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.section-title { margin: 0; max-width: 900px; font-family: var(--display); font-size: clamp(48px, 7vw, 108px); font-weight: 500; letter-spacing: -.015em; word-spacing: 0; line-height: 1; text-wrap: balance; }
.section-intro { max-width: 460px; margin: 18px 0 0; color: #666666; font-size: 18px; }
/* Direct contact — rendered by renderDirectContact() from data.js company.contacts/emails.
   Tap targets are 44px minimum so a thumb hits them: this is the only route a visitor has
   to reach the team, since the enquiry form has no backend and deliberately does not
   claim to send anything. */
.direct-contact { margin-top: 18px; }
.contact-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.contact-list a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; padding: 10px 18px; border: 1px solid var(--border); color: var(--fg); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.contact-list a:hover { background: var(--fg); border-color: var(--fg); color: var(--white); }
.contact-list a:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.contact-list strong { font-family: var(--display); font-size: 15px; font-weight: 400; }
.contact-list span { font-size: 16px; color: inherit; opacity: .78; }
.rail-controls { display: flex; gap: 8px; }
.rail-button { width: 52px; height: 52px; border: 1px solid var(--black); background: transparent; display: grid; place-items: center; cursor: pointer; font-family: var(--display); font-size: 22px; transition: background .2s ease, color .2s ease; }
.rail-button:hover:not(:disabled) { background: var(--black); color: var(--white); }
.rail-button:disabled { opacity: .34; cursor: not-allowed; }
.rail-wrap { overflow: hidden; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(420px, 43vw, 620px); gap: 24px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.project-card { min-height: 610px; position: relative; overflow: hidden; background: var(--black); color: var(--white); }
.project-card > a { display: block; min-height: inherit; }
.project-card img { height: 610px; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 44%, rgba(0,0,0,.72)); pointer-events: none; }
.project-card:hover img { transform: scale(1.025); }
.card-content { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.card-title { margin: 0; font-family: var(--display); font-size: clamp(42px, 4.5vw, 76px); font-weight: 500; letter-spacing: -.015em; word-spacing: 0; line-height: 1; }
.card-meta { font-size: 13px; margin-top: 14px; }
.card-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid currentColor; transition: transform var(--dur-fast) var(--ease-expo-out); }
.project-card:hover .card-arrow, .project-card:focus-within .card-arrow { transform: translate(5px, -5px); }
.project-card:active .card-arrow { transform: translate(2px, -2px); }
.media-label { position: absolute; z-index: 3; top: 16px; left: 16px; max-width: 230px; padding: 8px 10px; background: rgba(0,0,0,.78); color: var(--white); font-size: 10px; line-height: 1.25; text-transform: uppercase; letter-spacing: .07em; }
.rail-status { margin-top: 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
.progress-track { height: 2px; background: var(--line); overflow: hidden; }
.progress-bar { height: 100%; background: var(--black); width: 20%; transition: width .25s ease; }
.position-label { font-family: var(--display); font-size: 13px; min-width: 72px; text-align: right; }

.services-section { background: var(--black); color: var(--white); border-color: #333333; overflow: clip; }
.services-section .section-intro { color: #aaaaaa; }
.services-showcase-section { padding-bottom: clamp(38px, 5vw, 72px); background: var(--ground); color: var(--black); border-color: var(--line); }
.services-showcase-section .section-intro { color: #666666; }
.services-showcase-head { grid-template-columns: minmax(130px, .8fr) minmax(0, 2.2fr); }
.service-stage { --parallax-x: 0px; --parallax-y: 0px; position: relative; height: clamp(600px, 72vh, 760px); overflow: hidden; isolation: isolate; background: var(--ground); color: var(--black); cursor: grab; touch-action: pan-y; }
.service-stage:active { cursor: grabbing; }
.service-slides, .service-slide { position: absolute; inset: 0; }
.service-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(34px, 5vw, 72px); visibility: hidden; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity .72s cubic-bezier(.455,.03,.515,.955), visibility 0s linear .72s; }
.service-slide.active, .service-slide.is-leaving { visibility: visible; }
.service-slide.active { opacity: 1; pointer-events: auto; transition-delay: 0s; }
.service-slide.is-leaving { opacity: 0; transition-delay: 0s; }
.service-slide-art { grid-column: 2; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--black); }
.service-slide-media { width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: translate3d(calc(var(--parallax-x) * -1), calc(var(--parallax-y) * -1), 0) scale(1.04); transition: transform 1.15s cubic-bezier(.2,.7,.2,1), opacity .72s ease; will-change: transform; }
.service-slide.active .service-slide-media { opacity: 1; transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1); }
.service-slide.is-leaving .service-slide-media { opacity: .35; transform: translate3d(calc(var(--parallax-x) * -1), var(--parallax-y), 0) scale(1.03); }
.service-slide-content { grid-column: 1; grid-row: 1; position: relative; z-index: 7; display: grid; justify-items: start; text-align: left; pointer-events: none; }
.service-slide-number { color: var(--yellow); font-family: var(--display); font-size: 16px; font-weight: 700; }
.service-slide-title { max-width: 700px; margin: 20px 0 0; font-family: var(--display); font-size: clamp(52px, 6.4vw, 96px); font-weight: 500; letter-spacing: -.015em; word-spacing: 0; line-height: 1; text-wrap: balance; }
.service-slide-title a { display: block; color: var(--black); pointer-events: auto; transform: scale(1); transform-origin: 0 55%; transition: transform 1s var(--ease-expo-out); }
.service-slide-description { max-width: 600px; margin: 28px 0 0; color: var(--black); font-size: 18px; }
.service-slide-deliverables { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.service-slide-deliverables li::before { content: "— "; color: var(--yellow); }
/* reference hover — scale only, colour and weight untouched */
.service-slide.active .service-slide-title a:hover, .service-slide.active .service-slide-title a:focus-visible { transform: scale(1.05); }
.service-title-mask { display: block; overflow: hidden; padding: .08em .08em .14em; margin: -.08em; }
.service-title-inner { display: block; opacity: 0; transform: translateY(112%) rotate(1deg); transition: transform .82s cubic-bezier(.16,1,.3,1) .18s, opacity .25s ease .18s; }
.service-slide.active .service-title-inner { opacity: 1; transform: translateY(0) rotate(0); }
.service-stage[data-direction="prev"] .service-slide.is-leaving .service-title-inner { transform: translateY(112%) rotate(1deg); }
.service-stage[data-direction="next"] .service-slide.is-leaving .service-title-inner { transform: translateY(-112%) rotate(-1deg); }
/* scene change is owned by the JS xPercent tween — the outer opacity/visibility transition would cross-fade against it.
   Both slides stay fully visible until the JS removes the class on cleanup. Nested title/CTA/media motion is untouched. */
.service-stage.is-scene-changing .service-slide { transition: none; will-change: transform; }
.service-stage.is-scene-changing .service-slide.active,
.service-stage.is-scene-changing .service-slide.is-leaving { visibility: visible; opacity: 1; }
.service-slide-cta { position: relative; z-index: 5; min-height: 44px; margin-top: 30px; padding: 10px 4px 7px; overflow: hidden; font-family: var(--display); font-size: 14px; font-weight: 600; pointer-events: auto; }
.service-slide-cta span:first-child { display: block; opacity: 0; transform: translateY(120%); transition: transform .58s cubic-bezier(.16,1,.3,1) .58s, opacity .22s ease .58s; }
.service-slide-cta span:last-child { position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.16,1,.3,1) .68s; }
.service-slide.active .service-slide-cta span:first-child { opacity: 1; transform: translateY(0); }
.service-slide.active .service-slide-cta span:last-child { transform: scaleX(1); }
.service-slide-summary { position: absolute; left: var(--gutter); bottom: 34px; z-index: 5; width: min(420px, calc(100% - (var(--gutter) * 2))); margin: 0; font-size: 16px; opacity: 0; transform: translateY(18px); transition: opacity .45s ease .52s, transform .62s cubic-bezier(.16,1,.3,1) .52s; }
.service-slide.active .service-slide-summary { opacity: 1; transform: translateY(0); }
.service-slide-index { position: absolute; right: 24px; top: 20px; z-index: 5; font-family: var(--display); font-size: 13px; letter-spacing: .08em; }
.service-zone { position: absolute; top: auto; bottom: 20px; width: 52px; height: 52px; z-index: 9; border: 1px solid var(--black); background: var(--ground); color: var(--black); cursor: pointer; }
.service-zone-prev { left: 24px; }
.service-zone-next { left: 84px; }
.service-zone-cursor { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--display); font-size: 22px; opacity: 1; transition: background .2s ease, color .2s ease; pointer-events: none; }
.service-zone:hover .service-zone-cursor, .service-zone:focus-visible .service-zone-cursor { background: var(--black); color: var(--white); }
.service-zone:active .service-zone-cursor { background: var(--yellow); color: var(--black); }
.service-pagination { position: absolute; right: 24px; bottom: 24px; z-index: 7; display: flex; }
.service-marker { width: 44px; height: 44px; padding: 0 7px; border: 0; background: transparent; cursor: pointer; }
.service-marker span { display: block; width: 100%; height: 3px; border: 1px solid var(--black); transition: background .5s ease, transform .25s ease; }
.service-marker:hover span { transform: scaleY(2); }
.service-marker[aria-current="true"] span { background: var(--black); }
.service-stage-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; }
.services-section .service-stage-footer .text-link:hover::after { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.services-showcase-section .position-label { color: var(--black); text-align: left; }

.worldwide-section { background: var(--black); color: var(--white); border-color: var(--black); overflow: hidden; }
.worldwide-section .section-intro { color: var(--white); }
.worldwide-note { color: var(--muted); }
.worldwide-head { grid-template-columns: minmax(130px, .8fr) minmax(0, 2.2fr); }
.worldwide-map-frame { position: relative; min-height: clamp(540px, 63vw, 790px); overflow: hidden; isolation: isolate; background: var(--black); border-top: 1px solid var(--muted); border-bottom: 1px solid var(--muted); }
.worldwide-map-art { position: absolute; inset: 0; color: var(--ground); opacity: .24; pointer-events: none; }
.worldwide-map-art svg { display: block; width: 100%; height: 100%; }
.worldwide-pins, .worldwide-popup-layer { position: absolute; inset: 0; }
.worldwide-popup-layer { z-index: 5; pointer-events: none; }
.worldwide-pin { position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; background: transparent; cursor: pointer; opacity: 0; transform: translateY(14px) scale(.72); transition: opacity .38s ease var(--pin-delay), transform .58s var(--ease-expo-out) var(--pin-delay); }
.worldwide-map-frame.is-visible .worldwide-pin { opacity: 1; transform: translate(var(--pin-offset-x, 0), var(--pin-offset-y, 0)) scale(1); }
.worldwide-pin::before, .worldwide-pin::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.worldwide-pin::before { width: 24px; height: 24px; border: 1px solid var(--white); opacity: .56; transition: transform var(--dur-fast) var(--ease-expo-out), opacity var(--dur-fast) ease; }
.worldwide-pin::after { width: 8px; height: 8px; background: var(--yellow); }
.worldwide-pin.is-home::before { width: 34px; height: 34px; opacity: 1; }
.worldwide-pin.is-home::after { width: 11px; height: 11px; }
.worldwide-pin-label { position: absolute; left: calc(50% + 18px); top: 50%; width: max-content; padding: 6px 8px; border: 1px solid var(--white); background: var(--black); color: var(--white); font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(calc(-50% + 4px)); transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-expo-out); pointer-events: none; }
/* FIX 2026-09-22: flip the label to the LEFT of the pin for pins near the map's right
   edge. The label is pinned at left:calc(50% + 18px) with width:max-content and no
   flip, so the easternmost pin (Auckland, lng 174.76) pushed its label past the
   viewport at every width - 3.9px over at 1440, 31.8px at 768. site.js adds
   .flip-label to any pin sitting past 78% of the map width. */
.worldwide-pin.flip-label .worldwide-pin-label { left: auto; right: calc(50% + 18px); }

/* Labels appear on hover, keyboard focus or when a pin's card is open — never all at once.
   `.worldwide-pin.is-home` used to be in this list, which was harmless while exactly one of
   Taazzle's own pins existed. With twelve, every Indian city label was drawn permanently and
   they overlapped into an unreadable stack of boxes. The dot is the always-visible element;
   the name belongs to the pin you are pointing at. */
.worldwide-pin:hover .worldwide-pin-label, .worldwide-pin:focus-visible .worldwide-pin-label, .worldwide-pin[aria-expanded="true"] .worldwide-pin-label { opacity: 1; transform: translateY(-50%); }
.worldwide-pin:hover, .worldwide-pin:focus-visible, .worldwide-pin[aria-expanded="true"] { transform: translate(var(--pin-offset-x, 0), calc(var(--pin-offset-y, 0) - 5px)) scale(1); }
.worldwide-pin:hover::before, .worldwide-pin:focus-visible::before, .worldwide-pin[aria-expanded="true"]::before { animation: worldwide-ring 1.15s ease-out infinite; }
@keyframes worldwide-ring { 0% { transform: translate(-50%, -50%) scale(.75); opacity: .85; } 100% { transform: translate(-50%, -50%) scale(1.65); opacity: 0; } }
.worldwide-popup { position: absolute; z-index: 6; width: min(336px, calc(100% - 24px)); overflow: hidden; pointer-events: auto; border: 1px solid var(--white); background: var(--black); color: var(--white); opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s var(--ease-expo-out); }
.worldwide-popup.is-open { opacity: 1; transform: translateY(0); }
.worldwide-popup picture, .worldwide-popup img { display: block; width: 100%; }
.worldwide-popup img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.worldwide-popup-copy { display: block; padding: 18px 20px 20px; }
.worldwide-service { display: block; margin-bottom: 10px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.worldwide-popup h3, .worldwide-mobile-card h3 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -.01em; word-spacing: 0; }
.worldwide-location { display: block; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.worldwide-popup-action { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--muted); font-family: var(--display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.worldwide-popup-action i { font-style: normal; font-size: 18px; transition: transform var(--dur-fast) var(--ease-expo-out); }
.worldwide-popup:hover .worldwide-popup-action i, .worldwide-popup:focus-visible .worldwide-popup-action i { transform: translate(5px, -5px); }
.worldwide-note { max-width: 680px; margin: 20px 0 0; font-size: 13px; }
.worldwide-mobile { display: none; }

@media (max-width: 900px) {
  .worldwide-popup { width: min(280px, calc(100% - 20px)); }
}

@media (max-width: 767px) {
  .worldwide-section { padding-inline: 0; }
  .worldwide-head, .worldwide-note { margin-inline: var(--gutter); }
  .worldwide-map-frame { min-height: 300px; pointer-events: none; }
  .worldwide-map-art svg { width: 100%; }
  .worldwide-pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 1; transform: translate(var(--pin-offset-x, 0), var(--pin-offset-y, 0)); }
  .worldwide-pin::before { width: 16px; height: 16px; }
  .worldwide-pin::after { width: 6px; height: 6px; }
  .worldwide-pin-label { display: none; }
  .worldwide-pin:hover::before, .worldwide-pin:focus-visible::before, .worldwide-pin[aria-expanded="true"]::before { animation: none; }
  .worldwide-popup-layer { display: none; }
  .worldwide-mobile { display: grid; gap: 44px; padding: 42px 0 8px; }
  .worldwide-mobile-group h3 { margin: 0 var(--gutter) 16px; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  /* FIX 2026-09-22: the swipe row was correct but unusable, because its PARENT stretched.
   .worldwide-mobile-group is a grid item and grid items default to min-width:auto, so the
   group sized itself to its content (measured 1357px inside a 390px viewport) and the row
   inherited that width. overflow-x:auto then had nothing to clip: scrollWidth ==
   clientWidth == 1357, scrollLeft stayed 0, and 18 benchmark cards sat off-screen and
   unreachable on every phone. The section only LOOKED fine because the ancestor
   .worldwide-section has overflow-x:hidden, which HID the overflow instead of making it
   scrollable - so there was no page-level h-scroll to give the bug away.
   min-width:0 lets the group respect its viewport-width track again. */
.worldwide-mobile-group { min-width: 0; }
.worldwide-mobile-row { display: grid; grid-auto-flow: column; grid-auto-columns: 82vw; gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gutter) 6px; }
  .worldwide-mobile-row::-webkit-scrollbar { display: none; }
  .worldwide-mobile-card { display: block; scroll-snap-align: start; border: 1px solid var(--white); background: var(--black); color: var(--white); }
  .worldwide-mobile-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
  .worldwide-mobile-card-copy { display: block; padding: 18px 18px 20px; }
  .worldwide-mobile-card:active { transform: translateY(-2px); }
}

.js-motion .hero-title span { opacity: 0; transform: translateY(105%); transition: opacity .35s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.js-motion .hero-title span:nth-child(2) { transition-delay: .1s; }
.js-motion .hero-kicker, .js-motion .hero-footer .text-link { opacity: 0; transform: translateY(24px); transition: opacity .55s ease .48s, transform .75s cubic-bezier(.16,1,.3,1) .48s; }
.js-motion.motion-loaded .hero-title span, .js-motion.motion-loaded .hero-kicker, .js-motion.motion-loaded .hero-footer .text-link { opacity: 1; transform: translateY(0); }
.js-motion [data-reveal] { opacity: 0; transform: translateY(42px); transition: opacity .55s ease var(--reveal-delay, 0ms), transform .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms); }
.js-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black); border-left: 1px solid var(--black); }
.client-slot { min-height: 180px; padding: 30px; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); display: grid; place-items: center; gap: 14px; text-align: center; background: var(--white); }
.client-slot img { width: min(100%, 180px); height: 64px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--dur-fast) ease, opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-expo-out); }
.client-slot:hover img { filter: grayscale(0); opacity: 1; transform: translateY(-8px) scale(1.04); }
.client-wordmark { font-family: var(--display); font-size: 18px; }
.clients-section .client-wordmark { font-size: clamp(22px, 2.25vw, 40px); line-height: 1; letter-spacing: -.025em; word-spacing: 0.065em; }
.client-slot span { display: block; font-family: var(--display); font-size: 12px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .client-slot img { transition: none; }
  .client-slot:hover img { transform: none; }
}

.project-scrolly, .project-index-scrolly { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .58fr); grid-template-rows: minmax(620px, 78vh); gap: 0; overflow: hidden; background: var(--black); }
.project-index-scrolly { padding: 0 var(--gutter) 120px; }
/* Portfolio segmentation — Uttam asked for the portfolio to be segmented (2026-09-20 call).
   The container is a 2-column grid with ONE fixed row (line 303), so a third child would
   become a grid item and land in the stage/steps row. The filter row therefore declares its
   own row and spans both columns; `auto` keeps the stage row's minmax(620px,78vh) intact. */
.project-index-scrolly:has(.project-filters) { grid-template-rows: auto minmax(620px, 78vh); }
.project-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid #333333; background: var(--black); }
.project-filter { display: inline-flex; align-items: baseline; gap: 8px; padding: 14px 20px; border: 0; border-right: 1px solid #333333; background: transparent; color: var(--white); font-family: var(--display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: .34; transition: opacity .3s ease, background .3s ease; }
.project-filter small { font-size: 10px; opacity: .6; }
.project-filter:hover, .project-filter.is-active { opacity: 1; }
.polish-v2 .project-filter.is-active { box-shadow: inset 0 -3px 0 var(--yellow); }
.project-filter:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; }
.project-scrolly-stage, .service-scrolly-stage { min-width: 0; min-height: 0; overflow: hidden; background: var(--black); }
.showcase-stage { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; color: var(--white); }
.showcase-stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity .32s ease, transform 1.25s var(--ease-expo-out), clip-path .9s var(--ease-expo-out); clip-path: inset(0); }
.showcase-stage img.is-switching { opacity: .16; transform: scale(1.08); clip-path: inset(3% 3% 3% 3%); }
.showcase-frame { position: absolute; z-index: 2; width: clamp(220px, 30vw, 430px); aspect-ratio: .78; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.93); border: 1px solid rgba(255,255,255,.72); opacity: .7; transition: transform 1.1s var(--ease-expo-out), opacity .5s ease; pointer-events: none; }
.showcase-stage:hover .showcase-frame, .is-entering .showcase-frame { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.showcase-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.78)); }
.showcase-count { position: absolute; top: 22px; right: 24px; font-family: var(--display); font-size: 13px; letter-spacing: .08em; }
.showcase-copy { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; gap: 18px; padding: clamp(26px, 5vw, 72px); text-align: center; }
.showcase-copy > span:first-child { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.showcase-title-mask { display: block; max-width: 100%; overflow: hidden; padding: .12em .08em; margin: -.12em -.08em; }
.showcase-copy strong { display: block; max-width: 12ch; font-family: var(--display); font-size: clamp(68px, 8.6vw, 132px); font-weight: 400; line-height: 1; letter-spacing: -.015em; word-spacing: 0; transition: transform .7s var(--ease-expo-out), opacity .25s ease; }
.showcase-copy strong.is-switching { transform: translateY(115%) rotate(1deg); opacity: 0; }
.is-entering .showcase-copy strong { animation: showcase-title-enter .72s var(--ease-expo-out) both; }
@keyframes showcase-title-enter { from { transform: translateY(-115%) rotate(-1deg); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.showcase-cta { min-height: 44px; display: inline-flex; align-items: center; gap: 14px; margin-top: 4px; padding: 0 4px 5px; border-bottom: 1px solid currentColor; color: var(--white); font-family: var(--display); font-size: 14px; font-weight: 600; text-transform: lowercase; transition: transform var(--dur-fast) var(--ease-expo-out); }
.showcase-stage:hover .showcase-cta { transform: scale(1.05); }
.showcase-cta i { font-style: normal; font-size: 18px; }
.project-scrolly-steps, .service-scrolly-steps { position: relative; overflow: hidden; overscroll-behavior: contain; scrollbar-width: none; border-left: 1px solid #333333; background: var(--black); color: var(--white); }
.project-scrolly-steps::-webkit-scrollbar, .service-scrolly-steps::-webkit-scrollbar { display: none; }
.project-scrolly-steps::before, .project-scrolly-steps::after, .service-scrolly-steps::before, .service-scrolly-steps::after { content: ""; position: absolute; left: 0; right: 0; z-index: 3; height: 30%; pointer-events: none; }
.project-scrolly-steps::before, .service-scrolly-steps::before { top: 0; background: linear-gradient(var(--black), transparent); }
.project-scrolly-steps::after, .service-scrolly-steps::after { bottom: 0; background: linear-gradient(transparent, var(--black)); }
.showcase-reel-track { padding-block: calc((max(620px, 78vh) - 88px) / 2); transition: transform .72s var(--ease-expo-out); will-change: transform; }
.showcase-option { width: 100%; min-height: 88px; display: grid; grid-template-columns: 38px 1fr 28px; align-content: center; align-items: center; gap: 14px; padding: 14px 24px; border: 0; border-bottom: 1px solid #333333; background: var(--black); color: var(--white); text-align: left; cursor: pointer; opacity: .28; transition: opacity .3s ease, color .3s ease, transform .72s var(--ease-expo-out); }
.showcase-option span { font-family: var(--display); font-size: 11px; letter-spacing: .08em; }
.showcase-option strong { font-family: var(--display); font-size: clamp(20px, 2vw, 31px); font-weight: 400; line-height: 1; }
.showcase-option i { font-style: normal; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease; }
.showcase-option:hover, .showcase-option.is-active { opacity: 1; color: var(--white); transform: translateX(8px); }
.polish-v2 .showcase-option.is-active { box-shadow: inset 3px 0 0 var(--yellow); }
.showcase-option:hover i, .showcase-option.is-active i { opacity: 1; transform: translateX(0); }
.showcase-option:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; box-shadow: none; }
.showcase-mobile-controls { display: none; }
.showcase-mobile-button { width: 48px; min-height: 48px; border: 1px solid var(--white); background: rgba(0,0,0,.78); color: var(--white); display: grid; place-items: center; cursor: pointer; font-family: var(--display); font-size: 20px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.showcase-mobile-button small { display: none; }
.showcase-mobile-button:hover, .showcase-mobile-button:focus-visible { background: var(--yellow); color: var(--black); }
.showcase-mobile-button:active { transform: scale(.94); }
.showcase-instruction { margin: 14px 0 0; font-family: var(--display); font-size: 13px; color: #666666; }
.project-scrolly-index { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.project-scrolly-step h3 { margin: 22px 0 0; font-family: var(--display); font-size: clamp(46px, 6vw, 92px); font-weight: 500; letter-spacing: -.015em; word-spacing: 0; line-height: 1; }
.project-scrolly-step p { margin: 22px 0 0; }
.project-scrolly-link { display: inline-block; width: max-content; margin-top: 30px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-family: var(--display); font-weight: 600; }

.service-story-index { padding-top: 0; }
.service-story-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); gap: clamp(36px, 7vw, 110px); align-items: center; min-height: 650px; padding: clamp(64px, 8vw, 120px) 0; border-top: 1px solid var(--black); }
.service-story-row:last-child { border-bottom: 1px solid var(--black); }
.service-story-copy h2 { max-width: 720px; margin: 20px 0 0; font-family: var(--display); font-size: clamp(52px, 7vw, 104px); font-weight: 500; letter-spacing: -.015em; word-spacing: 0; line-height: 1; }
.service-story-copy > p { max-width: 620px; margin: 28px 0 0; font-size: 18px; }
.service-story-copy ul { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; font-family: var(--display); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.service-story-copy li::before { content: "— "; color: var(--yellow); }
.service-story-copy .text-link { margin-top: 30px; }
.service-story-art { aspect-ratio: 1; overflow: hidden; background: var(--black); }
.service-story-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-expo-out); }
.service-story-art:hover img { transform: scale(1.025); }

.service-scrolly { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .58fr); grid-template-rows: minmax(620px, 78vh); gap: 0; overflow: hidden; background: var(--black); }
.service-index-scrolly { padding: 0 var(--gutter) 120px; }
.mobile-scrolly-figure { display: none; }
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 500; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; will-change: transform; pointer-events: none; }

.bcri-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--black); border-left: 1px solid var(--black); }
.bcri-step { min-height: 300px; padding: 30px; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); }
.bcri-step > span { display: block; color: var(--yellow); font-family: var(--display); font-size: 44px; font-weight: 600; }
.bcri-step h3 { margin: 54px 0 0; font-family: var(--display); font-size: 26px; line-height: 1; }
.bcri-step p { margin: 18px 0 0; color: var(--black); font-size: 14px; }
.capability-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--black); border-left: 1px solid var(--black); }
.capability-list > div { min-height: 100px; padding: 22px; border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: center; }
.capability-list span { font-family: var(--display); font-size: 11px; }
.capability-list strong { font-family: var(--display); font-size: 18px; }

.contact-band { background: var(--white); border-top: 2px solid var(--black); }
.contact-band .section-head { grid-template-columns: 1fr auto; }
.primary-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; border: 2px solid var(--black); background: var(--black); color: var(--white); font-family: var(--display); font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease; }
.primary-button:hover { background: var(--yellow); color: var(--black); border-color: var(--black); }

.page-hero { padding: clamp(92px, 11vw, 178px) var(--gutter) clamp(64px, 8vw, 120px); }
.page-title { margin: 0; max-width: 1200px; font-family: var(--display); font-size: clamp(72px, 12vw, 184px); line-height: 1; letter-spacing: -.015em; word-spacing: 0; font-weight: 500; text-wrap: balance; }
/* r7: cap the desktop hero headline and page titles by screen height too, so the looser r6 spacing still fits the first screen (buttons + reel bar on screen as on r4). Phones/tablets (<=900px) unchanged. */
@media (min-width: 901px) { .hero-title { font-size: clamp(74px, min(10.2vw, 15vh), 174px); } .page-title { font-size: clamp(72px, min(12vw, 16vh), 184px); } }
.page-deck { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; border-top: 1px solid var(--black); padding-top: 24px; }
.page-deck p { max-width: 520px; margin: 0; font-size: 18px; }
.index-grid { padding: 0 var(--gutter) 120px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.index-grid .project-card { min-height: 680px; }
.index-grid .project-card img { height: 680px; }
.service-index-list { padding: 0 var(--gutter) 120px; }
.service-row { display: grid; grid-template-columns: 56px minmax(180px, .6fr) minmax(0, 1.4fr) 56px; align-items: center; gap: 28px; min-height: 280px; padding: 24px 0; border-top: 1px solid var(--black); }
.service-row:last-child { border-bottom: 1px solid var(--black); }
.service-row-image { width: 100%; height: 230px; object-fit: cover; background: var(--black); }
.service-row-copy { align-self: center; }
.service-row h2 { margin: 0; font-family: var(--display); font-size: clamp(38px, 5vw, 74px); line-height: 1; letter-spacing: -.015em; word-spacing: 0; font-weight: 500; }
.service-row p { margin: 0; color: #666666; }
.service-row-copy p { margin-top: 18px; max-width: 680px; }
.service-row-copy ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-family: var(--display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.service-row-copy li::before { content: "— "; }

.detail-head { padding: 80px var(--gutter) 60px; }
.detail-title-row { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.detail-title { margin: 0; font-family: var(--display); font-size: clamp(66px, 10vw, 150px); line-height: 1; letter-spacing: -.015em; word-spacing: 0; font-weight: 500; }
.detail-year { font-family: var(--display); font-weight: 600; }
.detail-meta { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--black); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.detail-meta dt { font-family: var(--display); font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.detail-meta dd { margin: 0; }
.detail-media { height: min(74vw, 820px); object-fit: cover; }
.detail-copy { padding: 100px var(--gutter); display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1.5fr); gap: 40px; }
.detail-copy h2 { margin: 0; font-family: var(--display); font-size: 18px; }
.detail-copy p { margin: 0; max-width: 820px; font-family: var(--display); font-size: clamp(34px, 4.8vw, 68px); line-height: 1.05; letter-spacing: -.01em; word-spacing: 0; }
.detail-stats { padding: 64px var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--black); background: var(--white); }
.detail-stats > div { padding: 8px 24px; border-left: 1px solid var(--black); }
.detail-stats > div:first-child { padding-left: 0; border-left: 0; }
.detail-stats strong, .detail-stats span { display: block; }
.detail-stats strong { font-family: var(--display); font-size: clamp(44px, 6vw, 88px); line-height: 1; letter-spacing: -.015em; word-spacing: 0; }
.detail-stats span { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.deliverables { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--black); }
.deliverables li { display: grid; grid-template-columns: 34px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--black); }
.service-detail-media { margin: 0; position: relative; background: var(--black); }
.service-detail-media .detail-media { object-position: center; }
.service-method { background: var(--white); }
.service-archive { background: var(--ground); }
.service-archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.service-archive-grid .project-card { min-height: 560px; }
.service-archive-grid .project-card img { height: 560px; }
.service-source-note { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); align-items: stretch; background: var(--white); border-top: 2px solid var(--black); }
.service-source-note img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; background: var(--black); }
.service-source-note > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 90px); }
.service-source-note h3 { margin: 18px 0 24px; font-family: var(--display); font-size: clamp(38px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.015em; word-spacing: 0; }
.service-source-note p:last-child { max-width: 620px; margin: 0; font-size: 18px; }
.service-detail-nav { display: grid; grid-template-columns: 1fr 1fr; background: var(--black); color: var(--white); }
.service-detail-nav a { min-height: 190px; display: flex; flex-direction: column; justify-content: center; padding: 34px var(--gutter); border-right: 1px solid var(--white); }
.service-detail-nav a:last-child { border-right: 0; text-align: right; align-items: flex-end; }
.service-detail-nav span { margin-bottom: 14px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.service-detail-nav strong { max-width: 620px; font-family: var(--display); font-size: clamp(28px, 4vw, 58px); font-weight: 500; line-height: 1; }
.service-detail-nav a:hover { background: var(--yellow); color: var(--black); }
.project-gallery { padding: 0 var(--gutter) 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-gallery figure { margin: 0; }
.project-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--black); }
.project-gallery figcaption { padding-top: 8px; font-family: var(--display); font-size: 12px; font-weight: 600; }

.about-grid { padding: 0 var(--gutter) 120px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; }
.about-media { min-height: 660px; object-fit: cover; }
.about-copy { background: var(--white); border-top: 2px solid var(--black); padding: clamp(36px,6vw,84px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.about-copy p { margin: 0; font-family: var(--display); font-size: clamp(38px,5vw,72px); line-height: 1.05; letter-spacing: -.01em; word-spacing: 0; }
.about-copy span { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.about-copy span::before { content: ""; width: 10px; height: 10px; background: var(--yellow); flex: none; }
.leadership-grid { display: grid; gap: 24px; }
.leader { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: center; border-top: 2px solid var(--black); padding-top: 28px; }
.leader-photo { width: 260px; height: 260px; object-fit: cover; object-position: center top; display: block; }
/* A project listed before its photographs arrive. Same intent as .leader-initials: show the
   record honestly rather than render a broken image frame. */
.project-card-nophoto { position: absolute; inset: 0; display: grid; place-items: center; background: var(--black); color: var(--white); }
.project-card-nophoto span { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.leader-initials { background: var(--black); color: var(--white); display: grid; place-items: center; }
.leader-initials span { font-family: var(--display); font-size: 72px; line-height: 1; letter-spacing: -.015em; }
.leader-copy { display: flex; flex-direction: column; gap: 12px; }
.leader-copy h3 { margin: 0; font-family: var(--display); font-size: clamp(30px,3.4vw,46px); line-height: 1; letter-spacing: -.01em; }
.leader-copy p { margin: 0; font-size: 18px; max-width: 46ch; }
.leader-copy .leader-role { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.leader-copy span { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.leader-copy span::before { content: ""; width: 10px; height: 10px; background: var(--yellow); flex: none; }
@media (max-width: 640px) {
  .leader { grid-template-columns: 1fr; gap: 20px; }
  .leader-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}
.contact-layout { padding: 0 var(--gutter) 120px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; }
.contact-note { font-size: 20px; max-width: 480px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--display); font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; border: 0; border-bottom: 1px solid var(--black); background: transparent; color: var(--black); padding: 14px 0; border-radius: 0; min-height: 48px; }
.field textarea { min-height: 140px; resize: vertical; }
.form-status { min-height: 28px; margin: 18px 0; font-family: var(--display); }
.site-footer { padding: 54px var(--gutter); border-top: 1px solid var(--black); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer small { color: #666666; }

/* pressed feedback — inverted surface, orange content, contrast preserved */
.text-link:active::after { background: var(--black); color: var(--yellow); border-color: var(--yellow); transform: scale(.94); }
.rail-button:active:not(:disabled) { background: var(--black); color: var(--yellow); border-color: var(--black); transform: scale(.94); }
.primary-button:active { background: var(--black); color: var(--yellow); border-color: var(--black); transform: scale(.97); }
.menu-button:active { background: var(--yellow); color: var(--black); border-color: var(--black); }
.service-marker:active span { background: var(--yellow); border-color: var(--yellow); transform: scaleY(2); }

/* busy transition — stage-level line plus dimmed controls */
[data-service-stage][aria-busy="true"] { cursor: progress; }
[data-service-stage][aria-busy="true"] .service-zone, [data-service-stage][aria-busy="true"] .service-marker { cursor: progress; }
[data-service-stage][aria-busy="true"] .service-zone-cursor { opacity: .32; background: transparent; color: var(--white); }
[data-service-stage][aria-busy="true"] .service-marker span { opacity: .45; }
[data-service-stage][aria-busy="true"] .service-marker:hover span { transform: none; }

/* explicit aria-disabled while a transition owns the stage */
.service-zone[aria-disabled="true"], .service-marker[aria-disabled="true"] { cursor: default; }
.service-zone[aria-disabled="true"] .service-zone-cursor,
.service-zone[aria-disabled="true"]:hover .service-zone-cursor,
.service-zone[aria-disabled="true"]:focus-visible .service-zone-cursor { opacity: .32; transform: translate(-50%, -50%) scale(.86); background: transparent; color: var(--white); }
.service-zone[aria-disabled="true"]:active .service-zone-cursor { background: transparent; color: var(--white); }
.service-marker[aria-disabled="true"] span { opacity: .42; }
.service-marker[aria-disabled="true"]:hover span, .service-marker[aria-disabled="true"]:active span { transform: none; }
.service-marker[aria-disabled="true"]:active span { background: transparent; border-color: var(--white); }
.service-marker[aria-disabled="true"][aria-current="true"]:active span { background: var(--white); }

/* media shells — loading / ready / terminal failure */
@keyframes media-line { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
.project-card.is-media-loading, .service-slide.is-media-loading,
.project-card.is-media-failed, .service-slide.is-media-failed { background: var(--black); }
.project-card.is-media-loading::before, .service-slide.is-media-loading::before, [data-service-stage][aria-busy="true"]::before { content: ""; position: absolute; top: 0; left: 0; width: 42%; height: 2px; z-index: 8; background: var(--yellow); animation: media-line 1.15s linear infinite; pointer-events: none; }
.project-card.is-media-loading img { opacity: 0; }
.service-slide.is-media-loading .service-slide-media { opacity: 0; }
.project-card.is-media-ready img { opacity: 1; transition: opacity .35s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.service-slide.is-media-ready .service-slide-media { opacity: .82; }
.service-slide.active.is-media-ready .service-slide-media { opacity: .9; }
.project-card.is-media-failed img, .service-slide.is-media-failed .service-slide-media { display: none; }
.media-state { display: none; }
.project-card.is-media-failed .media-state, .service-slide.is-media-failed .media-state { position: absolute; left: 50%; top: 50%; z-index: 5; display: grid; place-items: center; width: min(84%, 300px); margin: 0; padding: 12px 14px; transform: translate(-50%, -50%); border: 1px solid var(--white); background: var(--black); color: var(--white); font-family: var(--display); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; text-align: center; pointer-events: none; }

/* form validity feedback */
.field [aria-invalid="true"] { border-bottom-width: 2px; border-bottom-color: var(--black); background: var(--yellow); color: var(--black); }
.field [aria-invalid="true"]::placeholder { color: var(--black); opacity: .7; }
.field:has([aria-invalid="true"]) label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.field-message { font-family: var(--display); font-size: 12px; font-weight: 600; line-height: 1.35; color: currentColor; }
.field-message[hidden] { display: none; }
.form-status:not(:empty) { padding: 12px 14px; border: 1px solid var(--black); background: var(--yellow); color: var(--black); }

@media (max-width: 900px) {
  :root { --header-h: 88px; }
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { position: fixed; inset: var(--notice-h) 0 0; background: var(--teal-hex); color: var(--black); padding: 120px var(--gutter) 48px; padding-top: clamp(84px, 14vh, 120px); overflow-y: auto; overscroll-behavior-y: contain; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: clamp(34px, 8vw, 64px); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s; z-index: 70; }
  .main-nav.open { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }
  /* menu link entrance — transform/opacity only, gated on js-motion so a no-JS menu stays readable */
  .js-motion .main-nav a { opacity: 0; transform: translateY(26px); transition: opacity .28s ease, transform .58s var(--ease-expo-out); }
  .js-motion .main-nav.open a { opacity: 1; transform: translateY(0); }
  .js-motion .main-nav.open a:nth-child(1) { transition-delay: .10s; }
  .js-motion .main-nav.open a:nth-child(2) { transition-delay: .16s; }
  .js-motion .main-nav.open a:nth-child(3) { transition-delay: .22s; }
  .js-motion .main-nav.open a:nth-child(4) { transition-delay: .28s; }
  .js-motion .main-nav.open a:nth-child(n+5) { transition-delay: .34s; }
  .menu-button { display: grid; position: relative; z-index: 90; }
  .site-header.over-media .menu-button[aria-expanded="true"] { color: var(--black); }
  .hero-footer { grid-template-columns: 1fr; }
  .hero-footer .text-link { justify-self: start; }
  .section-head { grid-template-columns: 1fr auto; }
  .section-head > div:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .section-head .eyebrow { grid-column: 1; grid-row: 2; }
  .section-head .rail-controls { grid-column: 2; grid-row: 2; }
  .rail { grid-auto-columns: 76vw; }
  .project-card, .project-card img { min-height: 560px; height: 560px; }
  .service-stage { height: clamp(540px, 78vh, 720px); }
  .service-slide-title { font-size: clamp(54px, 12vw, 104px); }
  .service-slide-summary { display: none; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .project-scrolly, .project-index-scrolly, .service-scrolly { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); grid-template-rows: minmax(560px, 72vh); }
  .showcase-reel-track { padding-block: calc((max(560px, 72vh) - 82px) / 2); }
  .showcase-option { min-height: 82px; padding-inline: 18px; }
  .showcase-copy strong { font-size: clamp(54px, 8vw, 80px); }
  .service-slide { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 28px; padding: 34px; }
  .service-slide-title { font-size: clamp(44px, 7vw, 68px); }
  .service-slide-description { font-size: 16px; }
  .service-story-row { grid-template-columns: 1fr 1fr; gap: 36px; }
  .bcri-grid { grid-template-columns: repeat(2, 1fr); }
  .capability-list { grid-template-columns: repeat(2, 1fr); }
  .index-grid { grid-template-columns: 1fr; }
  .detail-meta { grid-template-columns: 1fr 1fr; }
  .detail-copy, .about-grid, .contact-layout { grid-template-columns: 1fr; }
  .detail-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 0; }
  .detail-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .service-archive-grid { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 44px minmax(160px, .72fr) minmax(0, 1.28fr) 50px; }
}

/* narrow desktop band — the summary collides with the stage controls before the mobile layout takes over */
@media (min-width: 901px) and (max-width: 960px) {
  .service-slide-summary { display: none; }
}

@media (max-width: 580px) {
  :root { --notice-h: 0px; --header-h: 76px; --gutter: 18px; }
  .site-header.over-media { top: var(--notice-h); }
  .site-header { height: var(--header-h); gap: 12px; }
  .wordmark img, .logo-on-light img { width: 132px; max-height: 42px; }
  .menu-button { width: 44px; height: 44px; }
  .main-nav { inset: 0; min-height: 100dvh; padding: calc(104px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: var(--black); color: var(--white); font-size: clamp(42px, 13vw, 58px); }
  .main-nav a { width: 100%; min-height: 64px; display: flex; align-items: center; }
  .main-nav::after { content: "Taazzle India"; margin-top: auto; padding: 24px 0 8px; border-top: 1px solid currentColor; width: 100%; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .site-header.over-media .menu-button[aria-expanded="true"] { color: var(--white); }
  .hero { min-height: 100svh; }
  .hero-content { min-height: 100svh; padding: calc(var(--header-h) + 34px) var(--gutter) 28px; align-items: end; }
  .hero-title { margin: 0; max-width: 9ch; padding: 10px 12px 12px; background: rgba(0,0,0,.68); font-size: clamp(54px, 15vw, 68px); line-height: 1; letter-spacing: -.01em; text-align: left; text-wrap: wrap; }
  .hero-title span { display: inline; }
  .hero-title span + span::before { content: " "; }
  .hero-media { object-position: 70% center; opacity: .82; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35) 38%, rgba(0,0,0,.92)); }
  .hero-kicker { max-width: 35ch; padding: 12px; background: rgba(0,0,0,.76); font-size: 15px; line-height: 1.55; }
  .hero-motion-toggle { top: calc(var(--header-h) + 8px); right: var(--gutter); width: 44px; min-width: 44px; padding: 0; }
  .hero-motion-toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .hero-motion-toggle::before { content: "Ⅱ"; font-size: 16px; letter-spacing: -.15em; transform: translateX(-1px); }
  .hero-motion-toggle[aria-label="Play motion"]::before { content: "▶"; font-size: 13px; letter-spacing: 0; transform: translateX(1px); }
  .hero-footer { gap: 20px; margin-top: 28px; }
  .hero-footer .text-link { width: max-content; gap: 10px; border-bottom: 1px solid currentColor; }
  .hero-footer .text-link::after { width: 44px; height: 44px; border: 0; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .section-head, .services-showcase-head { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; }
  .section-head > div:nth-child(2), .section-head .eyebrow, .section-head .rail-controls { grid-column: 1; grid-row: auto; }
  .section-head .eyebrow { order: -1; }
  .section-head .rail-controls { display: none; }
  .section-title { max-width: 9ch; font-size: clamp(46px, 13vw, 58px); line-height: 1; letter-spacing: -.01em; }
  .section-intro { margin-top: 14px; font-size: 16px; }
  .rail { grid-auto-columns: 86vw; gap: 14px; }
  .project-card, .project-card img { min-height: 500px; height: 500px; }
  .card-content { left: 20px; right: 20px; bottom: 20px; }
  .service-stage { height: min(72vh, 620px); min-height: 500px; }
  .service-slide-title { font-size: clamp(52px, 16vw, 82px); line-height: 1; }
  .service-slide-content { gap: clamp(14px, 4vw, 20px); padding-bottom: clamp(44px, 11vw, 62px); }
  .service-slide-cta { position: relative; top: auto; left: auto; transform: none; }
  .service-slide-summary { display: none; }
  .service-slide-index { top: 18px; }
  .service-zone { top: auto; bottom: 16px; width: 52px; height: 52px; border: 1px solid var(--white); cursor: pointer; }
  .service-zone-prev { left: var(--gutter); }
  .service-zone-next { right: var(--gutter); }
  .service-zone-cursor { position: static; width: 100%; height: 100%; border: 0; border-radius: 0; opacity: 1; transform: none; }
  .service-zone:hover .service-zone-cursor, .service-zone:focus-visible .service-zone-cursor { transform: none; }
  .service-zone[aria-disabled="true"], [data-service-stage][aria-busy="true"] .service-zone { opacity: .42; }
  .service-zone[aria-disabled="true"] .service-zone-cursor,
  .service-zone[aria-disabled="true"]:hover .service-zone-cursor,
  .service-zone[aria-disabled="true"]:focus-visible .service-zone-cursor,
  [data-service-stage][aria-busy="true"] .service-zone-cursor { opacity: 1; transform: none; }
  .service-pagination { bottom: 78px; }
  .service-marker { width: 44px; padding-inline: 7px; }
  .service-stage-footer { align-items: flex-start; }
  .service-stage-footer .text-link { max-width: 190px; text-align: right; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .client-slot { min-height: 116px; padding: 18px 12px; gap: 8px; }
  .client-slot img { width: min(100%, 120px); height: 42px; }
  .client-slot span { font-size: 10px; }
  .project-index-scrolly { padding-bottom: 78px; }
  .project-filter { padding: 12px 16px; font-size: 11px; }
  .service-index-scrolly { padding-bottom: 78px; }
  .project-scrolly, .project-index-scrolly, .service-scrolly { width: calc(100% + (var(--gutter) * 2)); margin-inline: calc(var(--gutter) * -1); grid-template-columns: 1fr; grid-template-rows: clamp(500px, 74svh, 620px); position: relative; }
  .project-index-scrolly, .service-index-scrolly { width: auto; margin-inline: 0; }
  /* THE GRID TRACKS WERE NOT THE PROBLEM, and assuming they were cost two wasted rounds.
     On mobile the stage and the steps deliberately SHARE one cell (`grid-area: 1 / 1` below)
     so the step rail floats over the image. Adding a third child put the filter row into that
     same shared cell, and the real height came from the CONTENT: 11 buttons wrapped into
     6 rows x 103px = 620px, which is why an inline grid-template-rows override changed nothing.

     Two fixes, both needed:
     1. the filter strip becomes ONE scrollable row instead of wrapping (the normal mobile
        pattern for a filter bar, and it keeps every category reachable). `min-width: 0` is
        mandatory or the flex row refuses to shrink and overflow-x has nothing to clip -- the
        same failure the worldwide-mobile-group guard exists for.
     2. the stage/steps cell is pinned to row 2 so the filter owns row 1 alone. */
  .project-index-scrolly:has(.project-filters) { grid-template-rows: auto clamp(500px, 74svh, 620px); }
  .project-filters { min-width: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .project-filters::-webkit-scrollbar { display: none; }
  .project-filter { flex: 0 0 auto; align-items: center; }
  .project-index-scrolly:has(.project-filters) .project-scrolly-stage,
  .project-index-scrolly:has(.project-filters) .project-scrolly-steps { grid-area: 2 / 1; }
  .project-scrolly-stage, .service-scrolly-stage { grid-area: 1 / 1; }
  .project-scrolly-steps, .service-scrolly-steps { grid-area: 1 / 1; align-self: end; z-index: 6; height: 80px; border-left: 0; border-top: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.92); backdrop-filter: blur(12px); }
  .project-scrolly-steps::before, .project-scrolly-steps::after, .service-scrolly-steps::before, .service-scrolly-steps::after { display: none; }
  .showcase-copy { align-content: end; justify-items: start; gap: 10px; padding: 22px 88px 106px 18px; text-align: left; background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.82) 76%, rgba(0,0,0,.94)); }
  .showcase-copy strong { max-width: 13ch; font-size: clamp(34px, 9.2vw, 42px); line-height: 1; letter-spacing: -.01em; word-spacing: 0; text-wrap: balance; }
  .showcase-copy > span:first-child { max-width: 34ch; font-size: 11px; line-height: 1.4; }
  .showcase-count { top: 14px; right: 16px; }
  .showcase-stage img { object-position: var(--mobile-focus, center); }
  .showcase-scrim { background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.12) 35%, rgba(0,0,0,.7)); }
  .showcase-frame { display: none; }
  .showcase-reel-track { padding-block: 16px; }
  .showcase-option { min-height: 64px; padding: 10px 84px 10px 18px; grid-template-columns: 28px 1fr 20px; }
  .showcase-option strong { font-size: 19px; line-height: 1.08; }
  .showcase-option:hover, .showcase-option.is-active { transform: translateX(4px); }
  .showcase-cta { margin-top: 3px; min-height: 44px; }
  .showcase-mobile-controls { position: absolute; right: 12px; bottom: 91px; z-index: 8; display: grid; gap: 6px; }
  .showcase-mobile-button { width: 68px; min-height: 50px; grid-template-columns: 14px 1fr; gap: 3px; padding: 0 5px; font-size: 16px; }
  .showcase-mobile-button small { display: block; font-size: 8px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
  .showcase-instruction { margin-top: 10px; }
  .service-stage { height: 760px; min-height: 760px; }
  .service-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 22px; padding: 28px 20px 88px; }
  .service-slide-content { grid-column: 1; grid-row: 1; }
  .service-slide-art { grid-column: 1; grid-row: 2; max-height: 330px; }
  .service-slide-title { font-size: 46px; }
  .service-slide-description { margin-top: 18px; font-size: 15px; }
  .service-slide-deliverables { margin-top: 16px; }
  .service-slide-cta { margin-top: 18px; }
  .service-slide-index { display: none; }
  .service-pagination { bottom: 14px; right: 14px; }
  .service-zone { bottom: 10px; }
  .service-zone-prev { left: 10px; }
  .service-zone-next { left: 70px; }
  .service-story-row { grid-template-columns: 1fr; min-height: 0; gap: 34px; }
  .service-story-art { grid-row: 1; }
  .service-story-copy { grid-row: 2; }
  .bcri-grid { grid-template-columns: repeat(2, 1fr); }
  .bcri-step { min-height: 250px; padding: 20px 16px; }
  .bcri-step > span { font-size: 36px; }
  .bcri-step h3 { margin-top: 34px; font-size: 20px; }
  .capability-list { grid-template-columns: 1fr; }
  .contact-band .section-head { grid-template-columns: 1fr; }
  .page-hero { padding-top: 64px; padding-bottom: 56px; }
  .page-title { max-width: 10ch; font-size: clamp(54px, 15vw, 68px); line-height: 1; letter-spacing: -.01em; }
  .page-deck { margin-top: 36px; padding-top: 18px; gap: 14px; }
  .page-deck p { font-size: 16px; }
  .page-deck { grid-template-columns: 1fr; }
  .index-grid .project-card, .index-grid .project-card img { min-height: 540px; height: 540px; }
  .service-row { grid-template-columns: 1fr 48px; gap: 16px; padding: 28px 0; }
  .service-row-index { grid-column: 1; grid-row: 1; }
  .service-row-image { grid-column: 1 / -1; grid-row: 2; height: 240px; }
  .service-row-copy { grid-column: 1 / -1; grid-row: 3; }
  .service-row .card-arrow { grid-column: 2; grid-row: 1; }
  .service-row-copy p { display: block; }
  .project-gallery { grid-template-columns: 1fr; gap: 36px; }
  .service-source-note, .service-detail-nav { grid-template-columns: 1fr; }
  .service-source-note img { min-height: 380px; }
  .service-detail-nav a, .service-detail-nav a:last-child { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--white); text-align: left; align-items: flex-start; }
  .detail-head { padding: 54px var(--gutter) 38px; }
  .detail-title-row { grid-template-columns: 1fr; }
  .detail-title { font-size: clamp(52px, 15vw, 68px); }
  .detail-meta { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
  .detail-media { height: 72svh; }
  .detail-copy { padding-top: 72px; padding-bottom: 72px; }
  .detail-copy p { font-size: 38px; }
  .about-media { min-height: 480px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; }

  .polish-v2 .hero-content { padding: calc(var(--header-h) + 48px) var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
  .polish-v2 .hero-title { max-width: 10ch; padding: 0; background: transparent; font-size: clamp(50px, 14vw, 62px); line-height: 1; text-wrap: balance; }
  .polish-v2 .hero-media { object-position: 73% center; opacity: .84; }
  /* Build A: the film has bright frames (white banner, white shirts); the old scrim was only 12-48% dark
     exactly where the headline sits. Darker band behind the text, top of frame stays open for the film,
     plus a soft text shadow so contrast holds on any frame. */
  .polish-v2 .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2) 22%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.8) 52%, rgba(0,0,0,.86) 70%, rgba(0,0,0,.94) 88%, rgba(0,0,0,.97) 100%); }
  .polish-v2 .hero-title { text-shadow: 0 2px 28px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); }
  .polish-v2 .hero-kicker { max-width: 34ch; padding: 0; background: transparent; line-height: 1.5; text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45); }
  .polish-v2 .section { padding-top: 56px; padding-bottom: 56px; }
  .polish-v2 .project-scrolly, .polish-v2 .service-scrolly { grid-template-rows: clamp(520px, 76svh, 640px); }
  .polish-v2 .project-scrolly-steps, .polish-v2 .service-scrolly-steps { height: 144px; }
  .polish-v2 .showcase-copy { padding: 22px 82px 168px 18px; background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.78) 64%, rgba(0,0,0,.96)); }
  .polish-v2 .showcase-copy strong { font-size: clamp(32px, 8.6vw, 40px); }
  .polish-v2 .showcase-scrim { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.16) 30%, rgba(0,0,0,.68) 66%, rgba(0,0,0,.92)); }
  .polish-v2 .showcase-reel-track { padding-block: 40px; }
  .polish-v2 .showcase-mobile-controls { bottom: 154px; }
  .polish-v2 .showcase-mobile-button { width: 52px; min-height: 52px; display: grid; grid-template-columns: 1fr; padding: 0; font-size: 18px; }
  .polish-v2 .showcase-mobile-button small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rail { scroll-behavior: auto !important; }
  .hero-media { display: none; }
  .hero { background: var(--black); }
  .service-slide-media { transform: none !important; }
  .service-title-inner, .service-slide-cta span:first-child, .service-slide-summary { opacity: 1 !important; transform: none !important; }
  .service-slide-cta span:last-child { transform: scaleX(1) !important; }
  .service-zone-cursor { display: none; }
  /* the custom cursor is hidden here, so the zone needs a real pointer again */
  .service-zone { cursor: pointer; }
  .hero-motion-toggle { display: none; }
  .project-card.is-media-loading::before, .service-slide.is-media-loading::before, [data-service-stage][aria-busy="true"]::before { animation: none !important; width: 100%; transform: none; }
  .page-wipe { display: none; }
  .page-wipe::before, .page-wipe::after { display: none; animation: none !important; transform: none !important; }
  .initial-loader { display: none !important; }
  .initial-loader__logo, .page-wipe__logo { animation: none !important; transform: none !important; }
  html.is-navigating { cursor: default; }
  /* the wipe is disabled here, so its transition cannot report back — never leave the page locked */
  html.is-navigating body { pointer-events: auto; }
  .service-slide-title a { transform: none !important; }
  .showcase-reel-track { transition: none !important; }
  .showcase-copy strong { animation: none !important; opacity: 1 !important; transform: none !important; }
  .card-arrow { transform: none !important; }
  .js-motion .main-nav a, .js-motion .main-nav.open a { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
  .js-motion [data-reveal], .js-motion .hero-title span, .js-motion .hero-kicker, .js-motion .hero-footer .text-link { opacity: 1 !important; transform: none !important; }
  .worldwide-pin { opacity: 1 !important; transform: none !important; }
  .worldwide-pin::before { animation: none !important; }
  .worldwide-popup { transform: none !important; }
}


/* ---------------------------------------------------------------------------
   Logo wall reveal, and the benchmark credit that stops the map claiming other
   agencies' work as Taazzle's. Added 2026-09-24.
   --------------------------------------------------------------------------- */

/* Extra logos are collapsed to a shaded strip until the visitor asks for them. The
   fade sits ON the grid rather than on each slot, so the cut-off reads as "more below"
   instead of as broken tiles. */
.clients-grid:not(.is-expanded) .client-slot.is-extra { display: none; }
.clients-grid.is-expanded .client-slot.is-extra { display: grid; animation: client-fade var(--dur-fast, .3s) var(--ease-expo-out, ease) both; }
@keyframes client-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.client-reveal {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 64px; margin: 0;
  padding: 20px 24px;
  border: 1px solid var(--black); border-top: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--white) 40%, transparent), var(--white));
  backdrop-filter: blur(2px);
  cursor: pointer;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  transition: background var(--dur-fast, .3s) ease, color var(--dur-fast, .3s) ease;
}
.client-reveal::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px;
  background: linear-gradient(to top, var(--white), transparent);
  pointer-events: none;
}
.clients-grid.is-expanded + .client-reveal::after { opacity: 0; }
.client-reveal:hover, .client-reveal:focus-visible { background: var(--accent); }

/* A benchmark card is another agency's work. The badge and the credit line are the
   only things standing between "market context" and a false claim, so they are not
   decorative and must never be hidden for space. */
.worldwide-badge {
  display: inline-block; margin-bottom: 10px; padding: 4px 9px;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--display); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.worldwide-credit {
  display: block; margin-top: 8px;
  font-size: 12px; font-style: italic; color: var(--muted);
}
.worldwide-mobile-card .worldwide-credit { font-size: 11px; }

/* Benchmark pins are visually subordinate to Taazzle's own work: his pins carry the
   accent, theirs are outlined. */
.worldwide-pin.is-benchmark::before { background: transparent; border: 2px solid var(--muted); }
.worldwide-pin.is-benchmark .worldwide-pin-label { opacity: .82; font-weight: 500; }

@media (max-width: 640px) {
  .client-reveal { min-height: 56px; padding: 16px; font-size: 11px; }
}


/* ---------------------------------------------------------------------------
   Envato comps: hero texture, page covers, and the PREVIEW ribbon.
   Added 2026-09-24. Every asset here is a WATERMARKED COMP until licensed —
   envato-manifest.json is the register. Paths are stable, so a licensed
   download overwrites one file and nothing else changes.
   --------------------------------------------------------------------------- */

/* Hero texture sits UNDER the client's own film, so slow connections and the
   pre-decode frame show a designed dark surface instead of flat black. */
.hero-texture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5; z-index: 0;
}
.hero-media { z-index: 1; }

/* Inner page covers. The title sits ON the band, which is why the band is dark
   and the type inverts — the four inner pages previously opened on flat cream
   and read as unfinished. */
.page-hero.is-covered {
  position: relative; isolation: isolate;
  background: var(--black); color: var(--white);
}
.page-hero.is-covered .page-hero-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .42; z-index: -2;
}
.page-hero.is-covered::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.58) 55%, rgba(0,0,0,.8));
}
.page-hero.is-covered .page-deck { border-top-color: rgba(255,255,255,.34); }
.page-hero.is-covered .page-deck p { color: rgba(255,255,255,.82); }

/* The PREVIEW COMP ribbon was REMOVED 2026-09-24. It was rendering a licensing
   warning across a live client site. An unlicensed asset now simply does not ship —
   see envato-manifest.json and envato_swap.py for the licensed drop-in path. */

@media (max-width: 640px) {
  .page-hero.is-covered .page-hero-cover { opacity: .34; }
}


/* ---------------------------------------------------------------------------
   NO-UPSCALE PRESENTATION. Added 2026-09-24 after measuring the client's own
   library: 293 portfolio files, median 462px wide, max 611px. Only Keka has
   real 2400px photography. Stretching a 460px frame across a 1440x820 hero is
   a 3-4x blow-up and it is why the case studies looked amateur.

   The fix is presentation, not a re-download — there are no larger originals.
   A contained frame at natural size reads as deliberate and stays sharp.
   --------------------------------------------------------------------------- */

.service-detail-media.is-contained,
figure.is-contained {
  background: var(--black);
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 72px) var(--gutter);
  min-height: 0;
}
figure.is-contained img,
.service-detail-media.is-contained img {
  /* the hard rule: never wider than the file itself */
  max-width: min(100%, 620px);
  width: auto;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  image-rendering: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
/* the caption sits under a contained frame rather than floating over it */
figure.is-contained .media-label,
.service-detail-media.is-contained .media-label {
  position: static;
  margin-top: 14px;
  max-width: 620px;
  background: transparent;
  color: rgba(255,255,255,.72);
  padding: 0;
}

/* Gallery frames were already small on screen, which is why the galleries read
   better than the heroes. Keep them from ever exceeding their native width. */
[data-project-gallery] img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  figure.is-contained img,
  .service-detail-media.is-contained img { max-width: 100%; max-height: 52vh; }
}

/* SHOWCASE STAGE — the same no-upscale problem, on the home and projects rails.
   `object-fit: cover` on a ~460px file inside a large stage crops AND magnifies it. Adding a
   slight blur-free downscale is impossible, so instead the stage gets a dark matte and the
   image is contained within it: sharp frame, generous surround, no magnified pixels.
   Keka (2400px) is exempt via [data-highres] so it still fills the stage edge to edge. */
.showcase-stage img { object-fit: contain; background: #0a0a0a; }
.showcase-stage[data-highres] img { object-fit: cover; }
.project-card img { object-fit: contain; background: #0a0a0a; }
.project-card[data-highres] img { object-fit: cover; }

/* GALLERY AND SERVICE MEDIA — final no-upscale pass, from measured numbers.
   The 2-column gallery gives each cell 660px while the source frames are 288-353px, so
   `object-fit: cover` was magnifying them 1.9-2.3x. The grid now sizes cells to the real
   files (auto-fill, 300px track) and the images never exceed their own width.
   `.detail-media` was 820px tall on a ~500px source (2.9x) — contained instead. */

/* PROJECT GALLERY (build A, 2026-10-06).
   Every gallery photo on the site is at least 1024px wide (checked against all 31 galleries), so the
   old "small files, small cells" caps are gone. Each photo is shown whole at its own shape: two
   columns from 721px up, one column on phones. `columns` (not a fixed-height grid) so a wide stage shot
   and a tall portrait sit side by side without cropping or leaving gaps. `aspect-ratio: auto 4/3`
   reserves a 4:3 box until the photo loads, then switches to the photo's real shape, which keeps
   lazy-loaded images from all collapsing to 0px and loading at once. */
.project-gallery {
  display: block;
  column-count: 2;
  column-gap: 24px;
}
.project-gallery figure { break-inside: avoid; margin: 0 0 24px; }
.project-gallery img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: auto 4 / 3;
  object-fit: contain;
  background: #0f0f0f;
}
.project-gallery.is-highres img { max-width: none; height: auto; object-fit: contain; }

/* Service hero: contain rather than crop-and-magnify a ~500px file. */
.detail-media { height: auto; max-height: min(74vw, 820px); object-fit: contain; background: #0a0a0a; }
.service-detail-media.is-contained .detail-media,
figure.is-contained .detail-media { max-width: 620px; margin: 0 auto; }

@media (max-width: 720px) {
  .project-gallery { column-count: 1; }
  .project-gallery figure { margin-bottom: 28px; }
}

/* THE LAST TWO UPSCALES. `object-fit: contain` stops the image being DISTORTED but not
   MAGNIFIED: the <img> box was still 1440px wide, so a 504px file was drawn across 1440px
   and contain simply letterboxed it — 2.86x blur, measured. Only a width cap fixes that.
   Values sit just above the largest real source file (611px), so nothing is ever scaled up
   and nothing is needlessly shrunk. */

/* service hero (was 504px -> 1440px) */
.service-detail-media .detail-media,
figure .detail-media { max-width: 660px; margin-inline: auto; display: block; }

/* home + projects showcase stage (was 487px -> 994px) */
.showcase-stage:not([data-highres]) img { max-width: 660px; margin-inline: auto; }
.showcase-stage:not([data-highres]) { display: grid; place-items: center; background: #0a0a0a; }

/* the project-detail hero, same rule */
figure.is-contained img { max-width: 660px; }

/* Final tightening: 660 -> 600px cap. Measured after the previous pass, the home stage still
   drew a 487px file across 660px (1.36x). 600px keeps every source at or under 1.25x, which
   is below the threshold where softness is visible at normal viewing distance. */
.showcase-stage:not([data-highres]) img,
.service-detail-media .detail-media,
figure .detail-media,
figure.is-contained img { max-width: 600px; }


/* ---------------------------------------------------------------------------
   THE BLACK VOID FIX. Capping widths stopped the blur but created a worse look:
   a 500px photo centred in a full-width black band reads as a broken layout or a
   missing asset — reviewer's words, "a tiny snapshot floating in a huge black void".

   The band itself was the mistake. These images are small, so the layout should be
   small too: the frame sits in a normal content column beside the text, at a size
   the file can actually carry. No full-bleed band, no letterboxing, no void.
   Keka (2400px) still gets the full-width treatment via [data-highres]/.is-highres.
   --------------------------------------------------------------------------- */

/* project + service hero, low-res case */
figure.is-contained,
.service-detail-media:not(.is-highres) {
  background: transparent;
  padding: 0 var(--gutter);
  margin: 0 auto clamp(28px, 4vw, 56px);
  max-width: 1200px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}
figure.is-contained img,
.service-detail-media:not(.is-highres) .detail-media {
  max-width: 600px;
  width: 100%;
  height: auto;
  max-height: none;
  margin-inline: 0;
  border: 1px solid var(--line);
  box-shadow: none;
  background: transparent;
}

/* showcase stage, low-res case: no dark matte, no centring void */
.showcase-stage:not([data-highres]) {
  display: block;
  background: transparent;
}
.showcase-stage:not([data-highres]) img {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin-inline: 0;
  border: 1px solid var(--line);
}

/* the gallery already sits in small cells; drop its dark plate too */
.project-gallery:not(.is-highres) img { background: transparent; border: 1px solid var(--line); }

@media (max-width: 580px) {
  /* Build B2: fonts. Inter Tight's "0" is narrower next to its letters than Neue Haas's was, so the ch-based line measures need ~8% more room to wrap the way they did. */
  .page-title { max-width: 10.8ch; }
  .section-title { max-width: 9.8ch; }
}

/* ===== Build B2: small responsive fixes from review-2026-10-06/responsive/ISSUES.md (POLISH 1-6, 8) ===== */

/* Build B2: POLISH 1 - header logo link was only ~30px tall; give it a 44px tap target on phones and tablets */
@media (max-width: 900px) {
  .site-header .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Build B2: POLISH 2 - "Use up and down on a keyboard" makes no sense on a touch screen; swap the wording there */
@media (hover: none) and (pointer: coarse) {
  .showcase-instruction { font-size: 0; }
  .showcase-instruction::after { content: "Tap a name in the list to preview it."; font-size: 14px; }
}

/* Build B2: POLISH 3 - smallest phone text up one step (eyebrows/labels 12 -> 13px, client captions 10 -> 12px, showcase labels 11 -> 12px, footer 13.3 -> 14px) */
@media (max-width: 580px) {
  .eyebrow, .project-scrolly-index, .project-gallery figcaption, .showcase-copy > span:first-child, .showcase-option span { font-size: 13px; }
  .client-slot span { font-size: 12px; }
  .site-footer small { font-size: 14px; }
}

/* Build B2: POLISH 4 - the "Project enquiry" label touched the heading under it (heading line-height .9, label margin 0) */
.eyebrow + .section-title { margin-top: 14px; }

/* Build B2: POLISH 5 - on Projects/Services phone lists the Prev/Next buttons sat on top of the list row and its divider.
   The controls are positioned from the bottom of a box that also holds 78px of padding under the list, so they must clear padding + the 80px list rail + a 12px gap. */
@media (max-width: 580px) {
  .project-index-scrolly .showcase-mobile-controls, .service-index-scrolly .showcase-mobile-controls { bottom: calc(78px + 80px + 12px); }
}

/* Build B2: POLISH 6 - the header scrolls away on phones, taking the menu button with it. Pin just the button (solid chip so it reads over any page). */
@media (max-width: 900px) {
  .menu-button { position: fixed; top: calc((var(--header-h) - 46px) / 2); right: var(--gutter); }
  .site-header .menu-button:not(:active):not([aria-expanded="true"]) { background: rgba(0,0,0,.8); color: var(--white); border-color: rgba(255,255,255,.55); }
}
@media (max-width: 580px) {
  .menu-button { top: calc((var(--header-h) - 44px) / 2); }
}

/* Build B2: POLISH 8 - on desktop/tablet the showcase title was centred over the people's faces; anchor the copy bottom-left under them */
@media (min-width: 581px) {
  .showcase-copy { align-content: end; justify-items: start; text-align: left; padding: clamp(26px, 4vw, 56px); background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.5)); }
}
@media (min-width: 901px) {
  .showcase-copy strong { font-size: clamp(56px, 6.4vw, 100px); max-width: 14ch; }
}

/* Build B2: service detail hero full width for high-res images (from B1) */
.service-detail-media.is-highres { max-width: none; padding: 0; margin: 0; display: block; }
.service-detail-media.is-highres .detail-media { width: 100%; max-width: none; height: min(74vw, 820px); max-height: none; object-fit: cover; border: 0; margin: 0; display: block; }
@media (max-width: 720px) { .service-detail-media.is-highres .detail-media { height: 72svh; } }

/* ---------- Home hero showreel (hero-reel.js) ---------- */
.hero-reel { position: absolute; inset: 0; z-index: 1; overflow: hidden; --reel-o: .7; will-change: transform; }
/* Item 8 (10 Oct review): arrow cursor on the outer 40% of the hero; hero-reel.js sets the class (mouse only). */
.hero.is-cur-prev { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='20' fill='%23111' fill-opacity='.62' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M25 13 16 22l9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 22 22, w-resize; }
.hero.is-cur-next { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='20' fill='%23111' fill-opacity='.62' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='m19 13 9 9-9 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 22 22, e-resize; }
.hero .hero-reel .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--reel-pos, 50% 50%); opacity: 0; z-index: 1; transition: opacity .8s ease; pointer-events: none; }
.hero .hero-reel .hero-slide.is-leaving { opacity: var(--reel-o); z-index: 1; }
.hero .hero-reel .hero-slide.is-active { opacity: var(--reel-o); z-index: 2; }
.hero .hero-reel .hero-slide--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--reel-pos, 50% 50%); transform-origin: 62% 46%; }
.hero .hero-reel .hero-slide--photo.is-active img { animation: reel-kb var(--reel-kb, 6s) ease-out forwards; }
.hero .hero-reel.is-paused .hero-slide--photo.is-active img { animation-play-state: paused; }
@keyframes reel-kb { from { transform: scale(1); } to { transform: scale(1.12); } }
/* readability: a scrim above every slide, below the headline (photos are brighter than the old film) */
.hero-reel::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.26) 34%, rgba(0,0,0,.5) 68%, rgba(0,0,0,.8)); }
.hero-reel-ui { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); top: 0; bottom: 0; pointer-events: none; }
.hero-reel-label { pointer-events: auto; position: absolute; left: 0; top: calc(var(--header-h) + 18px); display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--white); text-decoration: none; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero-reel-num { color: var(--yellow); }
.hero-reel-label i { font-style: normal; transition: transform .2s ease; }
.hero-reel-label:hover i, .hero-reel-label:focus-visible i { transform: translate(2px, -2px); }
.hero-reel-label:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.hero-reel-bar { pointer-events: auto; position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 6px; }
.hero-reel-seg { flex: 1 1 0; min-width: 0; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; }
.hero-reel-seg { position: relative; }
.hero-reel-seg i { display: block; width: 100%; height: 3px; transform-origin: left center; transform: scaleX(0); }
.hero-reel-seg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.28); z-index: 0; }
.hero-reel-seg i { position: relative; z-index: 1; background: var(--yellow); }
.hero-reel-seg:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.hero .hero-reel .hero-slide.is-still { transition: none; }
@media (max-width: 720px) {
  .hero-reel { --reel-o: .84; }
  .hero .hero-reel .hero-slide { object-position: var(--reel-pos, 70% center); }
  .hero .hero-reel .hero-slide--photo img { object-position: var(--reel-pos, 70% center); }
  .polish-v2 .hero-content { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .hero-reel-bar { bottom: calc(6px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-reel .hero-slide { display: block; }
  .hero-reel { will-change: auto; }
}