:root{color-scheme:dark;--night:#030b2d;--navy:#061344;--panel:#0b1e54;--blue:#0b7cf7;--cyan:#2cdcff;--red:#ff2435;--white:#f6f8ff;--muted:#b9c8e7}
*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:112.5%}
body{margin:0;background:var(--night);color:var(--white);font:400 1rem/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit}
a:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:1rem;z-index:9;background:var(--white);color:var(--night);padding:.6rem 1rem}
.skip:focus{left:1rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.site-header{min-height:5.25rem;padding:1rem clamp(1.1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;gap:1.2rem;background:#041039;border-bottom:1px solid #24518a}
.brand{text-decoration:none;display:flex;align-items:center;gap:.8rem;white-space:nowrap}
.brand-mark{font:700 1.55rem/1 Georgia,serif;color:var(--red);text-shadow:0 1px 9px rgba(255,36,53,.75)}
.brand-name{font:600 .9rem/1.2 Georgia,serif;letter-spacing:.08em;text-transform:uppercase}
.site-header nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.8rem,2vw,2rem)}
.site-header nav a{text-decoration:none;font-size:.94rem;color:var(--muted);padding:.4rem 0;border-bottom:2px solid transparent}
.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--white);border-color:var(--cyan)}
.site-header nav .contact-link{padding:.38rem .78rem;border:1px solid var(--cyan);border-radius:2rem;color:var(--white);white-space:nowrap}
.site-header nav .contact-link:hover{background:var(--cyan);color:var(--night);border-color:var(--cyan)}
@media(max-width:1000px){.site-header{flex-direction:column;align-items:flex-start}.site-header nav{width:100%;gap:.6rem 1.2rem}}
.hero{background:#020a2b}
.hero>img{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block}
.hero-mobile{display:none}
.wave-rule{height:4px;background:linear-gradient(90deg,transparent,#0963ee 25%,var(--cyan) 50%,#0963ee 75%,transparent);box-shadow:0 0 22px #0877ff}
.content-wrap{width:min(1160px,calc(100% - 2.4rem));margin-inline:auto}
.intro{padding:clamp(3rem,7vw,6rem) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem)}
.eyebrow{margin:0 0 1rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.17em;font-size:.8rem;font-weight:700}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.15}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500}
h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.025em}
.intro-copy{font-size:1.08rem;color:#e0e8fb}
.intro-copy p:last-child{margin-bottom:0}
.samples{padding:2.5rem 0 5.5rem}
.section-heading{margin-bottom:1.8rem}
.section-heading h2{margin-bottom:.45rem}
.section-heading>p:last-child{color:var(--muted);margin-bottom:0}
.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.sample-card{min-height:17rem;padding:1.7rem;border:1px solid #305295;background:linear-gradient(155deg,#0d2563,#071743 75%);box-shadow:inset 0 1px 0 #3352a0;display:flex;flex-direction:column}
.sample-card .number{color:var(--cyan);font:400 1.2rem Georgia,serif;margin-bottom:2rem}
.sample-card h3{font:500 1.45rem Georgia,serif;margin-bottom:.7rem}
.sample-card p{color:var(--muted);margin-bottom:1.6rem}
.sample-status{margin-top:auto;border-top:1px solid #36538f;padding-top:1rem;color:#d4e5ff;font-size:.88rem}
.closing{margin-bottom:5rem;padding:2rem 2.2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:linear-gradient(115deg,#102a75,#082054);border-left:6px solid var(--red)}
.closing h2{font-size:clamp(1.8rem,3vw,2.7rem);margin-bottom:0}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;min-width:11.5rem;padding:.85rem 1rem;text-decoration:none;background:var(--white);color:var(--navy);font-weight:700;border-radius:2px}
.button:hover{background:#c8f4ff}
footer{padding:1.7rem clamp(1.2rem,4vw,4rem);border-top:1px solid #274174;display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.88rem}
.projects-page{min-height:70vh}
.projects-heading{padding:4rem 0 3.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.projects-heading h1{font-size:clamp(3rem,7vw,6rem);margin-bottom:.6rem}
.projects-heading p:last-child{color:var(--muted);font-size:1.1rem}
.project-logo{width:clamp(8rem,23vw,17rem);height:auto;padding:clamp(.45rem,1.2vw,.9rem);background:#061344;border-radius:50%;box-shadow:0 0 38px #055df08a}
.project-list{padding:3.5rem 0 5rem}
.project{padding:2rem 0;border-bottom:1px solid #36548e;display:grid;grid-template-columns:11rem 1fr auto;gap:2rem;align-items:start}
.project-index{color:var(--cyan);font-size:.8rem;font-weight:700;letter-spacing:.14em}
.project h2{font-size:clamp(1.65rem,3vw,2.4rem);margin-bottom:.3rem}
.project-subtitle{color:#d6e4ff}
.project p:last-child{color:var(--muted);max-width:42rem;margin-bottom:0}
.project-state{white-space:nowrap;border:1px solid #5682cc;color:#d9eaff;padding:.35rem .7rem;border-radius:2rem;font-size:.8rem}
@media(max-width:760px){.site-header{align-items:flex-start;flex-direction:column;gap:.5rem}
.brand-name{font-size:.75rem}
.hero>img{display:none}
.hero-mobile{display:flex;min-height:28rem;padding:2.5rem 1.3rem 3rem;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 35%,#0c45b6,#061344 65%,#020a2b)}
.hero-mobile img{width:12rem;height:12rem;object-fit:cover;border-radius:50%;margin-bottom:1.2rem}
.mobile-name{font:500 1.6rem/1.2 Georgia,serif;margin-bottom:.4rem}
.mobile-name strong{color:var(--red)}
.hero-mobile p:not(.mobile-name){color:#dce9ff;margin-bottom:.5rem}
.hero-mobile .mobile-tagline{font:italic 1.55rem Georgia,serif;color:var(--white)!important}
.intro{grid-template-columns:1fr;gap:1rem}
.sample-grid{grid-template-columns:1fr}
.sample-card{min-height:13rem}
.sample-card .number{margin-bottom:1.1rem}
.closing{flex-direction:column;align-items:flex-start}
.project{grid-template-columns:1fr;gap:.7rem}
.project-state{justify-self:start}
.projects-heading{padding-top:2.8rem}
.project-logo{width:7rem}
footer{flex-direction:column}
}
@media(max-width:420px){.content-wrap{width:calc(100% - 2rem)}
.site-header nav{width:100%;justify-content:space-between;gap:.5rem}
.site-header nav a{font-size:.87rem}
.site-header nav .contact-link{padding:.3rem .52rem}
.brand-name{letter-spacing:.02em}
.projects-heading{align-items:flex-start}
.project-logo{width:5rem}
.closing{padding:1.5rem}
}

/* Stronger QSV colour treatment */
body{background:radial-gradient(circle at 12% 18%,rgba(11,124,247,.18),transparent 28rem),radial-gradient(circle at 88% 62%,rgba(44,220,255,.10),transparent 24rem),var(--night)}
.site-header{box-shadow:0 10px 35px rgba(0,20,90,.45)}
.brand-mark{font-size:1.75rem;color:var(--red);text-shadow:0 0 12px rgba(255,36,53,.8)}
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:6px;background:linear-gradient(90deg,var(--red),#2cdcff 45%,#0b7cf7 70%,var(--red));box-shadow:0 0 25px #2cdcff}
.sample-card{position:relative;overflow:hidden;border-color:#237fe6;box-shadow:0 14px 32px rgba(0,49,150,.22),inset 0 1px 0 rgba(77,228,255,.35)}
.sample-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--red),var(--cyan),var(--blue))}
.sample-card:nth-child(2){background:linear-gradient(155deg,#102d78,#071743 75%)}
.sample-card:nth-child(3){background:linear-gradient(155deg,#101f66,#071743 75%)}
.number{filter:drop-shadow(0 0 7px rgba(44,220,255,.7))}
.closing{box-shadow:-4px 0 18px rgba(255,36,53,.4),0 16px 40px rgba(0,50,170,.25),inset 0 0 30px rgba(44,220,255,.07)}
.button{box-shadow:0 0 22px rgba(44,220,255,.35)}
.project-logo{border:2px solid rgba(44,220,255,.8)}
.portrait-row{display:grid;grid-template-columns:minmax(12rem,20rem) 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;padding:2rem 0 4rem;border-top:1px solid #284d95}
.portrait-frame{position:relative;aspect-ratio:4/5;padding:.24rem;border:.38rem solid #27d9ff;border-radius:50%;background:#0b2f82;box-shadow:0 0 35px #065af080}
.portrait-frame img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.portrait-frame::after{content:"";position:absolute;inset:-.7rem;border:3px solid var(--red);border-radius:50%;pointer-events:none;box-shadow:0 0 12px rgba(255,36,53,.7)}
.portrait-row p:not(.eyebrow){max-width:39rem;color:var(--muted);font-size:1.06rem}
.text-link{display:inline-block;color:var(--cyan);font-weight:700;text-underline-offset:.3rem}
.sample-card audio{display:block;width:100%;margin-top:auto;accent-color:var(--cyan)}
.sample-card-live{border-color:var(--cyan)}
.feedback{padding:0 0 5.5rem}
.feedback .section-heading{max-width:48rem}
.feedback-card{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(1.5rem,4vw,2.5rem);border:1px solid #2b70c8;background:linear-gradient(135deg,#0d2b76,#071943 72%);box-shadow:0 16px 40px rgba(0,50,170,.22),inset 0 1px 0 rgba(77,228,255,.28)}
.feedback-card>div{display:flex;align-items:flex-start;gap:1rem}
.feedback-mark{margin:-.35rem 0 0;color:var(--cyan);font:400 4.2rem/.8 Georgia,serif;text-shadow:0 0 16px rgba(44,220,255,.55)}
.feedback-ready{margin:0;color:#dce8ff;font:italic 1.15rem/1.55 Georgia,serif}
.facebook-button{display:inline-flex;align-items:center;gap:.65rem;flex:0 0 auto;padding:.75rem 1rem;border:1px solid var(--cyan);border-radius:2rem;text-decoration:none;font-weight:700;color:var(--white);white-space:nowrap}
.facebook-button span{display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--cyan);color:var(--night);font:700 1.2rem/1 Arial,sans-serif}
.facebook-button:hover{background:var(--cyan);color:var(--night)}
.facebook-button:hover span{background:var(--night);color:var(--cyan)}
.project-feature{grid-template-columns:9rem 1fr auto;align-items:center}
.project-feature h3{font:500 clamp(1.5rem,3vw,2.3rem)/1.15 Georgia,serif;margin:.6rem 0}
.project-no-art{grid-template-columns:1fr;padding-left:11rem}
.project-art{display:block;align-self:start;height:max-content;border:0!important;outline:0!important;box-shadow:none!important}
.project-art img{display:block;width:100%;height:auto;aspect-ratio:710/1058;object-fit:contain;border:0!important;outline:0!important;box-shadow:none!important}
.project-art .cub-cover{aspect-ratio:710/1125;object-fit:cover;object-position:center}
.project-note{color:#aacef8!important;font-size:.9rem}
.project audio{display:block;width:min(100%,38rem);margin:1.25rem 0;accent-color:var(--cyan)}
.cv{padding:3rem 0 5rem;border-top:1px solid #36548e}
.cv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}
.cv h3{font:500 1.6rem Georgia,serif}
.cv ul{margin:0;padding-left:1.3rem;color:#dce8ff}
.cv li{margin-bottom:.65rem}
.completed{padding:0 0 4rem}
.completed-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0}
.completed-grid article{padding:1.5rem;border:1px solid #31599c;background:linear-gradient(150deg,#11276b,#06153c)}
.completed-grid h3{font:500 1.55rem Georgia,serif;margin:.6rem 0}
.completed-grid p:last-child{color:var(--muted);margin-bottom:0}
@media(max-width:760px){.portrait-row,.cv-grid{grid-template-columns:1fr}.portrait-frame{width:min(17rem,100%)}.project-feature{grid-template-columns:6rem 1fr;gap:1rem}.project-no-art{grid-template-columns:1fr;padding-left:0}.project-feature .project-state{grid-column:2}.feedback-card{align-items:flex-start;flex-direction:column}.facebook-button{white-space:normal}}
@media(max-width:760px){.completed-grid{grid-template-columns:1fr}}