/* --- Cut/Run scissors cluster: size + proximity playback --------------------
   --crScisScale : cluster size multiplier (1 = original star size)
   --crScisRadius: how close the cursor must get, in px, before they run     */
.aboutWorkBlock .aboutSection .animation .innerAnimation{
  --crScisScale:2.7;
  --crScisRaise:1.5vw;   /* lift the whole cluster; bigger = higher */
  -webkit-transform:translate(-50%,calc(-50% - var(--crScisRaise))) scale(var(--crScisScale));
  -moz-transform:translate(-50%,calc(-50% - var(--crScisRaise))) scale(var(--crScisScale));
  -ms-transform:translate(-50%,calc(-50% - var(--crScisRaise))) scale(var(--crScisScale));
  transform:translate(-50%,calc(-50% - var(--crScisRaise))) scale(var(--crScisScale));
}
/* hold on a still frame until the cursor comes near */
svg .crScis,svg .crSk2{-webkit-animation-play-state:paused;animation-play-state:paused}
.crNear svg .crScis,.crNear svg .crSk2{-webkit-animation-play-state:running;animation-play-state:running}
/* no cursor to get close with -> just let the cluster run */
@media (hover:none){.aboutWorkBlock .svgWrapper svg .crScis,.aboutWorkBlock .svgWrapper svg .crSk2{-webkit-animation-play-state:running;animation-play-state:running}}
@media (prefers-reduced-motion:reduce){.crScis,.crSk2,.crNear svg .crScis,.crNear svg .crSk2{-webkit-animation-play-state:paused;animation-play-state:paused}}


/* ============================================================================
   [07] "Content That Keeps Them Coming Back" tiles - hover to open out.

   At rest the tile is the theme's portrait 12.5 x 15.375vw (ratio .813), so
   object-fit:cover shows the middle slice of each clip. On hover it opens to
   16:9 - the source aspect - so the whole original frame is revealed. The four
   videos are stored 960x540 for exactly this reason; do NOT pre-crop them to
   portrait or there is no wider frame left to reveal.

   SPECIFICITY: the theme sizes these with a NINE-class selector, so a short
   `.howWeRollItemsBlock .images .imageWrapper:hover` loses the cascade and does
   nothing (while `transition` still applies, which makes it look wired up).
   The full chain + :hover = 10, which wins. Do not shorten it.

   Row height never changes: the height difference is cancelled with top/bottom
   margins, so nothing below the row moves. Siblings are inline-block, so the
   width change slides them across.
   ========================================================================== */
@media (hover: hover) {
  .servicesBlock .howWeRollItemsBlock .scrollContainer .stickyWrapper .items .scrollItem .innerContainer .images .imageWrapper {
    transition: width .5s cubic-bezier(.22,.61,.36,1),
                height .5s cubic-bezier(.22,.61,.36,1),
                margin .5s cubic-bezier(.22,.61,.36,1),
                opacity .35s ease;
    will-change: width, height;
  }
  .servicesBlock .howWeRollItemsBlock .scrollContainer .stickyWrapper .items .scrollItem .innerContainer .images .imageWrapper:hover {
    width: 32vw;              /* 16:9 - 32 / 1.778 = 18 */
    height: 18vw;
    margin-top: -1.3125vw;    /* (18 - 15.375) / 2 - keeps the row at 15.375vw */
    margin-bottom: -1.3125vw;
    z-index: 5;
  }
  .howWeRollItemsBlock .images:hover .imageWrapper:not(:hover) { opacity: .55; }
}
/* smaller breakpoint: base tiles are 18.519 x 22.778vw and there is only ~11vw
   of slack in the row, so the open state is narrower (still exactly 16:9). */
