/*
Theme Name: FIXMIX Portfolio
Theme URI: https://fixmix-portfolio.y0533187009.chatgpt.site
Author: FIXMIX
Description: ערכת עיצוב מותאמת לתיק העבודות של FIXMIX, הכוללת קמפיינים, עבודות נבחרות ופרטי קשר.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fixmix
*/

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

:root { --navy:#002e61; --navy-deep:#001d40; --mustard:#e2c754; --paper:#f7f4ed; --ink:#002e61; --mx:0px; --my:0px; --scroll-progress:0%; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--paper); font-family:"Heebo",Arial,sans-serif; overflow-x:hidden; }
body.no-scroll { overflow:hidden; }
button,a { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
[hidden],.is-hidden { display:none!important; }
:focus-visible { outline:3px solid var(--mustard); outline-offset:4px; }

.site-shell { position:relative; isolation:isolate; }
.site-shell::before { content:""; position:fixed; inset:0; z-index:-2; background:url('assets/images/brand/watercolor.jpg') center/cover no-repeat; }
.site-shell::after { content:""; position:fixed; inset:0; z-index:-1; background:rgba(247,244,237,.28); }

.site-header { position:fixed; inset:0 0 auto; height:82px; padding:0 clamp(22px,4vw,68px); display:flex; align-items:center; justify-content:space-between; z-index:50; color:var(--paper); background:linear-gradient(to bottom,rgba(0,30,65,.88),transparent); backdrop-filter:blur(2px); transition:height .35s ease,background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease; }
.site-header::after { content:""; position:absolute; right:0; bottom:0; width:var(--scroll-progress); height:2px; background:var(--mustard); pointer-events:none; }
.site-header.is-scrolled { height:70px; background:rgba(0,29,64,.9); box-shadow:0 10px 35px rgba(0,16,36,.18); backdrop-filter:blur(16px); }
.header-brand { width:clamp(132px,11vw,178px); display:block; }
.brand-logo { position:relative; display:block; width:100%; isolation:isolate; }
.brand-logo img { width:100%; height:auto; }
.main-nav { display:flex; gap:38px; font-size:15px; }
.main-nav a { position:relative; padding:8px 0; }
.main-nav a::after { content:""; position:absolute; right:0; bottom:0; width:0; height:1px; background:var(--mustard); transition:width .35s ease; }
.main-nav a:hover::after { width:100%; }
.menu-button { display:none; border:0; background:none; width:42px; height:42px; padding:10px; }
.menu-button span { display:block; height:1px; background:currentColor; margin:7px 0; }

.hero { min-height:clamp(360px,48.5vw,940px); position:relative; display:grid; place-items:center; overflow:hidden; padding:0; background:#063468; isolation:isolate; }
.hero-banner { width:100%; height:100%; max-height:940px; object-fit:contain; object-position:center; }
.hero::before { content:""; position:absolute; inset:0; z-index:-3; background:radial-gradient(circle at 50% 48%,rgba(226,199,84,.09),transparent 32%),linear-gradient(145deg,transparent 50%,rgba(0,15,38,.24)); }
.hero-shard { position:absolute; background:url('assets/images/brand/watercolor.jpg') center/cover; filter:saturate(1.05); pointer-events:none; }
.shard-one { width:clamp(310px,42vw,680px); height:clamp(150px,20vw,300px); top:-3%; left:-8%; opacity:.7; clip-path:polygon(0 0,100% 0,72% 100%,8% 74%); transform:translate(var(--mx),var(--my)) rotate(-4deg); transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.shard-two { width:clamp(220px,30vw,460px); height:clamp(110px,14vw,210px); bottom:3%; right:-5%; opacity:.24; background-position:88% 55%; clip-path:polygon(18% 0,100% 22%,84% 100%,0 76%); transform:translate(calc(var(--mx)*-.65),calc(var(--my)*-.65)) rotate(6deg); transition:transform .72s cubic-bezier(.2,.8,.2,1); }
.hero-content { position:relative; z-index:2; width:min(950px,92vw); text-align:center; display:flex; flex-direction:column; align-items:center; }
.eyebrow { margin:0 0 18px; color:var(--mustard); font-size:13px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; }
.hero-eyebrow { animation:fade-up .8s .2s both; }
.hero-logo { width:min(860px,84vw); margin:-2% auto -1%; animation:logo-in 1.15s .1s cubic-bezier(.16,.8,.25,1) both; }
.hero h1 { margin:0; font-family:"Heebo",Arial,sans-serif; font-size:clamp(38px,5.3vw,74px); line-height:1.04; font-weight:700; letter-spacing:-.035em; animation:fade-up .85s .55s both; }
.hero h1 em { color:var(--mustard); font-style:normal; }
.hero-lead { max-width:590px; margin:24px auto 30px; font-size:clamp(16px,1.6vw,20px); font-weight:300; line-height:1.8; opacity:.82; animation:fade-up .8s .7s both; }
.pill-button { min-height:52px; padding:0 27px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:16px; border:1px solid currentColor; cursor:pointer; transition:transform .3s ease,background .3s ease,color .3s ease; }
.pill-button:hover { transform:translateY(-3px); }
.pill-button.mustard { color:var(--navy); border-color:var(--mustard); background:var(--mustard); animation:fade-up .8s .82s both; }
.pill-button.navy { background:var(--navy); color:white; border-color:var(--navy); }
.pill-button.outline { background:transparent; color:var(--navy); }
.pill-button.centered { margin:52px auto 0; }
.more-work-button { display:flex; width:max-content; margin:52px auto 0 0; }
.scroll-hint { position:absolute; bottom:22px; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; letter-spacing:.15em; opacity:.62; }
.scroll-hint i { height:35px; width:1px; background:var(--mustard); transform-origin:top; animation:scroll-line 1.8s infinite; }

.mixer-transition { --sx:0px; --sy:0px; min-height:clamp(390px,48vw,620px); position:relative; overflow:hidden; display:grid; place-items:center; background:rgba(247,244,237,.72); color:var(--navy); backdrop-filter:blur(4px); }
.kinetic-slices { position:absolute; inset:0; pointer-events:none; }
.kinetic-slice { position:absolute; display:block; width:clamp(260px,42vw,680px); height:clamp(150px,22vw,340px); transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.slice-yellow { left:-7%; top:8%; background:rgba(226,199,84,.9); clip-path:polygon(0 8%,100% 0,76% 100%,12% 82%); transform:translate(calc(var(--sx)*.45),calc(var(--sy)*.45)) rotate(-7deg); }
.slice-watercolor { right:-4%; bottom:7%; width:clamp(330px,53vw,820px); background:url('assets/images/brand/watercolor.jpg') center/cover; clip-path:polygon(8% 0,100% 14%,88% 100%,0 82%); transform:translate(calc(var(--sx)*-.7),calc(var(--sy)*-.55)) rotate(4deg); }
.slice-glass { left:24%; top:24%; width:clamp(190px,28vw,440px); height:clamp(240px,34vw,520px); background:rgba(255,255,255,.38); border:1px solid rgba(0,46,97,.12); backdrop-filter:blur(12px); clip-path:polygon(12% 0,100% 7%,82% 100%,0 88%); transform:translate(var(--sx),var(--sy)) rotate(9deg); }
.mix-statement { position:relative; z-index:2; width:min(940px,86vw); }
.mix-statement small { display:block; direction:ltr; text-align:right; font-size:11px; letter-spacing:.22em; font-weight:600; margin-bottom:25px; }
.mix-statement p { margin:0; font-family:"Heebo",Arial,sans-serif; font-size:clamp(48px,8.3vw,116px); line-height:.92; font-weight:800; letter-spacing:-.05em; text-shadow:0 2px 24px rgba(247,244,237,.85); }
.mix-statement em { color:var(--navy); font-style:normal; }

.paper-section { background:rgba(247,244,237,.86); color:var(--ink); backdrop-filter:blur(3px); }
.work-intro { min-height:64vh; padding:clamp(88px,10vw,138px) clamp(24px,8vw,130px); display:grid; grid-template-columns:1fr .8fr; align-items:center; gap:5vw; position:relative; overflow:hidden; }
.section-heading { max-width:650px; position:relative; z-index:2; }
.section-heading h2,.project-copy h2,.manifesto h2,.contact-content h2 { font-family:"Heebo",Arial,sans-serif; font-weight:700; line-height:1; letter-spacing:-.045em; }
.section-heading h2 { margin:0; font-size:clamp(48px,7vw,100px); }
.section-heading h2 span { color:var(--navy); }
.contact-content h2 span { color:inherit; }
.section-heading>p:last-child { max-width:520px; font-size:18px; line-height:1.8; }
.work-preview { width:min(620px,46vw); height:clamp(430px,52vw,690px); position:relative; justify-self:end; }
.work-preview img { position:absolute; object-fit:cover; box-shadow:0 24px 70px rgba(0,46,97,.14); transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease; }
.preview-one { width:64%; height:62%; right:2%; top:0; transform:rotate(3deg); }
.preview-two { width:48%; height:58%; left:0; bottom:0; transform:rotate(-5deg); }
.preview-three { width:43%; height:39%; right:9%; bottom:3%; transform:rotate(1deg); }
.work-preview:hover .preview-one { transform:translate(10px,-12px) rotate(5deg); }
.work-preview:hover .preview-two { transform:translate(-11px,9px) rotate(-7deg); }
.work-preview:hover .preview-three { transform:translate(8px,12px) rotate(3deg); }

.navy-section { background:rgba(0,46,97,.94); color:var(--paper); }
.featured-project { padding:clamp(78px,8vw,112px) clamp(18px,6vw,95px); display:grid; grid-template-columns:.58fr 1.42fr; gap:clamp(28px,5vw,78px); align-items:center; overflow:hidden; }
.project-copy { align-self:start; position:sticky; top:115px; }
.project-index { color:var(--mustard); font-size:13px; letter-spacing:.17em; }
.project-copy h2 { font-size:clamp(62px,8vw,118px); margin:18px 0 28px; color:var(--mustard); }
.project-copy>p:not(.project-index) { font-size:18px; line-height:1.85; max-width:470px; opacity:.82; }
.project-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.project-tags span { border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:8px 15px; font-size:12px; }
.campaign-switcher { display:flex; gap:8px; margin-top:32px; }
.campaign-switcher button { width:42px; height:42px; border:1px solid rgba(255,255,255,.3); background:transparent; cursor:pointer; }
.campaign-switcher button.is-active { color:var(--navy); background:var(--mustard); border-color:var(--mustard); }
.project-presentation { min-width:0; }
.project-stage { min-width:0; background:rgba(255,255,255,.05); border-radius:2px; touch-action:pan-y; }
.project-showcase { position:relative; display:grid; place-items:center; aspect-ratio:1.34; overflow:hidden; background:var(--navy-deep); isolation:isolate; }
.project-cover-image { position:absolute; inset:0; width:100%; max-width:none; height:100%; object-fit:cover; object-position:center 59%; transition:transform 1.1s cubic-bezier(.2,.75,.2,1),filter .6s ease; }
.project-showcase:hover .project-cover-image { transform:scale(1.015); filter:saturate(1.04); }
.project-cover-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 52%,rgba(0,16,38,.78)); pointer-events:none; }
.campaign-open-button { position:absolute; z-index:3; left:22px; bottom:22px; min-height:50px; padding:0 20px; display:inline-flex; align-items:center; gap:15px; border:1px solid var(--mustard); border-radius:999px; color:var(--navy); background:var(--mustard); box-shadow:0 12px 35px rgba(0,0,0,.22); cursor:pointer; transition:transform .3s ease,background .3s ease; }
.campaign-open-button:hover { transform:translateY(-4px); background:#efd967; }
.project-preview-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:12px; direction:rtl; }
.project-preview-strip button { position:relative; aspect-ratio:1.3; overflow:hidden; padding:0; border:1px solid rgba(255,255,255,.13); background:var(--navy-deep); cursor:pointer; transition:transform .32s ease,border-color .32s ease,opacity .32s ease; }
.project-preview-strip button:hover { z-index:2; transform:translateY(-5px); border-color:var(--mustard); }
.project-preview-strip img { width:100%; height:100%; object-fit:cover; opacity:.76; transition:opacity .32s ease,transform .5s ease; }
.project-preview-strip button:hover img { opacity:1; transform:scale(1.045); }
.project-preview-strip span { position:absolute; left:6px; bottom:5px; direction:ltr; padding:3px 5px; color:white; background:rgba(0,29,64,.7); font-size:9px; letter-spacing:.08em; }
.carousel-arrow { position:absolute; z-index:3; top:50%; width:48px; height:48px; padding:0; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:white; background:rgba(0,29,64,.62); backdrop-filter:blur(8px); font-family:Arial,sans-serif; font-size:32px; line-height:1; cursor:pointer; transform:translateY(-50%); transition:background .25s ease,transform .25s ease; }
.carousel-arrow:hover { background:var(--navy); transform:translateY(-50%) scale(1.06); }
.carousel-next { right:20px; left:auto; }
.carousel-prev { left:20px; right:auto; }
.carousel-counter { position:absolute; right:22px; bottom:24px; z-index:2; direction:ltr; font-size:12px; letter-spacing:.14em; color:white; padding:8px 11px; background:rgba(0,29,64,.68); }
.ad-card { border:0; padding:0; background:none; cursor:pointer; }

.ads-section { padding:clamp(88px,9vw,125px) clamp(18px,6vw,92px); }
.section-heading.compact { margin:0 auto 54px; text-align:center; }
.section-heading.compact h2 { font-size:clamp(46px,6vw,86px); }
.ads-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,28px); align-items:start; direction:rtl; }
.ad-card { text-align:right; color:var(--navy); display:block; }
.ad-card img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; background:#ece8df; filter:saturate(.92); transition:transform .5s ease,filter .5s ease; }
.ad-card:hover img { transform:translateY(-7px); filter:saturate(1.08); }
.ad-card>span { display:flex; justify-content:space-between; gap:15px; padding:13px 2px 25px; border-bottom:1px solid rgba(0,46,97,.2); }
.ad-card span b { font-size:15px; }
.ad-card span i { font-size:12px; font-style:normal; opacity:.55; }

.manifesto { min-height:78vh; position:relative; padding:clamp(95px,11vw,150px) clamp(24px,11vw,170px); display:grid; place-items:center; overflow:hidden; }
.manifesto::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 70%,rgba(0,46,97,.2),transparent 32%); }
.manifesto-inner { max-width:1000px; position:relative; z-index:2; }
.manifesto h2 { font-size:clamp(50px,8vw,110px); margin:0; }
.manifesto h2 em,.manifesto h2 span { color:var(--mustard); font-style:normal; }
.manifesto-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px; padding-top:28px; border-top:1px solid rgba(255,255,255,.2); }
.manifesto-grid p { max-width:420px; font-size:17px; line-height:1.9; opacity:.76; }
.quote-card { position:absolute; left:5%; bottom:5%; width:clamp(250px,29vw,400px); min-height:220px; display:grid; place-items:center; text-align:center; color:var(--navy); background:rgba(226,199,84,.94); transform:rotate(-4deg); clip-path:polygon(5% 0,100% 9%,91% 100%,0 85%); box-shadow:0 25px 80px rgba(0,0,0,.18); }
.quote-card b { position:absolute; font-family:Arial,sans-serif; font-size:clamp(150px,18vw,260px); line-height:1; color:rgba(0,46,97,.07); transform:rotate(5deg); }
.quote-card span { position:relative; z-index:2; font-family:"Heebo",Arial,sans-serif; font-size:clamp(20px,2.5vw,34px); font-weight:700; line-height:1.12; }

