/* Yellow Wagtail Design — first homepage prototype */
:root{--ink:#070707;--ink2:#101010;--paper:#fff;--mist:#f8f8f6;--yellow:#ffdf30;--yellow-strong:#ffe031;--gray:#656565;--max:1260px;--edge:clamp(22px,4.7vw,74px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:#151515;font-family:Arial,Helvetica,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #e0a700;outline-offset:5px}img,video{display:block;max-width:100%}.wrap{width:min(100%,calc(var(--max) + var(--edge)*2));padding-inline:var(--edge);margin-inline:auto}.small-label{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:800;color:#767676}.small-label:before{content:"";width:20px;height:3px;background:var(--yellow);flex:0 0 auto}.section-heading{font-size:clamp(2.35rem,4.3vw,4.4rem);letter-spacing:-.065em;line-height:1.06;margin:0 0 20px;font-weight:900}.section-lead{font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.42;font-weight:750}.accent-rule{background:var(--yellow);height:4px;width:124px;display:block;margin-top:20px;border-radius:100% 40% 60% 30%;transform:rotate(-1.5deg)}.btn{display:inline-flex;justify-content:center;align-items:center;gap:22px;border:1px solid transparent;padding:14px 24px;min-height:51px;font-weight:800;font-size:15px;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn-yellow{background:var(--yellow);color:#030303}.btn-yellow:hover{background:#ffe85b;box-shadow:0 8px 28px #ffdf3024}.btn-dark{background:#0b0b0b;color:white}.btn-dark:hover{background:#272727}.btn-outline{border-color:#aaa;color:white;background:transparent}.btn-outline:hover{border-color:var(--yellow)}.arrow{font-size:22px;font-weight:400;line-height:.7}
/* Shared navigation */
.site-header{background:#000;color:#fff;border-bottom:1px solid #252525;position:relative;z-index:50}.header-row{min-height:95px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;flex-shrink:0}.brand img{width:190px;height:auto;mix-blend-mode:screen}.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2.5vw,40px)}.nav-links a{font-size:13px;font-weight:700;white-space:nowrap;position:relative;padding:6px 0}.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--yellow);transition:right .2s}.nav-links a:hover:after,.nav-links a.active:after{right:0}.nav-links .nav-cta{background:var(--yellow);color:#070707;padding:12px 15px}.nav-links .nav-cta:after{display:none}.nav-links .nav-cta:hover{background:#ffe96a}.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #777;background:transparent;color:white;cursor:pointer}.menu-toggle svg{width:23px;height:23px}
/* Hero: black stage; monitor contains the ACTUAL supplied 47s video. */
.hero{background:radial-gradient(ellipse at 87% 76%,#272012 0%,transparent 42%),linear-gradient(115deg,#020202 30%,#0e0d0a);color:#fff;overflow:hidden;position:relative}.hero:before{content:"";position:absolute;pointer-events:none;inset:auto 0 0;height:90px;background:linear-gradient(0deg,#100c08,transparent);opacity:.86}.hero-content{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);align-items:center;gap:clamp(32px,4vw,70px);padding-block:clamp(65px,8vw,112px) clamp(55px,7vw,100px);min-height:600px;position:relative;z-index:1}.hero-copy{max-width:550px}.hero-copy h1{margin:0;color:white;font-size:clamp(3.6rem,5.6vw,6rem);line-height:.99;letter-spacing:-.075em;font-weight:900}.hero-copy .highlight{color:var(--yellow)}.hero-copy p{font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.55;max-width:470px;margin:28px 0 29px;color:#efefef}.hero-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--yellow);margin-bottom:22px}.hero-action{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.hero-secondary{font-size:12px;font-weight:800;letter-spacing:.02em;color:#e7e7e7;display:inline-flex;align-items:center;gap:6px;padding:10px}.hero-secondary:hover{color:var(--yellow)}.hero-rule{height:5px;width:160px;background:var(--yellow);border-radius:100%;transform:rotate(-3deg);margin:18px 0 0 35%}
.monitor-scene{width:100%;max-width:750px;margin-inline:auto;align-self:center;position:relative;padding:0 2% 10%;filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}.monitor{width:100%;background:linear-gradient(135deg,#3f4448,#151719 20%,#050607 70%,#434343);border:8px solid #252525;border-radius:17px 17px 7px 7px;box-shadow:0 0 0 1px #666,0 0 0 8px #0b0c0c,0 15px 40px #000a;overflow:hidden;position:relative}.monitor:after{content:"";position:absolute;left:50%;bottom:2px;translate:-50%;width:4px;height:4px;border-radius:50%;background:#777}.monitor-screen{aspect-ratio:16/9;background:#161616;overflow:hidden;margin:9px 9px 16px;position:relative}.monitor-screen video{height:100%;width:100%;object-fit:cover;object-position:center}.monitor-neck{height:77px;width:13%;margin:0 auto;background:linear-gradient(90deg,#252525 0,#9e9e9e 45%,#303030 100%);clip-path:polygon(25% 0,75% 0,95% 100%,5% 100%)}.monitor-base{height:12px;width:37%;background:linear-gradient(180deg,#d1d1d1 0%,#4b4b4b 60%,#1b1b1b 100%);margin:0 auto;border-radius:50% 50% 30% 30%}.monitor-caption{color:#858585;font-size:10px;letter-spacing:.16em;text-align:center;text-transform:uppercase;margin-top:25px}
/* Intro: bold side label and editorial right column */
.intro{padding-block:88px 92px;background:#fff}.intro-grid{display:grid;grid-template-columns:.86fr 1.24fr;gap:clamp(30px,6vw,90px);align-items:start}.intro-left h2{font-size:clamp(3rem,5vw,5.5rem);font-weight:900;letter-spacing:-.07em;line-height:1.03;margin:14px 0 0}.intro-right{border-left:3px solid var(--yellow);padding-left:clamp(22px,3.3vw,48px)}.intro-right h3{font-weight:850;line-height:1.22;font-size:clamp(1.45rem,2.3vw,2.3rem);letter-spacing:-.035em;margin:4px 0 18px}.intro-right p{font-size:16px;color:#444;margin:0 0 13px}.intro-right p:last-child{margin:0}
/* Services */
.services{background:#f7f7f5;padding-block:80px 103px;border-top:1px solid #e9e9e9}.section-center{text-align:center}.section-center .small-label{justify-content:center}.section-center .section-heading{margin:12px auto 18px}.section-center .copy{max-width:760px;margin:0 auto 42px;color:#595959}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.service-card{background:#fff;padding:39px 34px 36px;min-height:315px;border:1px solid #e8e8e8;position:relative;transition:transform .2s,box-shadow .2s}.service-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px #00000009}.service-card:before{content:"";position:absolute;top:0;left:0;width:80px;height:4px;background:var(--yellow)}.service-icon{height:74px;display:flex;align-items:center;justify-content:center}.service-icon svg{width:55px;height:55px;stroke:#101010;fill:none;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}.service-icon svg .yellow{stroke:#e8b900}.service-card h3{font-size:clamp(1.23rem,1.6vw,1.5rem);letter-spacing:-.045em;line-height:1.16;margin:10px 0 13px;font-weight:900}.service-card p{margin:0;font-size:15px;color:#555;line-height:1.55}.services-stripe{background:var(--yellow);padding:15px var(--edge);font-size:13px;font-weight:800;text-align:center}
/* Video / seconds: video stays on RIGHT in its own block, not behind text */
.impression{background:#080808;color:white;overflow:hidden}.impression-grid{min-height:550px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,90px);align-items:center;padding-block:88px}.impression-content{max-width:580px}.impression .small-label{color:var(--yellow)}.impression h2{letter-spacing:-.065em;line-height:1.03;font-size:clamp(3.2rem,5vw,5.4rem);margin:20px 0 0;color:white}.impression .starter{font-size:clamp(1.9rem,3vw,3rem);font-weight:900;color:var(--yellow)}.impression .giant{font-size:clamp(4rem,6.5vw,7.5rem);font-weight:900;color:#fff;display:block;letter-spacing:-.085em}.impression .endline{font-size:clamp(1.3rem,2.2vw,2.2rem);font-weight:850;line-height:1.22;color:var(--yellow);margin:13px 0}.impression .endline:last-child{color:#fff}.impression-rule{background:var(--yellow);width:170px;height:4px;margin:24px 0 22px}.impression-footnote{color:#bcbcbc;font-size:14px}.impression-video{position:relative;background:#101010;border:1px solid #303030;border-radius:5px;box-shadow:0 20px 55px #0009;overflow:hidden;aspect-ratio:16/10}.impression-video video{height:100%;width:100%;object-fit:cover;object-position:center}.impression-video:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#0404043d,transparent 30%)}.anim-intro{display:none;min-height:165px}.anim-intro .typing{font-size:clamp(2rem,3.2vw,3.3rem);font-weight:900;color:var(--yellow);letter-spacing:-.05em;line-height:1.13}.typing-cursor{border-right:3px solid var(--yellow);animation:blink .75s step-end infinite}.anim-question{display:none;opacity:0;transition:opacity .4s;font-size:clamp(2.6rem,4.8vw,5rem);font-weight:900;color:#fff;letter-spacing:-.06em}.anim-final{opacity:1;transition:opacity .65s}.anim-final.hidden{display:none}.endline.fade-target{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}.endline.fade-target.visible{opacity:1;transform:none}@keyframes blink{50%{border-color:transparent}}
/* Projects — screenshots supplied by user */
.work{background:#fff;padding-block:90px 112px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,50px);margin-top:35px}.work-card{min-width:0}.work-image{aspect-ratio:16/9;border:1px solid #dedede;overflow:hidden;background:#f3f3f3;box-shadow:0 3px 18px #0000000f}.work-image img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s}.work-card:hover .work-image img{transform:scale(1.025)}.work-card .tag{margin:20px 0 9px;color:#6c6c6c;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.work-card h3{font-size:clamp(1.3rem,1.75vw,1.6rem);font-weight:900;letter-spacing:-.035em;line-height:1.2;margin:0 0 10px}.work-card p{margin:0;color:#555;font-size:15px;line-height:1.6;max-width:550px}
/* CTA: yellow section deliberately borrowed from SECOND mockup */
.talk{background:var(--yellow);color:#090909;padding-block:68px 73px}.talk-grid{display:grid;grid-template-columns:1.4fr auto;align-items:center;gap:35px}.talk .small-label{color:#2e2e2e}.talk .small-label:before{background:#111}.talk h2{font-size:clamp(2.8rem,4.3vw,4.5rem);letter-spacing:-.065em;font-weight:900;line-height:1.04;margin:12px 0 16px}.talk p{max-width:730px;font-size:16px;line-height:1.55;margin:0}.talk-actions{display:flex;align-items:center;justify-content:flex-end}
/* Footer */
.site-footer{background:#000;color:#ddd;padding:48px 0 23px}.footer-main{display:grid;grid-template-columns:260px 1fr auto;align-items:center;gap:30px}.footer-brand img{width:228px;mix-blend-mode:screen}.footer-nav{display:flex;justify-content:center;gap:25px;flex-wrap:wrap}.footer-nav a{font-size:12px;font-weight:700}.footer-nav a:hover,.footer-mail:hover{color:var(--yellow)}.footer-mail{font-size:12px;white-space:nowrap;overflow-wrap:anywhere}.footer-bottom{border-top:1px solid #272727;padding-top:18px;margin-top:38px;color:#979797;font-size:11px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* Inner placeholder pages (preview only) */
.inner-page{min-height:65vh;background:#080808;color:#fff;display:flex;align-items:center}.inner-grid{padding-block:110px 140px;max-width:880px}.inner-page h1{font-weight:900;font-size:clamp(3.4rem,6vw,6.8rem);letter-spacing:-.07em;line-height:1.03;margin:24px 0}.inner-page h1 em{font-style:normal;color:var(--yellow)}.inner-page p{color:#ddd;font-size:clamp(1.06rem,1.65vw,1.28rem);max-width:640px}.inner-page .inner-actions{margin-top:32px;display:flex;gap:15px;flex-wrap:wrap}
@media (max-width:1080px){.nav-links{gap:18px}.header-row{min-height:82px}.brand img{width:185px}.hero-content{gap:26px}.hero-copy h1{font-size:clamp(3.25rem,5.6vw,5rem)}.footer-main{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}}
@media(max-width:800px){:root{--edge:24px}.menu-toggle{display:flex}.header-row{min-height:75px}.brand img{width:150px}.nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:#0d0d0d;border-bottom:1px solid #444;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--edge) 22px}.nav-links.open{display:flex}.nav-links a{font-size:15px;padding:13px 6px}.nav-links .nav-cta{margin-top:8px;text-align:center}.hero-content{grid-template-columns:1fr;min-height:0;gap:48px;padding-block:68px 38px}.hero-copy{max-width:700px}.hero-copy h1{font-size:clamp(3.4rem,10vw,5.3rem)}.hero-copy p{margin-top:23px}.monitor-scene{max-width:630px}.intro-grid{grid-template-columns:1fr;gap:34px}.intro{padding-block:70px}.intro-right{padding-left:25px}.services{padding-block:70px 80px}.service-grid{gap:14px}.service-card{padding:24px 18px;min-height:320px}.impression-grid{grid-template-columns:1fr;gap:30px;padding-block:72px}.impression-video{max-width:680px;width:100%}.impression h2{font-size:clamp(3.6rem,8vw,5rem)}.work{padding-block:80px}.talk-grid{grid-template-columns:1fr}.talk-actions{justify-content:flex-start}}
@media(max-width:600px){.section-heading{font-size:clamp(2.35rem,10vw,3.6rem)}.hero-copy h1{font-size:clamp(3.2rem,12.8vw,4.4rem)}.hero-kicker{font-size:10px}.hero-copy p{font-size:16px}.hero-action{gap:6px}.monitor-scene{padding-bottom:18px}.monitor{border-width:4px;border-radius:9px}.monitor-screen{margin:4px 4px 8px}.monitor-neck{height:49px}.intro-left h2{font-size:clamp(3rem,11vw,4rem)}.intro-right h3{font-size:1.5rem}.service-grid,.work-grid{grid-template-columns:1fr}.service-card{min-height:0;padding:31px 29px}.service-icon{justify-content:flex-start;height:60px}.service-icon svg{width:48px;height:48px}.services-stripe{font-size:12px}.impression h2{font-size:clamp(3.4rem,11vw,4.8rem)}.impression .giant{font-size:clamp(4.2rem,16vw,5.6rem)}.impression .endline{font-size:1.5rem}.impression-video{aspect-ratio:16/10}.talk{padding-block:62px}.talk h2{font-size:3rem}.site-footer{padding-top:40px}.footer-nav{gap:12px 24px}.footer-bottom{justify-content:center;text-align:center}.inner-grid{padding-block:90px 120px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.service-card,.work-card img{transition:none!important}.typing-cursor{animation:none}.anim-intro,.anim-question{display:none!important}.anim-final{display:block!important;opacity:1!important}.endline.fade-target{opacity:1!important;transform:none!important}}