@media (hover: hover) and (max-width: 1080px) {
  .servicesBlock .howWeRollItemsBlock .scrollContainer .stickyWrapper .items .scrollItem .innerContainer .images .imageWrapper:hover {
    width: 28vw;              /* 28 / 1.778 = 15.75 */
    height: 15.75vw;
    margin-top: 3.514vw;      /* shorter than the base tile, so POSITIVE margins re-centre it */
    margin-bottom: 3.514vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .servicesBlock .howWeRollItemsBlock .scrollContainer .stickyWrapper .items .scrollItem .innerContainer .images .imageWrapper { transition: none; }
}


/* ============================================================================
   [08] "Let's Cut Yours" - the animated runner logo inside the rounded square.
   Theme sizes this mark at 2.4375vw inside an 18.1875vw square, which is far
   too small once it is the animated logo. Selector repeats `.svgWrapper` to
   out-specify the theme's 6-class rule (7 vs 6) rather than relying on order.
   viewBox is 1086x1030, so height = width * .948; left/top offsets are half of
   each, to keep it centred.
   ========================================================================== */
.cultureQuoteAnimationBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper {
  width: 8.5vw;              /* runner v2 2026-08-31: viewBox now 963x627
                                (aspect .651, wider than the old 1086x1030) —
                                width up 7->8.5vw to keep the visual mass */
  left: calc(50% - 4.25vw);
  top: calc(50% - 2.77vw);   /* half of 8.5 * .651 */
}


/* ============================================================================
   Our process page — the decorative divider directly above "Phase 3: The Polish"
   (5 morphing blob shapes at 754x195 plus a scissors at each edge). Removing it
   is what lifts the Phase 3 heading up by its 168px. This block only exists on
   our-process/index.html, so a global rule is safe.
   ========================================================================== */
.howWeRollDividerAnimationBlock { display: none; }


/* ============================================================================
   Our process — the 3-scissors drift cluster beside the opening copy
   (.headerHowWeRollBlock). Mirrors the home aboutWorkBlock cluster: same three
   sizes and the same spread, so it reads as the same object. The theme already
   ships a GSAP mouse-drift for this block (initHeaderHowWeRollBlock targets
   `.headerHowWeRollBlock .innerAnimation .svgWrapper`), so only sizing is
   needed here; playback is handled by the proximity driver in the JS.
   Selector repeats `.svgWrapper` to out-specify the theme's 6-class rule.
   ========================================================================== */
.headerHowWeRollBlock .cols .col .animation .innerAnimation {
  --crScisScale: 2.7;
  -webkit-transform: translate(-50%,-50%) scale(var(--crScisScale));
  transform: translate(-50%,-50%) scale(var(--crScisScale));
}
.headerHowWeRollBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper {
  width: 2.4375vw; left: calc(50% - 1.21875vw); top: calc(50% - 1.21875vw);
}
.headerHowWeRollBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper:first-child svg {
  transform: translate(1.0625vw, 0);
}
.headerHowWeRollBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper:nth-child(2) {
  width: 1.25vw; left: calc(50% - 0.625vw); top: calc(50% - 0.625vw);
}
.headerHowWeRollBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper:nth-child(2) svg {
  transform: translate(-1.5vw, -2.4375vw);
}
.headerHowWeRollBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper:nth-child(3) {
  width: 1.688vw; left: calc(50% - 0.844vw); top: calc(50% - 0.844vw);
}
.headerHowWeRollBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper:nth-child(3) svg {
  transform: translate(0, 2.5vw);
}


/* ============================================================================
   Services role videos — hover to scale out into the dead space
   (same behaviour as the home "[07] Content That Keeps Them Coming Back" tiles).

   AT REST the wrapper is exactly the theme's layout: width 100%, no margins —
   nothing overlays anything. ON HOVER it widens toward its row's empty side and
   pulls back by an equal negative margin, so the margin box never changes and
   the copy never reflows; the clip is 16:9 in a ~0.9 box, so widening reveals
   more of the frame instead of just cropping differently.

   PER-VIDEO: each role block has its own class — tune one without the others.
   Direction: --crGrowL grows left, --crGrowR grows right (toward the dead side).
   Director grows too (user request 2026-08-20): its clip is portrait, so the
   grow crops rather than reveals, but the motion matches its row twin (3d).
   ========================================================================== */
@media (hover: hover) {
  .cultureItemBlock .cols .col .imageWrapper {
    --crGrowL: 0px;
    --crGrowR: 0px;
    width: calc(100% + var(--crGrowL) + var(--crGrowR));
    margin-left: calc(-1 * var(--crGrowL));
    margin-right: calc(-1 * var(--crGrowR));
    transition: width .5s cubic-bezier(.22,.61,.36,1),
                margin .5s cubic-bezier(.22,.61,.36,1);
    will-change: width;
  }
  .cultureItemBlock .cols .col .imageWrapper:hover { z-index: 5; }
  .cultureItemBlock.crRole-creative .cols .col .imageWrapper:hover { --crGrowL: 13vw; }  /* lands 24px off its scissors, like Editor */
  .cultureItemBlock.crRole-3d       .cols .col .imageWrapper:hover { --crGrowR: 12vw; }  /* 14vw overshot the scissors by 5px */
  .cultureItemBlock.crRole-editor   .cols .col .imageWrapper:hover { --crGrowL: 20vw; }
  .cultureItemBlock.crRole-ads      .cols .col .imageWrapper:hover { --crGrowL: 20vw; }  /* cloned editor row; re-measure if copy changes */
  .cultureItemBlock.crRole-2d       .cols .col .imageWrapper:hover { --crGrowL: 13vw; }  /* matches Creative */
  .cultureItemBlock.crRole-director .cols .col .imageWrapper:hover { --crGrowR: 12vw; }  /* matches 3d - same style-2 row, dead space right */
}
@media (prefers-reduced-motion: reduce) {
  .cultureItemBlock .cols .col .imageWrapper { transition: none; }
}


/* ============================================================================
   Services — row alignment. The two `cols` (style-1) rows park their video
   299px from the copy while style-3 sits at 93px and style-2 at 160px, so
   Creative and 2d Animator read as adrift. Nudge their containers toward the
   text with relative offset (paint-only: no reflow, so nothing else moves and
   the hover-grow on .imageWrapper is unaffected). 9vw ≈ 156px at 1731 wide
   -> gap becomes ~143px, in line with the other rows.
   ========================================================================== */
.cultureItemBlock.crRole-creative .cols .col .animImageContainer,
.cultureItemBlock.crRole-2d       .cols .col .animImageContainer {
  position: relative;
  left: 9vw;
}

/* ============================================================================
   Services — equal gaps at full stretch (user request 2026-08-20).
   Shift each video toward its row's text so that in the HOVERED (grown) state
   the video sits centred between scissors icon and copy: gap-to-icon equals
   gap-to-text. Measured at 1521w: creative/2d needed +3.34vw toward the text
   (on top of the 9vw base nudge above), editor +1.9vw, and the style-2 rows
   (3d, director; text on the left) -7.55vw. All rest-state: the grow amounts
   in the hover block above are untouched and land symmetrically now.
   Desktop only - tablet/mobile keep the theme's stacked layouts.
   ========================================================================== */
@media (min-width: 1081px) {
  .cultureItemBlock.crRole-creative .cols .col .animImageContainer,
  .cultureItemBlock.crRole-2d       .cols .col .animImageContainer { left: 12.35vw; }
  .cultureItemBlock.crRole-editor   .cols .col .animImageContainer { position: relative; left: 1.9vw; }
  .cultureItemBlock.crRole-ads      .cols .col .animImageContainer { position: relative; left: 1.9vw; }
  .cultureItemBlock.crRole-3d       .cols .col .animImageContainer,
  .cultureItemBlock.crRole-director .cols .col .animImageContainer { position: relative; left: -7.55vw; }
}


/* ============================================================================
   Video overlay HUD v2.
   - Time chip sits IN the track row: .bottomContent .contentWrapper is flexed,
     the navigator keeps flex:1, and the chip rides at the track's right end,
     styled as a pill like the play button.
   - Sound control is compact and lives next to the close x (top-right): a dark
     circle button matching the x, with a slider that expands on hover.
   ========================================================================== */
.videoOverlay .bottomContent .contentWrapper {
  display: flex; align-items: center; gap: 1.1vw;
}
.videoOverlay .bottomContent .videoNavigator { flex: 1 1 auto; min-width: 0; }
.videoOverlay .crHudTime {
  flex: 0 0 auto;
  color: #ff4500;
  border: 1px solid rgba(255,69,0,.5);
  border-radius: 999px;
  padding: .45em 1.1em;
  font-size: .82vw;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.videoOverlay .crHudSound {
  position: absolute;
  top: 1.625vw;                          /* matches .closeIndicator */
  left: auto;
  right: calc(4.59375vw + .9vw);        /* the x sits 4.59375vw from the right; +gap */
  height: 2.8125vw;
  display: flex; align-items: center; flex-direction: row-reverse; gap: .55vw;
  z-index: 31; pointer-events: auto;
}
.videoOverlay .crHudMute {
  width: 2.8125vw; height: 2.8125vw; min-width: 34px; min-height: 34px;
  border: none; border-radius: 50%;
  background: #1d1d1b;                    /* same disc as the close x */
  color: #ff4500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: 0 0 auto;
}
.videoOverlay .crHudMute svg { width: 46%; height: 46%; display: block; }
.videoOverlay .crHudMute .crMuteOn { display: none; }
.videoOverlay .crHudMute.muted .crMuteOn { display: block; }
.videoOverlay .crHudMute.muted .crMuteOff { display: none; }
.videoOverlay .crHudVol {
  -webkit-appearance: none; appearance: none;
  width: 0; opacity: 0;
  height: 2px; background: rgba(255,69,0,.35); border-radius: 2px;
  accent-color: #ff4500; cursor: pointer; outline: none;
  transition: width .25s ease, opacity .2s ease;
}
.videoOverlay .crHudSound:hover .crHudVol,
.videoOverlay .crHudSound:focus-within .crHudVol { width: 6vw; min-width: 70px; opacity: 1; }
.videoOverlay .crHudVol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; border-radius: 50%; background: #ff4500; border: none;
}
.videoOverlay .crHudVol::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%; background: #ff4500; border: none;
}
@media (max-width: 1080px) {
  .videoOverlay .crHudSound { top: 2.407vw; right: calc(6.8055vw + 1vw); height: 4.167vw; }
  .videoOverlay .crHudMute { width: 4.167vw; height: 4.167vw; }
  .videoOverlay .crHudTime { font-size: 11px; }
}
@media (hover: none) {
  .videoOverlay .crHudVol { display: none; }  /* touch: hardware volume; keep mute */
}


/* ============================================================================
   Video overlay fine-tuning (site-wide; 5 of the 39 overlay pages were missing
   the per-page x-visibility fix, so it lives here now for all of them).
   - close x: orange bars on the dark disc, inverting on hover
   - play pill: label + scissors stay orange when the pill darkens on hover
   - mute disc: same ringed look as the x
   ========================================================================== */