.contact-section { min-height:76vh; position:relative; overflow:hidden; background:var(--navy); color:white; display:grid; place-items:center; padding:82px 24px; }
.contact-watercolor { position:absolute; inset:auto -8% -28% auto; width:72vw; height:92%; background:url('assets/images/brand/watercolor.jpg') center/cover; border-radius:58% 42% 0 0; opacity:.92; transform:translate(calc(var(--sx)*-.55),calc(var(--sy)*-.45)) rotate(-5deg); transition:transform .78s cubic-bezier(.2,.75,.2,1); will-change:transform; }
.contact-content { position:relative; z-index:2; width:min(920px,92vw); }
.contact-content h2 { margin:0; font-size:clamp(60px,10vw,142px); }
.contact-content>p:not(.eyebrow) { font-size:17px; margin:28px 0 34px; }
.demo-note { display:inline-block; padding:7px 12px; background:rgba(247,244,237,.72); border-radius:99px; font-size:12px!important; }
.contact-details { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0 42px; max-width:900px; }
.contact-details a,.contact-details span { display:flex; flex-direction:column; gap:7px; min-height:105px; padding:21px 24px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07); backdrop-filter:blur(6px); transition:transform .3s ease,background .3s ease; }
.contact-details a:hover { transform:translateY(-5px); background:rgba(255,255,255,.14); }
.contact-details small { font-size:11px; letter-spacing:.14em; color:var(--mustard); }
.contact-details b { font-size:clamp(15px,1.4vw,19px); direction:ltr; text-align:right; }
.contact-details span b { direction:rtl; }
.contact-section .pill-button.navy { color:var(--navy); background:var(--mustard); border-color:var(--mustard); }

