:root{--gold:#E0B930;--sun:#FFE566;--shade:#A89426;--deep:#857424;--ink:#16130a;--blue:#0A3AA8;--red:#D0152B;--paper:#fffdf3;--wa:#25D366}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
h1,h2,h3{font-family:'Cormorant Garamond',serif;line-height:1.1;font-weight:700}
h1{font-size:clamp(2.6rem,6vw,5rem)}h2{font-size:clamp(2rem,4vw,3rem)}h3{font-size:1.5rem}
img{max-width:100%;display:block}a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.lead{font-size:1.1rem;max-width:56ch}
/* header */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:4px solid var(--gold)}
.bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.bar img{height:54px;width:auto}
nav{display:flex;gap:28px}
nav a{text-decoration:none;font-weight:600;padding:6px 0;border-bottom:3px solid transparent}
nav a:hover,nav a.on{border-color:var(--red)}
.burger{display:none;background:none;border:2px solid var(--ink);padding:6px 10px;font-size:1.3rem;cursor:pointer}
/* buttons: hard olive "extrusion" shadow echoing the logo */
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border:0;cursor:pointer;font:inherit;font-weight:700;box-shadow:6px 6px 0 var(--deep);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--deep)}
.btn.wa{background:var(--wa);color:var(--ink)}
.btn.alt{background:#fff;color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.row{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px}
/* hero */
.hero{background:var(--sun);padding:80px 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{margin-top:20px}
.mark{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(60px) scale(.9);opacity:0}}
.pill{display:inline-block;background:var(--ink);color:var(--sun);font-weight:600;padding:4px 14px;margin-bottom:18px;font-size:.9rem}
/* services */
.head{margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}
.card{background:#fff;border:2px solid var(--ink);border-left:10px solid var(--gold);padding:24px;box-shadow:8px 8px 0 var(--shade)}
.card h3{margin-bottom:8px}
.band{background:var(--ink);color:#fff}
.band .grid{margin-top:32px}
.band h3{color:var(--sun)}
.cta{background:var(--gold);text-align:center}
.cta .lead{margin:14px auto 0}.cta .row{justify-content:center}
/* portfolio */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.filters button{font:inherit;font-weight:600;padding:8px 18px;background:#fff;border:2px solid var(--ink);cursor:pointer}
.filters button.on{background:var(--gold)}
.work{border:2px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--shade);cursor:pointer;overflow:hidden}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.work:hover img{transform:scale(1.05)}
.work figcaption{padding:14px 18px;border-top:4px solid var(--gold)}
.work b{display:block}.work span{font-size:.9rem;color:#555}
.work.hide{display:none}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.lb.open{display:flex}.lb img{max-height:85vh;border:6px solid var(--gold)}
/* contact */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
form{background:#fff;border:2px solid var(--ink);padding:28px;box-shadow:8px 8px 0 var(--shade)}
label{display:block;font-weight:600;margin:14px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:12px;border:2px solid var(--ink);background:var(--paper)}
form .btn{margin-top:22px;width:100%}
.info li{list-style:none;margin:0 0 16px;padding-left:16px;border-left:6px solid var(--gold)}
.info b{display:block}
/* footer */
footer{background:var(--ink);color:#ddd;padding:36px 0;font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* floating social */
.float{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:4px}
.float a{width:52px;height:52px;display:grid;place-items:center;color:#fff;transition:width .2s}
.float a:hover{width:64px}
.float svg{width:26px;height:26px;fill:currentColor}
.float .fb{background:#1877F2}.float .ig{background:linear-gradient(45deg,#f9a933,#e1306c,#833ab4)}.float .wa{background:var(--wa)}
.pagehead{background:var(--sun);padding:56px 0}
@media(max-width:800px){
 .burger{display:block}
 nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;gap:14px;border-bottom:4px solid var(--gold)}
 nav.open{display:flex}
 .hero .wrap,.two{grid-template-columns:1fr}
 .mark{max-width:260px;margin:auto}
 .float a{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
 *{animation:none!important;scroll-behavior:auto!important}
 .js .reveal.fx-up,.js .reveal.fx-left,.js .reveal.fx-right,.js .reveal.fx-pop,.js .reveal.fx-zoom{translate:0 0;scale:1}
 .reveal{transition:opacity .7s var(--d,0s) ease!important}
 .tilt{transform:none!important}
}

/* ===== COLOR UPDATE: more blue & red ===== */
:root{--navy:#061a52;--tint:#eaf0ff}
header{border-bottom:5px solid var(--red)}
header::before{content:"";display:block;height:8px;background:linear-gradient(90deg,var(--blue) 33%,var(--red) 33% 66%,var(--gold) 66%)}
nav a:hover,nav a.on{color:var(--blue);border-color:var(--red)}
.btn{background:var(--red);color:#fff;box-shadow:6px 6px 0 var(--navy)}
.btn:hover{box-shadow:3px 3px 0 var(--navy)}
.btn.alt{background:var(--blue);color:#fff;box-shadow:6px 6px 0 var(--navy)}
.btn.wa{color:var(--ink);box-shadow:6px 6px 0 var(--navy)}
/* hero */
.hero{background:radial-gradient(circle at 80% 30%,#14409f 0,var(--blue) 45%,var(--navy) 100%);color:#fff;border-bottom:8px solid var(--red)}
.hero h1 em{color:var(--sun)}
.hero .pill{background:var(--red);color:#fff}
.hero .btn{box-shadow:6px 6px 0 var(--gold)}
.hero .btn.alt{background:var(--gold);color:var(--ink)}
.mark{background:#fff;padding:28px;border:6px solid var(--gold);box-shadow:14px 14px 0 var(--red)}
/* sections */
main>section:nth-of-type(2),.pagehead+section{background:var(--tint)}
.head h2,section h2{color:var(--navy)}
.card{border-color:var(--navy);box-shadow:8px 8px 0 var(--blue)}
.card h3{color:var(--blue)}
.card:nth-child(3n+1){border-left-color:var(--blue)}
.card:nth-child(3n+2){border-left-color:var(--red)}
.card:nth-child(3n){border-left-color:var(--gold)}
.band{background:var(--blue);border-top:8px solid var(--red)}
.band h2{color:#fff}.band h3{color:var(--sun)}
.cta{background:var(--red);color:#fff}
.cta h2{color:#fff}
.cta .btn{background:var(--gold);color:var(--ink);box-shadow:6px 6px 0 var(--navy)}
.cta .btn.alt{background:#fff;color:var(--blue)}
.cta .btn.wa{background:var(--wa)}
/* inner page headers */
.pagehead{background:linear-gradient(120deg,var(--navy),var(--blue));color:#fff;border-bottom:8px solid var(--red)}
.pagehead h1{color:#fff}
/* portfolio */
.filters button{border-color:var(--navy);color:var(--navy)}
.filters button:hover{background:var(--tint)}
.filters button.on{background:var(--blue);color:#fff}
.work{border-color:var(--navy);box-shadow:8px 8px 0 var(--red)}
.work figcaption{border-top:4px solid var(--blue)}
.work b{color:var(--navy)}
.lb img{border-color:var(--red)}
/* contact */
form{border-color:var(--navy);box-shadow:8px 8px 0 var(--red)}
form h3{color:var(--blue)}
input,select,textarea{border-color:var(--blue);background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--red)}
.info li{border-left-color:var(--red)}
.info b{color:var(--blue)}
/* footer */
footer{background:var(--navy);border-top:8px solid var(--red)}
footer b{color:var(--sun)}

/* ===== STORY PAGE ===== */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.split p{margin-top:16px;max-width:60ch}
.photo{border:6px solid #fff;outline:2px solid var(--navy);box-shadow:12px 12px 0 var(--red)}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.timeline{margin-top:36px;border-left:6px solid var(--red);padding-left:28px;display:grid;gap:28px}
.timeline div{position:relative}
.timeline div::before{content:"";position:absolute;left:-41px;top:6px;width:20px;height:20px;background:var(--gold);border:4px solid var(--blue)}
.timeline b{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--blue)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-top:32px}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;border:4px solid #fff;box-shadow:6px 6px 0 var(--blue)}
.values{margin-top:32px}
@media(max-width:800px){.split{grid-template-columns:1fr}}

/* ===== ELEGANT BAND (softer, easier on the eyes) ===== */
.band{background:linear-gradient(160deg,#0d1f4d,#0a1736);border-top:4px solid #c9a84c;border-bottom:4px solid #c9a84c;color:#e9e6dc}
.band h2{color:#f4efe0;font-weight:600;max-width:20ch;position:relative;padding-bottom:18px;letter-spacing:.01em}
.band h2::after{content:"";position:absolute;left:0;bottom:0;width:90px;height:3px;background:#c9a84c}
.band h3{color:#e3c46a;font-weight:600}
.band p{color:#d5d2c6}
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;margin-top:40px}
.promise article{background:rgba(255,255,255,.05);border:1px solid rgba(201,168,76,.45);padding:12px 12px 24px}
.promise img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:18px;filter:saturate(.95)}
.promise h3{padding:0 12px 6px}.promise p{padding:0 12px}
.band .timeline{border-left-color:#c9a84c}
.band .timeline div::before{background:#c9a84c;border-color:#0d1f4d}
.band .timeline b{color:#e3c46a}

/* ===== YELLOW-FIRST THEME (red & blue are accents) + readability fix ===== */
:root{--tint:#fff6c9}
header{border-bottom:5px solid var(--gold)}
nav a:hover,nav a.on{color:var(--ink);border-color:var(--red)}
.btn{background:var(--ink);color:var(--sun);box-shadow:6px 6px 0 var(--gold)}
.btn:hover{box-shadow:3px 3px 0 var(--gold)}
.btn.alt{background:#fff;color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.btn.wa{background:var(--wa);color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.hero{background:linear-gradient(135deg,#FFE566 0,#F6D34A 55%,#E0B930 100%);color:var(--ink);border-bottom:6px solid var(--red)}
.hero h1 em{color:var(--blue)}
.hero .pill{background:var(--blue);color:#fff}
.hero .btn{box-shadow:6px 6px 0 var(--deep)}
.hero .btn.alt{background:#fff;color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.mark{background:#fff;border:6px solid #fff;box-shadow:14px 14px 0 var(--deep)}
h2,section h2,.head h2{color:var(--ink)}
.card{border-color:var(--ink);box-shadow:8px 8px 0 var(--shade)}
.card h3{color:var(--blue)}
.card:nth-child(n){border-left-color:var(--gold)}
.card:nth-child(3n+2){border-left-color:var(--red)}
/* bands: beat the old "2nd section" tint rule that hid the story page text */
main>section.band{background:linear-gradient(160deg,#FFE98A,#F0CB46);color:var(--ink);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.band h2{color:var(--ink)}
.band h2::after{background:var(--red)}
.band h3{color:var(--blue)}
.band p{color:#2b2614}
.promise article{background:#fff;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--deep)}
.promise p{color:#3a3520}
.band .timeline{border-left-color:var(--ink)}
.band .timeline div::before{background:var(--red);border-color:#fff}
.band .timeline b{color:var(--blue)}
main>section.cta{background:var(--gold);color:var(--ink)}
.cta h2{color:var(--ink)}
.cta .btn{background:var(--ink);color:var(--sun);box-shadow:6px 6px 0 #fff}
.cta .btn.alt{background:#fff;color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.cta .btn.wa{background:var(--wa);color:var(--ink)}
.pagehead{background:linear-gradient(120deg,#FFE566,#E8C23A);color:var(--ink);border-bottom:6px solid var(--red)}
.pagehead h1{color:var(--ink)}
.filters button{border-color:var(--ink);color:var(--ink)}
.filters button:hover{background:var(--tint)}
.filters button.on{background:var(--gold);color:var(--ink)}
.work{border-color:var(--ink);box-shadow:8px 8px 0 var(--shade);position:relative}
.work figcaption{border-top:4px solid var(--gold)}
.work b{color:var(--ink)}
.badge{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--sun);padding:3px 10px;font-size:.85rem;font-weight:600}
form{border-color:var(--ink);box-shadow:8px 8px 0 var(--shade)}
form h3,.info b{color:var(--blue)}
input,select,textarea{border-color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
.info li{border-left-color:var(--gold)}
footer{background:var(--ink);border-top:6px solid var(--gold)}
footer b{color:var(--sun)}
/* project gallery lightbox */
.lb{flex-direction:column}
.lbin{max-width:900px;width:100%;color:#fff;text-align:center}
.lbt{font-size:1.8rem;color:var(--sun);margin-bottom:12px}
.stage{display:flex;align-items:center;gap:10px}
.stage img{flex:1;min-width:0;max-height:62vh;object-fit:contain;background:#000;border:4px solid var(--gold)}
.nav{background:var(--gold);color:var(--ink);border:0;width:44px;height:64px;font-size:1.4rem;cursor:pointer;flex:none}
.cnt{margin:10px 0 8px;font-size:.95rem}
.thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.thumbs img{width:76px;height:56px;object-fit:cover;cursor:pointer;opacity:.55;border:2px solid transparent}
.thumbs img.on{opacity:1;border-color:var(--gold)}
.x{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}

/* ===== YELLOW -> BLUE -> RED rhythm, elegant type per background ===== */
:root{--royal:#15296b;--royal2:#0f1f52;--crimson:#b01a2d;--crimson2:#86111f;--palegold:#F3E2A0;--softblue:#dfe5f5;--softred:#fbe3dc;--cream:#fff1d6}
h1,h2,h3{letter-spacing:.01em}
.lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:1.4rem;line-height:1.45}
.hero .lead{font-family:'Work Sans',sans-serif;font-style:normal;font-weight:400;font-size:1.1rem;line-height:1.7}
.pagehead .lead{font-weight:600;color:#2b2614}
/* cream sections between the color blocks */
main>section.services,body:not(.pg-port):not(.pg-contact) .pagehead+section{background:var(--paper)}
/* BLUE blocks: soft cream text, pale-gold headings */
main>section.band,body.pg-port .pagehead+section,body.pg-contact .pagehead+section{background:linear-gradient(160deg,var(--royal),var(--royal2));color:var(--softblue);border:0;border-top:4px solid var(--gold);border-bottom:4px solid var(--gold)}
.band h2,.pg-port .pagehead+section h2,.pg-contact .pagehead+section h2{color:var(--palegold)}
.band h2::after{background:var(--gold)}
.band h3{color:var(--palegold)}
.band p,.pg-contact .info li{color:var(--softblue)}
.promise article{background:rgba(255,255,255,.06);border:1px solid rgba(224,185,48,.55);box-shadow:none}
.promise p{color:var(--softblue)}
.band .timeline{border-left-color:var(--gold)}
.band .timeline div::before{background:var(--gold);border-color:var(--royal2)}
.band .timeline b{color:var(--palegold)}
.band .timeline p{color:var(--softblue)}
.pg-port .filters button{background:transparent;color:var(--cream);border:1px solid rgba(243,226,160,.6)}
.pg-port .filters button:hover{background:rgba(255,255,255,.1)}
.pg-port .filters button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.pg-port .work{box-shadow:8px 8px 0 var(--gold);border-color:var(--gold)}
.pg-contact form{box-shadow:8px 8px 0 var(--gold);border-color:var(--gold)}
.pg-contact .info li{border-left-color:var(--gold)}
.pg-contact .info b{color:var(--palegold)}
.pg-contact .info a{color:var(--palegold)}
/* RED blocks */
main>section.cta{background:linear-gradient(160deg,var(--crimson),var(--crimson2));color:var(--softred)}
main>section.cta h2{color:var(--cream)}
main>section.cta .lead{color:var(--softred)}
main>section.cta .btn{background:var(--gold);color:var(--ink);box-shadow:6px 6px 0 #5e0c18}
main>section.cta .btn.alt{background:var(--cream);color:var(--ink)}
main>section.cta .btn.wa{background:var(--wa);color:var(--ink)}
/* footer */
footer{background:#0c1633;color:#cfd5e6;border-top:6px solid var(--gold)}
footer b{color:var(--palegold)}

/* contact form: dark readable labels on the white card */
.pg-contact form,.pg-contact form label{color:var(--ink)}
.pg-contact form label{font-weight:600}
.pg-contact form h3{color:var(--blue)}

/* ===== MOTION & INTERACTION ===== */
/* spinning, floating, tilting logo */
.tilt-stage{perspective:1000px}
.tilt{transition:transform .18s ease-out;transform-style:preserve-3d;will-change:transform}
.mark{cursor:pointer;animation:intro 1.5s cubic-bezier(.2,.8,.2,1) both,float 5s ease-in-out 1.5s infinite}
.mark.s1{animation:spinA 1.2s cubic-bezier(.5,0,.2,1),float 5s ease-in-out 1.2s infinite}
.mark.s2{animation:spinB 1.2s cubic-bezier(.5,0,.2,1),float 5s ease-in-out 1.2s infinite}
@keyframes intro{from{transform:translateY(60px) rotateY(-540deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes spinA{to{transform:rotateY(360deg)}}
@keyframes spinB{to{transform:rotateY(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* light that follows the cursor over the hero */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle 340px at var(--mx,70%) var(--my,40%),rgba(255,255,255,.4),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* reveal on scroll: slide, pop (bounce), zoom */
.js .reveal{opacity:0}
.js .reveal.fx-up{translate:0 44px}
.js .reveal.fx-left{translate:-70px 0}
.js .reveal.fx-right{translate:70px 0}
.js .reveal.fx-pop{translate:0 40px;scale:.7}
.js .reveal.fx-zoom{scale:.82}
.js .reveal.in{opacity:1;translate:0 0;scale:1}
.reveal{--ease:cubic-bezier(.2,.8,.2,1);transition:opacity .8s var(--d,0s) ease,translate .9s var(--d,0s) var(--ease),scale .9s var(--d,0s) var(--ease),transform .2s,box-shadow .2s}
.reveal.fx-pop{--ease:cubic-bezier(.34,1.56,.64,1)}
/* hover lift */
.card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--shade)}
.promise article:hover{transform:translateY(-6px);border-color:var(--gold)}
.work:hover{transform:translate(-4px,-4px)}
/* scroll progress bar + header shadow + whatsapp pulse */
.progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:200;background:linear-gradient(90deg,var(--blue),var(--red),var(--gold))}
header.scrolled{box-shadow:0 8px 20px rgba(0,0,0,.18)}
.float .wa{animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%,100%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}