.videoOverlay .closeIndicator:before {
  background: rgba(29,29,27,.85);
  box-shadow: inset 0 0 0 1px #ff4500;
}
.videoOverlay .closeIndicator .icon .bars .bar { background: #ff4500; }
html .videoOverlay .closeIndicator:hover:before { background: #ff4500; }
html .videoOverlay .closeIndicator:hover .icon .bars .bar { background: #1d1d1b; }
html.touch .videoOverlay .closeIndicator:hover:before { background: rgba(29,29,27,.85); }
html.touch .videoOverlay .closeIndicator:hover .icon .bars .bar { background: #ff4500; }
html.touch .videoOverlay .closeIndicator:active .icon .bars .bar { background: #1d1d1b; }

/* Colours must TRACK THE PILL BACKGROUND (a page tweak block fights with
   `.button{color:#141414!important}` + `.button *{...}`, hence !important, and
   the subtree-inherit defeats the darkened marquee wrappers):
     rest  = orange bg -> dark text
     hover = dark bg   -> orange text                                        */
html .videoOverlay .playButton,
html .videoOverlay .playButton.pause { color: #141414 !important; }
html .videoOverlay .playButton:hover,
html .videoOverlay .playButton.pause:hover { color: #ff4500 !important; }
html .videoOverlay .playButton * { color: inherit !important; }
html .videoOverlay .playButton .icon svg path { fill: #141414 !important; }
html .videoOverlay .playButton:hover .icon svg path { fill: #ff4500 !important; }
/* touch keeps the theme's dark-bg pause state -> orange */
html.touch .videoOverlay .playButton.pause { color: #ff4500 !important; }
html.touch .videoOverlay .playButton.pause .icon svg path { fill: #ff4500 !important; }

.videoOverlay .crHudMute {
  background: rgba(29,29,27,.85);
  box-shadow: inset 0 0 0 1px #ff4500;
}


/* ============================================================================
   Services "[01] Our Culture" — the pixel run-cycle (crRun2) in the left
   column's empty space. Absolutely positioned inside the column so the copy
   in the right column cannot move; viewBox 684x770 so height = width * 1.126.
   It autoplays like the [08] runner logo (reduced-motion freezes frame 1,
   handled inside the inline SVG).
   ========================================================================== */
.headerCultureBlock .cols .col:first-child { position: relative; }
.headerCultureBlock .crRun2Wrap {
  position: absolute;
  left: 3.5vw;
  top: 16vw;
  width: 17vw;
  pointer-events: none;
}
.headerCultureBlock .crRun2Wrap svg { display: block; width: 100%; height: auto; }
@media (max-width: 1080px) {
  .headerCultureBlock .crRun2Wrap { width: 24vw; top: 20vw; }
}


/* connect page: the old instagram strip is now the R1 runners band.
   The theme still aims its feed scroll-reveal (inline opacity/translate via
   GSAP) at .instagramWrapper, so pin the band visible - it is decorative.
   The svg sits at 74% centred (full width read too big); the band keeps full
   width so the hairline underneath runs right across, and the old extraIcon
   divider scissors is gone - the line does that job now. */
.contactBlock .crRun1Band {
  margin-top: 2vw;
  opacity: 1 !important; transform: none !important;
  border-bottom: 1px solid rgba(255,69,0,.4);
  padding-bottom: 2.2vw;
}
.contactBlock .crRun1Band svg { display: block; width: 64%; height: auto; margin: 0 auto; }
.contactBlock .extraIcon { display: none; }
/* Even the three-gap rhythm on connect: button->runners 30px, runners->line
   34px, so the section break below the line lands ~60px (was 208px). Scoped
   to the works block that directly follows the contact block. */
/* the real gap was contactBlock's margin-bottom (9.6vw) collapsing over the
   works block's margin - shrink it at the source */
.contactBlock { margin-bottom: 2vw !important; }
.contactBlock + .cultureWorkBlock { margin-top: 2vw !important; }
.contactBlock + .cultureWorkBlock .contentWrapper { padding-top: 2vw; }


/* ---- CR HERO SEQUENCE (home): runner does ~2.3 cycles, fades off, then the
   Cut/Run wordmark rises in gently over the master video. Driven by the
   .crSeq class that cutrun-scissors-hover.js adds to .headerBigBlock once the
   hero is actually visible (theme .loaded + loader released). Lives here, not
   in index's head, so it also applies when swup brings the hero in. */
.headerBigBlock .crHeroWord {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; gap: .24em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700; font-size: 10.5vw; line-height: 1; color: #ff4500;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.headerBigBlock .crHwW { display: inline-flex; overflow: hidden; padding: .3em .12em; margin: -.3em -.12em; }
.headerBigBlock .crHwC { display: inline-block; transform: translateY(118%); opacity: 0; }
.headerBigBlock.crSeq .crHeroWord { opacity: 1; }
/* runner: quick fade-in, hold ~2.3 run cycles, fade off (animation outranks
   the .loaded opacity transition in index's head while it runs) */
.headerBigBlock.crSeq .crHeroMark { animation: crMarkRun 3.45s ease-out forwards; }
@keyframes crMarkRun { 0% { opacity: 0; } 6% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
.headerBigBlock.crSeq .crHwC {
  animation: crHwUp 1.35s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(3.15s + var(--i, 0) * .07s);
}
@keyframes crHwUp { to { transform: translateY(0); opacity: 1; } }
/* REFRESH / SKIP PATH (2026-09-02, user: hero wordmark had a "weird
   animation" on refresh — wants it to just drop down and fade on). When the
   loader did NOT run this pageload, crLoaderGate stamps html.crLdSkip: the
   runner stays hidden, the per-letter rise is released, and the whole
   wordmark drops in with one fade. The full runner->wordmark choreography
   still plays when the loader hands off (no crLdSkip then). Also covers
   swup returns to Home within a session (crLdSkip persists on <html>). */
html.crLdSkip .headerBigBlock .crHeroMark { display: none; }
html.crLdSkip .headerBigBlock.crSeq .crHwC { animation: none; transform: none; opacity: 1; }
html.crLdSkip .headerBigBlock.crSeq .crHeroWord {
  animation: crHwDrop .9s cubic-bezier(.16,1,.3,1) .25s both;
}
@keyframes crHwDrop {
  from { opacity: 0; transform: translate(-50%, calc(-50% - .45em)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  html.crLdSkip .headerBigBlock.crSeq .crHeroWord { animation: none; }
}
@media (max-width: 580px) { .headerBigBlock .crHeroWord { font-size: 16vw; } }
@media (prefers-reduced-motion: reduce) {
  .headerBigBlock .crHeroMark { display: none; }
  .headerBigBlock.loaded .crHeroWord { opacity: 1; }
  .headerBigBlock.loaded .crHwC { transform: none; opacity: 1; animation: none; }
  .headerBigBlock.crSeq .crHeroMark { animation: none; }
}

/* ---- SCROLLBAR-WIDTH MARGIN FIX (site-wide) --------------------------------
   The theme sizes html/body and every full-bleed band with width:100vw, which
   INCLUDES a classic scrollbar (15px here) — so with visible scrollbars the
   whole page hangs 15px past the right edge and the right margin reads 15px
   slimmer than the left (measured: grid L=46 R=31). 100% resolves against the
   scrollbar-EXCLUDING viewport, restoring symmetric gutters. vw-based paddings
   and type are symmetric, so they are left alone. */
html, body { width: 100% !important; }
#pageContainer, #pageContainer .blocks { width: 100% !important; }
header .headerBar { width: 100% !important; }
footer { width: 100% !important; }
.videoOverlay { width: 100% !important; }
.videoOverlay .videoWrapper .innerVideo video { max-width: 100% !important; }
.projectsOverviewBlock .filterBackground { width: 100% !important; }
/* The theme also positions absolute elements with vw offsets (hero side
   texts etc.), which are unfixable one-by-one under a classic scrollbar.
   The reference site's own answer: no visible scrollbar at all (Lenis drives
   scrolling). With it hidden, 100vw == clientWidth and every vw offset is
   self-consistent; the width:100% overrides above become harmless no-ops. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---- TAKE A LOOK pill (home project tiles): the pill is pointer-events:none
   (the <a class="project"> tile takes the events), so :hover must key off the
   tile. Scissors go brand-orange with the orange label; the snip comes from
   the hover driver, whose TRIGGER list includes the tile. */
.projectsSection .projects .project:hover .bottomButton .button svg path { fill: #ff4500 !important; }


/* ============================================================================
   MOBILE FIXES (audit 2026-08-21) — everything scoped ≤580px so desktop/tablet
   are untouched.
   ========================================================================== */
@media (max-width: 580px) {

  /* [M1] Header: #hamburger carries the text "Menu" + the 30px bars icon.
     .right is calc(100% - 34.483vw) ≈ 194px, socials take 117px and the theme
     gives #hamburger margin-left 8.621vw — with the 76px "Menu"+icon that needs
     ~226px, so the whole menu trigger WRAPPED onto a second line at y≈72,
     floating over the hero. The theme's ≤580 design styles the bars icon as
     the affordance, so drop the text (font-size:0) and keep the 70px line box
     in vw so the icon stays vertically centred. Net width ≈ 69px -> fits. */
  header .headerBar .right #hamburger {
    font-size: 0 !important;
    line-height: 18.793vw !important;   /* = the bar's 70px row at 375w */
    height: 18.793vw !important;
  }

  /* [M2] Footer: the contact email (172px at 14.2px type) cannot wrap and
     overflowed its 162px column to x=360, eating the right gutter (15px vs
     26px left). Let long unbroken strings (emails) wrap inside the column. */
  footer .contentWrapper .col .text a { overflow-wrap: anywhere; }

  /* [M3] Services: the 9vw row-alignment nudge above (desktop rows park the
     video 299px from the copy) leaks into the stacked mobile layout, indenting
     the Creative and 2d videos 34px while Editor sits flush left (x=26) and
     3d/Director sit flush right — reads as misaligned. Kill it when stacked. */
  .cultureItemBlock.crRole-creative .cols .col .animImageContainer,
  .cultureItemBlock.crRole-2d       .cols .col .animImageContainer { left: 0; }

  /* [M4] Vertical project template (tora, derchutze, fratelli): the vhero meta
     row keeps flex-nowrap while the theme's mobile rule forces each .infoTag to
     width:100%!important — three 323px tags in one row, so "client" and "year"
     sat at x=353/x=680, clipped offscreen (body scrollWidth 1003). Restore the
     template's auto width; the justified row then fits in one 323px line. */
  #pageContainer [data-crt="vhero"] .crVText .crVMetaTags .infoTag {
    width: auto !important;
  }
}

/* ---- HOME HERO SIDE TEXT SIZE BUMP (2026-08-21, user request) -------------
   Tag + right paragraph 0.75vw -> 0.95vw, headline pair 1.5vw -> 1.85vw.
   #pageContainer prefix outranks the theme's same-class rules regardless of
   head order; desktop-scoped so the theme's mobile sizing is untouched. */
@media (min-width: 581px) {
  #pageContainer .headerBigBlock .leftContent .text,
  #pageContainer .headerBigBlock .rightContent .text { font-size: 0.95vw; }
  #pageContainer .headerBigBlock .leftContent .smallTitle,
  #pageContainer .headerBigBlock .rightContent .smallTitle { font-size: 1.85vw; }
  #pageContainer .headerBigBlock .rightContent {
    width: 23vw;           /* 2026-08-31: theme sized this column ~15vw for
                              the old paragraph; the tagline-mirror lines
                              need the left column's measure to sit one per
                              line */
    left: auto;            /* at wide widths the theme anchors this column by
                              LEFT %, so the widened box ran ~108px past the
                              viewport (measured at 1900w). Anchor it to the
                              right edge instead, mirroring the left column's
                              ~2.5vw inset. */
    right: 2.5vw;
  }
  #pageContainer .headerBigBlock .rightContent .text {
    margin-bottom: 0.55vw; /* mirror the left h1's gap to its tagline */
  }
}

/* HERO RIGHT COLUMN AS TAGLINE MIRROR (2026-08-31): the right paragraph was
   replaced with a 3-line block using the SAME classes as the left (.text
   .smaller + .smallTitle[data-letters] + .crHeroSerifLine) so fonts, reveal
   and sizing come along automatically — but the theme scopes the serif-line
   style to .leftContent, so extend it to the right column here. */
.headerBigBlock .rightContent .smallTitle .crHeroSerifLine {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}
/* Descender un-clip (2026-08-31): the SplitText reveal rows are
   overflow:hidden mask boxes that the theme crushes to ~0.8em — tighter
   than the type itself — so descenders ("p" in "People") were cropped;
   obvious at phone sizes. Padding tricks could not win (the crushed box
   clips before padding helps); min-height re-opens each mask to a height
   that holds ascenders AND descenders while keeping the masked line-rise
   reveal. Glyphs sit on the first line box at the top of the row, so the
   extra height lands BELOW the baseline exactly where descenders need it.
   Applied to both hero columns. */
.headerBigBlock .leftContent .smallTitle .row,
.headerBigBlock .rightContent .smallTitle .row {
  min-height: 1.25em;  /* just clears the deepest descender (~1.16em) */
}
/* the taller masks already yield sub-descender air, so the inter-row gaps
   are small (the p/d touch is gone either way): */
@media (min-width: 581px) {
  .headerBigBlock .leftContent .smallTitle .row + .row,
  .headerBigBlock .rightContent .smallTitle .row + .row {
    margin-top: -0.1em;  /* user: "as close as you can before they touch" —
                            nets ~4px of daylight above the next line's caps */
  }
}

/* ===== MOBILE AUDIT ROUND 2 (2026-08-21) ===== */

/* Touch-device play badge: the theme's customPlayButtonResp runs four
   wrap-around marquee labels that collapse into overlapping text fragments at
   phone sizes. Hide the marquee machinery and show one clean centred label.
   2026-08-31: scoped to TABLET touch only — <=580 now rebuilds the marquee
   as a single scrolling "Play" strip (see the phone pill block). */
@media (hover: none) and (min-width: 581px) {
  .customPlayButtonResp .playCursor { display: none !important; }
  .customPlayButtonResp::after {
    content: 'Play';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #141414;
    font-family: "Poppins-font", sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .04em;
    pointer-events: none;
  }
}

@media (max-width: 580px) {
  /* Home intro scissors trio: the old fixed -24vw/-37vw offsets drifted as
     the stacked text column's height changed, landing the scissors on the
     "We leave the 40-page decks..." paragraph and the CONNECT pill. The
     theme's own 37.931vw .animation square IS the dead space right of /
     below the two pills (its 1px orange border is invisible on the orange
     band), so re-centre the cluster in that square: drift-proof because box
     and cluster share the data-scroll-speed parallax. (translate applies
     after scale in the matrix, so -50% offsets are true unscaled pixels.) */
  .aboutWorkBlock .innerAnimation {
    /* -10vw: at narrow widths the [02] copy wraps higher and rides into the
       bottom of the .animation square, so plain centring leaves the lowest
       scissors ~11px into the paragraph. Lifting 10vw centres the cluster in
       the real visual gap (buttons-bottom -> paragraph-top): measured 26px
       clear each side at 375w, ~69px at 390w, ~91px at 580w. */
    transform: translate(-50%, calc(-50% - 10vw)) scale(1.5) !important;
  }
  /* and freeze the gsap touch-path drift: on phones the fake pointer path
     swings the marks ~100px outside their box, over neighbouring copy. The
     spread lives on the inner <svg> transforms, so the trio keeps its shape. */
  .aboutWorkBlock .innerAnimation .svgWrapper {
    transform: none !important;
  }

  /* cultureQuote squares (home [08], services [07], work [01], our-process
     "Ready to go?"): the theme positions the mark with desktop pixel offsets
     and vw sizing that collapses to ~26px in a 142px square on phones.
     Size it proportionally (same 39% ratio as desktop) and centre it; the
     gsap drift still wobbles it a few px around centre, which is the design. */
  .cultureQuoteAnimationBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper {
    width: 18vw;              /* runner v2 2026-08-31: wider art (963x627), so
                                 width up 15->18vw, height = width * .651 */
    height: 11.72vw;
    left: 50%;
    top: 50%;
    margin: -5.86vw 0 0 -9vw;
  }
  .cultureQuoteAnimationBlock .cols .col .animation .innerAnimation .svgWrapper.svgWrapper svg {
    width: 100%;
    height: auto;
  }

  /* Cookies policy: theme's vw sizing left body copy under 13px — hold the
     site's 14px floor. */
  #pageContainer #cmplz-document,
  #pageContainer #cmplz-document p,
  #pageContainer #cmplz-document li {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* Footer contact text on phones: the theme's 1.1em bump makes
   jonny@synctum.com.au (172px at 1.1em) overflow its 161px column and wrap
   to two lines. 1em fits with ~5px slack at every phone width (both sizes
   are vw-derived, so the ratio is width-independent). */
@media (max-width: 580px) {
  footer .contentWrapper .cols .col .text,
  footer .contentWrapper .cols .col .text p,
  footer .contentWrapper .cols .col .text a {
    font-size: 1em;
  }
  footer .contentWrapper .cols .col .text p { font-size: 12.93px; font-size: 3.448vw; }
}

/* ===== MOBILE AUDIT ROUND 3 (2026-08-26) ===== */

/* Video overlay HUD: match the theme's control auto-hide. The theme fades
   .closeOverlay/.bottomContent when .videoOverlay gains .timer/.overlayOpen,
   but the injected sound cluster had no matching rule and stayed on screen. */
.videoOverlay .crHudSound { transition: opacity .3s; }
.videoOverlay.timer .crHudSound,
.videoOverlay.overlayOpen .crHudSound { opacity: 0; pointer-events: none; }

/* Video overlay HUD on phones: the base/tablet rules key the sound cluster to
   the DESKTOP/TABLET close-x geometry, but at <=580 the theme's x jumps to
   11.207vw at left:calc(100vw - 16.12vw) / top:4.483vw — the 34px mute disc
   landed on top of it (two merged circles, neither tappable). Stack the mute
   BELOW the x, right-aligned with it (right inset = 16.12 - 11.207 = 4.913vw),
   with a >=44px tap target. The title (.videoInfo, x<323px) stays clear. */
@media (max-width: 580px) {
  .videoOverlay .crHudSound {
    top: calc(4.483vw + 11.207vw + 3.5vw);  /* x top + x height + gap */
    right: 4.913vw;
    height: 44px;
  }
  .videoOverlay .crHudMute { width: 44px; height: 44px; }
}

/* Hero/project play slab -> compact pill on phones. The theme sizes the touch
   play badge off its desktop cursor-bubble ramp: at <=580 the shared
   .customPlayButtonResp.playVideo rule makes it a 29.31vw (~114px) flat orange
   square — a slab, not a control. Rebuild it as a solid orange pill with dark
   triangle glyph + label, 54px tall (matches the site's CTA pills). Placement is untouched: home flows it centred
   (position:relative + translateX(-50%)), project pages centre it with
   translate(-50%,-50%) — both are size-independent. Sel(0,4,1/0,5,1) beats the
   theme's sizing (0,2,0), placement (0,3,1) and the earlier ::after label
   (0,1,1); this file is linked last so ties also fall our way. */
@media (max-width: 580px) {
  html.touch .headerBigBlock .customPlayButtonResp.playVideo,
  html.touch .headerBigBlock .customPlayButtonResp.video,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video {
    width: auto;
    height: 54px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 0 24px 0 20px;
    overflow: visible;
  }
  /* HOME hero variant (2026-08-31, user): longer + thinner, at the hero's
     bottom, with the label as a scrolling "Play" marquee like the site's
     other pills. The pill markup already ships four cursor-bubble marquee
     labels — show just the first and let the theme's marquee JS drive it. */
  html.touch .headerBigBlock .customPlayButtonResp.playVideo,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video {
    width: 33vw;           /* user: half the length */
    height: 42px;
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
  }
  /* outline style (user): transparent fill + orange stroke; .playVideo added
     for specificity over the shared solid-orange .background rule below */
  html.touch .headerBigBlock .customPlayButtonResp.playVideo .background,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo .background,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video .background {
    background: transparent;                     /* user: no tint — frosted
                                                    like the scrolled header */
    -webkit-backdrop-filter: blur(5px);          /* user-tuned: a whisper of frost */
    backdrop-filter: blur(5px);
    border: 1.5px solid #ff4500;
    border-radius: 999px;
  }
  html.touch .headerBigBlock .customPlayButtonResp.playVideo:active .background,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo:active .background,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video:active .background {
    background: rgba(255, 69, 0, .18);
  }
  html.touch .headerBigBlock .customPlayButtonResp.playVideo .playCursor,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo .playCursor,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video .playCursor {
    display: block !important;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    opacity: 1;
    background: transparent !important;
    border-radius: 999px;
    overflow: hidden;
    z-index: 1;                  /* under the static icon (z-index 2) */
    /* gentle fade: text dissolves before it slides under the play icon,
       and eases out at the right edge */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 30px, #000 62px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg,
        transparent 30px, #000 62px, #000 calc(100% - 16px), transparent);
  }
  html.touch .headerBigBlock .customPlayButtonResp.playVideo .playCursor .labels,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo .playCursor .labels,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video .playCursor .labels {
    display: none !important;    /* the theme's rotated bubble labels */
  }
  html.touch .headerBigBlock .customPlayButtonResp.playVideo .playCursor::after,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo .playCursor::after,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video .playCursor::after {
    display: none !important;    /* the theme's cursor-dot disc */
  }
  html.touch .headerBigBlock .customPlayButtonResp.playVideo .playCursor::before,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo .playCursor::before,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video .playCursor::before {
    content: "CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 CLICK\00a0TO\00a0PLAY\00a0\00a0\00a0\00a0\00a0\00a0 ";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    color: #ff4500;
    font-family: "Poppins-font", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .12em;
    white-space: nowrap;
    pointer-events: none;
    animation: crPlayMarquee 9s linear infinite;
  }
  html.touch .headerBigBlock .customPlayButtonResp.playVideo::before,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo::before,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video::before {
    content: '';                 /* static play triangle, left side (user) */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid #ff4500;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    z-index: 2;
  }
  html.touch .headerBigBlock .customPlayButtonResp.playVideo::after,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.playVideo::after,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp.video::after {
    display: none;               /* superseded by the .playCursor marquee */
  }
  html.touch .headerBigBlock .customPlayButtonResp .background,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp .background {
    background: #ff4500;
    border: none;
    border-radius: 999px;
  }
  html.touch .headerBigBlock .customPlayButtonResp:active .background,
  html.touch .headerProjectBlock .imageWrapper .customPlayButtonResp:active .background {
    background: #d63c00;
  }
  /* (project pills now share the home pill design - round-9) */
}

/* ---- MOBILE HERO: bigger tagline + show right-side paragraph (2026-08-26) --
   Theme hides .headerBigBlock .rightContent entirely at <=580px
   (inline theme CSS: ".headerBigBlock .rightContent{display:none}").
   #pageContainer prefix (1,2,0)/(1,3,0) outranks every competing theme rule
   ((0,2,0) hide+positioning, (0,2,1) html/body .text.smaller, (0,1,0)
   .smallTitle). Only rightContent .innerContent needs !important — the
   data-scroll-speed parallax writes an inline gsap transform; same trick the
   theme uses on .leftContent .innerContent at this breakpoint. Hero markup
   exists only on the home page, so this cannot affect other pages. */
@media (max-width: 580px) {
  /* (a) enlarge the three tagline lines */
  #pageContainer .headerBigBlock .leftContent .text {
    font-size: 3.8vw;      /* round-4: condensed cluster — was 4.6vw */
    margin-bottom: 1.2vw;
  }
  #pageContainer .headerBigBlock .leftContent .smallTitle {
    font-size: 5.2vw;      /* round-4: condensed — was 6.2vw */      /* was 4.138vw: 16.1px -> 24.2px @390; longest line
                              "We Cut The Creative." ~275px, fits the 336px
                              padded column at 390px wide.
                              Avoid line-height here — the SplitText reveal is
                              geometry-sensitive (an lh bump correlated with a
                              stranded reveal; evidence was contaminated by the
                              preview-pane race, but the row-margin below does
                              the same job without touching split internals). */
  }
  /* tagline line spacing (2026-08-31, user: "line spacing is thin"): the two
     tagline lines are separate SplitText .row blocks whose boxes touch (0px
     gap, lh 1.2). Open the gap BETWEEN rows — margins sit outside the rows'
     overflow:hidden clip, so char geometry and the reveal are untouched.
     Rows are regenerated on every split; a stylesheet rule survives that. */
  #pageContainer .headerBigBlock .leftContent .smallTitle .row + .row {
    margin-top: -0.1em;  /* as tight as possible without touching */
  }

  /* (b) un-hide the desktop right paragraph, in flow beneath the tagline
     (DOM order is already leftContent -> rightContent) */
  #pageContainer .headerBigBlock .rightContent {
    display: block;
    position: relative;    /* beats base absolute AND the 1080-block rule,
                              both of which still apply at <=580 */
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
    text-align: center;    /* was text-align:right */
    padding: 1vw 8.5vw 0;  /* round-4: the two verses read as one block */
  }
  #pageContainer .headerBigBlock .rightContent .innerContent {
    transform: none !important;  /* neutralise gsap data-scroll-speed drift */
  }
  #pageContainer .headerBigBlock .rightContent .text {
    font-size: 3.8vw;      /* round-4: matches the left intro line */
    line-height: 1.3;
    margin-bottom: 1.2vw;
  }
  /* right column tagline mirror: same sizes as the left block */
  #pageContainer .headerBigBlock .rightContent .smallTitle {
    font-size: 5.2vw;      /* round-4: condensed — was 6.2vw */
  }
  #pageContainer .headerBigBlock .rightContent .smallTitle .row + .row {
    margin-top: -0.1em;  /* same as left */
  }

  /* (c2) ONE-GO REVEAL (round-4 2026-08-31): on phones the letter-by-letter
     split reveal is replaced by a single entrance — chars are pinned visible
     (this also makes the phone hero immune to the stranded-reveal race) and
     the two text blocks + pill fade/rise together once the intro wordmark
     has risen (wordmark chars run 3.15s..3.85s after crSeq). */
  #pageContainer .headerBigBlock .smallTitle[data-letters] { opacity: 1 !important; }
  #pageContainer .headerBigBlock .smallTitle .char {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }
  /* base hidden only BEFORE the sequence starts; the entrance uses
     fill-mode backwards so the animation is fully RELEASED when it ends —
     a lingering forwards-fill kept a transform/opacity effect applied to
     the pill, which made it its own backdrop root and silently killed the
     frosted-glass backdrop-filter on .background (it could only sample
     inside the pill = clear). */
  #pageContainer .headerBigBlock:not(.crSeq) .leftContent,
  #pageContainer .headerBigBlock:not(.crSeq) .rightContent,
  #pageContainer .headerBigBlock:not(.crSeq) .customPlayButtonResp.playVideo {
    opacity: 0;
  }
  #pageContainer .headerBigBlock.crSeq .leftContent,
  #pageContainer .headerBigBlock.crSeq .rightContent,
  #pageContainer .headerBigBlock.crSeq .customPlayButtonResp.playVideo {
    animation: crHeroTxtIn .8s cubic-bezier(.16,1,.3,1) 3.9s backwards;
  }
  /* skip path: no 3.45s runner to wait for — copy follows the quick drop */
  html.crLdSkip #pageContainer .headerBigBlock.crSeq .leftContent,
  html.crLdSkip #pageContainer .headerBigBlock.crSeq .rightContent,
  html.crLdSkip #pageContainer .headerBigBlock.crSeq .customPlayButtonResp.playVideo {
    animation-delay: .6s;
  }

  /* (c) spacing pass 2026-08-31: the Play pill's box sat flush against the
     paragraph's. Home hero only — the project-page pill is centred with
     translate(-50%,-50%) over the image and must not be offset. */
  #pageContainer .headerBigBlock .customPlayButtonResp.playVideo {
    margin-top: 5.5vw;     /* round-8b: ~30px, matching the word->text gap
                              for an evenly spaced, screen-centred composition */
  }

  /* (d) COMPRESS (2026-08-31 round 3, user: "very spaced out ... more
     compressed"). Measured @375x812 before: word->title 99px, tagline->para
     59px, para->Play 68px. Only the theme's leftContent PADDINGS are cut
     here — the inter-block MARGINS and the centring itself live in the
     "Phone hero — centered vertical rhythm" block further down, whose
     (1,3,0) child selectors outrank these (1,2,0) rules. */
  #pageContainer .headerBigBlock .leftContent {
    padding-top: 2vw;      /* theme: 6.9vw */
    padding-bottom: 0.5vw; /* round-4: verses read as one block */
  }
}
@media (max-width: 580px) {
  /* round-8: the intro runner plays at true screen centre, fades, and THEN
     the composition animates on (word chars 3.6s+, text/pill 3.9s). The
     mark is invisible after its 3.45s crMarkRun envelope, so the fixed
     positioning cannot haunt later scrolling. */
  .headerBigBlock .crHeroMark {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .headerBigBlock.crSeq .crHwC {
    animation-delay: calc(3.6s + var(--i, 0) * .07s);
  }
}
@keyframes crHeroTxtIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes crPlayMarquee {
  from { transform: translateY(-50%) translateX(0); }
  to   { transform: translateY(-50%) translateX(-50%); }
}
@media (max-width: 580px) and (prefers-reduced-motion: reduce) {
  #pageContainer .headerBigBlock .leftContent,
  #pageContainer .headerBigBlock .rightContent,
  #pageContainer .headerBigBlock .customPlayButtonResp.playVideo {
    opacity: 1;
    animation: none !important;
  }
}

