@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --black:#000000;
  --brown-deep:#1f150c;
  --brown:#412d15;
  --cream:#e1dcc9;
  --cream-soft:#f0ece0;
  --text:#e1dcc9;
  --muted:#aaa393;
  --line:rgba(225,220,201,.14);
  --panel:rgba(31,21,12,.72);
  --panel-solid:#1f150c;
  --accent:#e1dcc9;
  --accent-dark:#412d15;
  --glow:rgba(65,45,21,.42);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(circle at 15% 10%,rgba(65,45,21,.28),transparent 30%),radial-gradient(circle at 85% 72%,rgba(31,21,12,.5),transparent 36%),linear-gradient(120deg,#000,#0c0804 48%,#000);background-size:140% 140%;animation:ambientShift 18s ease-in-out infinite alternate}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
@keyframes ambientShift{0%{background-position:0% 20%}50%{background-position:80% 60%}100%{background-position:25% 100%}}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;font-weight:600;letter-spacing:-.035em}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font-family:inherit;cursor:pointer}.wrap{max-width:1240px;margin:0 auto;padding:0 36px}
.bg-glow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.22}.blob-a{width:46vw;height:46vw;max-width:650px;max-height:650px;background:var(--brown);top:-18vw;left:-14vw;animation:floatA 22s ease-in-out infinite alternate}.blob-b{width:42vw;height:42vw;max-width:600px;max-height:600px;background:#2b1b0b;right:-12vw;bottom:-16vw;animation:floatB 26s ease-in-out infinite alternate}@keyframes floatA{to{transform:translate(9vw,7vw) scale(1.12)}}@keyframes floatB{to{transform:translate(-8vw,-6vw) scale(1.14)}}
header.nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.68);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:auto;padding:20px 36px;gap:20px}.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.04em;color:var(--cream)}.nav-links{display:flex;gap:36px;font-size:13px;color:var(--muted)}.nav-links a{position:relative;padding:5px 0;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--cream)}.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--cream);transform-origin:left;animation:navLine .35s ease}@keyframes navLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(31,21,12,.7);color:var(--cream);align-items:center;justify-content:center;flex-direction:column;gap:4px}.nav-toggle span{width:18px;height:1.5px;background:currentColor;border-radius:2px}
section{padding:104px 0;border-bottom:1px solid var(--line);position:relative}section:last-of-type{border-bottom:0}.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}.eyebrow:before{content:"";display:inline-block;width:24px;height:1px;background:var(--cream);vertical-align:middle;margin-right:10px;opacity:.65}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 20px;border-radius:999px;background:var(--cream);color:var(--black);border:1px solid var(--cream);font-size:13px;font-weight:700;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(225,220,201,.12)}.btn-arrow{font-size:16px}.btn-outline{background:transparent;color:var(--cream);border-color:rgba(225,220,201,.28)}.btn-outline:hover{background:var(--cream);color:var(--black);border-color:var(--cream)}
.hero-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:72px;align-items:center;min-height:610px}.hero-title{font-size:clamp(44px,5.6vw,76px);line-height:1.02;max-width:760px;margin-bottom:22px}.accentword{color:var(--cream);position:relative}.accentword:after{content:"";display:block;width:72px;height:3px;background:var(--brown);margin-top:18px;border-radius:4px}.hero-sub{color:var(--muted);font-size:15px;line-height:1.8;max-width:48ch;margin-bottom:30px}.intro-frame{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:var(--brown-deep);border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.48);cursor:pointer}.intro-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:saturate(.85) contrast(1.03)}.intro-frame:hover img{transform:scale(1.045)}.intro-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.88) 100%)}.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;background:var(--cream);color:var(--black);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .25s ease}.intro-frame:hover .play-btn{transform:translate(-50%,-50%) scale(1.08)}.play-btn svg{width:23px;height:23px;fill:currentColor;margin-left:3px}.intro-meta{position:absolute;left:24px;bottom:22px;z-index:2}.intro-meta .t{font-family:'Space Grotesk';font-size:19px;font-weight:600}.intro-meta .s{font-size:11px;color:#b8b1a1;margin-top:4px}.intro-dur{position:absolute;right:20px;bottom:20px;z-index:2;font-size:11px;background:rgba(0,0,0,.55);border:1px solid rgba(225,220,201,.2);padding:6px 10px;border-radius:999px}
.ba-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:center}.cs-title{font-size:clamp(32px,4vw,50px);line-height:1.04;margin-bottom:14px}.cs-sub{color:var(--muted);font-size:14px;line-height:1.75;max-width:60ch}.ba-frame{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:#000;border:1px solid var(--line);box-shadow:0 35px 80px rgba(0,0,0,.42);user-select:none}.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ba-after{filter:contrast(1.1) saturate(1.1) sepia(.1) brightness(1.02)}.ba-before{filter:grayscale(.4) contrast(.88) brightness(.9) saturate(.65)}.ba-tag{position:absolute;bottom:16px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;background:rgba(0,0,0,.55);border:1px solid var(--line);padding:7px 11px;border-radius:999px;backdrop-filter:blur(8px);z-index:3}.ba-tag.before{left:16px}.ba-tag.after{right:16px}.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--cream);cursor:ew-resize;z-index:4}.ba-handle .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--black);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;box-shadow:0 8px 25px rgba(0,0,0,.3)}
.carousel-section{padding:94px 0}.carousel-header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:38px}.carousel-header .htext{max-width:700px}.carousel-header .cs-title{font-size:clamp(34px,4vw,52px)}.cs-filters{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.chip{padding:8px 15px;border-radius:999px;font-size:11px;letter-spacing:.02em;border:1px solid var(--line);color:var(--muted);background:transparent;transition:.25s}.chip.active{background:var(--cream);color:var(--black);border-color:var(--cream);font-weight:700}.chip:hover:not(.active){border-color:rgba(225,220,201,.5);color:var(--cream)}
.carousel-stage{position:relative;width:100%;height:clamp(330px,42vw,540px);margin:0 auto;max-width:1160px;overflow:visible;touch-action:pan-y;user-select:none}.vcard{position:absolute;top:50%;left:50%;width:min(760px,calc(100vw - 72px));aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:var(--brown-deep);border:1px solid rgba(225,220,201,.13);box-shadow:0 32px 80px rgba(0,0,0,.62);transition:transform .58s cubic-bezier(.22,.61,.36,1),opacity .58s ease,filter .58s ease,box-shadow .58s ease;cursor:pointer;will-change:transform,opacity}.vcard:not(.is-active){filter:blur(1.8px) saturate(.65);box-shadow:0 22px 55px rgba(0,0,0,.45)}.vcard img{width:100%;height:100%;object-fit:cover}.vcard:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.08) 52%,rgba(0,0,0,.9) 100%);z-index:1}.vcard-heading{position:absolute;top:20px;left:70px;right:24px;z-index:3;text-align:left}.vcard-kicker{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(225,220,201,.68);margin-bottom:6px}.vcard-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.2vw,27px);font-weight:600;line-height:1.1;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.5)}.vcard-author{font-size:10px;color:rgba(255,255,255,.68);margin-top:5px}.vcard-top{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:9px;z-index:3}.vcard-avatar{width:32px;height:32px;border-radius:50%;background:var(--cream);color:var(--black);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;border:1px solid rgba(255,255,255,.45)}.vcard-top-label{font-size:9px;letter-spacing:.15em;color:rgba(255,255,255,.7)}.vcard-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);width:68px;height:68px;border-radius:50%;background:var(--cream);color:var(--black);display:flex;align-items:center;justify-content:center;z-index:3;opacity:0;transition:opacity .25s,transform .25s;box-shadow:0 14px 35px rgba(0,0,0,.4)}.vcard.is-active .vcard-play{opacity:1;transform:translate(-50%,-50%) scale(1)}.vcard-play svg{width:20px;height:20px;fill:currentColor;margin-left:2px}.vcard-info{position:absolute;left:20px;right:20px;bottom:18px;z-index:3}.vcard-info .vcard-row{display:flex;justify-content:flex-end;align-items:center}.vcard-meta{display:flex;align-items:center;gap:10px;font-size:10px;color:rgba(255,255,255,.7)}.vcard-meta span{display:inline-flex;align-items:center;gap:4px}.vcard-meta svg{width:12px;height:12px;stroke:currentColor;fill:none}.vcard-badge{font-size:10px;background:rgba(0,0,0,.45);border:1px solid rgba(225,220,201,.18);padding:6px 11px;border-radius:999px;display:flex;align-items:center;gap:5px;color:#fff;backdrop-filter:blur(10px)}.vcard-badge svg{width:10px;height:10px;fill:#fff}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}.carousel-arrow{width:40px;height:40px;border-radius:50%;background:rgba(31,21,12,.7);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--cream);transition:.25s;flex:0 0 auto}.carousel-arrow:hover{background:var(--cream);color:var(--black);border-color:var(--cream);transform:translateY(-2px)}.carousel-arrow svg{width:15px;height:15px}.dots{display:flex;gap:7px;align-items:center}.dot{width:6px;height:6px;border-radius:50%;background:rgba(225,220,201,.2);transition:.25s;border:0;padding:0}.dot.active{background:var(--cream);width:22px;border-radius:5px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}.lightbox.open{display:flex}.lightbox-inner{position:relative;width:100%;max-width:1000px}.lightbox-inner video{width:100%;max-height:80vh;border-radius:18px;background:#000;display:block;border:1px solid var(--line)}.lightbox-close{position:absolute;top:-50px;right:0;width:38px;height:38px;border-radius:50%;background:var(--cream);border:0;color:var(--black);display:flex;align-items:center;justify-content:center}.lightbox-close svg{width:16px;height:16px}.lightbox-caption{margin-top:14px;color:var(--muted);font-size:12px}.lightbox-caption strong{color:var(--cream)}
footer.site-footer{padding:52px 36px;border-top:1px solid var(--line)}.footer-inner{max-width:1240px;margin:auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}.footer-links{display:flex;gap:26px;font-size:12px;color:var(--muted)}.footer-links a:hover{color:var(--cream)}.footer-copy{font-size:11px;color:#777267}
.about-hero{display:grid;grid-template-columns:.78fr 1.22fr;gap:76px;align-items:center}.about-photo{border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--brown-deep);box-shadow:0 35px 80px rgba(0,0,0,.5);border:1px solid var(--line)}.about-photo img{width:100%;height:100%;object-fit:cover}.stat-row{display:flex;gap:48px;margin-top:34px;flex-wrap:wrap}.stat b{display:block;font-family:'Space Grotesk';font-size:32px;color:var(--cream)}.stat span{font-size:11px;color:var(--muted)}.about-body p{color:var(--muted);font-size:14px;line-height:1.85;max-width:62ch;margin-bottom:18px}
.contact-wrap{max-width:820px;margin:0 auto;padding:0 36px}.contact-head{text-align:center;margin-bottom:46px}.contact-head h1{font-size:clamp(40px,6vw,64px);line-height:1.03;margin-bottom:14px}.contact-head p{color:var(--muted);font-size:14px;line-height:1.7;max-width:55ch;margin:auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.field{background:rgba(31,21,12,.55);border:1px solid var(--line);border-radius:14px;padding:16px;font-size:13px;color:var(--cream);width:100%;font-family:inherit;transition:border-color .25s,background .25s}.field::placeholder{color:#756f63}.field:focus{outline:none;border-color:rgba(225,220,201,.55);background:rgba(31,21,12,.8)}select.field{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e1dcc9' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}textarea.field{width:100%;min-height:170px;resize:vertical;margin-bottom:18px;font-family:inherit}.contact-submit{width:100%;padding:16px}.contact-alt{text-align:center;margin-top:28px;color:var(--muted);font-size:12px}.contact-alt a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
@media(max-width:980px){.wrap{padding:0 24px}.hero-grid{gap:42px}.hero-title{font-size:clamp(40px,7vw,60px)}.carousel-stage{height:clamp(300px,48vw,440px)}.vcard{width:min(700px,calc(100vw - 48px))}.about-hero{gap:48px}}
@media(max-width:860px){.nav-inner{padding:15px 20px}.nav-toggle{display:flex}.nav-links{position:absolute;left:20px;right:20px;top:72px;display:flex;flex-direction:column;gap:2px;padding:8px;background:rgba(10,7,4,.96);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}.nav-links.open{opacity:1;visibility:visible;transform:translateY(0)}.nav-links a{padding:13px 14px}.nav-links a.active:after{display:none}.hero-grid,.ba-grid,.about-hero{grid-template-columns:1fr}.hero-grid{min-height:0;gap:42px}.about-photo{max-width:440px;margin:auto}.carousel-header{align-items:flex-start}.form-grid{grid-template-columns:1fr}.contact-wrap{padding:0 24px}}
@media(max-width:600px){section{padding:70px 0}.wrap{padding:0 16px}.nav-inner{padding:13px 16px}.nav-links{left:16px;right:16px;top:64px}.hero-title{font-size:clamp(36px,10.5vw,50px)}.hero-sub{font-size:13px}.intro-frame{border-radius:18px}.play-btn{width:64px;height:64px}.carousel-section{padding:70px 0}.carousel-header{margin-bottom:24px}.carousel-header .btn{width:100%}.carousel-stage{height:clamp(230px,70vw,330px)}.vcard{width:calc(100vw - 32px);border-radius:17px}.vcard-heading{top:14px;left:56px;right:14px}.vcard-kicker{font-size:8px}.vcard-title{font-size:16px}.vcard-author{font-size:9px}.vcard-top{top:14px;left:14px}.vcard-avatar{width:26px;height:26px}.vcard-top-label{display:none}.vcard-play{width:54px;height:54px}.vcard-info{left:14px;right:14px;bottom:12px}.vcard-badge{font-size:9px;padding:5px 8px}.carousel-nav{margin-top:12px}.carousel-arrow{width:34px;height:34px}.footer-inner{flex-direction:column;text-align:center}.footer-links{gap:18px;justify-content:center;flex-wrap:wrap}.contact-head h1{font-size:40px}.lightbox{padding:14px}.lightbox-close{top:-44px}.ba-tag{bottom:10px;font-size:9px;padding:5px 8px}}
@media(max-width:400px){.carousel-stage{height:215px}.vcard{width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Motion-first before/after color grade */
.section-intro.centered{text-align:center;max-width:720px;margin:0 auto 34px}.section-intro.centered .cs-sub{margin:0 auto}.before-after-section{padding:92px 0 100px}.video-compare{position:relative;width:min(1120px,100%);margin:0 auto;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#090705;border:1px solid rgba(225,220,201,.15);box-shadow:0 35px 90px rgba(0,0,0,.55);cursor:ew-resize;touch-action:none;user-select:none}.compare-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.compare-before{z-index:2;clip-path:inset(0 50% 0 0)}.compare-after{z-index:1}.compare-label{position:absolute;top:18px;z-index:5;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.46);border:1px solid rgba(225,220,201,.18);backdrop-filter:blur(12px);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;pointer-events:none}.compare-label.before{left:18px}.compare-label.after{right:18px}.compare-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--cream);z-index:6;pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.35)}.compare-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--black);font-size:18px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.35)}.compare-note{text-align:center;margin-top:14px;color:var(--muted);font-size:11px;letter-spacing:.03em}.vcard-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#1f150c,#412d15 50%,#000);pointer-events:none}.vcard:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 0,rgba(0,0,0,.05) 28%,rgba(0,0,0,.34) 100%);z-index:1;pointer-events:none}.vcard-heading,.vcard-top,.vcard-play,.vcard-info{z-index:4}.vcard:not(.is-active) .vcard-play{opacity:0}.vcard.is-active .vcard-video{filter:saturate(1.03) contrast(1.02)}
@media(max-width:600px){.before-after-section{padding:70px 0 78px}.video-compare{border-radius:17px}.compare-label{top:12px;font-size:8px;padding:6px 9px}.compare-label.before{left:12px}.compare-label.after{right:12px}.compare-knob{width:40px;height:40px;font-size:15px}}

/* Intro showreel: autoplaying video, no poster, optional sound */
.intro-frame{position:relative;overflow:hidden}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#090705;display:block}
.intro-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.06) 45%,rgba(0,0,0,.72));z-index:1;pointer-events:none}
.intro-sound{position:absolute;right:16px;top:16px;z-index:5;border:1px solid rgba(225,220,201,.22);background:rgba(0,0,0,.42);backdrop-filter:blur(12px);color:#fff;border-radius:999px;padding:9px 12px;display:flex;align-items:center;gap:7px;font:600 10px 'DM Sans',sans-serif;letter-spacing:.02em;cursor:pointer;transition:.25s}
.intro-sound:hover{background:rgba(225,220,201,.94);color:#000;transform:translateY(-1px)}
.intro-sound svg{width:14px;height:14px}
.intro-sound .sound-on{display:none}
.intro-sound.is-on .sound-off{display:none}
.intro-sound.is-on .sound-on{display:block}
.intro-sound.is-on span{color:inherit}
.intro-frame .play-btn{z-index:4;pointer-events:none}

/* Short-form projects: preserve the original portrait/vertical composition. */
.vcard.portrait{width:min(390px,calc(100vw - 48px));aspect-ratio:9/16}
.vcard.portrait .vcard-video{object-fit:contain;background:#050403}
.vcard.portrait:before{background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,0) 35%,rgba(0,0,0,.86) 100%)}
.vcard.portrait .vcard-heading{left:18px;right:18px}
.vcard.portrait .vcard-info{left:18px;right:18px}
.lightbox-inner video{object-fit:contain}
@media(max-width:600px){
  .vcard.portrait{width:min(270px,72vw)}
  .intro-sound{right:12px;top:12px;padding:8px 10px}
  .intro-sound span{display:none}
}
.intro-frame .play-btn{display:none}

/* Final polish based on the review screenshots */
.hero-grid{padding-top:42px;padding-bottom:24px}
.hero-copy{transform:translateY(34px)}
.intro-frame{transform:translateY(34px);cursor:pointer}
.intro-frame:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
.intro-meta,.intro-dur{display:none!important}
.intro-overlay{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.12) 62%,rgba(0,0,0,.28));z-index:1}
.intro-video{z-index:0}
.intro-sound{z-index:6}

.centered-header{display:block;text-align:center;margin-bottom:36px}
.centered-header .htext{max-width:760px;margin:0 auto}
.centered-header .cs-title{margin-bottom:12px}
.centered-header .cs-sub{margin:0 auto;max-width:62ch}
.centered-header .cs-filters{justify-content:center;margin-top:22px}
.carousel-section .carousel-stage{margin-top:0}

/* Portrait carousel needs room for the full 9:16 frame, so it never collides with the heading. */
.portrait-stage{height:clamp(520px,56vw,700px)}
.vcard.portrait{width:min(390px,calc(100vw - 48px));aspect-ratio:9/16}
.vcard.portrait .vcard-heading{top:20px;left:18px;right:18px}
.vcard.portrait .vcard-top{top:20px;left:18px}
.vcard.portrait .vcard-info{left:18px;right:18px;bottom:16px}

/* Keep the comparison player clean while still explaining a missing/unsupported file. */
.compare-status{position:absolute;inset:0;z-index:10;display:grid;place-content:center;text-align:center;padding:30px;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);color:var(--cream);pointer-events:none}
.compare-status[hidden]{display:none}
.compare-status strong{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:8px}
.compare-status span{color:var(--muted);font-size:12px;line-height:1.6;max-width:420px}
.compare-status code{color:var(--cream)}

/* About page fallback when a portrait has not been added yet. */
.about-photo{position:relative;display:block}
.about-photo img{position:relative;z-index:2}
.about-photo-placeholder{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;background:radial-gradient(circle at 50% 35%,rgba(65,45,21,.95),rgba(31,21,12,.98) 58%,#070504);color:var(--cream)}
.about-photo-placeholder .initials{font-family:'Space Grotesk',sans-serif;font-size:clamp(72px,10vw,120px);font-weight:600;letter-spacing:-.08em;line-height:.9}
.about-photo-placeholder .role{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.6}

@media(max-width:860px){
  .hero-grid{padding-top:28px}
  .hero-copy,.intro-frame{transform:none}
  .intro-frame{margin-top:6px}
}
@media(max-width:600px){
  .hero-grid{padding-top:16px;padding-bottom:8px}
  .centered-header{margin-bottom:24px}
  .portrait-stage{height:clamp(500px,132vw,620px)}
  .vcard.portrait{width:min(270px,72vw)}
  .hero-copy{transform:none}
  .intro-frame{transform:none}
}

/* Responsive structure pass — keeps every section fluid from phones to large displays. */
:root{--page-pad:clamp(16px,4vw,56px);--section-space:clamp(64px,8vw,104px)}
html,body{width:100%;max-width:100%;overflow-x:hidden}
img,video,svg{max-width:100%}
button,a,input,textarea,select{font:inherit}
.wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--page-pad)}

/* The first section is intentionally tighter so the hero feels like one composed block. */
#work{padding:clamp(34px,5vw,58px) 0 clamp(54px,6vw,78px)}
#work .hero-grid{width:100%;min-height:0;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(28px,5vw,72px);padding:0;align-items:center}
#work .hero-copy{min-width:0;transform:none}
#work .hero-title{font-size:clamp(36px,4.65vw,68px);line-height:1.04;max-width:12ch;margin-bottom:clamp(16px,2vw,24px);overflow-wrap:break-word}
#work .hero-sub{font-size:clamp(13px,1.05vw,15px);line-height:1.7;max-width:46ch;margin-bottom:clamp(22px,2.5vw,30px)}
#work .eyebrow:before{display:none}
#work .eyebrow{margin-bottom:clamp(12px,1.5vw,18px);font-size:clamp(9px,.75vw,10px)}
#work .intro-frame{width:100%;max-width:700px;justify-self:end;transform:none;aspect-ratio:16/10}
#work .intro-sound{max-width:calc(100% - 24px)}

/* Fluid section typography. */
section{padding-block:var(--section-space)}
.cs-title{font-size:clamp(30px,4vw,52px);line-height:1.06;overflow-wrap:anywhere}
.cs-sub{font-size:clamp(12px,1vw,15px);line-height:1.7;max-width:62ch;overflow-wrap:anywhere}
.centered-header .htext,.section-intro.centered{width:100%;max-width:min(760px,100%)}
.centered-header{margin-bottom:clamp(24px,3.5vw,36px)}

/* Carousel dimensions scale with the viewport without allowing cards to escape the page. */
.carousel-section{padding-block:clamp(68px,8vw,94px)}
.carousel-stage{width:100%;max-width:1160px;height:clamp(280px,40vw,520px)}
.vcard{width:min(760px,calc(100vw - 2 * var(--page-pad) - 12px));max-width:100%;border-radius:clamp(16px,2vw,22px)}
.vcard-heading{left:clamp(52px,6vw,70px);right:clamp(14px,2vw,24px);max-width:calc(100% - 90px)}
.vcard-title{font-size:clamp(16px,2.1vw,27px);overflow-wrap:anywhere}
.vcard-kicker,.vcard-author,.vcard-badge,.vcard-top-label{max-width:100%;overflow-wrap:anywhere}
.vcard-info{left:clamp(14px,2vw,20px);right:clamp(14px,2vw,20px)}

/* Portrait work gets a stable responsive frame and never stretches the source video. */
.portrait-stage{height:clamp(430px,62vw,680px)}
.vcard.portrait{width:min(390px,calc(100vw - 2 * var(--page-pad)));height:auto;aspect-ratio:9/16}
.vcard.portrait .vcard-video{object-fit:contain}

/* Before/after player scales cleanly and keeps its interaction area usable on touch screens. */
.before-after-section{padding-block:clamp(68px,8vw,96px)}
.video-compare{width:100%;max-width:1120px;aspect-ratio:16/9}
.section-intro.centered{margin-bottom:clamp(24px,3vw,34px)}
.section-intro.centered .cs-title{font-size:clamp(30px,4vw,50px)}

/* Footer and forms remain inside the viewport at every width. */
.site-footer,.footer-inner{width:100%;max-width:100%}
footer.site-footer{padding-inline:var(--page-pad)}
.contact-wrap{width:min(820px,100%);padding-inline:var(--page-pad)}

@media (max-width: 980px){
  #work .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,42px)}
  #work .hero-title{font-size:clamp(36px,5.5vw,54px)}
  .carousel-stage{height:clamp(300px,48vw,440px)}
  .portrait-stage{height:clamp(450px,68vw,600px)}
}

@media (max-width: 760px){
  #work{padding-block:32px 56px}
  #work .hero-grid{grid-template-columns:1fr;gap:28px}
  #work .hero-title{max-width:14ch;font-size:clamp(38px,9vw,56px)}
  #work .hero-sub{max-width:58ch}
  #work .intro-frame{justify-self:stretch;max-width:none}
  .carousel-stage{height:clamp(260px,72vw,380px)}
  .portrait-stage{height:clamp(440px,128vw,610px)}
  .vcard{width:calc(100vw - 2 * var(--page-pad))}
  .vcard-title{font-size:clamp(15px,4vw,20px)}
  .vcard-heading{top:14px;left:50px;right:14px}
  .vcard-top{top:14px;left:14px}
  .vcard-info{bottom:12px}
  .vcard-avatar{width:28px;height:28px}
  .vcard-play{width:56px;height:56px}
  .compare-note{font-size:10px}
}

@media (max-width: 520px){
  #work .hero-grid{gap:24px}
  #work .hero-title{font-size:clamp(34px,10.5vw,46px);line-height:1.05}
  #work .hero-sub{font-size:13px;line-height:1.65}
  #work .btn{width:100%;max-width:260px}
  #work .intro-frame{aspect-ratio:16/10;border-radius:17px}
  .carousel-section{padding-block:64px}
  .carousel-stage{height:clamp(235px,74vw,320px)}
  .portrait-stage{height:clamp(400px,124vw,540px)}
  .vcard{border-radius:16px}
  .vcard.portrait{width:min(270px,74vw)}
  .vcard-heading{top:12px;left:48px;right:12px}
  .vcard-kicker{font-size:7px;margin-bottom:4px}
  .vcard-title{font-size:15px;line-height:1.08}
  .vcard-author{font-size:8px;margin-top:4px}
  .vcard-top{top:12px;left:12px}
  .vcard-avatar{width:25px;height:25px;font-size:8px}
  .vcard-top-label{display:none}
  .vcard-info{left:12px;right:12px;bottom:10px}
  .vcard-badge{font-size:8px;padding:5px 8px}
  .carousel-nav{margin-top:12px;gap:12px}
  .carousel-arrow{width:34px;height:34px}
  .video-compare{border-radius:15px}
  .compare-label{top:10px;font-size:7px;padding:5px 8px}
  .compare-label.before{left:10px}.compare-label.after{right:10px}
  .compare-knob{width:38px;height:38px;font-size:14px}
  .compare-note{margin-top:10px}
  .section-intro.centered .cs-title,.centered-header .cs-title{font-size:clamp(28px,8vw,38px)}
  .section-intro.centered .cs-sub,.centered-header .cs-sub{font-size:12px}
}

@media (max-width: 360px){
  :root{--page-pad:12px}
  #work .hero-title{font-size:33px}
  .carousel-stage{height:215px}
  .portrait-stage{height:390px}
  .vcard{width:calc(100vw - 24px)}
  .vcard.portrait{width:245px}
}


/* Mobile-safe color grading comparison */
.video-compare{
  min-height:0;
  isolation:isolate;
}
.compare-video{
  display:block;
  background:#120d08;
  object-position:center center;
}
@media (max-width:760px){
  .before-after-section{padding-block:64px 72px}
  .video-compare{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:16/10;
    border-radius:16px;
  }
  .compare-video{object-fit:cover}
  .compare-line{width:2px}
  .compare-knob{width:42px;height:42px;font-size:15px}
}
@media (max-width:420px){
  .before-after-section{padding-block:56px 64px}
  .section-intro.centered .cs-title{font-size:clamp(27px,8vw,34px);line-height:1.08}
  .section-intro.centered .cs-sub{font-size:12px;line-height:1.6}
  .video-compare{aspect-ratio:4/3;min-height:240px}
  .compare-label{top:10px}
  .compare-label.before{left:10px}
  .compare-label.after{right:10px}
}