/* ═══════════════════════════════════════════════════════════════════════
houdini.digital: motion & surface layer
Applied on top of the existing stylesheet by source order. Adds rules only;
removes nothing. The markup, copy, scripts and tracking are untouched.
System: MotionSites "Prisma Creative Studio" translated to the gold maison
tokens. Rollback: delete the to this file. Nothing else changes.
═══════════════════════════════════════════════════════════════════════ */
/* ── noise textures (inline SVG, no requests) ───────────────────────── */
.pz-noise{
position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.55;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:240px 240px;
}
.pz-bgnoise::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.14;
background-image:url("data:image/svg+xml;utf8,");
background-size:300px 300px;
}
.pz-bgnoise{position:relative}
.pz-bgnoise>*{position:relative;z-index:1}
/* ── header: a black pill hanging from the top edge ─────────────────── */
#hdr{background:transparent!important;border-bottom:0!important;box-shadow:none!important}
#hdr .wrap.nav{
width:auto;max-width:min(1200px,calc(100vw - 32px));margin:0 auto;
background:#000;color:var(--ivoire);
border-radius:0 0 26px 26px;
padding:0 clamp(16px,2.6vw,34px);height:74px;
box-shadow:0 18px 50px -24px rgba(0,0,0,.85),inset 0 -1px 0 rgba(184,153,104,.18);
transition:height .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
#hdr.scrolled .wrap.nav{height:64px;box-shadow:0 22px 60px -22px rgba(0,0,0,.9),inset 0 -1px 0 rgba(184,153,104,.28)}
#hdr .nav-links{gap:clamp(16px,2.2vw,30px)}
#hdr .nav-links a{color:rgba(244,239,230,.78);position:relative}
#hdr .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--or);transition:right .35s cubic-bezier(.2,.7,.3,1)}
#hdr .nav-links a:hover{color:var(--ivoire)}
#hdr .nav-links a:hover::after{right:0}
/* ── home button: text pill in the desktop nav, round icon on phones ── */
#hdr .home{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border-radius:999px;
border:1px solid rgba(184,153,104,.4);color:var(--ivoire)!important;font-size:11px;letter-spacing:.14em;
transition:border-color .25s ease,color .25s ease}
#hdr .home:hover{border-color:var(--or);color:var(--or)!important}
#hdr .home::after{display:none}
#hdr .home svg{flex-shrink:0}
#hdr .home-m{display:none;width:40px;height:40px;min-height:0;padding:0;justify-content:center;border-radius:50%}
#hdr .home-m span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1080px){#hdr .home-m{display:inline-flex}}
/* phone header budget: wordmark, home, burger and the audit pill in one 62px bar */
@media (max-width:560px){
#hdr .wrap.nav{padding-inline:12px}
#hdr .wrap.nav>div{gap:8px!important}
#hdr .brand{zoom:.86}
#hdr .home-m{width:36px;height:36px}
#hdr .btn-sm{padding:12px 13px;font-size:9.5px;letter-spacing:.12em;min-height:40px}
}
@media (max-width:370px){
#hdr .brand{zoom:.76}
#hdr .btn-sm{padding:11px 10px;letter-spacing:.06em}
}
/* ── hero: inset, rounded, cinematic ────────────────────────────────── */
.hero{
padding:clamp(10px,1.4vw,22px)!important;
min-height:100svh!important;
display:flex;align-items:stretch;
}
.hero>.hero-inner{
position:relative;z-index:1;flex:1;
border-radius:clamp(18px,2.4vw,34px);
overflow:hidden;
border:1px solid rgba(184,153,104,.16);
background:transparent; /* the poster is the hero; no dark plate over it */
padding-top:clamp(96px,11vw,150px);
padding-bottom:clamp(40px,5vw,70px);
display:flex;flex-direction:column;justify-content:flex-end;
}
.hero>.hero-poster,.hero>.hero-bg{
/* pull the existing full-bleed layers inside the rounded frame */
inset:clamp(10px,1.4vw,22px)!important;
border-radius:clamp(18px,2.4vw,34px);
}
/* the poster is an img with width:100% in the base sheet, so inset alone left it
spilling 20px past the frame on the right and bottom; size it explicitly */
.hero>.hero-poster{
width:calc(100% - 2 * clamp(10px,1.4vw,22px))!important;
height:calc(100% - 2 * clamp(10px,1.4vw,22px))!important;
}
/* no dark veil: the poster shows through, only a soft foot so the buttons read */
.hero>.hero-bg{
/* a left wash under the copy and a soft foot; the loop's gold beam stays bright on the right */
background:
linear-gradient(90deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.42) 38%,rgba(11,11,12,0) 62%),
linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,0) 55%,rgba(11,11,12,.55) 100%)!important;
}
.hero>.hero-poster{opacity:.92!important;filter:saturate(1.05) contrast(1.04)}
/* moving hero: a muted loop sits on top of the poster, inside the same frame.
If the file is missing or motion is reduced, the poster is what shows. */
.hero>.hero-video{
position:absolute;z-index:0;pointer-events:none;
top:clamp(10px,1.4vw,22px);left:clamp(10px,1.4vw,22px);
width:calc(100% - 2 * clamp(10px,1.4vw,22px));height:calc(100% - 2 * clamp(10px,1.4vw,22px));
object-fit:cover;border-radius:clamp(18px,2.4vw,34px);
opacity:.95;filter:saturate(1.05) contrast(1.04);
transform:translate3d(0,calc(var(--sy,0) * 14%),0) scale(calc(1 + var(--sy,0) * .06));transform-origin:center;will-change:transform;
}
.hero .hero-grid{align-items:end}
/* scroll driven layers: revamp.js writes --sy (0 to 1) as the hero leaves the viewport */
.hero>.hero-poster{transform:translate3d(0,calc(var(--sy,0) * 14%),0) scale(calc(1 + var(--sy,0) * .06));transform-origin:center;will-change:transform}
.hero .hero-film{transform:translate3d(0,calc(var(--sy,0) * -6%),0);will-change:transform}
.hero.pz-go .hero-grid>div:first-child{transform:translate3d(0,calc(var(--sy,0) * -10%),0);opacity:calc(1 - var(--sy,0) * .9);will-change:transform,opacity}
.hero .pz-noise{opacity:calc(.45 - var(--sy,0) * .3)}
/* the h1 words pull up one by one; spans are added by revamp.js */
.hero h1 .pz-w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .pz-w>span{display:inline-block;transform:translateY(110%);opacity:0;
transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.hero h1.pz-go .pz-w>span{transform:translateY(0);opacity:1}
.hero h1{letter-spacing:-.03em!important}
/* the gilded line: each wrapped word carries the gradient clip itself, or it vanishes */
.hero h1 .gild .pz-w,.hero h1 .gild .pz-w>span{
background:var(--gild);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* on phones the copy column gets a soft plate so type reads over the poster */
@media (max-width:900px){
.hero .hero-grid>div:first-child{
background:linear-gradient(180deg,rgba(11,11,12,.55),rgba(11,11,12,.72));
border-radius:14px;padding:18px 16px 22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
}
.hero .hero-lede,.hero .hero-sub,.hero .hero-actions,.hero .hero-call,.hero .hero-trust{
opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.hero.pz-go .hero-lede{opacity:1;transform:none;transition-delay:.45s}
.hero.pz-go .hero-sub{opacity:1;transform:none;transition-delay:.6s}
.hero.pz-go .hero-actions{opacity:1;transform:none;transition-delay:.75s}
.hero.pz-go .hero-call{opacity:1;transform:none;transition-delay:.9s}
.hero.pz-go .hero-trust{opacity:1;transform:none;transition-delay:1.05s}
/* primary button: pill with the dark circle-arrow from the theme */
.hero .btn-gold{border-radius:999px!important;padding-right:10px!important;display:inline-flex;align-items:center;gap:12px;transition:gap .3s cubic-bezier(.2,.7,.3,1)}
.hero .btn-gold::after{content:"→";display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#0B0B0C;color:var(--ivoire);font-size:14px;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.hero .btn-gold:hover{gap:16px}
.hero .btn-gold:hover::after{transform:scale(1.1)}
.hero .btn-line{border-radius:999px!important}
.hero .hero-film{border-radius:clamp(14px,1.8vw,24px);overflow:hidden;border:1px solid rgba(184,153,104,.18)}
/* ── studio: the inset "about" card ─────────────────────────────────── */
.studio{padding-inline:clamp(10px,1.4vw,22px)}
.studio>.wrap{
max-width:1200px;background:#101010;border:1px solid rgba(184,153,104,.14);
border-radius:clamp(18px,2.4vw,34px);
padding:clamp(44px,6vw,88px) clamp(22px,4vw,64px);
}
.studio .sec-head{max-width:860px;margin-inline:auto;text-align:center}
.studio .sec-head h2{font-size:clamp(38px,6.2vw,74px)!important;line-height:.98!important}
.studio .sec-head h2 em{font-family:var(--edit);font-style:italic;color:var(--champagne)}
/* scroll-linked character reveal on the lede; chars are wrapped by revamp.js */
.studio .sec-head .lede .pz-c{opacity:calc(.22 + .78 * var(--p,0));transition:opacity .12s linear}
/* ── cards scale in, staggered ──────────────────────────────────────── */
.pz{opacity:0;transform:scale(.95) translateY(10px);
transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.pz.pz-in{opacity:1;transform:none}
.case.pz{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),border-color .45s,box-shadow .45s}
.case.pz.pz-in:hover{transform:translateY(-4px)}
.svc-row.pz,.st-grid figure.pz{will-change:transform,opacity}
/* ── cards: rounded like the theme, hairline kept ───────────────────── */
.case{border-radius:18px!important}
.case .case-media{border-radius:18px 18px 0 0}
.svc-row{border-radius:22px;padding-inline:clamp(0px,1vw,18px)!important}
/* ── section noise on the quieter, hue-less sections only ───────────── */
#capabilities,#pricing,#faq{position:relative}
/* ── mobile ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
#hdr .wrap.nav{height:62px;border-radius:0 0 18px 18px;padding-inline:14px;max-width:calc(100vw - 16px)}
#hdr.scrolled .wrap.nav{height:56px}
.hero{padding:8px!important}
.hero>.hero-poster,.hero>.hero-bg{inset:8px!important;border-radius:16px}
.hero>.hero-video{top:8px;left:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:16px}
.hero>.hero-poster{width:calc(100% - 16px)!important;height:calc(100% - 16px)!important}
.hero>.hero-inner{border-radius:16px;padding-top:88px}
.studio{padding-inline:8px}
.studio>.wrap{border-radius:16px;padding:36px 18px}
}
/* ── reduced motion: everything static, nothing hidden ──────────────── */
@media (prefers-reduced-motion:reduce){
.hero h1 .pz-w>span{transform:none;opacity:1;transition:none}
.hero .hero-lede,.hero .hero-sub,.hero .hero-actions,.hero .hero-call,.hero .hero-trust{opacity:1;transform:none;transition:none}
.pz{opacity:1;transform:none;transition:none}
.studio .sec-head .lede .pz-c{opacity:1}
.pz-noise{display:none}
.hero>.hero-video{display:none}
}
/* Phone header, corrected 7 Sep 2026. Reported from a real handset: no Call button.
Two causes. The Call pill was hidden below 520px on the assumption the floating
dock replaced it, and the header still laid out to 462px inside a 375px viewport,
so Free audit sat entirely off screen and pushed everything left.
Contact beats navigation on a phone: the Home icon and the Free audit pill go,
Call and WhatsApp stay. The wordmark already returns to the top, and the hero
carries the same audit button a scroll below. #hdr specificity is required to
beat the display:inline-flex rule on line 49. */
@media (max-width:520px){
#hdr .home-m{display:none}
#hdr .btn-gold{display:none}
#hdr .nav-call,
#hdr .nav-wa{display:inline-flex;padding:10px 12px}
}
/* Our own feed: a horizontal scroller so five 4:5 posters and one reel cost one
screen instead of five. Scroll snapping so it stops on whole items, and the row
bleeds past the wrap on a phone so the next card peeks and invites the swipe. */
#feed .feedrow{
display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
padding:4px 0 18px;margin-top:26px;
scrollbar-width:thin;scrollbar-color:rgba(184,153,104,.45) transparent;
}
#feed .feedrow::-webkit-scrollbar{height:6px}
#feed .feedrow::-webkit-scrollbar-thumb{background:rgba(184,153,104,.45);border-radius:99px}
#feed .feeditem{
flex:0 0 auto;width:232px;scroll-snap-align:start;
border-radius:14px;overflow:hidden;display:block;
border:1px solid rgba(184,153,104,.22);background:#0F0E12;
transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s;
}
#feed .feeditem:hover{transform:translateY(-4px);border-color:rgba(184,153,104,.5)}
#feed .feeditem img,#feed .feeditem video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
#feed .feeditem video{aspect-ratio:9/16}
@media (max-width:560px){
#feed .feedrow{margin-inline:-16px;padding-inline:16px}
#feed .feeditem{width:198px}
}
@media (prefers-reduced-motion:reduce){
#feed .feeditem{transition:none}
}
/* --- Recent / from the studio -------------------------------------------
The row mixed a 9:16 reel with 4:5 posters, so every card was a different
height and the strip looked broken. One ratio for everything, and a grid
rather than a scroller so the whole set is visible without swiping. */
#feed .feedrow{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:14px;
overflow:visible;
scroll-snap-type:none;
margin-top:26px;
padding:0;
}
#feed .feeditem{width:auto;flex:none;scroll-snap-align:none}
#feed .feeditem img,
#feed .feeditem video{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover}
@media (max-width:700px){
#feed .feedrow{grid-template-columns:repeat(2,1fr);gap:10px;margin-inline:0;padding-inline:0}
#feed .feeditem{width:auto}
}
/* --- Four acts -----------------------------------------------------------
The eight stills range from 0.56 to 1.78 in aspect, portrait and landscape
mixed, so each pair sat at a different height and the row looked ragged.
One ratio, cropped from the centre. */
#services .act-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
#services .act-strip img{
display:block;width:100%;height:auto;
aspect-ratio:4/3;object-fit:cover;object-position:center;
border-radius:10px;
}
@media (max-width:560px){
#services .act-strip{gap:8px}
#services .act-strip img{aspect-ratio:1/1;border-radius:8px}
}
/* --- Desktop density -----------------------------------------------------
Section padding was running 99 to 120px top and bottom, which put roughly
200px of nothing between every pair of sections: 2,292px across the page,
16% of its total height. And the 1200px content cap left a 120px dead
gutter each side at 1440px, 360px at 1920px. Tighten both on desktop only;
phones keep their original breathing room. */
@media (min-width:1024px){
main > section{padding-top:72px !important;padding-bottom:72px !important}
main > section.hero{padding-top:20px !important;padding-bottom:20px !important}
main > section#call{padding-top:56px !important;padding-bottom:56px !important}
main > section.band-light{padding-top:64px !important;padding-bottom:64px !important}
}
@media (min-width:1400px){
main .wrap,
main .w{max-width:1340px !important}
}
/* the film block sat at 1425px wide with 8px gutters while everything else
held 1200px, so it broke the vertical rhythm of the page edge */
#refilm .w{max-width:1200px;margin-inline:auto;padding-inline:24px}
@media (min-width:1400px){#refilm .w{max-width:1340px !important}}
/* A 1340px cap still left 290px of dead gutter each side at 1920, 30% of the
screen. Widen again on large monitors, but hold prose to a readable measure
so the extra width goes to grids and imagery, not to 200-character lines. */
@media (min-width:1700px){
main .wrap,
main .w,
#refilm .w{max-width:1560px !important}
main .sec-head .lede,
main .sec-head p,
main section > .wrap > p{max-width:74ch}
}
/* --- Four acts: spotlight on hover --------------------------------------
Ported from a 21st.dev hover-reveal card pattern (lavikatiyar/cards). The
original is React with Tailwind group- variants and Framer Motion; this is
the same behaviour in plain CSS, which the site can actually use.
Hovering the grid dims and softens every card, then the hovered one is
pulled back to full. Focus gets the same treatment so keyboard users see it.
Desktop only: on touch there is no hover and it would just look broken. */
@media (hover:hover) and (min-width:900px){
#services .acts .act{
transition:transform .5s cubic-bezier(.16,1,.3,1),
opacity .45s ease, filter .45s ease;
will-change:transform,opacity,filter;
}
#services .acts:hover .act{
transform:scale(.985);
opacity:.52;
filter:blur(1.5px) saturate(.85);
}
#services .acts .act:hover,
#services .acts .act:focus-within{
transform:scale(1.012);
opacity:1;
filter:none;
z-index:2;
}
/* lift the stills out of thumbnail territory while a card is spotlighted */
#services .acts .act:hover .act-strip img{
opacity:1;
transform:scale(1.03);
transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
#services .acts .act .act-strip img{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
}
@media (prefers-reduced-motion:reduce){
#services .acts:hover .act,
#services .acts .act:hover{transform:none;filter:none;transition:opacity .2s ease}
}
/* --- Process: a rail that fills as you read it ---------------------------
The four steps were disconnected boxes, so nothing said they were a
sequence. A gold rail now runs along the top of the grid and fills with
scroll progress, and each numeral lights as the rail reaches it.
Built natively: the 21st.dev timelines are React and could not be used. */
#process .steps{position:relative}
#process .steps::before{
content:'';position:absolute;left:-1px;top:-1px;height:2px;z-index:4;pointer-events:none;
}
#process .steps::before{right:-1px;background:rgba(184,153,104,.14)}
#process .step .s-no{
transition:color .55s ease,opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);
opacity:.42;
}
#process .step.on .s-no{opacity:1;color:#E2C68C;transform:translateY(-2px)}
#process .step{transition:background .4s ease}
#process .step.on{background:rgba(184,153,104,.045)}
@media (max-width:700px){
/* stacked on a phone, so run the rail down the left edge instead */
#process .steps::before{left:-1px;top:-1px;width:2px;height:auto;right:auto}
#process .steps::before{bottom:-1px}
}
@media (prefers-reduced-motion:reduce){
#process .step .s-no{transition:none}
}
/* The scroll rail is drawn by the steps themselves: each cell carries its own
segment of the top edge and turns gold as the reader reaches it. An absolute
fill bar kept computing to zero width; this cannot, because every segment is
just a border on an element that is already laid out. */
#process .step{position:relative}
#process .step::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:5;
background:rgba(184,153,104,.14);
transition:background .45s ease,box-shadow .45s ease;
}
#process .step.on::before{
background:linear-gradient(90deg,rgba(184,153,104,.75),#E2C68C);
box-shadow:0 0 12px rgba(184,153,104,.45);
}
/* --- Work grid: rhythm and spotlight -------------------------------------
Eleven identical half-width cards read as a list, not a portfolio. A six
column base lets cards take different spans so the eye moves instead of
scanning. Same spotlight on hover as the Four acts, so the two grids speak
the same language. */
@media (min-width:821px){
#work .work-grid{grid-template-columns:repeat(6,1fr);gap:22px}
/* rhythm comes from the column span only. Every source image here is
portrait between 0.56 and 0.81, so the 4:5 crop the cards already use is
the right one; forcing landscape ratios sliced the artwork in half. */
#work .work-grid > .case{grid-column:span 3}
#work .work-grid > .case:nth-child(4),
#work .work-grid > .case:nth-child(5),
#work .work-grid > .case:nth-child(6),
#work .work-grid > .case:nth-child(9),
#work .work-grid > .case:nth-child(10),
#work .work-grid > .case:nth-child(11){grid-column:span 2}
}
@media (hover:hover) and (min-width:900px){
#work .work-grid > .case{
transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .45s ease,filter .45s ease,border-color .45s ease;
}
#work .work-grid:hover > .case{transform:scale(.99);opacity:.5;filter:blur(1.4px) saturate(.85)}
#work .work-grid > .case:hover,
#work .work-grid > .case:focus-within{
transform:scale(1.008);opacity:1;filter:none;z-index:2;
border-color:rgba(184,153,104,.45);
}
}
@media (prefers-reduced-motion:reduce){
#work .work-grid:hover > .case,
#work .work-grid > .case:hover{transform:none;filter:none}
}