/* ============================================================================
   MENU-OPEN HEADER CONTRAST (audit 2026-08-26) — <=580 only: hamburger/menu
   exist only there (theme hides both above it) and the orange header.open
   sheet is itself <=580-scoped, so desktop is untouched. When the menu opens,
   the theme pins the logo paths #ff4500 on the #ff4500 sheet (invisible; the
   logo is one inline SVG so it needs FILL — crContrast's color pin can't
   reach it, and no !important fill competes), and crContrast's
   "header.open .headerBar *{color:#141414!important}" turns the icon-font
   <i> glyphs black on their black discs. Make the logo black like the X, and
   give the disc glyphs back their site-wide orange.
   ========================================================================== */
@media (max-width: 580px) {
  header.open .headerBar .center .logo a svg path {
    fill: #141414 !important;   /* beats the theme's non-!important #ff4500 pins */
  }
  header.open .headerBar .right .socials .socialLink a i {
    color: #141414 !important;  /* 2026-08-31: discs removed — bare orange
                                   glyphs would vanish on the orange sheet */
  }
}

/* ============================================================================
   WORK LIST VIEW - TOUCH (audit 2026-08-26): kill the stray pale square
   before each row title. On touch the theme shows the hoverOverlay copy of
   each .projectList row and repaints its decorative year-marker
   <div class="square"> #f8f8f8 (work page head CSS, unconditional
   "html.touch ... .innerHoverOverlay .cols .col .square{background:#f8f8f8}").
   On our #1d1d1b page it reads as a broken icon. Hide it for touch only:
   desktop rows have no square at rest and keep the orange #ff4500 marker in
   the hover overlay (selector is gated on html.touch). Specificity (0,10,1)
   ties the theme's #f8f8f8 rule; this file loads last, so it wins - and no
   other rule sets display on .square, so no !important is needed.
   ========================================================================== */
