/* ============================================================ Steer Media — built to the Mōno™ layout system Light base, alternating black sections, Inter, red accent. ============================================================ */ :root{ --white:#FFFFFF; --grey:#F5F5F5; --black:#000000; --ink:#000000; /* .55, not .52 — at .52 this lands on 4.27:1 against white and 4.19:1 against --grey, both short of the 4.5:1 WCAG AA floor, and it carries every section label (.top-text) and every intro paragraph (.lead). .55 is the first value that clears AA on both grounds, and it happens to be the same alpha as --d-muted, so the light and dark halves of the palette are now mirror images instead of one being quietly weaker. */ --muted:rgba(0,0,0,.55); --line:rgba(0,0,0,.12); --red:#E81E25; /* inverted tokens for .drk sections */ --d-text:#FFFFFF; --d-muted:rgba(255,255,255,.55); --d-line:rgba(255,255,255,.16); --pad:clamp(20px,3.6vw,56px); --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --ease:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased} body{ font-family:var(--font); background:var(--white); color:var(--ink); overflow-x:hidden; font-feature-settings:"ss01","cv01"; } img{display:block;width:100%;height:100%;object-fit:cover} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none} ul{list-style:none} .container{max-width:1368px;margin:0 auto;width:100%} section{padding:clamp(70px,9vw,120px) var(--pad);position:relative} /* ---------- dark sections ---------- */ .drk{background:var(--black);color:var(--d-text)} .drk .top-text{color:var(--d-muted)} .drk .lead{color:var(--d-muted)} .grey{background:var(--grey)} /* ---------- Mōno signature: parenthesised labels ---------- */ .top-text{ font-size:13px;font-weight:400;letter-spacing:-.01em;color:var(--muted); display:flex;align-items:center;gap:10px; } .top-text.gry{color:var(--muted)} .label-row{ display:flex;justify-content:space-between;align-items:center; gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:clamp(32px,4vw,64px); } .drk .label-row{border-color:var(--d-line)} .circle-divider{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none} /* ---------- type ---------- */ .h1{ font-size:clamp(64px,12.2vw,176px);font-weight:600;line-height:.92;letter-spacing:-.05em; } .h2{ font-size:clamp(30px,4.4vw,64px);font-weight:600;line-height:1.02;letter-spacing:-.04em; max-width:16ch; } .h3{font-size:clamp(20px,2.2vw,32px);font-weight:600;letter-spacing:-.032em} .lead{font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--muted);max-width:46ch} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-size:14px;font-weight:500;letter-spacing:-.01em; padding:14px 24px;border-radius:100px; position:relative;overflow:hidden;isolation:isolate; transition:color .45s var(--ease); border:1px solid var(--line); } .btn svg{width:13px;height:13px;flex:none;transition:transform .16s var(--ease)} .btn::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit; transform:translateY(101%);transition:transform .16s var(--ease)} .btn--dark{background:var(--black);color:#fff;border-color:var(--black)} .btn--dark::before{background:var(--red)} .btn--light{background:#fff;color:var(--black);border-color:#fff} .btn--light::before{background:var(--red)} .btn--light:hover{color:#fff} .btn--ghost::before{background:var(--black)} .btn--ghost:hover{color:#fff} /* Lift on light backgrounds only. A dark drop shadow reads as dirt on a black section, so anything inside .drk or a black card opts out. */ .btn--dark,.btn--ghost,.nav__cta{ box-shadow:0 14px 30px rgba(0,0,0,.20), 0 3px 8px rgba(0,0,0,.10); /* transform is deliberately absent: initMagnetic() drives these with GSAP, and a CSS transition on transform would re-animate every frame it writes, making the magnetic pull lag behind the cursor. */ transition:color .45s var(--ease),box-shadow .45s var(--ease); } .btn--dark:hover,.btn--ghost:hover,.nav__cta:hover{ box-shadow:0 20px 42px rgba(0,0,0,.26), 0 5px 12px rgba(0,0,0,.13); } .drk .btn,.panel--dark .btn,.reel .btn{box-shadow:none} .drk .btn:hover{box-shadow:none} .drk .btn--ghost{border-color:var(--d-line)} .drk .btn--ghost::before{background:#fff} .drk .btn--ghost:hover{color:var(--black)} .btn:hover::before{transform:translateY(0)} .btn:hover svg{transform:translate(3px,-3px)} .btn--wide{width:100%;justify-content:center} /* ============================================================ PRELOADER ============================================================ */ .loader{position:fixed;inset:0;z-index:9999;background:var(--black); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px} .loader__logo{width:clamp(160px,22vw,300px);height:auto} .loader__bar{width:min(280px,52vw);height:1px;background:rgba(255,255,255,.2)} .loader__bar span{display:block;height:100%;width:0;background:var(--red)} .loader__count{ position:absolute;bottom:var(--pad);right:var(--pad); font-size:13px;color:rgba(255,255,255,.5); } /* ============================================================ CURSOR ============================================================ */ /* The red dot IS the pointer, so the system arrow is hidden and the dot has to carry the job on its own. At 8px flat red it disappeared against the red accent and against busy photography — 13px plus a white ring and a soft drop keeps it findable on white, on black and over an image. */ /* Hidden until initCursor() says otherwise. `body.has-dot-cursor` is the ONE switch for the whole swap — showing the dot and hiding the system pointer are the same decision, so they must never be able to disagree. Duplicating the test as a media query here is what lets that happen: initCursor() gates on width at load and does not re-check, so a window resized past the breakpoint would hide the system pointer with no dot to replace it. */ .cursor{position:fixed;top:0;left:0;z-index:9000;pointer-events:none; width:13px;height:13px;border-radius:100px;background:var(--red); display:none;align-items:center;justify-content:center; transform:translate(-50%,-50%); /* The red dot IS the pointer now, so it has to carry the job alone. At 8px flat red it vanished against the red accent and against busy photography; 13px plus a white ring and a soft drop keeps it findable on white, on black and over an image. */ box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 2px 10px rgba(0,0,0,.4); transition:width .4s var(--ease),height .4s var(--ease),box-shadow .4s var(--ease)} body.has-dot-cursor .cursor{display:flex} .cursor__label{font-size:11px;font-weight:500;color:#fff;opacity:0;white-space:nowrap;transition:opacity .25s} /* expanded into a label chip the ring reads as an outline, so it goes and the depth shadow does the separating instead */ .cursor.is-active{width:72px;height:72px;box-shadow:0 6px 22px rgba(0,0,0,.3)} .cursor.is-active .cursor__label{opacity:1} /* `!important` because ~17 components set their own `cursor:pointer`, each of which outranks a bare `*`. Text fields keep the native I-beam — there the system cursor still carries information the dot cannot. */ /* body itself as well as its descendants — `*` does not match its own root, so without the first selector the system pointer reappears over bare ground. */ body.has-dot-cursor, body.has-dot-cursor *{cursor:none !important} body.has-dot-cursor input, body.has-dot-cursor textarea, body.has-dot-cursor select, body.has-dot-cursor [contenteditable]{cursor:auto !important} /* ============================================================ NAV ============================================================ */ /* Opacity is owned by CSS here, never by GSAP — that keeps the intro reveal and the scroll fade on one transition instead of fighting each other. */ .nav{position:fixed;top:0;left:0;right:0;z-index:800; display:flex;align-items:center;justify-content:space-between; padding:18px var(--pad);opacity:0; transition:opacity .3s var(--ease),transform .55s var(--ease),background .4s,backdrop-filter .4s} .nav.is-ready{opacity:1} .nav.is-stuck{background:rgba(255,255,255,.82);backdrop-filter:blur(14px)} .nav.is-hidden{transform:translateY(-105%)} .nav.is-over-wall{opacity:0;pointer-events:none} .nav__logo img{width:clamp(92px,8vw,112px);height:auto;transition:opacity .4s} .nav__logo:hover img{opacity:.6} .nav__links{display:flex;gap:2px} .nav__link{position:relative;overflow:hidden;height:18px;display:flex;flex-direction:column; font-size:14px;font-weight:400;padding:0 14px} .nav__link span{line-height:18px;transition:transform .2s var(--ease)} .nav__link:hover span{transform:translateY(-18px)} .nav__link span:last-child{color:var(--red)} .nav__cta{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500; border:1px solid var(--line);border-radius:100px;padding:10px 18px; transition:background .4s,color .4s,border-color .4s} .nav__cta-dot{width:5px;height:5px;border-radius:50%;background:var(--red)} .nav__cta:hover{background:var(--black);color:#fff;border-color:var(--black)} .nav__burger{display:none;width:32px;height:18px;position:relative;cursor:pointer} .nav__burger span{position:absolute;left:0;right:0;height:1.5px;background:var(--ink); transition:transform .45s var(--ease)} .nav__burger span:first-child{top:4px} .nav__burger span:last-child{bottom:4px} body.menu-open .nav__burger span{background:#fff} body.menu-open .nav__burger span:first-child{transform:translateY(4px) rotate(45deg)} body.menu-open .nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg)} /* ============================================================ DOCK — floating bottom pill nav, used past the hero. Hidden by default; slides up when the scroll goes idle. ============================================================ */ .dock{ position:fixed;left:50%;bottom:clamp(16px,2.4vw,30px);z-index:690; display:flex;align-items:center;gap:clamp(8px,1.6vw,26px); padding:10px clamp(14px,1.6vw,22px); /* frosted glass: translucent dark tint + strong gaussian blur */ background:rgba(36,36,40,.44); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.14); border-radius:100px;box-shadow:0 18px 48px rgba(0,0,0,.32),0 4px 14px rgba(0,0,0,.16); /* start hidden below the fold, centred; .is-up brings it into view */ transform:translate(-50%,150%);opacity:0;pointer-events:none; transition:transform .6s var(--ease),opacity .5s var(--ease); } .dock.is-up{transform:translate(-50%,0);opacity:1;pointer-events:auto} .dock__link{ position:relative;overflow:hidden;height:18px;display:flex;flex-direction:column; font-size:14px;font-weight:500;color:#fff;padding:0 clamp(6px,1vw,14px); } /* dark glass → recolour the near-black wordmark to white (keep the red dot) */ .dock__logo svg [fill="#0B0B0C"]{fill:#fff} .dock__link span{line-height:18px;transition:transform .2s var(--ease)} .dock__link:hover span{transform:translateY(-18px)} .dock__link span:last-child{color:var(--red)} .dock__logo{display:flex;align-items:center;justify-content:center;padding:0 clamp(4px,.6vw,10px)} /* the injected SVG has no width of its own — size it here (also covers the fallback via .dock-logo) */ .dock__logo svg,.dock__logo .dock-logo{width:clamp(84px,7vw,104px);height:auto;display:block} /* the red dot in the wordmark pulses */ .dock__logo .dock-dot{ transform-box:fill-box;transform-origin:center; animation:dockDot 2.2s var(--ease) infinite; } @keyframes dockDot{ 0%,100%{transform:scale(1);opacity:1} 45%{transform:scale(1.55);opacity:.7} } @media(max-width:560px){ .dock{gap:4px;padding:8px 12px} .dock__link{font-size:12.5px;padding:0 6px} } /* Thumb-sized hit areas for the two primary mobile controls. Must stay BELOW the 560px block above, which also sets .dock padding — otherwise that rule wins on a phone and the dock grows by the padding instead of absorbing it. .dock__link cannot simply take padding: its `overflow:hidden` + `height:18px` IS the mask that hides the second span until hover, so padding would reveal both labels at once. Transparent borders work because overflow clips to the PADDING box — the 18px mask is untouched while the border box grows to 44. Dock padding drops to compensate, so the pill only gains 6px overall. */ @media (pointer:coarse){ .dock{padding-block:0} .dock__link{height:44px;border-block:13px solid transparent} .nav__burger::after{content:"";position:absolute;inset:-13px -6px} .nav__logo{position:relative} .nav__logo::after{content:"";position:absolute;inset:-6px -4px} } .menu{position:fixed;inset:0;z-index:700;background:var(--black);color:#fff; padding:100px var(--pad) var(--pad); display:flex;flex-direction:column;justify-content:space-between; clip-path:inset(0 0 100% 0);transition:clip-path .4s var(--ease);pointer-events:none} body.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto} .menu__item{display:flex;align-items:baseline;gap:16px; font-size:clamp(32px,8.5vw,58px);font-weight:600;letter-spacing:-.04em; padding:12px 0;border-bottom:1px solid var(--d-line); transition:color .35s,padding-left .45s var(--ease)} .menu__item em{font-size:12px;font-style:normal;color:var(--d-muted)} .menu__item:hover{color:var(--red);padding-left:14px} .menu__foot{display:flex;justify-content:space-between;font-size:13px;color:var(--d-muted);padding-top:24px} /* ============================================================ HERO — white panel scales down to reveal the image wall ============================================================ */ .hero{height:320vh;padding:0;background:var(--black);position:relative} .hero__pin{ position:sticky;top:0;height:100vh;height:100svh;overflow:hidden; display:flex;align-items:center;justify-content:center; } /* full-bleed wall sitting behind the panel */ /* Ratio-aware wall. Twelve columns of short rows gives a fine enough lattice that each tile can take a span matching its own aspect ratio — portrait images get tall cells, landscape wide ones — instead of every picture being centre-cropped into the same box. `dense` back-fills the gaps that leaves. */ /* Ratio-aware wall. `--u` is set from JS to the measured column width so the grid units are SQUARE — only then does a span of N columns × M rows actually render at ratio N/M, letting each tile match its own image. */ .hero__wall{ position:absolute;inset:0;z-index:0; display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:var(--u,56px); grid-auto-flow:dense; gap:8px;padding:8px; overflow:hidden; } .hero__wall figure{ overflow:hidden;border-radius:4px;background:#111; grid-column:span 4;grid-row:span 4; /* default until the ratio is measured */ } .hero__wall img{width:100%;height:100%;object-fit:cover;object-position:center} /* the panel that shrinks */ .hero__panel{ /* 90%, not 80%. Measured against a black patch of the wall showing through: body text is 16.7:1 at 90% and 13.1:1 at 80% — both far past the 4.5:1 minimum — but the muted copyright line drops to 3.80:1 at 80%, under the threshold. 90% keeps every element legible. */ position:relative;z-index:2;background:rgba(255,255,255,.9); width:100%;height:100%; display:flex;flex-direction:column;justify-content:space-between; padding:clamp(80px,9vw,120px) var(--pad) clamp(24px,3vw,44px); /* The panel is scaled down on scroll, and scale multiplies the radius — so this is sized to read correctly once shrunk, not at full bleed. */ border-radius:clamp(18px,2vw,30px); overflow:hidden; will-change:transform; } /* the 4-column rule grid + dot markers */ .hero__rules{position:absolute;inset:0;pointer-events:none} .hero__rules span{position:absolute;top:0;bottom:0;width:1px;background:var(--line)} .hero__dots{position:absolute;top:50%;left:0;right:0;height:0;pointer-events:none} .hero__dots i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--ink);top:-2.5px} .hero__mid{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)} .hero__top{display:grid;grid-template-columns:1fr 1fr;gap:30px;position:relative;z-index:2} .hero__services li{ font-size:clamp(11px,.95vw,13.5px);font-weight:600;letter-spacing:-.01em; line-height:1.65; } /* The list reads as a plain stack until you approach it — the rule wipes in from the left on hover, so the affordance appears on intent rather than dressing seven links in permanent underlines. */ .hero__services a{ display:inline-block;position:relative; transition:color .35s var(--ease); } .hero__services a::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--red);transform:scaleX(0);transform-origin:left; transition:transform .45s var(--ease); } .hero__services a:hover{color:var(--red)} .hero__services a:hover::after{transform:scaleX(1)} /* the category line — small by design; the seven service names above it do the loud work, this just names the business and the two markets. Overrides .top-text's flex row: as a flex container the label and the city pair become two separate blocks that wrap independently, which at narrow widths reads as two stray fragments. Block + inline dot lets the whole thing wrap as one sentence. */ .hero__what{ display:block; font-size:clamp(11px,.95vw,13px);font-weight:500;line-height:1.45; margin-bottom:14px;text-wrap:balance; } .hero__what .circle-divider{ display:inline-block;margin:0 7px;vertical-align:middle; } /* Now that the service names are links they are tap targets, and an 18px row is not one. Opening the leading to 38px puts seven comfortable rows in the ~406px above the hero's midline, so nothing collides with it. */ @media (pointer:coarse){ /* 38px measured out at 36px of real target. 44 is what a thumb wants, and the list has room for it. */ .hero__services li{line-height:44px} } .hero__pitch{justify-self:end;max-width:330px} .hero__pitch p{ font-size:clamp(11px,.95vw,13.5px);font-weight:600;line-height:1.45; margin-bottom:18px; } /* The "Scroll Down" pill is centred at the foot of the hero. That used to land in the empty column gap between "Steer" and "Media"; the headline is one continuous line now, so the pill would sit on top of it. Reserve a band at the bottom of the panel and the wordmark lifts clear of it. */ .hero__bottom{position:relative;z-index:2;padding-bottom:clamp(48px,6.4vh,66px)} .hero__copyright{ /* a shade darker than --muted: at 12px over a now-translucent card the default .52 alpha measured 4.06:1, just under the 4.5:1 minimum */ display:block;text-align:right;font-size:12px;color:rgba(0,0,0,.6); margin-bottom:clamp(20px,4vw,60px); } /* Was a two-column grid holding "Steer | Media" side by side. The headline is now a sentence, so the two blocks stack instead — and the type steps down, because "Advertising Agency" is three times the width of "Media" and would run off the panel at the old 168px ceiling. */ .hero__wordmark{ display:block; font-size:clamp(28px,8.4vw,130px);font-weight:600;letter-spacing:-.05em;line-height:.92; } .hero__word{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em} .hero__word > span{display:block} .hero__wordmark sup{font-size:.34em;vertical-align:super} .hero__scrolltag{ position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3; background:var(--black);color:#fff;font-size:11px;border-radius:100px;padding:6px 14px; } /* ============================================================ PARTNERS — rises over the wall with a curved top edge ============================================================ */ /* Pulled up over the last stretch of the hero so the panel rises across the still-pinned image wall, rather than over the hero's spent tail. */ /* Partners and Work read as one continuous grey panel, so the join between them gets a single modest gap rather than three stacked ones. */ .partners{ background:var(--grey);position:relative;z-index:5; margin-top:-90vh;padding-top:clamp(60px,7vw,100px); padding-bottom:clamp(26px,3vw,44px); } /* ---------- animated arc cap ---------- An SVG quadratic curve rather than a border-radius ellipse. A radius cap curls down hard at the ends (the "too rounded" corners) and its curvature can't be animated; a Bézier lets the control point travel from flat to arched on scroll, and meets the side edges at a shallow tangent. */ .arc{ /* Pulled 1px INTO the section rather than sitting flush at bottom:100%. Two exact edges meeting leaves a hairline of background showing through at fractional scroll positions, which is what the seam was. */ position:absolute;left:0;right:0;bottom:calc(100% - 1px); height:clamp(44px,5.5vw,96px); pointer-events:none;line-height:0; } /* overflow visible so the path can over-draw past the viewBox bottom */ .arc svg{display:block;width:100%;height:100%;overflow:visible} .partner-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px); perspective:1200px; } /* Black cards: the supplied logos are mostly white artwork, so a dark card is what lets them show in their own colours with no filtering at all. */ .partner-card{ display:flex;align-items:center;justify-content:center; height:clamp(92px,10vw,140px); background:var(--black);border-radius:10px; font-size:clamp(13px,1.2vw,17px);font-weight:600;letter-spacing:-.025em;color:#fff; text-align:center;padding:clamp(16px,2vw,28px); /* No transform transition here: GSAP drives the tilt, and a CSS transition on the same property re-animates every value GSAP writes, which smears the scrub and lags the animation by its own duration. */ transition:background .4s,color .4s; transform-style:preserve-3d; } /* hover lifts the card a shade — the logo itself is never recoloured */ .partner-card:hover{background:#1c1c20} /* Logos are shown exactly as supplied — no greyscale, no inversion, no opacity knock-back. Contained so odd aspect ratios don't distort. */ .partner-logo{ width:auto;height:auto;max-width:100%;max-height:100%; object-fit:contain; } /* the name is only shown if the logo file is missing */ .partner-name{display:none} .partner-card.is-text .partner-name{display:block} /* work sits on the grey too, so the section reads as one panel */ .work-section{background:var(--grey);padding-top:clamp(26px,3vw,44px)} /* work: sticky left column + sticky-stacking cards */ .grid-work{display:grid;grid-template-columns:334px 1fr;gap:clamp(24px,4vw,56px);margin-top:0} .sticky-lft{position:sticky;top:130px;align-self:start;padding-bottom:40px} .sticky-lft .h2{ font-size:clamp(40px,5.6vw,86px);font-weight:600;letter-spacing:-.045em; margin-bottom:clamp(120px,18vw,260px);display:flex;align-items:flex-start;gap:6px; } .sticky-lft .h2 em{font-style:normal;font-size:.28em;color:var(--muted);font-weight:500;margin-top:.35em} /* each card pins, and the next one rides up over it */ .work-main{display:flex;flex-direction:column;gap:0} /* All cards pin at the same offset. A staggered top would leave each outgoing card peeking above the incoming one — visible precisely because it is meant to have faded out by then. */ .work-item{ display:block;text-decoration:none;color:inherit; position:sticky;top:120px; cursor:pointer;margin-bottom:clamp(40px,6vw,90px); will-change:transform,opacity; } .work-item:last-child{margin-bottom:0} .work-item__media{ position:relative;overflow:hidden;border-radius:clamp(14px,1.6vw,22px);aspect-ratio:16/11; box-shadow:0 26px 70px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.10); background:#0d0d0f; } .work-item__media img, .work-item__media video{transition:transform 1.2s var(--ease)} .work-item:hover .work-item__media img, .work-item:hover .work-item__media video{transform:scale(1.04)} /* A cover video sits ON TOP of the still, which stays as the poster layer. The still is what shows before the clip has decoded, if autoplay is refused, and whenever reduced motion is on — so the tile is never empty. */ .work-item__media video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0;transition:opacity .5s var(--ease),transform 1.2s var(--ease)} .work-item__media video.is-live{opacity:1} /* caption rides inside the card so stacked cards stay clean */ .work-item__foot{ position:absolute;left:0;right:0;bottom:0;z-index:2; display:flex;justify-content:space-between;align-items:flex-end;gap:16px; padding:clamp(18px,2.4vw,32px);color:#fff; background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.28) 46%,transparent); } .work-item__foot h3{font-size:clamp(18px,2.1vw,30px);font-weight:600;letter-spacing:-.03em} .work-item__foot span{font-size:13px;color:rgba(255,255,255,.7);white-space:nowrap} /* ============================================================ STUDIO / WHO WE ARE (white) ============================================================ */ .studio__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:clamp(40px,5vw,72px)} .studio__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .studio__tags li{ font-size:12.5px;font-weight:500;letter-spacing:-.01em;color:var(--muted); border:1px solid var(--line);border-radius:100px;padding:7px 14px; } .studio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)} /* ============================================================ STUDIO PAGE (studio.html) — modeled on Mōno /studio ============================================================ */ /* hero — centered */ .studio-hero{text-align:center;padding:clamp(120px,15vw,190px) var(--pad) clamp(30px,5vw,70px)} .studio-hero__eyebrow{display:block;margin-bottom:clamp(44px,8vw,110px)} .studio-hero__title{font-size:clamp(52px,12vw,184px);font-weight:600;letter-spacing:-.045em;line-height:.9} .studio-hero__title sup{font-size:.28em;vertical-align:super;font-weight:500} .studio-hero__lead{font-size:clamp(15px,1.35vw,19px);line-height:1.55;color:var(--muted); max-width:56ch;margin:clamp(30px,4vw,48px) auto 0} .studio-hero__dot{width:9px;height:9px;border-radius:50%;background:var(--ink);margin:clamp(36px,5vw,72px) auto 0} /* evolution — full-bleed images that slide LEFT on scroll (pinned filmstrip) */ .evo{padding:0;background:var(--black);position:relative} .evo__stage{overflow:hidden} /* animated arc: a wide white ellipse whose bottom edge bulges down into the dark (like the reference's .circle-animation). It lives in an overflow-hidden strip at the evolution's top so it never bleeds up over the hero. Depth deepens on scroll. */ .evo__arc{position:absolute;top:0;left:0;width:100%;height:clamp(100px,14vw,200px); overflow:hidden;z-index:6;pointer-events:none;--arc:40px} .evo__arc::before{content:'';position:absolute;top:0;left:50%;width:220%;height:78vw; background:var(--white);border-radius:50%;transform:translate(-50%,calc(-100% + var(--arc)))} .evo__track{display:flex;flex-direction:column} .evo__panel{position:relative;width:100%;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end;background:var(--black)} .evo__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .evo__panel::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 44%,rgba(0,0,0,.82))} .evo__body{position:relative;z-index:1;color:#fff;padding:clamp(30px,5vw,84px);max-width:640px} .evo__body p{font-size:clamp(16px,1.6vw,22px);line-height:1.5;color:#fff;font-weight:500;letter-spacing:-.01em;max-width:46ch} /* pinned horizontal filmstrip (added by initStudioEvo) */ .evo.is-pinned .evo__stage{position:sticky;top:0;height:100vh;height:100svh} .evo.is-pinned .evo__track{flex-direction:row;height:100%;width:max-content;will-change:transform} .evo.is-pinned .evo__panel{flex:none;width:100vw;height:100%;min-height:0} /* intro statement + partners */ .studio-intro{padding-top:clamp(80px,10vw,150px)} .studio-intro__statement{font-size:clamp(24px,3.3vw,48px);font-weight:500;letter-spacing:-.03em; line-height:1.16;max-width:24ch;margin-bottom:clamp(50px,7vw,96px)} /* partner logo wall — all partners from the deck */ .logo-wall{display:grid;gap:10px;margin-top:clamp(20px,2.4vw,32px); grid-template-columns:repeat(auto-fill,minmax(clamp(116px,13vw,168px),1fr))} .logo-wall__item{background:var(--black);border-radius:12px;aspect-ratio:16/10; display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.8vw,24px); transition:transform .4s var(--ease)} .logo-wall__item:hover{transform:translateY(-3px)} .logo-wall__item img{width:auto;height:auto;max-width:80%;max-height:58%;object-fit:contain} /* approach — bold statement lines + image */ .approach2{padding-top:clamp(30px,4vw,60px)} .approach2__grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(34px,5vw,80px);align-items:center} .approach2__lines{margin:clamp(22px,3vw,44px) 0} .approach2__line{font-size:clamp(30px,4.6vw,68px);font-weight:600;letter-spacing:-.035em;line-height:1.06} .approach2__media{border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:var(--grey)} .approach2__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .approach2__media:hover img{transform:scale(1.05)} /* figures — big numbers + image */ .figures__grid{display:grid;grid-template-columns:1fr .78fr;gap:clamp(34px,5vw,80px); align-items:center;margin-top:clamp(28px,3.5vw,52px)} .fig{display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:clamp(20px,3vw,48px);align-items:center; padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--line)} .fig:first-child{border-top:1px solid var(--line)} .fig__num{font-size:clamp(56px,8vw,124px);font-weight:300;letter-spacing:-.04em;line-height:.85} .fig p{font-size:14px;line-height:1.5;color:var(--muted);max-width:32ch} .figures__media{border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--grey)} .figures__media img{width:100%;height:100%;object-fit:cover} /* pull-quote */ .studio-quote{background:var(--grey)} .bigquote{font-size:clamp(24px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.14; max-width:20ch;margin:clamp(22px,3vw,40px) 0 clamp(20px,2.4vw,32px)} .bigquote__by{display:flex;flex-direction:column;gap:2px} .bigquote__by strong{font-size:15px;font-weight:600} .bigquote__by span{font-size:13px;color:var(--muted)} /* contact */ .studio-contact__statement{font-size:clamp(22px,2.9vw,42px);font-weight:500;letter-spacing:-.03em; line-height:1.2;max-width:22ch;margin-top:18px} .studio-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px); align-items:start;margin-top:clamp(34px,4vw,60px)} .studio-contact .btn{margin-top:26px} /* capabilities — detailed services */ .caps{padding-top:clamp(30px,4vw,60px)} .caps__head{font-size:clamp(26px,3.4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.04; max-width:20ch;margin:clamp(20px,2.6vw,36px) 0 clamp(30px,4vw,54px)} .caps__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,72px)} .cap{padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--line)} .cap em{font-style:normal;font-size:12.5px;color:var(--red);font-weight:500} .cap h3{font-size:clamp(19px,1.9vw,27px);font-weight:500;letter-spacing:-.02em;margin:8px 0 10px} .cap p{font-size:14px;line-height:1.55;color:var(--muted);max-width:42ch} /* case studies (dark) */ .cases__list{border-top:1px solid var(--d-line);margin-top:clamp(28px,3.5vw,48px)} .case{display:grid;grid-template-columns:1fr auto;gap:clamp(18px,4vw,60px);align-items:start; padding:clamp(28px,4vw,54px) 0;border-bottom:1px solid var(--d-line); transition:padding-left .45s var(--ease)} .case:hover{padding-left:clamp(6px,1vw,18px)} .case__cl{display:block;font-size:12.5px;color:var(--d-muted);margin-bottom:16px} .case h3{font-size:clamp(24px,3vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.06;margin-bottom:16px} .case h3 span{color:var(--d-muted)} .case p{font-size:14.5px;line-height:1.6;color:var(--d-muted);max-width:62ch} .case__view{display:inline-flex;align-items:center;gap:8px;margin-top:24px; font-size:13px;font-weight:600;letter-spacing:-.01em;color:#fff; padding:11px 20px;border-radius:100px;background:var(--red); transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease); box-shadow:0 6px 22px rgba(232,30,37,.28)} .case:hover .case__view{transform:translateX(4px);box-shadow:0 10px 30px rgba(232,30,37,.42)} .case__result{font-size:12.5px;color:#fff;font-weight:500;text-align:right;white-space:nowrap;line-height:1.7} .case__result b{display:block;font-size:clamp(22px,2.4vw,34px);font-weight:700;letter-spacing:-.03em; color:var(--red);transition:text-shadow .4s var(--ease)} .case:hover .case__result b{text-shadow:0 0 30px rgba(232,30,37,.45)} /* big section heading + light variant (used on the Work page so the case studies read as their own block, not part of the black footer) */ .cases__head{font-size:clamp(34px,6vw,84px);font-weight:600;letter-spacing:-.04em;line-height:.98; max-width:14ch;margin-top:clamp(16px,2vw,26px)} .cases__intro{margin:clamp(18px,2.4vw,30px) 0 clamp(30px,4vw,56px);max-width:50ch} .cases--light .cases__list{border-top-color:var(--line)} .cases--light .case{border-bottom-color:var(--line)} .cases--light .case__cl{color:var(--muted)} .cases--light .case h3{color:var(--ink)} .cases--light .case h3 span{color:var(--muted)} .cases--light .case p{color:var(--muted)} .cases--light .case__result{color:var(--ink)} /* Optional preview image on a case row. Additive: it keys off :has(), so a card without a .case__media keeps the original text-only two columns and any page that has not opted in is untouched. The placeholder is a light veil rather than --grey, because these rows sit on black by default. */ .case:has(.case__media){grid-template-columns:clamp(180px,22vw,300px) 1fr auto} .case__media{border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06); aspect-ratio:4/3;align-self:center} .cases--light .case__media{background:var(--grey)} .case__media img{transition:transform 1.2s var(--ease)} .case:hover .case__media img{transform:scale(1.06)} @media(max-width:980px){ /* three columns get cramped — the image takes its own full-width row above the copy, which also lets it run wider and more cinematic */ .case:has(.case__media){grid-template-columns:1fr auto} .case__media{grid-column:1/-1;aspect-ratio:16/9;margin-bottom:clamp(14px,2vw,22px)} } @media(max-width:700px){ .case:has(.case__media){grid-template-columns:1fr} } /* ============================================================ CASE STUDY PREVIEW — the index format used on a service page ------------------------------------------------------------ A preview, not a miniature of the case page. An earlier version led with a full-bleed 16:9 cover and ran to ~1400px for a single entry, which reads as a landing page rather than an index. The image sits BESIDE the copy at just under half the measure — big enough to carry the work, short enough that several entries stack without the page turning into a scroll. ============================================================ */ .csfeat{display:grid;grid-template-columns:minmax(0,46%) 1fr; gap:clamp(22px,3.4vw,52px);align-items:center; border-top:1px solid var(--line);padding:clamp(24px,3.4vw,46px) 0; transition:padding-left .45s var(--ease)} .csfeat:hover{padding-left:clamp(4px,.8vw,14px)} .csfeat:last-of-type{border-bottom:1px solid var(--line)} .csfeat__cover{border-radius:14px;overflow:hidden;background:var(--grey);aspect-ratio:4/3} .csfeat__cover img{transition:transform 1.3s var(--ease)} .csfeat:hover .csfeat__cover img{transform:scale(1.05)} .csfeat__cl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:12px} .csfeat__h{font-size:clamp(23px,2.7vw,40px);font-weight:500;letter-spacing:-.03em; line-height:1.06;color:var(--ink);margin-bottom:14px} .csfeat__h span{color:var(--muted)} .csfeat__p{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:52ch} /* facts run as one quiet line rather than three big numerals — at preview scale the headline should be the loudest thing in the block */ .csfeat__facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px; font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .csfeat__facts b{color:var(--red);font-weight:700;letter-spacing:-.01em;margin-right:5px} .csfeat .case__view{margin-top:22px} @media(max-width:900px){ .csfeat{grid-template-columns:1fr;gap:clamp(16px,2.4vw,24px);align-items:start} .csfeat__cover{aspect-ratio:16/9} } @media(max-width:700px){ .caps__grid{grid-template-columns:1fr} .case{grid-template-columns:1fr;gap:14px} .case__result{text-align:left} } @media(max-width:900px){ .approach2__grid,.figures__grid,.studio-contact__grid{grid-template-columns:1fr;gap:36px} .approach2__media,.figures__media{order:-1;max-width:480px} } @media(max-width:640px){ .fig{grid-template-columns:1fr;gap:8px} .evo:not(.is-pinned) .evo__panel{height:auto;min-height:0;aspect-ratio:3/4} } .panel{ background:var(--grey);border-radius:12px;padding:clamp(22px,2.6vw,36px); display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:280px; } .panel--dark{background:var(--black);color:#fff} .panel__num{font-size:clamp(38px,4.6vw,64px);font-weight:600;letter-spacing:-.05em;line-height:1} .panel__lbl{font-size:13px;color:var(--muted)} .panel--dark .panel__lbl{color:var(--d-muted)} .panel h3{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.35} /* chat mock */ .chat{display:flex;flex-direction:column;gap:8px} .chat__time{font-size:11px;color:var(--muted);text-align:center;margin:4px 0} .bubble{ font-size:13.5px;line-height:1.35;padding:10px 14px;border-radius:14px;width:fit-content;max-width:88%; background:#fff;border:1px solid var(--line); } .bubble--me{background:var(--black);color:#fff;margin-left:auto;border-color:var(--black)} /* ============================================================ BUILT DIFFERENT — pinned phrase sequence (black) ============================================================ */ .anim-section{background:var(--black);color:#fff;height:500vh;padding:0;position:relative} .anim-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden} .anim-phrase{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-size:clamp(34px,7.4vw,96px);font-weight:600;letter-spacing:-.045em;line-height:1; white-space:nowrap;text-align:center; } .anim-phrase em{font-style:normal;color:var(--red)} /* carries the type over the film without darkening the film itself */ .anim-phrase{text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 46px rgba(0,0,0,.6)} /* The phrases are nowrap so they read as one line on a wide screen, but the longest — "Craft without compromise" — is wider than the viewport well before phone sizes (880px of text in a 768px window), and .anim-sticky clips it. Below that, let it wrap; the explicit width is needed because an absolutely positioned box has nothing to wrap against. */ @media(max-width:900px){ .anim-phrase{white-space:normal;width:min(90vw,760px);line-height:1.04} } /* Background film behind the vision phrases. The clip plays at full strength; a single flat black tint fades it back so the phrases stay legible. Flat, not a radial vignette — the vignette hid the orb exactly where it is the whole point of the shot. The tint is kept light enough that the film actually reads — most of this clip is genuinely dark, so a heavy tint left it looking like a black rectangle. Legibility is bought back on the type instead, with a soft shadow: that protects the words without hiding the shot behind them. */ .vision-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .vision-bg video{width:100%;height:100%;object-fit:cover;display:block} .vision-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.62)} /* the copy sits above both */ .anim-top,.anim-btm,.anim-phrase{z-index:1} /* Portrait crops this ultra-wide clip (2.03:1) to its middle ~23%, so the bright core fills the frame behind the type instead of being a centre spot. Same flat treatment, carried a little deeper. */ @media(max-width:760px){ .vision-bg::after{background:rgba(0,0,0,.72)} } /* ============================================================ SCATTER — tilted work cards drift around a centred CTA ============================================================ */ .scatter{ position:relative;overflow:hidden;isolation:isolate; min-height:min(104vh,940px);display:flex;align-items:center;justify-content:center; padding:clamp(90px,12vw,150px) var(--pad); background:var(--red);color:#fff;text-align:center; } /* soft vignette keeps the centre type legible over the cards */ .scatter::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(52% 46% at 50% 50%,rgba(170,10,15,.80) 0%,rgba(170,10,15,.52) 42%,rgba(170,10,15,.12) 66%,transparent 78%); } /* the 3D card field — Three.js renders into this, behind the centre type */ .scatter__gl{ position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block; opacity:0;transition:opacity 1s var(--ease); } .scatter__gl.is-ready{opacity:1} /* ---- fallback: plain DOM cards when WebGL can't run -------------- Chrome refuses to texture WebGL from file:// images, and some devices have no WebGL at all — initScatter() then builds these instead so the section is never empty. */ .scatter__field{position:absolute;inset:0;z-index:0} .scard{ position:absolute;left:var(--x);top:var(--y); width:clamp(210px,25vw,400px); border-radius:12px;overflow:hidden;background:#0d0d0f; box-shadow:0 26px 60px rgba(0,0,0,.34),0 6px 16px rgba(0,0,0,.2); transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotate(var(--r,0deg)); transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform; } .scard__in{display:block;will-change:transform; animation:scardFloat var(--dur,10s) ease-in-out var(--dly,0s) infinite alternate} @keyframes scardFloat{ from{transform:translate(-9px,-7px) rotate(-1.1deg)} to {transform:translate(9px,8px) rotate(1.2deg)} } .scard--sm{width:clamp(160px,19vw,310px)} .scard img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block} @media(max-width:900px){ .scard--sm{display:none} .scard{width:clamp(104px,26vw,150px)} } @media(prefers-reduced-motion:reduce){ .work-item__media video,.wcard__media video{display:none} /* keep the float — it's a slow, low-amplitude drift — but calm it down rather than freezing the whole wall */ /* !important so it actually applies: the universal animation kill lower down carries !important too, and without it here that rule wins and this considered 'calm it, do not freeze it' decision never ran. */ .scard__in{animation-duration:22s!important} } .scatter__inner{position:relative;z-index:2;max-width:min(90vw,760px)} .scatter__eyebrow{ display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.82);margin-bottom:clamp(14px,2vw,22px); } .scatter__eyebrow sup{font-size:.6em;vertical-align:super} .scatter__title{ font-size:clamp(42px,8.4vw,110px);line-height:.93;font-weight:600;letter-spacing:-.045em; } .scatter__title em{font-style:normal;color:var(--black)} .scatter__sub{ margin:clamp(18px,2.4vw,26px) auto 0;max-width:44ch; font-size:clamp(14px,1.5vw,17px);line-height:1.55;color:rgba(255,255,255,.9); } .scatter__cta{ display:inline-flex;align-items:center;gap:10px;margin-top:clamp(24px,3.4vw,38px); padding:15px 34px;border-radius:100px;background:#fff;color:var(--black); font-size:14px;font-weight:600;white-space:nowrap; box-shadow:0 14px 36px rgba(0,0,0,.24); transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s; } .scatter__cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 20px 46px rgba(0,0,0,.3)} @media(max-width:900px){ .scatter{min-height:min(88vh,720px);padding:clamp(80px,16vw,110px) var(--pad)} } /* certifications strip (studio page) */ .certs{ margin-top:clamp(38px,5vw,64px);padding-top:clamp(26px,3vw,38px); border-top:1px solid var(--line); display:flex;flex-direction:column;gap:18px;align-items:flex-start; } .certs img{width:100%;max-width:760px;height:auto;display:block} /* ============================================================ OFFICES — map cards on the contact page ============================================================ */ .offices{padding:clamp(20px,3vw,40px) 0 clamp(70px,9vw,120px)} .offices__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)} .office-card{ border:1px solid var(--line);border-radius:clamp(14px,1.6vw,22px);overflow:hidden; background:var(--white);transition:box-shadow .5s var(--ease),transform .5s var(--ease); } .office-card:hover{box-shadow:0 26px 60px rgba(0,0,0,.12);transform:translateY(-3px)} .office-card__map{position:relative;aspect-ratio:16/10;background:var(--grey)} .office-card__map iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; /* the default map is loud — calm it down to sit with the palette */ filter:grayscale(.9) contrast(1.02);transition:filter .6s var(--ease); } .office-card:hover .office-card__map iframe{filter:grayscale(0) contrast(1)} .office-card__body{padding:clamp(20px,2.6vw,34px)} .office-card__city{font-size:12px;color:var(--muted);display:block;margin-bottom:8px} .office-card__name{font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.03em;margin-bottom:12px} .office-card__addr{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:34ch} .office-card__lines{display:flex;flex-direction:column;gap:4px;margin-top:16px} .office-card__lines a{font-size:15px;width:fit-content;transition:color .3s,transform .4s var(--ease)} .office-card__lines a:hover{color:var(--red);transform:translateX(4px)} .office-card__dir{ display:inline-flex;align-items:center;gap:8px;margin-top:22px; font-size:13px;font-weight:600;color:var(--red); } .office-card__dir svg{width:13px;height:13px;transition:transform .4s var(--ease)} .office-card__dir:hover svg{transform:translate(3px,-3px)} @media(max-width:860px){ .offices__grid{grid-template-columns:1fr} } .anim-top,.anim-btm{position:absolute;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between} .anim-top{top:calc(var(--pad) + 60px)} .anim-btm{bottom:var(--pad)} .anim-section .top-text{color:var(--d-muted)} /* ============================================================ SERVICES (white) ============================================================ */ /* Pinned so the list holds still while it steps. 380vh across seven services is ~54vh of scroll each — long enough to read the name and the blurb, short enough not to feel stuck. The pin is exactly 100vh with overflow:hidden, so everything inside has to fit the viewport HEIGHT — not just its width. Each measurement below is therefore capped in vh as well as vw; sizing on vw alone overflowed a 1440x900 laptop by 86px and silently cut the label row off the top and the last service off the bottom. */ .services{height:380vh;padding:0;position:relative} .services-pin{ position:sticky;top:0;height:100vh;height:100svh;overflow:hidden; display:flex;flex-direction:column;justify-content:center; padding:clamp(28px,min(6vw,5vh),90px) var(--pad); } .services-pin > .container{width:100%} .services-pin .label-row{margin-bottom:clamp(16px,min(4vw,3.4vh),64px)} .svc-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:start} .svc-item{ display:flex;align-items:baseline;gap:clamp(10px,1.4vw,22px); cursor:pointer;padding:clamp(2px,.4vw,8px) 0; } .svc-item em{ font-style:normal;font-size:12px;color:var(--muted);flex:none; transition:color .45s var(--ease); } .svc-item span{ /* seven names have to stack inside one viewport, so the vh cap is what actually governs on short screens */ font-size:clamp(26px,min(5.4vw,7.1vh),80px);font-weight:600;letter-spacing:-.045em;line-height:1.12; color:rgba(0,0,0,.13); transition:color .45s var(--ease); } .svc-item.is-active span{color:var(--ink)} .svc-item.is-active em{color:var(--ink)} .svc-item:hover span{color:rgba(0,0,0,.35)} .svc-item.is-active:hover span{color:var(--ink)} /* static, not sticky — the whole section is pinned now, so a second sticky layer inside it would fight the pin */ .svc-panel{position:relative} .svc-media{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--grey)} .svc-shot{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)} .svc-shot.is-active{opacity:1} /* The descriptions are stacked absolutely so they cross-fade in place; the wrapper reserves the height of the tallest one. That reserve is capped in vh for the same reason the list is — it all has to fit one pinned screen. */ .svc-copy{position:relative;margin-top:clamp(10px,1.6vh,16px);min-height:min(15em,24vh)} .svc-desc{ position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease); } .svc-desc p{ font-size:clamp(12px,1.5vh,13.5px);font-weight:600;line-height:1.45;max-width:38ch; } .svc-desc.is-active{opacity:1} /* capability chips — the sub-services under each discipline */ .svc-tags{ display:flex;flex-wrap:wrap;gap:5px;list-style:none; margin-top:clamp(8px,1.4vh,14px);max-width:40ch; } .svc-tags li{ font-size:clamp(9.5px,1.15vh,11px);font-weight:500;letter-spacing:.01em; color:var(--muted);border:1px solid var(--line);border-radius:999px; padding:3px 9px;white-space:nowrap; } /* ============================================================ SHOWREEL — pinned scaling grid (black) ============================================================ */ .reel{background:var(--black);color:#fff;height:400vh;padding:0;position:relative} .reel-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center} /* 3×3 grid; the middle cell is the showreel and starts filling the viewport, then the grid scales back to reveal the tiles around it. */ .reel-grid{ display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr); gap:14px;width:100vw;height:100vh;height:100svh;flex:none; will-change:transform;transform-origin:center center; } .reel-cell{border-radius:10px;overflow:hidden;position:relative;background:#111} .reel-cell img,.reel-cell video{width:100%;height:100%;object-fit:cover;display:block} .reel-feature{ grid-column:2;grid-row:2;position:relative; border-radius:10px;overflow:hidden;background:#111; display:flex;align-items:center;justify-content:center; } .reel-feature img,.reel-feature video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .reel-title{ position:relative;z-index:2;color:#fff;text-align:center; font-size:clamp(13px,1.5vw,20px);font-weight:600;letter-spacing:-.03em; text-shadow:0 2px 20px rgba(0,0,0,.5); } /* the scrim dims the reel while it is still full-bleed, then lifts */ .reel-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:none;z-index:3} .reel-play{ position:absolute;top:50%;left:50%;margin:-32px 0 0 -32px;z-index:4; width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--black); display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer; /* same reason as .btn — GSAP owns this element's transform */ transition:background .4s,color .4s; } .reel-play svg{width:18px;height:18px;transition:transform .4s var(--ease)} .reel-play:hover{background:var(--red);color:#fff} .reel-play:hover svg{transform:scale(1.18)} /* ============================================================ REELS — pinned, track slides right→left with scroll Class names are deliberately .reels-* / .reel-card to avoid colliding with the Showreel section's .reel-* rules further up. ============================================================ */ .reels{background:var(--white);height:300vh;padding:0;position:relative} .reels-pin{ position:sticky;top:0;height:100vh;height:100svh;overflow:hidden; display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vw,40px); } /* content rides above the kinetic-grid canvas, which sits at z-index 0 */ .reels-head{ display:flex;justify-content:space-between;align-items:center;gap:20px; padding:0 var(--pad);flex:none;position:relative;z-index:1; } .reels-track{ display:flex;gap:clamp(12px,1.4vw,20px); padding:0 var(--pad);width:max-content;flex:none;will-change:transform; position:relative;z-index:1; } .reel-card{ position:relative;flex:none; width:clamp(190px,17vw,260px);aspect-ratio:9/16; border-radius:14px;overflow:hidden;background:#111; box-shadow:0 18px 44px rgba(0,0,0,.16); } .reel-vid{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; display:block;background:#111; } /* controls sit hidden until the card is hovered */ .reel-ctrls{ position:absolute;top:10px;right:10px;z-index:3; display:flex;gap:6px;opacity:0;transform:translateY(-6px); transition:opacity .35s var(--ease),transform .35s var(--ease); } .reel-card:hover .reel-ctrls{opacity:1;transform:translateY(0)} .reel-card:focus-within .reel-ctrls{opacity:1;transform:translateY(0)} .reel-btn{ width:32px;height:32px;border-radius:50%;cursor:pointer; background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff; display:flex;align-items:center;justify-content:center; transition:background .3s; } .reel-btn:hover{background:var(--red)} .reel-btn svg{width:13px;height:13px;pointer-events:none} .reel-btn .ico-off{display:none} .reel-btn.is-off .ico-on{display:none} .reel-btn.is-off .ico-off{display:block} .reel-meta{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:14px;color:#fff; background:linear-gradient(to top,rgba(0,0,0,.78),transparent); display:flex;flex-direction:column;gap:2px; } .reel-meta strong{font-size:13px;font-weight:600;letter-spacing:-.02em} .reel-meta span{font-size:11.5px;color:rgba(255,255,255,.68)} @media(max-width:900px){ .reels{height:240vh} .reel-card{width:clamp(150px,44vw,200px)} } /* ============================================================ TESTIMONIALS — pinned (grey) ============================================================ */ .testi{background:var(--grey);height:440vh;padding:0;position:relative} .testi-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center} /* Two halves of ONE image. Each is 50% of the viewport and shows its own half of the picture, so together they read as a single uncut photo — then they slide apart to uncover the deck. Sit above the card, which is why the card appears to emerge from the gap. */ .photo-half{position:absolute;top:0;bottom:0;width:50.2%;overflow:hidden;z-index:4;will-change:transform} .photo-half._01{left:0} .photo-half._02{right:0} .photo-half img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover} .photo-half._01 img{left:0} .photo-half._02 img{right:0} .testi-label{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);z-index:3} .testi-count{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);z-index:3} .testi-count em{font-style:normal;color:var(--ink)} .testi-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3} /* a single narrow card, with the rest of the deck stacked behind it */ .testi-deck{position:relative;z-index:2;width:min(360px,80vw);aspect-ratio:10/11} .tcard{ position:absolute;inset:0;background:var(--white);border-radius:16px; padding:clamp(20px,1.9vw,28px); display:flex;flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.14); overflow:hidden;will-change:transform,opacity; } .tcard--photo{color:#fff} .tcard--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .tcard--photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.15));z-index:1} .tcard > *{position:relative;z-index:2} /* only the progress dots live up here now — the brand mark sits in the footer beside the attribution */ .tcard header{display:flex;justify-content:flex-end;align-items:center;margin-bottom:auto} /* Brand mark on a disc, in the footer where the avatar placeholder used to be. The supplied partner logos are white artwork (same files the partner wall uses on black cards), so the disc has to be dark for them to read at all — on the photo cards it also takes a hairline and a blur so it separates from whatever is behind it. */ .tcard__logo{ width:40px;height:40px;flex:none; border-radius:50%;background:var(--black);overflow:hidden; display:flex;align-items:center;justify-content:center; padding:8px; } .tcard__logo img{width:100%;height:100%;object-fit:contain;display:block} .tcard--photo .tcard__logo{ background:rgba(12,12,14,.55);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); } .tcard__dots{display:flex;gap:4px} .tcard__dots i{width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.18)} .tcard__dots i.on{background:var(--ink)} .tcard--photo .tcard__dots i{background:rgba(255,255,255,.35)} .tcard--photo .tcard__dots i.on{background:#fff} .tcard p{font-size:15px;font-weight:600;line-height:1.38;letter-spacing:-.015em;margin-bottom:16px} .tcard footer{display:flex;align-items:center;gap:10px} .tcard footer > span:last-child{display:flex;flex-direction:column;gap:1px} /* brand name leads in bold, role sits under it in grey */ .tcard strong{font-size:13.5px;font-weight:700;letter-spacing:-.01em} .tcard em{font-style:normal;font-size:12.5px;color:var(--muted)} .tcard--photo em{color:rgba(255,255,255,.7)} /* ============================================================ STATS (black) ============================================================ */ /* No overflow:hidden here — the arc cap sits outside the section's box and would be clipped away. The kinetic-grid canvas is inset:0 so it cannot escape on its own. */ .stats{position:relative} .kgrid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .stats > .container{position:relative;z-index:1} /* the cards sit on the mesh, so they need their own ground */ .stats .stat-card{background:rgba(17,17,20,.82);backdrop-filter:blur(6px)} .stats__head{ text-align:center;max-width:660px;margin:0 auto clamp(50px,7vw,110px); display:flex;flex-direction:column;align-items:center;gap:20px; } .stats__head .h2{max-width:none;display:inline} .stats__head .lead{color:var(--d-muted);max-width:52ch} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,20px);align-items:start} .stat-card{ background:rgba(20,20,23,.82);backdrop-filter:blur(6px); border:1px solid var(--d-line);border-radius:12px; padding:clamp(18px,2vw,26px);min-height:clamp(200px,20vw,250px); display:flex;flex-direction:column;justify-content:space-between;gap:26px; will-change:transform; } .stat-card header{display:flex;justify-content:space-between;align-items:center;gap:10px} .stat-card__lbl{font-size:12.5px;color:var(--d-muted)} .stat-card__dots{display:flex;gap:4px;flex:none} .stat-card__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22)} .stat-card__dots i.on{background:var(--red)} .stat-card__num{font-size:clamp(30px,3.6vw,52px);font-weight:700;letter-spacing:-.05em;line-height:1;margin-bottom:10px;color:var(--red)} .stat-card p{font-size:12.5px;line-height:1.45;color:var(--d-muted);max-width:26ch} /* ============================================================ JOURNAL (white) ============================================================ */ .post{display:grid;grid-template-columns:150px 1fr auto;gap:clamp(16px,3vw,40px);align-items:center; padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line); transition:padding-left .5s var(--ease),color .4s} .post:last-child{border-bottom:1px solid var(--line)} .post:hover{padding-left:14px;color:var(--red)} .post__date{font-size:13px;color:var(--muted)} .post h3{font-size:clamp(16px,1.9vw,26px);font-weight:600;letter-spacing:-.03em} .post__tag{font-size:11.5px;border:1px solid var(--line);border-radius:100px;padding:5px 12px;color:var(--muted)} /* ============================================================ CONTACT (black) ============================================================ */ .contact{background:var(--black);color:#fff} .contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start} .contact__title{font-size:clamp(48px,9vw,130px);font-weight:600;line-height:.94;letter-spacing:-.05em;margin-bottom:26px} .contact__offices{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px} .office__city{display:block;font-size:12.5px;color:var(--red);margin-bottom:10px} .office p{font-size:13.5px;line-height:1.55;color:var(--d-muted);margin-bottom:10px} .office a{display:block;font-size:14.5px;font-weight:500;width:fit-content; border-bottom:1px solid var(--d-line);padding-bottom:2px;margin-bottom:6px;transition:color .35s,border-color .35s} .office a:hover{color:var(--red);border-color:var(--red)} .contact__form{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:7px} .field--full{grid-column:1/-1} .field label{font-size:12px;color:var(--d-muted)} .field input,.field select,.field textarea{ border-bottom:1px solid var(--d-line);padding:11px 0;font-size:15px;color:#fff;resize:none; transition:border-color .35s} .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)} .field select option{background:#111;color:#fff} .contact__form .cf-turnstile,.contact__form .h-captcha{min-height:65px} .contact__form .btn{grid-column:1/-1;margin-top:8px} .form__note{grid-column:1/-1;font-size:12.5px;color:var(--red);min-height:16px} .form__legal{grid-column:1/-1;font-size:12px;color:var(--d-muted)} /* the two links have to be visibly clickable — this is the consent line */ .form__legal a{ color:#fff;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.4); transition:color .3s,text-decoration-color .3s; } .form__legal a:hover{color:var(--red);text-decoration-color:var(--red)} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--black);color:#fff;padding:clamp(50px,6vw,80px) var(--pad) 22px;border-top:1px solid var(--d-line)} /* Four columns, not four equal columns: the lead column carries the pitch, the email and the socials, so it gets the width; the link lists only need enough for their longest label. */ .footer__top{ display:grid;grid-template-columns:1.7fr 1fr 1.25fr 1.35fr; gap:clamp(24px,3.4vw,60px);padding-bottom:clamp(44px,6vw,80px); } .footer__col{display:flex;flex-direction:column;gap:10px} .footer__label{font-size:12.5px;color:var(--d-muted);margin-bottom:6px} .footer__col a{font-size:14px;width:fit-content;transition:color .3s,transform .4s var(--ease)} .footer__col a:hover{color:var(--red);transform:translateX(4px)} /* lead column */ .footer__brand{display:flex;flex-direction:column;gap:15px;max-width:40ch} .footer__pitch{font-size:13.5px;line-height:1.55;color:var(--d-muted)} .footer__mail{ font-size:clamp(16px,1.6vw,20px);font-weight:600;letter-spacing:-.02em;width:fit-content; border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:4px; transition:color .3s,border-color .3s; } .footer__mail:hover{color:var(--red);border-color:var(--red)} .footer__social{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:2px} .footer__social a{ display:block;font-size:12.5px;padding:7px 15px;border-radius:100px; border:1px solid var(--d-line);color:var(--d-muted); transition:color .3s,border-color .3s,background .3s; } .footer__social a:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.06)} /* offices */ .footer__office{display:flex;flex-direction:column;gap:3px} .footer__office + .footer__office{margin-top:16px} .footer__office strong{font-size:13.5px;font-weight:600} .footer__office span{font-size:12.5px;line-height:1.5;color:var(--d-muted)} .footer__office a{font-size:13px;margin-top:4px;width:fit-content;transition:color .3s} .footer__office a:hover{color:var(--red)} .footer__mark{display:flex;justify-content:center;padding-bottom:30px} .footer__mark img{width:min(88%,880px);height:auto} .footer__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; border-top:1px solid var(--d-line);padding-top:18px;font-size:12.5px;color:var(--d-muted)} .footer__legal{display:flex;gap:clamp(14px,2vw,26px)} .footer__legal a{color:var(--d-muted);transition:color .3s} .footer__legal a:hover{color:#fff} /* ---------- touch targets ---------- The footer link stacks are set tight on purpose — dense columns are how the whole information architecture stays visible at a glance. But `width:fit-content` plus a ~17px line box leaves a target far under the 44px minimum, which is fine for a cursor and poor for a thumb. Scoped to `pointer:coarse` so only touch devices pay for it and the desktop footer keeps its density. */ @media (pointer:coarse){ .footer__col a, .footer__legal a, .footer__office a, .footer__mail, .office a, /* the contact section's phone links */ .form__legal a{ min-height:44px; display:flex; align-items:center; } /* the back-to-top pill and the social chips already clear 44 via padding */ .footer__bar{row-gap:4px} } /* once the floating dock retires at the footer, this becomes the way up */ .footer__bar a[href="#top"]{ color:#fff;padding:8px 18px;border-radius:100px;border:1px solid var(--d-line); transition:background .45s var(--ease),border-color .45s var(--ease), box-shadow .45s var(--ease),transform .5s var(--ease),color .3s; } body.at-footer .footer__bar a[href="#top"]{ background:var(--red);border-color:var(--red);color:#fff; transform:translateY(-1px) scale(1.05); box-shadow:0 10px 30px rgba(232,30,37,.34); } .footer__bar a[href="#top"]:hover{color:#fff;opacity:.92} .footer__bar a:not([href="#top"]):hover{color:var(--red)} /* ============================================================ REVEAL BASE STATES ============================================================ */ .reveal-up{opacity:0} .reveal-media{overflow:hidden} /* The mask that each line rises out of is exactly one line-box tall, and these headings run at line-height .98–1. Descenders (g, p, y, j, Q, comma) sit below the line box, so the mask was shaving them off — "Campaigns", "Packaging", "Photography" all lost the bottom of their tails. Grow the mask downwards and pull the next line back up by the same amount, so glyphs get room while the visual line spacing is untouched. Keep the two values identical or the heading rhythm shifts. */ .split-lines .sl-line{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em} .split-lines .sl-inner{display:block} /* ============================================================ WORK INDEX PAGE (work.html) ============================================================ */ .work-hero{padding-top:clamp(130px,16vw,210px);padding-bottom:clamp(30px,4vw,56px)} .work-hero__title{ font-size:clamp(40px,8.5vw,124px);line-height:.98;font-weight:600; letter-spacing:-.03em;max-width:16ch;margin:clamp(28px,4vw,60px) 0 clamp(26px,3.5vw,50px)} .work-hero__meta{ display:flex;justify-content:space-between;align-items:flex-end;gap:24px; border-top:1px solid var(--line);padding-top:22px} .work-hero__count{font-size:14px;color:var(--muted);white-space:nowrap} .work-hero__count em{color:var(--red);font-style:normal;font-weight:500} .work-index{padding-top:clamp(30px,4vw,50px)} .wgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3vw,52px) clamp(24px,3vw,44px)} .wcard{display:block;color:inherit} .wcard:nth-child(even){margin-top:clamp(46px,8vw,130px)} .wcard__media{ position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3; background:var(--grey)} .wcard__media img, .wcard__media video{transition:transform .9s var(--ease)} .wcard:hover .wcard__media img, .wcard:hover .wcard__media video{transform:scale(1.05)} .wcard__media video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0;transition:opacity .5s var(--ease),transform .9s var(--ease)} .wcard__media video.is-live{opacity:1} .wcard__foot{ display:flex;justify-content:space-between;align-items:baseline;gap:18px; margin-top:18px;padding-bottom:4px; border-bottom:1px solid var(--line); transition:border-color .4s var(--ease)} .wcard:hover .wcard__foot{border-color:var(--ink)} .wcard__foot h2{font-size:clamp(19px,1.7vw,26px);font-weight:500;letter-spacing:-.02em} .wcard__meta{display:flex;gap:16px;align-items:baseline;flex:none; font-size:12.5px;color:var(--muted);text-align:right} .wcard__meta i{font-style:normal} .work-cta{text-align:center} .work-cta .container{display:flex;flex-direction:column;align-items:center;gap:22px} .work-cta__title{font-size:clamp(34px,6vw,80px);line-height:1;font-weight:600; letter-spacing:-.03em;max-width:16ch} .work-cta .lead{color:var(--d-muted);max-width:44ch;text-align:center} .work-cta .btn{margin-top:8px} @media(max-width:820px){ .wgrid{grid-template-columns:1fr;gap:clamp(30px,7vw,50px)} .wcard:nth-child(even){margin-top:0} .work-hero__meta{flex-direction:column;align-items:flex-start;gap:14px} } /* ============================================================ SOCIAL MEDIA CREATIVES — filter + gallery (work-social.html) ============================================================ */ .social{padding-top:clamp(20px,3vw,40px)} /* --- filter bar (sticks under the nav) --- */ /* Deliberately not sticky: the chips scroll away with the rest of the page. No sticky means no need for the white gradient that used to mask content passing underneath, and no stacking context to fight either. */ .filters{ display:flex;flex-wrap:wrap;align-items:center;gap:9px; padding:14px 0;margin-bottom:clamp(24px,3vw,44px); } /* Standing label, written by the render functions so every gallery gets it. A bare row of pills reads as decoration above a long wall; one word in front of them says they are controls. */ .filters__label{ font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin-right:4px;white-space:nowrap} /* Chips carry a fill rather than a hairline outline. An outline-only pill on white is the same weight as the body copy around it and gets skipped; a filled one reads as a control at a glance. */ .filter{ font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink); background:var(--grey);border:1px solid transparent;border-radius:100px; padding:9px 17px;cursor:pointer;white-space:nowrap; transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)} .filter:hover{border-color:var(--ink)} /* The live chip takes the brand red. Only one is ever on, so the accent stays as scarce here as everywhere else — and white on #E81E25 measures 4.52:1, clear of the 4.5:1 AA floor for this size. */ .filter.is-on{background:var(--red);color:#fff;border-color:var(--red)} .filter.is-on:hover{border-color:var(--red)} .filter em{font-style:normal;opacity:.5;margin-left:6px;font-size:12px; font-variant-numeric:tabular-nums} .filter.is-on em{opacity:.8} /* --- one block per category --- */ .social-group{margin-bottom:clamp(46px,6vw,86px);scroll-margin-top:130px} .social-group.is-hidden{display:none} .social-group.is-plain{margin-bottom:0} .social.is-single .filters{display:none} .social-group__head{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:clamp(20px,2.4vw,34px)} .social-group__head h2{font-size:clamp(20px,2vw,30px);font-weight:500;letter-spacing:-.02em} .social-group__head span{font-size:13px;color:var(--muted);white-space:nowrap} /* --- masonry columns of square-ish creatives --- */ /* CSS `columns` fills column 1 top-to-bottom BEFORE starting column 2, so the first N items land down the left edge rather than across the top — which makes any deliberate ordering invisible. These are real columns filled in reading order by layoutColumns(); item 1 goes top-left, item 2 top-next, and so on, so the leading category actually leads the wall. */ /* One knob for the wall's breathing room. Pages with few, detailed tiles (work-web) raise it; a dense wall of social posts leaves it alone. The gutter between columns and the gap below a tile stay equal either way. */ .social{--gal-gap:clamp(12px,1.4vw,20px)} .social--roomy{--gal-gap:clamp(20px,2.6vw,44px)} .social-grid{display:flex;align-items:flex-start;gap:var(--gal-gap)} .social-col{flex:1 1 0;min-width:0} /* fallback if the script never runs: the old column flow is better than one very long single column */ .social-grid:not(:has(.social-col)){display:block;columns:4 240px;column-gap:var(--gal-gap)} .social--roomy .social-grid:not(:has(.social-col)){columns:3 420px} .creative{ position:relative;display:block;width:100%;margin:0 0 var(--gal-gap); break-inside:avoid;border-radius:12px;overflow:hidden;background:var(--grey); cursor:pointer;color:#fff} .creative img{width:100%;height:auto;transition:transform .8s var(--ease)} .creative:hover img{transform:scale(1.05)} .creative__cap{ position:absolute;left:0;right:0;bottom:0; display:flex;flex-direction:column;gap:2px; padding:34px 14px 13px; background:linear-gradient(transparent,rgba(0,0,0,.78)); opacity:0;transform:translateY(8px); transition:opacity .4s var(--ease),transform .4s var(--ease)} .creative:hover .creative__cap{opacity:1;transform:translateY(0)} .creative__client{font-size:13.5px;font-weight:600;letter-spacing:-.01em} .creative__title{font-size:12px;color:rgba(255,255,255,.75)} /* --- carousel posts ------------------------------------------------- Frames are stacked absolutely on top of the first one, which alone holds the height. That keeps the tile a fixed size while it cycles, so a masonry column never reflows and the wall never jumps. */ .creative--carousel .carousel__frames{display:block;position:relative} .creative--carousel .carousel__frames>*{ display:block;width:100%;height:auto;opacity:0; transition:opacity .7s var(--ease),transform .8s var(--ease)} .creative--carousel .carousel__frames>img:first-child{position:relative} /* A