/* ==========================================================================
Kareem Zidan — shared stylesheet
Used by index.html, work.html, project.html, about.html, contact.html.
Organized: tokens/reset, header/nav, hero, viewfinder, marquee, generic
section/reveal, services, reel device, process, work grid, contact/footer,
mobile menu, responsive, then per-page blocks (about / project / work
filters / contact form).
========================================================================== */
:root{
--ink:#050505;
--bone:#f0ebe3;
--ash:#84807a;
--signal:#d21f1f;
/* Label colour for text sitting ON signal red. --bone reaches only 4.47:1,
three hundredths short of AA, so the solid button uses white. */
--on-signal:#ffffff;
--signal-hover:#b81b1b;
--signal-press:#8f1515;
--signal-focus:#f0625c;
--line: rgba(240,235,227,0.14);
--line-strong: rgba(240,235,227,0.3);
font-size: 16px;
}
/* Single focus treatment for everything keyboard-reachable. */
:focus-visible{outline:2px solid var(--signal-focus); outline-offset:3px;}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--ink);
color:var(--bone);
font-family:'Inter',sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
.display{font-family:'Chivo',sans-serif;}
.eyebrow{
font-family:'Space Grotesk',sans-serif;
font-weight:600;
letter-spacing:0.22em;
font-size:0.72rem;
color:var(--signal-focus);
text-transform:uppercase;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1220px; margin:0 auto; padding:0 32px;}
/* HEADER / NAV */
header{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:26px 0; border-bottom:1px solid transparent;
transition:border-color .4s ease, background .4s ease;
}
header.scrolled{background:rgba(5,5,5,0.86); backdrop-filter:blur(8px); border-color:var(--line);}
nav{display:flex; align-items:center; justify-content:space-between;}
.logo{font-size:1.3rem; display:inline-flex; align-items:baseline; gap:5px;}
.logo-first{font-family:'Inter',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--bone);}
.logo-last{font-family:'Caveat',cursive; font-weight:700; color:var(--signal); font-size:1.45em; line-height:1;}
.nav-links{display:flex; gap:44px; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase;}
.nav-links a{opacity:0.65; transition:opacity .25s ease;}
.nav-links a:hover{opacity:1;}
.nav-cta{font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; border-bottom:1px solid var(--bone); padding-bottom:3px;}
/* HERO — flat, no glow */
.hero{min-height:100vh; display:flex; align-items:center; padding-top:140px; padding-bottom:80px;}
.hero-inner{width:100%;}
.hero-eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:34px;}
.hero-eyebrow .dash{width:34px; height:1px; background:var(--signal);}
h1.giant{
font-size:clamp(3.4rem, 9vw, 8.2rem);
line-height:0.92; font-weight:500; letter-spacing:-0.015em;
text-transform:uppercase;
}
.chip{
display:inline-block; vertical-align:middle;
width:0.92em; height:0.66em; margin:0 0.12em;
background:var(--signal);
transform:translateY(-0.05em);
}
.hero-foot{
display:flex; justify-content:space-between; align-items:flex-end; margin-top:52px; flex-wrap:wrap; gap:30px;
border-top:1px solid var(--line); padding-top:30px;
}
.hero-foot p{max-width:420px; color:var(--ash); font-size:1rem; line-height:1.6;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
display:inline-flex; align-items:center; gap:10px; padding:14px 24px;
font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase;
transition:background .2s ease, color .2s ease, border-color .2s ease;
border:1px solid var(--line-strong);
}
.btn-solid{background:var(--signal); border-color:var(--signal); color:var(--on-signal);}
.btn-solid:hover{background:var(--signal-hover); border-color:var(--signal-hover); color:var(--on-signal);}
.btn-solid:active{background:var(--signal-press); border-color:var(--signal-press); color:var(--on-signal);}
.btn-ghost:hover{border-color:var(--bone);}
/* VIEWFINDER — flat fill, hard brackets, no soft rings */
.tag{
font-family:'Caveat',cursive; font-weight:600; color:var(--signal-focus);
font-size:1.3rem; line-height:1; display:inline-flex; align-items:center; gap:6px;
transform:rotate(-4deg); white-space:nowrap;
}
.tag::before{content:''; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--signal);}
.viewfinder{position:relative; width:220px; height:220px; flex-shrink:0; display:block; cursor:pointer;}
.viewfinder:hover .play-dot{border-color:var(--signal);}
.vf-tag{position:absolute; top:-34px; left:0;}
.vf-bracket{position:absolute; width:22px; height:22px; border-color:var(--bone);}
.vf-bracket.tl{top:-10px; left:-10px; border-top:2px solid; border-left:2px solid;}
.vf-bracket.tr{top:-10px; right:-10px; border-top:2px solid; border-right:2px solid;}
.vf-bracket.bl{bottom:-10px; left:-10px; border-bottom:2px solid; border-left:2px solid;}
.vf-bracket.br{bottom:-10px; right:-10px; border-bottom:2px solid; border-right:2px solid;}
.iris{
position:absolute; inset:0; border-radius:50%; overflow:hidden;
clip-path:circle(var(--iris-r,3%) at 50% 50%);
transition:clip-path 1.6s cubic-bezier(0.16,1,0.3,1);
background:#0d0d0e;
}
.iris-half{position:absolute; inset:0 0 50% 0; background:var(--signal);}
.iris-grain{position:absolute; inset:0; opacity:0.4; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.iris-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.play-dot{width:44px; height:44px; border-radius:50%; border:1px solid var(--bone); display:flex; align-items:center; justify-content:center;}
.play-dot svg{width:13px; height:13px; fill:var(--bone); margin-left:2px;}
.hud{position:absolute; left:0; right:0; bottom:-34px; display:flex; justify-content:space-between; font-size:0.68rem; letter-spacing:0.03em; color:var(--ash); font-variant-numeric:tabular-nums;}
.hud .rec{color:var(--signal-focus);}
/* MARQUEE — flat */
.marquee-wrap{border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:20px 0; white-space:nowrap;}
.marquee{display:inline-block; animation:scroll 100s linear infinite;}
.marquee span{font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:0.06em; font-size:0.95rem; color:var(--ash); padding:0 26px;}
.marquee span.sep{color:var(--signal-focus);}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
section{padding:150px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:70px; gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:36px;}
.section-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:500; line-height:1.05; text-transform:uppercase;}
.section-head .num{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.78rem; color:var(--ash); letter-spacing:0.06em;}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}
/* SERVICES — tall flat columns, cult-style */
.service-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:2px;}
.service-card{position:relative; aspect-ratio:12/5; overflow:hidden; display:flex; align-items:flex-end; padding:24px;}
.service-card-media{position:absolute; inset:0; z-index:0;}
.service-card-media img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .6s cubic-bezier(0.16,1,0.3,1);
}
.service-card:hover .service-card-media img{transform:scale(1.05);}
.service-card::before{content:''; position:absolute; inset:0; z-index:1; background:rgba(5,5,5,0.62);}
/* All four tiles share the scrim above — none is missing one. The problem is
exposure, and it is the VISIBLE CROP that matters, not the file: the card is
12/5, so object-fit shows only a centred 2.4:1 band. arcorp-holding's cover
averages 90 over the whole portrait frame but 160 across that band, because
the crop lands on the lit arch and discards the dark top and bottom. Tiles
whose visible band is bright carry this modifier so all four sit in the same
tonal range; 0.6 puts a 160-band tile at ~40 after the scrim, alongside
Directing at 45 and Photography at 55. */
.service-card-media.is-bright img{filter:brightness(0.6);}
.service-card-body{position:relative; z-index:2;}
.service-card-body .tag{display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--ash); font-size:0.8rem; margin-bottom:8px;}
.service-card-body h3{
font-family:'Chivo',sans-serif; font-weight:500; font-size:clamp(1.2rem,1.8vw,1.6rem);
text-transform:uppercase; line-height:1.1;
}
.service-card:hover h3{color:var(--signal-focus);}
.service-card-body p{font-size:0.8rem; color:rgba(240,235,227,0.75); line-height:1.45; margin-top:6px; max-width:280px;}
/* REEL — camera-body device */
.device{
position:relative; width:100%; background:#111112; border:1px solid var(--line-strong);
border-radius:6px; padding:22px; display:flex; gap:22px;
}
.device-screen{position:relative; flex:1; aspect-ratio:16/9; background:#0a0a0b; overflow:hidden;}
.reel-slides{position:absolute; inset:0; z-index:0;}
.reel-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease;}
.reel-slide.active{opacity:1;}
.reel-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.reel-corner{position:absolute; width:22px; height:22px; border-color:var(--bone);}
.reel-corner.tl{top:14px; left:14px; border-top:2px solid; border-left:2px solid;}
.reel-corner.tr{top:14px; right:14px; border-top:2px solid; border-right:2px solid;}
.reel-corner.bl{bottom:14px; left:14px; border-bottom:2px solid; border-left:2px solid;}
.reel-corner.br{bottom:14px; right:14px; border-bottom:2px solid; border-right:2px solid;}
.screen-hud{position:absolute; top:14px; left:50px; right:50px; display:flex; justify-content:space-between; font-size:0.68rem; color:var(--ash); letter-spacing:0.03em; font-variant-numeric:tabular-nums;}
.screen-hud .rec{color:var(--signal-focus);}
.device-controls{width:78px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:6px 0;}
.rec-dot{width:26px; height:26px; border-radius:50%; background:var(--signal);}
.ctrl-btn{width:100%; text-align:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.58rem; letter-spacing:0.04em; color:var(--ash); border:1px solid var(--line-strong); border-radius:4px; padding:8px 4px;}
.reel-caption{margin-top:22px; display:flex; justify-content:space-between; color:var(--ash); font-size:0.8rem; flex-wrap:wrap; gap:10px;}
.reel-tag{position:absolute; top:-30px; right:0;}
/* Placeholder/"media pending" texture — used wherever real photography or
footage isn't in yet, so the gap reads as a deliberate state rather than
a broken box. Subtle diagonal hatch, no fabricated imagery. */
.pending-tex{
background-color: rgba(240,235,227,0.035);
}
/* PROCESS */
/* WORK — real photography behind a dark scrim so overlay text stays legible */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px;}
.work-card{aspect-ratio:1/1; position:relative; display:flex; align-items:flex-end; padding:24px; overflow:hidden; transition:opacity .3s ease;}
.work-card:hover{opacity:0.82;}
.work-card-media{position:absolute; inset:0; z-index:0;}
.work-card-media img{
width:100%; height:100%; object-fit:cover; display:block;
transition:transform .6s cubic-bezier(0.16,1,0.3,1), filter .5s ease;
}
.work-card:hover .work-card-media img{transform:scale(1.05);}
/* Grayscale-on-hover is scoped to the work page's portfolio grid only.
Homepage teasers and related-project tiles render in full colour. */
.work-grid-portfolio .work-card-media img{filter:grayscale(100%);}
.work-grid-portfolio .work-card:hover .work-card-media img{filter:grayscale(0%);}
.work-card::before{content:''; position:absolute; inset:0; z-index:1; background:rgba(5,5,5,0.64);}
.work-card .tag{z-index:2;}
.work-card .meta{position:relative; z-index:2;}
.work-card .client{font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:0.01em; font-size:1.15rem;}
.work-card .role{color:rgba(240,235,227,0.6); font-size:0.76rem; margin-top:4px;}
.work-more{text-align:center; margin-top:56px;}
.work-more a{border-bottom:1px solid var(--line-strong); padding-bottom:4px; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.04em;}
.work-more a:hover{border-color:var(--signal-hover); color:var(--signal-hover);}
.work-more a:active{border-color:var(--signal-press); color:var(--signal-press);}
/* SPIRAL — 3D helix of covers. Transforms/opacity/filter are driven per-frame
from JS (rAF lerp), so there are deliberately no CSS transitions here — a
transition would fight the lerp and smear the depth-of-field. */
.spiral-viewport{
position:relative; height:620px; margin:0 -32px; overflow:hidden;
perspective:820px;
cursor:grab; outline:none;
touch-action:pan-y; /* horizontal drag is ours, vertical scroll stays the page's */
}
.spiral-viewport.is-dragging{cursor:grabbing;}
.spiral-stage{position:absolute; inset:0; transform-style:preserve-3d;}
.spiral-frame{
/* Every card is the same portrait shape whatever the cover's own orientation
is — landscape covers get centre-cropped into it. Centring is done by
translate(-50%,-50%) inside the JS transform, not by negative margins. */
position:absolute; top:50%; left:50%;
width:92px; aspect-ratio:3/4; margin:0;
display:block; background:#0c0c0d; border:1px solid var(--line-strong);
/* will-change on 22 elements permanently promotes 22 composited layers, and
hinting `filter` makes each one keep a filter buffer too. transform alone
is what actually changes cheaply here; the rest cost more than they save. */
overflow:hidden; will-change:transform;
/* WebKit gates native link/image dragging on -webkit-user-drag, not on the
HTML draggable attribute, so draggable="false" alone does not reliably
suppress it in Safari. The ![]()
already carried this; the did not,
and the anchor is what WebKit actually drags. -webkit-touch-callout stops
a slightly-long tap on iOS raising the link preview instead of opening. */
-webkit-user-drag:none; user-select:none; -webkit-user-select:none;
-webkit-touch-callout:none;
}
.spiral-frame img{width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none;}
.spiral-frame:focus-visible{outline:2px solid var(--signal-focus); outline-offset:5px;}
.spiral-readout{
display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
}
.spiral-num{
font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.72rem;
letter-spacing:0.06em; color:var(--ash); font-variant-numeric:tabular-nums;
}
.spiral-meta{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.spiral-client{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem; letter-spacing:0.01em;}
.spiral-type{color:rgba(240,235,227,0.6); font-size:0.76rem;}
.spiral-hint{margin-top:14px; color:var(--ash); font-size:0.76rem;}
.spiral-hint kbd{
font-family:'Space Grotesk',sans-serif; font-size:0.72rem;
border:1px solid var(--line-strong); border-radius:3px; padding:1px 5px;
}
@media (max-width:720px){
.spiral-viewport{height:440px; margin:0 -18px;}
.spiral-frame{width:84px; margin:0;}
}
/* Reduced motion: a real static grid, not a frozen spiral. JS bails entirely
so no inline transforms are ever written. */
@media (prefers-reduced-motion:reduce){
.spiral-viewport{
height:auto; margin:0; overflow:visible; perspective:none;
cursor:default; touch-action:auto;
}
.spiral-stage{position:static; transform:none; transform-style:flat;
display:grid; grid-template-columns:repeat(4,1fr); gap:2px;}
.spiral-frame{
position:static; width:auto; height:auto; aspect-ratio:3/4;
margin:0; transform:none; filter:none; opacity:1; will-change:auto;
}
.spiral-readout, .spiral-hint{display:none;}
}
@media (prefers-reduced-motion:reduce) and (max-width:720px){
.spiral-stage{grid-template-columns:repeat(2,1fr);}
}
.contact{text-align:center;}
.contact h2{font-size:clamp(2.4rem,6vw,5rem); font-weight:500; line-height:1.02; max-width:960px; margin:0 auto 40px; text-transform:uppercase;}
.contact h2 em{font-style:normal; font-family:'Caveat',cursive; font-weight:700; font-size:1.2em; line-height:0.95; color:var(--signal); text-transform:none;}
.contact-links{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:80px;}
footer{border-top:1px solid var(--line); padding:32px 0; display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--ash); flex-wrap:wrap; gap:14px; text-transform:uppercase; letter-spacing:0.03em;}
.socials{display:flex; gap:12px;}
/* Icon-only social/contact links — Instagram, LinkedIn, WhatsApp, Email */
.icon-link{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border:1px solid var(--line-strong); border-radius:50%;
color:var(--bone); opacity:0.75; flex-shrink:0;
transition:opacity .2s ease, border-color .2s ease, color .2s ease;
}
.icon-link:hover{opacity:1; border-color:var(--signal-hover); color:var(--signal-hover);}
.icon-link:active{border-color:var(--signal-press); color:var(--signal-press);}
.icon-link svg{width:18px; height:18px; display:block;}
/* MOBILE MENU */
.menu-btn{display:none; background:none; border:1px solid var(--line-strong); color:var(--bone); width:46px; height:44px; cursor:pointer; align-items:center; justify-content:center; padding:0; border-radius:2px;}
.menu-btn span{display:block; width:16px; height:1.5px; background:var(--bone); position:relative;}
.menu-btn span::before,.menu-btn span::after{content:''; position:absolute; left:0; width:16px; height:1.5px; background:var(--bone); transition:transform .25s ease, opacity .25s ease;}
.menu-btn span::before{top:-5px;}
.menu-btn span::after{top:5px;}
.menu-btn[aria-expanded="true"] span{background:transparent;}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg);}
.mobile-menu{display:none; border-top:1px solid var(--line); background:var(--ink);} /* fully opaque: at 0.97 the hero bled through the open panel */
.mobile-menu.open{display:block;}
.mobile-menu a{display:block; padding:16px 32px; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--line);}
.mobile-menu a:last-child{border-bottom:none; color:var(--signal-focus);}
/* ── MOCKUP: compressed Services + Process ────────────────────────────────
Services drops its four large image tiles for a single label-and-line row;
Process goes from four stacked full-width rows to four columns side by side.
Both collapse to a snap-scrolling row on phones, where four columns cannot
fit — that behaviour is the part most worth a look before this is kept. */
/* these two sections were padded for full-height image tiles and stacked rows;
with the compressed layouts that leaves a large dead gap underneath */
#services, #process{padding-bottom:40px;}
#process{padding-top:60px;}
.service-strip, .process-strip{
display:grid; grid-template-columns:repeat(4,1fr);
/* wide enough that a card's right bracket and its neighbour's left bracket
read as two frames rather than one seam */
gap:48px;
padding:30px 0 34px;
}
/* No top rule on the strips: the section head already draws one, and the two
sat a stack apart with dead space between them. The brackets frame the
items now, so only the rule that separates the two sections is kept. */
.service-strip{border-bottom:1px solid var(--line);}
/* Each item is framed like a shot in a viewfinder rather than boxed off by
rules. The brackets do the dividing now, so the internal 1px borders are
gone — keeping both read as a table with decoration on top. */
.service-item, .process-step{position:relative; padding:30px 30px 32px;}
/* Same 22px / 2px / --bone geometry as .vf-bracket on the hero and
.reel-corner on the reel, inset instead of outset so four can sit in a row
without their corners colliding. */
.vf-corner{position:absolute; width:22px; height:22px; border-color:var(--bone); pointer-events:none;}
.vf-corner.tl{top:0; left:0; border-top:2px solid; border-left:2px solid;}
.vf-corner.tr{top:0; right:0; border-top:2px solid; border-right:2px solid;}
.vf-corner.bl{bottom:0; left:0; border-bottom:2px solid; border-left:2px solid;}
.vf-corner.br{bottom:0; right:0; border-bottom:2px solid; border-right:2px solid;}
/* The handwritten numeral from "no. 01, on set" and the work-grid tags —
same Caveat face, same red, same -4deg tilt — but without .tag's small
circle bullet, which was reading as a generic badge at this size. */
.strip-num{
display:inline-block; margin-bottom:16px;
font-family:'Caveat',cursive; font-weight:700;
font-size:2.2rem; line-height:1; color:var(--signal);
transform:rotate(-4deg); transform-origin:left center;
}
.service-item h3, .process-step h3{
font-size:1.05rem; font-weight:500; text-transform:uppercase;
letter-spacing:0.01em; line-height:1.15; margin-bottom:10px;
}
.service-item p, .process-step p{
color:var(--ash); font-size:0.82rem; line-height:1.55; max-width:none;
}
@media (max-width:1100px){
.service-strip, .process-strip{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
/* four columns cannot fit; keep it horizontal and swipeable rather than
letting it become the tall stack this was meant to replace */
.service-strip, .process-strip{
display:flex; grid-template-columns:none; gap:30px;
overflow-x:auto; scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.service-strip::-webkit-scrollbar, .process-strip::-webkit-scrollbar{display:none;}
.service-item, .process-step{
flex:0 0 74%; scroll-snap-align:start; padding:26px 24px 28px;
}
}
/* RESPONSIVE — base */
@media (max-width:900px){
.nav-links{display:none;}
.nav-cta{display:none;}
.menu-btn{display:flex;}
.service-grid{grid-template-columns:1fr;}
.service-card{aspect-ratio:16/9;}
.work-grid{grid-template-columns:repeat(2,1fr);}
.hero-foot{flex-direction:column; align-items:flex-start; gap:52px;}
.viewfinder{margin-bottom:26px;}
.device{flex-direction:column; gap:16px; padding:16px;}
.device-controls{width:100%; flex-direction:row; gap:10px; align-items:center;}
.device-controls .rec-dot{width:20px; height:20px; flex-shrink:0;}
.device-controls .ctrl-btn{flex:1; padding:10px 4px;}
.screen-hud{left:16px; right:16px; font-size:0.6rem;}
}
@media (max-width:560px){
.work-grid{grid-template-columns:1fr;}
section{padding:100px 0;}
}
@media (prefers-reduced-motion:reduce){
.marquee{animation:none;}
.reveal{transition:none; opacity:1; transform:none;}
.iris{transition:none;}
.service-card-media img{transition:none;}
.reel-slide{transition:none;}
}
/* ==========================================================================
PAGE: work.html — page hero + filters
========================================================================== */
.page-hero{padding-top:150px; padding-bottom:60px;}
.page-hero .eyebrow{margin-bottom:22px; display:block;}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem); font-weight:500; text-transform:uppercase; line-height:1.02; max-width:780px;}
.page-hero p{margin-top:26px; max-width:520px; color:var(--ash); font-size:1.02rem; line-height:1.6;}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin:44px 0 50px; border-top:1px solid var(--line); padding-top:34px;}
.filter-pill{
font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.78rem; letter-spacing:0.03em;
text-transform:uppercase; padding:10px 20px; border:1px solid var(--line-strong); cursor:pointer;
background:none; color:var(--ash); transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.filter-pill:hover{color:var(--bone); border-color:var(--bone);}
.filter-pill.active{background:var(--signal); border-color:var(--signal); color:var(--on-signal);}
.filter-pill.active:hover{background:var(--signal-hover); border-color:var(--signal-hover);}
.filter-pill.active:active{background:var(--signal-press); border-color:var(--signal-press);}
@media (max-width:900px){
.filter-pill{padding:14px 20px;}
.filters{gap:8px;}
}
/* ==========================================================================
PAGE: about.html
========================================================================== */
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start; padding:150px 0 0;}
.about-bio p{color:var(--ash); font-size:1.05rem; line-height:1.75; margin-bottom:22px; max-width:480px;}
.about-bio p:first-child{color:var(--bone); font-size:1.2rem;}
.proof{position:relative; aspect-ratio:4/5; background:#101011; border:1px solid var(--line-strong);}
.proof img{width:100%; height:100%; object-fit:cover; display:block;}
.proof-tag{position:absolute; top:-32px; left:0;}
.proof-caption{position:absolute; bottom:18px; left:18px; font-size:0.78rem; color:var(--ash); letter-spacing:0.02em;}
.pull-quote{
font-family:'Caveat',cursive; font-style:normal; font-weight:600;
font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.3; max-width:820px;
margin:110px auto; text-align:left; color:var(--bone);
}
.facts{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:100px;}
.fact{padding:34px 26px; border-left:1px solid var(--line);}
.fact:first-child{border-left:none;}
.fact .flabel{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--signal-focus); margin-bottom:10px;}
.fact .fval{font-size:1.02rem; color:var(--bone); line-height:1.5;}
@media (max-width:860px){
.about-grid{grid-template-columns:1fr;}
.facts{grid-template-columns:1fr;}
.fact{border-left:none; border-top:1px solid var(--line);}
.fact:first-child{border-top:none;}
}
/* ==========================================================================
PAGE: project.html
========================================================================== */
.proj-hero{padding-top:150px;}
.proj-back{display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ash); margin-bottom:38px; transition:color .2s ease;}
.proj-back:hover{color:var(--bone);}
.proj-kicker{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.proj-kicker .dash{width:30px; height:1px; background:var(--signal);}
.proj-title{font-size:clamp(2.2rem,5.4vw,4.2rem); font-weight:500; text-transform:uppercase; line-height:1.02;}
.proj-desc{margin-top:28px; max-width:600px; color:var(--ash); font-size:1.05rem; line-height:1.7;}
.proj-meta{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:56px;}
.proj-meta .m{padding:28px 24px; border-left:1px solid var(--line);}
.proj-meta .m:first-child{border-left:none; padding-left:0;}
.proj-meta .mlabel{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--signal-focus); margin-bottom:10px;}
.proj-meta .mval{font-size:0.95rem; color:var(--bone); line-height:1.55;}
.proj-frame{position:relative; width:100%; aspect-ratio:16/9; background:#0c0c0d; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; margin-top:70px;}
.proj-frame .ph{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:24px;}
.proj-frame .ph .eyebrow{color:var(--ash);}
.proj-frame .ph p{color:var(--ash); font-size:0.88rem; max-width:340px; line-height:1.6; text-align:left;}
.proj-videos{display:flex; flex-direction:column; gap:24px; margin-top:70px;}
.proj-video-stack{display:flex; flex-direction:column; gap:24px;}
.proj-video-embed{position:relative; width:100%; aspect-ratio:16/9; background:#0c0c0d; border:1px solid var(--line-strong); overflow:hidden;}
/* The header is position:fixed at 83px tall, so anything scrolled flush to the
top of the viewport loses its first 83px behind it — including the Vimeo
player's own title bar and controls, which sit at the top of the iframe.
Reserve the header's height plus breathing room for anything that gets
scrolled into view. */
:root{--header-h:83px;}
.proj-videos, .proj-video-embed, .proj-video-stack, .featured-frame{
scroll-margin-top:calc(var(--header-h) + 24px);
}
.proj-video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
/* Portrait videos: two-up grid on wide screens, swipeable one-at-a-time carousel on narrow ones */
.proj-video-portrait-group{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.proj-video-embed.portrait{aspect-ratio:9/16; width:100%; max-width:400px; margin:0 auto;}
.portrait-nav{display:none;}
.portrait-nav-btn{
width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:none; color:var(--bone);
font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:border-color .2s ease, color .2s ease;
}
.portrait-nav-btn:hover{border-color:var(--signal); color:var(--signal-focus);}
@media (max-width:700px){
.proj-video-portrait-group{
display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.proj-video-embed.portrait{flex:0 0 100%; max-width:none; margin:0; scroll-snap-align:center;}
.portrait-nav{display:flex; justify-content:center; gap:14px; margin-top:14px;}
}
.proj-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}
.related-block{margin-top:110px; padding-top:56px; border-top:1px solid var(--line);}
.related-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:2px;}
@media (max-width:860px){
.proj-meta{grid-template-columns:1fr;}
.proj-meta .m{border-left:none; border-top:1px solid var(--line); padding-left:0;}
.proj-meta .m:first-child{border-top:none;}
}
@media (max-width:560px){
.related-grid{grid-template-columns:repeat(2,1fr);}
}
/* Featured frame — the real cover image, shown large above the filmstrip.
aspect-ratio starts at 16/9 as a fallback and is overridden per-image by JS
once its natural dimensions are known, so portrait photos get a portrait
frame instead of being cropped into a landscape box. */
.featured-frame{position:relative; width:100%; aspect-ratio:16/9; max-height:85vh; background:#0c0c0d; border:1px solid var(--line-strong); overflow:hidden; margin-top:70px; cursor:pointer;}
.featured-frame img{width:100%; height:100%; object-fit:contain; display:block;}
.featured-tag{position:absolute; top:-32px; left:0;}
/* Featured-frame prev/next arrows — same visual language as .lightbox-nav */
.featured-nav{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
background:rgba(5,5,5,0.68); border:1px solid rgba(240,235,227,0.75); color:var(--bone);
width:48px; height:48px; border-radius:50%; font-size:1.5rem;
display:flex; align-items:center; justify-content:center; cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,0.4);
transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.featured-nav:hover{border-color:var(--signal-hover); color:var(--signal-hover); background:rgba(5,5,5,0.8);}
.featured-nav:active{border-color:var(--signal-press); color:var(--signal-press);}
.featured-nav.prev{left:16px;}
.featured-nav.next{right:16px;}
@media (max-width:700px){
.featured-nav{width:38px; height:38px; font-size:1.2rem;}
.featured-nav.prev{left:8px;}
.featured-nav.next{right:8px;}
}
/* Filmstrip — horizontal-scrolling contact-sheet strip, no pagination.
Cells use a fixed height with natural width (real contact-sheet behavior):
each thumbnail keeps its own true aspect ratio instead of being cropped
into a uniform box, so portrait and landscape frames sit side by side at
their real proportions. */
.filmstrip-wrap{margin-top:28px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
.filmstrip{display:flex; gap:2px; width:max-content;}
.filmstrip-item{
position:relative; flex:0 0 auto; height:190px; overflow:hidden;
background:#0c0c0d; border:none; padding:0; cursor:pointer; display:block;
}
.filmstrip-item img{height:100%; width:auto; object-fit:cover; display:block; transition:opacity .3s ease, transform .5s cubic-bezier(0.16,1,0.3,1);}
.filmstrip-item:hover img{opacity:0.85; transform:scale(1.04);}
.filmstrip-item.active{box-shadow:inset 0 0 0 3px var(--signal);}
.filmstrip-item.active .frame-num{background:var(--signal); color:var(--ink);}
.filmstrip-item .frame-num{
position:absolute; left:8px; bottom:8px; z-index:2;
font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.62rem; letter-spacing:0.03em;
color:var(--bone); background:rgba(5,5,5,0.6); padding:2px 6px; font-variant-numeric:tabular-nums;
}
@media (max-width:560px){ .filmstrip-item{height:140px;} }
/* Lightbox */
.lightbox{
position:fixed; inset:0; z-index:300; background:rgba(5,5,5,0.96);
display:none; align-items:center; justify-content:center;
}
.lightbox.open{display:flex;}
.lightbox-inner{position:relative; max-width:92vw; max-height:86vh;}
.lightbox-inner img{max-width:92vw; max-height:86vh; object-fit:contain; display:block; margin:0 auto;}
.lightbox-close, .lightbox-nav{
position:absolute; background:none; border:1px solid var(--line-strong); color:var(--bone);
cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:border-color .2s ease, color .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{border-color:var(--signal-hover); color:var(--signal-hover);}
.lightbox-close:active, .lightbox-nav:active{border-color:var(--signal-press); color:var(--signal-press);}
.lightbox-close{top:24px; right:24px; width:46px; height:46px; font-size:1.1rem; border-radius:2px;}
.lightbox-nav{top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:1.6rem;}
.lightbox-nav.prev{left:24px;}
.lightbox-nav.next{right:24px;}
.lightbox-count{
position:absolute; left:0; right:0; bottom:-38px; text-align:center;
font-family:'Space Grotesk',sans-serif; font-size:0.75rem; letter-spacing:0.05em;
color:var(--ash); font-variant-numeric:tabular-nums;
}
@media (max-width:700px){
.lightbox-nav{width:42px; height:42px; font-size:1.3rem;}
.lightbox-nav.prev{left:10px;}
.lightbox-nav.next{right:10px;}
.lightbox-close{top:14px; right:14px; width:40px; height:40px;}
}
/* ==========================================================================
PAGE: contact.html
========================================================================== */
.contact-page-hero{padding-top:170px; text-align:center;}
.contact-form{max-width:560px; margin:70px auto 0; padding-top:44px; border-top:1px solid var(--line); text-align:left;}
.form-row{margin-bottom:22px;}
.form-row label{display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ash); margin-bottom:10px;}
.form-row input, .form-row textarea{
width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
color:var(--bone); font-family:'Inter',sans-serif; font-size:1rem; padding:10px 2px;
outline:none; transition:border-color .2s ease;
}
.form-row input:focus, .form-row textarea:focus{border-color:var(--signal-focus); outline:none;}
.form-row textarea{resize:vertical; min-height:100px;}
.form-submit{margin-top:10px;}
.location-line{margin-top:60px; color:var(--ash); font-size:0.92rem; text-align:left; max-width:52ch; margin-left:auto; margin-right:auto;}
.contact-cta-row{
margin-top:64px; display:flex; flex-direction:column; align-items:center; gap:16px;
}
.contact-cta-note{color:var(--ash); font-size:0.88rem; text-align:left;}
@media (max-width:560px){
.contact-cta-row{margin-top:48px;}
.contact-form{margin-top:56px; padding-top:36px;}
}
/* Netlify honeypot: off-screen rather than display:none so it still posts,
and aria-hidden + tabindex=-1 so it never reaches a real visitor. */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-msg{margin-top:18px; font-size:0.9rem; min-height:1.2em; color:var(--ash);}
.form-msg.error{color:var(--signal-focus);}
.form-msg.ok{color:var(--bone);}