html.touch .projectsOverviewBlock .projectsContainer .projectsList .projectList .hoverOverlay .innerHoverOverlay .cols .col .square {
  display: none;
}

/* ============================================================================
   WHO-WE-ARE TITLE SAFETY NET (audit 2026-08-26) — <=580 only. The howWeRoll
   statement on /work is revealed solely by a per-element GSAP ScrollTrigger
   (autoptimize_single_c0df0c1b...js initRows: SplitText -> .row/.char, chars
   parked at translateY(8.966vw) inside overflow:hidden rows, tweened to 0 on
   enter). On phones that trigger is built against a page ~3600px shorter than
   final (grid tiles are display:none until .visible lands) and under slow
   loads the create-loop never runs, leaving the title a blank block while the
   label/button/runner (revealed by the section's .inview) still show. Force
   the title visible on phones; desktop keeps the reveal animation.
   Cascade: (0,5,2) beats the theme's .normalTitle[data-letters]{opacity:0}
   (0,2,0) and .active (0,3,0); !important beats the theme's non-!important
   char translateY AND any stuck GSAP inline transform/opacity (the resize
   handler writes inline opacity:0 before its 250ms reset). File is linked
   last (id=crScisCss) so equal-specificity ties also fall our way.
   ========================================================================== */
@media (max-width: 580px) {
  .cultureQuoteAnimationBlock .cols .col .normalTitle[data-letters] {
    opacity: 1 !important;
  }
  .cultureQuoteAnimationBlock .cols .col .normalTitle[data-letters] .row .char {
    -webkit-transform: none !important;
    transform: none !important;
  }
}