footer { min-height:122px; padding:28px clamp(22px,5vw,80px); background:var(--navy-deep); display:flex; align-items:center; justify-content:space-between; gap:25px; font-size:13px; }
.footer-logo { width:145px; }
footer p { opacity:.62; }
.lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:60px 5vw 30px; background:rgba(0,20,44,.94); backdrop-filter:blur(15px); }
.lightbox img { max-height:86vh; max-width:90vw; object-fit:contain; box-shadow:0 20px 80px rgba(0,0,0,.3); user-select:none; touch-action:pan-y; }
.lightbox-close { position:absolute; top:18px; left:24px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:none; font-size:30px; cursor:pointer; }
.lightbox-nav { z-index:102; }
.lightbox-counter { position:absolute; right:24px; bottom:22px; direction:ltr; padding:8px 11px; color:white; background:rgba(0,29,64,.72); font-size:12px; letter-spacing:.14em; }

.campaign-viewer { position:fixed; inset:0; z-index:110; overflow:auto; padding:24px clamp(16px,3vw,46px); color:var(--paper); background:rgba(0,18,40,.97); backdrop-filter:blur(22px); animation:campaign-viewer-in .45s cubic-bezier(.2,.75,.2,1) both; }
.campaign-viewer-inner { width:min(1420px,100%); min-height:calc(100svh - 48px); margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.campaign-viewer-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid rgba(255,255,255,.16); }
.campaign-viewer-header small { display:block; margin-bottom:3px; color:var(--mustard); font-size:11px; letter-spacing:.14em; }
.campaign-viewer-header h2 { margin:0; font-family:"Heebo",Arial,sans-serif; font-size:clamp(30px,4vw,52px); font-weight:700; line-height:1; letter-spacing:-.035em; }
.campaign-close { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:50%; color:white; background:transparent; font-size:31px; line-height:1; cursor:pointer; transition:transform .3s ease,background .3s ease; }
.campaign-close:hover { transform:rotate(8deg); background:rgba(255,255,255,.1); }
.campaign-player { position:relative; flex:1 1 auto; min-height:min(65svh,780px); overflow:hidden; background:#00172f; touch-action:pan-y; box-shadow:0 24px 90px rgba(0,0,0,.26); }
.campaign-player-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(.982); filter:blur(3px); user-select:none; pointer-events:none; transition:opacity .82s ease,transform 1.1s cubic-bezier(.2,.75,.2,1),filter .82s ease; }
.campaign-player-image.is-active { z-index:1; opacity:1; transform:scale(1); filter:none; }
.campaign-play-toggle { position:absolute; z-index:4; left:86px; bottom:22px; min-height:38px; padding:0 14px; border:1px solid rgba(255,255,255,.42); border-radius:999px; color:white; background:rgba(0,29,64,.72); backdrop-filter:blur(8px); cursor:pointer; }
.campaign-progress { position:absolute; z-index:5; right:0; bottom:0; width:100%; height:3px; background:var(--mustard); transform-origin:right; animation:campaign-progress 5.2s linear both; }
.campaign-progress.is-paused { animation-play-state:paused; }
.campaign-filmstrip { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding-bottom:4px; }
.campaign-filmstrip button { position:relative; aspect-ratio:1.42; overflow:hidden; padding:0; border:1px solid transparent; background:#00172f; cursor:pointer; opacity:.55; transition:opacity .3s ease,border-color .3s ease,transform .3s ease; }
.campaign-filmstrip button:hover { opacity:.85; transform:translateY(-2px); }
.campaign-filmstrip button.is-active { opacity:1; border-color:var(--mustard); }
.campaign-filmstrip button.is-active::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:var(--mustard); }
.campaign-filmstrip img { width:100%; height:100%; object-fit:cover; }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .75s ease var(--delay,0ms),transform .75s cubic-bezier(.2,.75,.2,1) var(--delay,0ms); }
.reveal.is-visible { opacity:1; transform:none; }
@keyframes fade-up { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:none; } }
@keyframes logo-in { from { opacity:0; transform:scale(.88); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }
@keyframes campaign-viewer-in { from { opacity:0; } to { opacity:1; } }
@keyframes campaign-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes scroll-line { 0% { transform:scaleY(0); } 45% { transform:scaleY(1); transform-origin:top; } 55% { transform:scaleY(1); transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }

@media (max-width:900px) {
  .site-header { height:68px; }
  .menu-button { display:block; position:relative; z-index:2; }
  .main-nav { position:fixed; inset:0; background:var(--navy-deep); flex-direction:column; align-items:center; justify-content:center; font-family:"Heebo",Arial,sans-serif; font-size:40px; font-weight:700; transform:translateY(-105%); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
  .main-nav.is-open { transform:none; }
  .work-intro { grid-template-columns:1fr; min-height:auto; }
  .work-preview { width:min(620px,92vw); justify-self:center; }
  .featured-project { grid-template-columns:1fr; }
  .project-copy { position:static; }
  .project-preview-strip { display:flex; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
  .project-preview-strip button { flex:0 0 126px; scroll-snap-align:start; }
  .campaign-player { min-height:58svh; }
  .campaign-filmstrip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .campaign-filmstrip button { flex:0 0 126px; scroll-snap-align:start; }
  .ads-grid { grid-template-columns:1fr 1fr; }
  .manifesto-grid { grid-template-columns:1fr; gap:10px; }
  .quote-card { position:relative; left:auto; bottom:auto; margin:70px 0 -50px; }
  .contact-details { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; }
}
@media (max-width:560px) {
  .hero { padding-inline:0; }
  .hero-logo { width:108vw; max-width:none; }
  .hero h1 { font-size:42px; }
  .hero-lead { font-size:15px; }
  .shard-one { left:-30%; }
  .mix-statement p { font-size:48px; }
  .work-preview { height:500px; }
  .work-intro { padding-top:105px; padding-bottom:105px; }
  .section-heading h2 { font-size:52px; }
  .featured-project { padding-top:90px; }
  .project-stage { margin-inline:-10px; }
  .project-preview-strip { margin-inline:-10px; padding-inline:10px; }
  .project-showcase { aspect-ratio:1.04; }
  .campaign-open-button { left:12px; right:12px; bottom:12px; justify-content:center; }
  .carousel-arrow { width:42px; height:42px; }
  .carousel-next { right:10px; left:auto; }
  .carousel-prev { left:10px; right:auto; }
  .campaign-viewer { padding:10px; }
  .campaign-viewer-inner { min-height:calc(100svh - 20px); gap:10px; }
  .campaign-viewer-header { min-height:66px; }
  .campaign-viewer-header h2 { font-size:31px; }
  .campaign-close { width:42px; height:42px; }
  .campaign-player { min-height:58svh; }
  .campaign-play-toggle { left:62px; bottom:12px; min-height:34px; font-size:13px; }
  .carousel-counter { right:12px; bottom:14px; }
  .campaign-filmstrip { gap:7px; }
  .campaign-filmstrip button { flex-basis:92px; }
  .ads-grid { gap:10px; }
  .ad-card>span { display:block; }
  .ad-card span i { display:block; margin-top:3px; }
  .manifesto { place-items:start; }
  .contact-watercolor { width:110vw; opacity:.78; transform:translate(calc(var(--sx)*-.3),calc(var(--sy)*-.25)) rotate(-5deg); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

body.admin-bar .site-header { top:32px; }
@media (max-width:782px) { body.admin-bar .site-header { top:46px; } }