/* ============================================================================
   WORK LIST VIEW - TOUCH, column tightening (audit 2026-08-26): the theme's
   phone rule gives the year column 17.759vw + 3.448vw padding — width that
   existed to house the (now hidden) year-marker square at its right edge —
   leaving ~55px of dead gutter between '25 and the title. Shrink the year
   column to fit its text and hand the freed width to the title column
   (bonus: ~30px less title truncation). Selectors are character-identical to
   the theme's winning <=580 html.touch rules; this file loads last, so it
   wins the order tie.
   ========================================================================== */
@media (max-width: 580px) {
  html.touch .projectsOverviewBlock .projectsContainer .projectsList .projectList .hoverOverlay .innerHoverOverlay .cols .col:first-child {
    width: 9.6vw;
    padding-right: 1.5vw;
  }
  html.touch .projectsOverviewBlock .projectsContainer .projectsList .projectList .hoverOverlay .innerHoverOverlay .cols .col:nth-child(2) {
    width: calc(100% - 9.6vw);
    padding-left: 2vw;
  }
}

/* ============================================================================
   CONNECT FORM NOTE (2026-08-31): feedback line for cutrun-connect-form.js.
   The theme leaves .wpcf7-response-output unstyled here (the CF7 stack that
   styled it isn't part of the static copy), so give the note the page's own
   voice: orange on the dark connect page, readable spacing under the button.
   ========================================================================== */
.wpcf7-form .wpcf7-response-output.crFormNote {
  margin: 1.2em 0 0;
  padding: 0.9em 1.1em;
  border: 1px solid #ff4500;
  border-radius: 0.5vw;
  color: #ff4500;
  font-size: 0.95em;
  line-height: 1.45;
}

/* ============================================================================
   Client logo marquee — size to content (2026-08-31). The theme forces every
   logo into a fixed 10vw x 3.75vw box (object-fit:contain), so square marks
   floated in dead space and wide wordmarks shrank. Let each img take its
   natural width at the band height (capped so ultra-wide wordmarks like the
   LUNA PARK arch can't dominate); the .item's own padding + separator line
   then give every logo the same true gutter. Selector matches the theme's
   chain exactly; this file loads last, so it wins the order tie.
   ========================================================================== */
.aboutWorkBlock .logoSection .marquees .marquee .itemsContainer .item img {
  width: auto;
  max-width: 16vw;
  height: 3.75vw;
  max-height: 3.75vw;
}
@media (max-width: 1080px) {
  .aboutWorkBlock .logoSection .marquees .marquee .itemsContainer .item img {
    width: auto;
    max-width: 24vw;
    height: 5.556vw;
    max-height: 5.556vw;
  }
}
@media (max-width: 580px) {
  .aboutWorkBlock .logoSection .marquees .marquee .itemsContainer .item img {
    width: auto;
    max-width: 45vw;
    height: 10.345vw;
    max-height: 10.345vw;
  }
}

/* ============================================================================
   Project pages — end-of-page seam fix (2026-08-31). The theme intends the
   LAST section to carry no margin (its section:last-child rule zeroes it and
   moves the space inside the grain texture as padding), but the template's
   band rule `#pageContainer .blocks.smallMargin section.crBand` (1,3,1)
   out-specifies the theme's `#pageContainer .blocks section:last-child`
   (1,2,1), so the final crRelatedBlock kept an 11-16vw margin that leaked
   PAST .grainBackground — a visible noise-texture seam plus a flat
   body-colored strip above the footer on every project page, all widths.
   (1,4,1) restores the intent; the phone rule also tightens the theme's
   27.586vw end padding, which read as dead space under the VIEW ALL button.
   ========================================================================== */
#pageContainer .blocks.smallMargin section.crBand:last-child {
  margin-bottom: 0;
}
@media (max-width: 580px) {
  #pageContainer .blocks.smallMargin section.crBand:last-child {
    padding-bottom: 14vw;
  }
}

/* ============================================================================
   Phone hero — fill the first screen (2026-08-31). At <=580 the hero is
   height:auto and its content came to ~779px, so a sliver of the next
   section's orange peeked in at the fold like a glitch band. Guarantee the
   hero covers the first viewport (svh tracks the real visible height under
   mobile browser chrome; vh is the fallback). The video layer is an
   absolute cover, so stretching is free.
   ========================================================================== */
@media (max-width: 580px) {
  #pageContainer .headerBigBlock,
  #pageContainer .headerBigBlock .innerAnimContainer {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* ============================================================================
   Phone hero — centered vertical rhythm (2026-08-31, <=580 only; round-3
   compression same day, user: "very spaced out... more compressed"). The
   stack (title / tagline / paragraph / play) was top-packed by container
   padding with ~160px dead space at the fold. Flex column: bottomContent
   keeps its margin-top:auto pin at the fold, and centerContent now ALSO
   carries margin-top:auto — the twin auto margins split the leftover slack
   evenly, so the wordmark+text group truly centres between the header
   clearance (24vw padding) and the marquee. Inter-block margins were the
   sprawl (7/5.5/9vw) and are cut to a tight rhythm; the centerContent box
   runs ~47px below the visible wordmark, so even margin-bottom:0 leaves a
   ~55px word->title gap. The theme centres the play pill via left:50% +
   translateX(-50%) — under flex centring that would double-shift it, so
   both are neutralised here. NOTE these (1,3,0) child selectors outrank the
   (1,2,0) MOBILE HERO rules — margins for the hero rhythm live HERE, not
   there. */
@media (max-width: 580px) {
  #pageContainer .headerBigBlock .innerAnimContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24vw 0 0;
  }
  #pageContainer .headerBigBlock .innerAnimContainer > .centerContent {
    margin-top: auto;          /* round-3: pairs with bottomContent's auto */
    margin-bottom: -10vw;      /* round-8c: the wordmark's box runs ~47px
                                  below the visible word — pull the text up
                                  so word->text matches text->pill (~30px)
                                  and the auto margins centre the whole
                                  composition on the screen */
    left: auto;                /* theme centres it with left:50% + translateX(-50%); */
    -webkit-transform: none;   /* flex centring already does that — the pair would    */
    transform: none;           /* double-shift it off-screen                          */
  }
  #pageContainer .headerBigBlock .innerAnimContainer > .leftContent {
    margin-bottom: 1vw;        /* round-4: verses condensed into one block */
    width: 100%;
  }
  #pageContainer .headerBigBlock .innerAnimContainer > .rightContent {
    margin-bottom: 2.5vw;      /* round-3: was 9vw — biggest para->Play gap */
  }
  html.touch #pageContainer .headerBigBlock .customPlayButtonResp.playVideo {
    left: auto;
    -webkit-transform: none;
    transform: none;
  }
  #pageContainer .headerBigBlock .innerAnimContainer > .bottomContent {
    margin-top: auto;
    padding-bottom: 4vw;
  }
}

/* ============================================================================
   Vertical project pages — even hero top spacing on phones (2026-08-31).
   The vertical template's hero (.headerProjectBlock.crBand — only the four
   vertical pages carry .crBand on the hero) hardcodes padding-top:175px,
   sized for desktop clearance; standard project heroes use 19.828vw (~74px
   at 375), so vertical pages opened with ~100px of extra dead space above
   the headline. Match the standard rhythm at <=580.
   ========================================================================== */
@media (max-width: 580px) {
  #pageContainer .blocks .innerBlocks .headerProjectBlock.crBand {
    padding-top: 19.828vw;
  }
}

/* ============================================================================
   Vertical project pages — surface the project-title line on phones
   (2026-08-31). Standard project pages open with the small orange title
   ("Grimshaw Architects — In Conversation") above the headline; on the
   vertical template that h1.projectTitle lives inside .crVText (the desktop
   right column) and ended up BELOW the film on phones — the page looked
   like it had no header. Desktop needs the markup where it is, so at <=580
   the title is lifted out visually: absolutely positioned into the hero's
   top padding, styled to match the standard smallTitle, with the headline
   pushed down to make room.
   ========================================================================== */
@media (max-width: 580px) {
  #pageContainer .headerProjectBlock.crBand { position: relative; }
  #pageContainer .headerProjectBlock.crBand .crVText .projectTitle {
    position: absolute;
    top: 19.828vw;
    left: 6.897vw;
    right: 6.897vw;
    margin: 0;
    color: #ff4500;
    font-size: 4.31vw;
    line-height: 1.4;
    font-weight: 500;
  }
  #pageContainer .headerProjectBlock.crBand .crVHead {
    padding-top: 10.5vw;
  }
}

/* ============================================================================
   HAMBURGER COLOUR (2026-08-31) — <=580 only (the theme hides the hamburger
   above that). User: bars orange at rest, black once the menu opens over the
   orange sheet. The theme paints the three .bar spans #1d1d1b via
   `header .headerBar .right #hamburger .hamburgerIcon .bar` plus .light /
   .scrolled variants (1,5,2). The orange rules below mirror those variants to
   tie them — this file loads last, so ties fall our way. Legibility over
   orange page bands is already handled site-wide by croTrigger (index-inline
   on every page): it scrims the headerBar rgba(20,20,19,.65) whenever >=2 of
   its 5 probe points sit on #ff4500, except while the menu is open — and when
   the menu IS open the sheet is orange, so the .open rule (placed last; also
   (1,5,2), beating the base and tying the variants by order) flips the X to
   black. */
@media (max-width: 580px) {
  header .headerBar .right #hamburger .hamburgerIcon .bar,
  header.light .headerBar .right #hamburger .hamburgerIcon .bar,
  header.scrolled .headerBar .right #hamburger .hamburgerIcon .bar {
    background: #ff4500;
  }
  header.open .headerBar .right #hamburger .hamburgerIcon .bar {
    background: #141414;
  }
}

/* ============================================================================
   RUNNER ANIMATION PAINT STABILITY (2026-08-31) — user saw occasional
   flicker/stutter on the frame-stepped marks. Two causes addressed:
   (1) each opacity step repaints the svg on the main thread, and on busy
   frames (Lenis scroll + video decode) a step could land late or collide
   with a full-page repaint — translateZ(0) gives the animated marks their
   own compositor layer so the stepping is isolated (scoped to the hero mark
   and the culture squares only: the aboutWorkBlock cluster svgs carry their
   own translate() spreads and must NOT be touched). The keyframe off%% in
   every copy was also tightened to 4 decimals — 3 decimals left sub-ms
   blank/doubled windows at frame boundaries that occasionally landed on a
   rendered frame as a one-frame flash.
   (2) FOLLOW-UP: the /work square originally ran a PIXEL-ART runner whose
   29 frames were ~43KB of tiny traced rectangles — first-time rasterization
   of each frame during a fast post-load scroll flickered until every frame
   had painted once. Replaced with the same cheap 30f geometric runner v2 as
   the other squares (user call), so the crispEdges rule that pinned its
   pixel edges is gone with it. */
.headerBigBlock .crHeroMark svg,
.cultureQuoteAnimationBlock .cols .col .animation .innerAnimation .svgWrapper svg {
  transform: translateZ(0);
}


/* ============================================================================
   HOME WORK CARDS - METADATA IN TWO COLUMNS (round-8 2026-08-31, <=580):
   "Views / 2.400.000" and "Delivery time / ..." become label-over-value
   columns sitting side by side instead of two full-width rows.
   ========================================================================== */
@media (max-width: 580px) {
  .aboutWorkBlock .project .projectContent .bottomContent {
    display: flex;
    gap: 5vw;
    align-items: flex-start;
  }
  .aboutWorkBlock .project .projectContent .bottomContent .row {
    display: flex;
    flex-direction: row;   /* label and value on ONE line */
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1.6vw;
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* ============================================================================
   SOCIAL ICONS — BARE GLYPHS (2026-08-31, user: "remove the black circle...
   as if they were off in case I don't like them"). The theme paints each
   header social link as a 39px rgb(20,20,20) disc with an orange icomoon
   glyph; the disc goes transparent and the glyph stays orange. Legibility
   triggers: over orange page bands the croTrigger scrim (dark, .65) already
   backs the header when .active/.scrolled — the glyphs stay orange there.
   The unscrimmed orange cases flip the glyphs black: the open menu sheet
   (rule in the MENU-OPEN block above) and a .light header sitting over
   orange content at the top of a page — but ONLY while unscrimmed: once
   .scrolled lands, croTrigger's dark band backs the header and the flip
   must release or the black glyphs vanish into the band (user report
   2026-09-02: "instagram and linkedin ... stay orange as the header brings
   in a black tint"). Hence the :not(.scrolled) guard. */
header .headerBar .right .socials .socialLink a {
  background: transparent !important;
}
header.light.cr-over-orange:not(.open):not(.scrolled) .headerBar .right .socials .socialLink a i {
  color: #141414 !important;
}

/* ============================================================================
   WORK LIST - BASE NAMES ONLY ON PHONES (round-8 2026-08-31): the list rows'
   long "Client — Campaign" titles truncate/break at <=580, so the em-dash
   tail is wrapped in .crTitleTail in work/index.html (99 spots: grid cols +
   touch hoverOverlay copies) and hidden here. Desktop keeps full titles.
   ========================================================================== */
@media (max-width: 580px) {
  .projectsOverviewBlock .smallTitle .crTitleTail { display: none; }
}

/* work list rows: Views / Delivery side by side and smaller (round-9) */
@media (max-width: 580px) {
  .projectsOverviewBlock .projectList .bottomContent {
    display: flex;
    gap: 4vw;
    align-items: baseline;
    padding-left: 11.5vw !important;  /* band left edge aligned under the
                                         title (title x 18.5vw, band box 7vw) */
    margin-left: 0 !important;
  }
  .projectsOverviewBlock .projectList .bottomContent .row .label,
  .projectsOverviewBlock .projectList .bottomContent .row .info {
    width: auto !important;       /* theme gives labels a fixed column width */
    margin: 0 !important;
    padding: 0 !important;
  }
  .projectsOverviewBlock .projectList .bottomContent .row {
    display: flex;
    flex-direction: row;   /* "Views 320,000" on one line */
    align-items: baseline;
    gap: 0 1.6vw;
    flex: 0 1 auto;
  }
  .projectsOverviewBlock .projectList .bottomContent .row .label,
  .projectsOverviewBlock .projectList .bottomContent .row .info {
    font-size: 2.9vw;
    line-height: 1.5;
    white-space: nowrap;   /* "6 weeks" was wrapping mid-value */
  }
}

/* ============================================================================
   Card pills ("TAKE A LOOK" etc, .bottomButton .button) — scissors colour
   (2026-08-31). crContrast pins ALL .button svg paths #141414, which is right
   for orange pills but made the scissors invisible on these DARK card pills.
   crContrast already flips the LABEL orange->black on hover here; give the
   scissors the same life: orange at rest, black once hover flips the pill
   orange (and triggers the snip animation). (0,2,2)/(0,3,2) out-specify
   crContrast's (0,1,2) and this file loads last.
   ========================================================================== */
.bottomButton .button svg path { fill: #ff4500 !important; }
.bottomButton .button:hover svg path { fill: #141414 !important; }

/* ============================================================================
   WORK PAGE "WHO WE ARE" CLOSER - MOBILE POLISH (round-10 2026-08-31,
   <=580 only; scoped by the work page's .howWeRoll variant class so the
   home/services/our-process culture blocks are untouched). Before: ~185px of
   dead space above the statement, flat single-font type, and the runner
   square floating alone at the right. After: tightened air, the hero's
   mixed-font treatment ("This is Cut/Run." in the italic serif), and the
   square centred under the text like a sign-off mark.
   ========================================================================== */
@media (max-width: 580px) {
  .cultureQuoteAnimationBlock.howWeRoll {
    margin-top: -10vw;
    padding-top: 8vw;
    padding-bottom: 11.5vw !important;  /* = the 8vw top gap + label offset,
                                           measured equal at 43px; a theme
                                           touch rule pins 27.586vw without
                                           the !important */
  }
  .cultureQuoteAnimationBlock.howWeRoll .cols .col {
    margin-bottom: 0 !important;   /* stray col margins inflated the bottom */
  }
  .cultureQuoteAnimationBlock.howWeRoll .cols .col .animation {
    margin-top: -11.5vw;   /* theme: -19.31vw — square top flush with the
                              SERVICES pill (tuned in two measured passes;
                              the pill's reveal translateY(1.25vw) skews
                              naive measurements) */
  }
  /* round-10c: float-wrap experiment reverted (user) — the square keeps the
     THEME's own position; only the section gap and the serif sign-off stay. */
  .cultureQuoteAnimationBlock.howWeRoll .cols .col .normalTitle .innerTitle {
    line-height: 1.32;
  }
  .cultureQuoteAnimationBlock.howWeRoll .cols .col .normalTitle .innerTitle:last-child:not(:first-child) {
    margin-top: 2vw;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 7vw;
  }
}

/* ============================================================================
   Marquee pill edge-fade — SITE-WIDE (2026-09-01). Scrolling pill text used
   to clip with a hard line; now it fades at the pill ends (the mobile
   showreel play pill treatment). TWO RULES, per the user:
   1. PLAIN pills (no icon, e.g. SERVICES): STRONG 22px fade, and the scroll
      runs the FULL width of the pill — the clip box (.label) is stretched to
      the pill edges with a negative margin + compensating padding (mirrors
      the theme's .button padding per breakpoint), so text fades in at one
      rounded end and out at the other.
   2. ICON pills (e.g. CONNECT): LIGHT 10px fade; the side the icon sits on
      keeps its inset so text hands off ahead of the icon, and only the free
      side runs to the pill edge. Pills with icons BOTH sides (card pills,
      modal play) keep both insets.
   Scoped to buttons that actually contain a marquee (:has(.marqueeWrapper))
   so static-label buttons are untouched. The .icon is a sibling of .label
   and never fades.
   ========================================================================== */
.button:has(.marqueeWrapper) .label {
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  margin: 0 -1.25vw;
  padding: 0 1.25vw;
}
.button:has(.marqueeWrapper):has(.label ~ .icon) .label,
.button:has(.marqueeWrapper):has(.icon ~ .label) .label {
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.button:has(.marqueeWrapper):has(.label ~ .icon) .label { margin-right: 0; padding-right: 0; }
.button:has(.marqueeWrapper):has(.icon ~ .label) .label { margin-left: 0; padding-left: 0; }
@media (max-width: 1080px) {
  .button:has(.marqueeWrapper) .label { margin: 0 -1.852vw; padding: 0 1.852vw; }
  .button:has(.marqueeWrapper):has(.label ~ .icon) .label { margin-right: 0; padding-right: 0; }
  .button:has(.marqueeWrapper):has(.icon ~ .label) .label { margin-left: 0; padding-left: 0; }
}
@media (max-width: 580px) {
  .button:has(.marqueeWrapper) .label { margin: 0 -5.172vw; padding: 0 5.172vw; }
  .button:has(.marqueeWrapper):has(.label ~ .icon) .label { margin-right: 0; padding-right: 0; }
  .button:has(.marqueeWrapper):has(.icon ~ .label) .label { margin-left: 0; padding-left: 0; }
}

/* ============================================================================
   HEADER LOGO — SINGLE COPY (2026-09-02, user: "2 of the logos animating in"
   on refresh). The theme stacks FOUR identical logo svgs in .center .logo
   (main + three absolute .smallLogo layers built for the old brand's
   scroll-swap) and intros them with different directions and delays — the
   staggered duplicates read as a doubled logo. Nothing differentiates the
   smallLogo layers on this build (hideLogo has no CSS anywhere, smallLogo
   has no state rules), so hide them; the main svg keeps the theme's own
   drop-down + fade (translateY -1.25vw -> 0 with opacity, .45s at .3s).
   ========================================================================== */
header .headerBar .center .logo a svg.smallLogo { display: none !important; }