@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--dark:#101a23;--dark2:#192934;--ink:#111b23;--paper:#f3f3ef;--white:#fff;--acid:#7ED8CB;--orange:#e4a46f;--muted:#5c6971;--line:#d1d8d7;--slate:#a8bcc4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.68 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--acid);outline-offset:4px}::selection{background:var(--acid);color:#101a23}.wrap{width:min(1240px,calc(100% - 96px));margin:auto}.prototype{background:var(--acid);color:#152022;padding:7px 15px;text-align:center;font-size:11px;letter-spacing:.06em}.top{background:var(--dark);border-bottom:1px solid #334550;color:white}.nav{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{font-size:15px;font-weight:800;letter-spacing:.15em;text-decoration:none;white-space:nowrap}.navlinks{display:flex;gap:27px;align-items:center;flex-wrap:wrap}.navlinks a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#d0dadd;font-weight:700}.navlinks a:hover{color:var(--acid)}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#6c7c84}.hero{background:var(--dark);color:white;min-height:735px;padding:115px 0 95px;position:relative;overflow:hidden;isolation:isolate}.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 32%,#101a23bb 70%,#101a23aa),radial-gradient(circle at 87% 30%,#507b7b83,transparent 44%);z-index:-1}.hero::after{content:'';position:absolute;right:-120px;top:45px;width:min(57vw,760px);aspect-ratio:1;border:1px solid #b7d6cc4d;border-radius:50%;box-shadow:0 0 0 65px #afdbd512,0 0 0 140px #afdbd50d,0 0 0 220px #afdbd508;z-index:-1}.hero .wrap{position:relative}.hero .eyebrow{color:var(--acid)}h1,h2,h3{font-family:'Manrope','DM Sans',sans-serif;line-height:1.08;letter-spacing:-.057em}h1{font-size:clamp(62px,8.2vw,118px);font-weight:800;max-width:1120px;margin:24px 0 30px}h1 .accent{color:var(--acid)}h2{font-size:clamp(39px,4.8vw,67px);font-weight:800;margin:13px 0 23px}h3{font-size:clamp(22px,2.5vw,30px);font-weight:750;margin:12px 0 18px}p{margin:0 0 18px}.hero .lead{font-size:clamp(19px,2.2vw,25px);line-height:1.5;max-width:785px;color:#f1f6f5;font-weight:500}.hero .muted{color:#b0bdc4;max-width:755px!important}.hero .actions{margin-top:42px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;gap:12px;justify-content:center;padding:14px 21px;text-decoration:none;letter-spacing:.04em;font-size:12px;font-weight:800;transition:transform .18s,background .18s;border:1px solid var(--ink);color:white;background:var(--ink)}.btn::after{content:'↗';font-size:17px;font-weight:400}.btn:hover{transform:translateY(-3px)}.hero .btn{background:var(--acid);color:var(--dark);border-color:var(--acid)}.btn.secondary{background:transparent;color:var(--ink)}.hero .btn.secondary{border-color:#70858d;color:white}.hero .btn.secondary:hover{background:#263641}.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:82px;color:#9db1b7;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-top:1px solid #344652;padding-top:23px}.hero-foot strong{color:var(--acid)}.section{padding:110px 0}.section-head{max-width:840px;margin-bottom:46px}.section-head p{max-width:680px}.muted{color:var(--muted)}#expertise{background:var(--paper)}#expertise .eyebrow{color:#42616d}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.card{background:white;border:1px solid var(--line);padding:35px 30px;min-height:338px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;position:relative}.card:hover{transform:translateY(-5px);box-shadow:0 18px 38px #1d2b3520}.card::before{content:'';width:33px;height:4px;background:var(--dark);position:absolute;top:0;left:30px}.card .index{font-size:11px;font-weight:800;letter-spacing:.13em;color:#647880}.card h3{margin-top:30px}.card p{font-size:14px;color:#596870;flex:1}.link{font-size:12px;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;font-weight:800;padding-bottom:3px}.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px}.experience{background:#dbe3e2}.experience .eyebrow{color:#35545c}.experience-item{border-top:1px solid #b3c1c1;padding:27px 0;display:grid;grid-template-columns:1fr 1.85fr;gap:32px}.experience-item h3{font-size:23px;margin:0}.experience-item p{font-size:15px;margin:0}.tag{color:#4d676f;text-transform:uppercase;letter-spacing:.11em;font-size:10px;font-weight:800;margin-bottom:8px}.dark{background:var(--dark2);color:#f7f8f4}.dark .muted{color:#adbdc2}.dark .eyebrow,.dark .tag{color:var(--acid)}.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.project{background:#213541;border:1px solid #506572;min-height:290px;padding:35px;display:flex;flex-direction:column;transition:background .2s,transform .2s}.project:hover{background:#2c4350;transform:translateY(-3px)}.project h3{font-size:35px;margin:19px 0}.project p{color:#bfd0d4;font-size:15px;flex:1}.project .link{color:#f3f6f7}.music{background:#eee9e0}.music .split{align-items:center;grid-template-columns:1fr 1fr;gap:75px}.music .eyebrow{color:#526874}.art{min-height:470px;background:#182833;position:relative;overflow:hidden;border:0}.art::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;top:-90px;left:-130px;background:repeating-radial-gradient(circle at 55% 50%,transparent 0 16px,#7ED8CB91 17px 18px,transparent 19px 34px);transform:rotate(-17deg)}.art::after{content:'MUSIC / WRITING';position:absolute;bottom:32px;left:32px;color:var(--acid);font-size:12px;letter-spacing:.22em;font-weight:800}.final{background:var(--acid);padding:110px 0;text-align:center}.final h2{font-size:clamp(50px,6vw,78px)}.final .eyebrow{color:#3d5240}.final p{max-width:600px;margin:0 auto 23px}.final .actions{justify-content:center}.final .btn.secondary{border-color:#263625;color:#172a23}.final .btn.secondary:hover{background:#7ED8CB}footer{background:var(--dark);color:#b5c6cc;padding:30px 0}footer .wrap{display:flex;justify-content:space-between;gap:20px;font-size:12px}.music .btn.secondary{color:var(--ink)}
@media(max-width:900px){.wrap{width:min(100% - 48px,1240px)}.nav{padding:19px 0;min-height:85px;align-items:flex-start;flex-direction:column;gap:16px}.navlinks{gap:18px}.hero{min-height:0;padding:88px 0 55px}.hero-foot{margin-top:65px}.cards{grid-template-columns:1fr}.card{min-height:0}.split,.music .split{grid-template-columns:1fr;gap:35px}.projects{grid-template-columns:1fr}.section{padding:76px 0}.experience-item{grid-template-columns:1fr;gap:10px}.art{min-height:360px}}
@media(max-width:570px){.wrap{width:calc(100% - 36px)}.brand{font-size:13px}.navlinks{gap:12px}.navlinks a{font-size:10px}.hero{padding:62px 0 45px}h1{font-size:clamp(50px,13vw,75px)}h2{font-size:38px}.hero::after{opacity:.45}.hero-foot{font-size:9px;flex-wrap:wrap}.project{padding:27px;min-height:245px}.section{padding:63px 0}.experience-item{padding:21px 0}.art{min-height:310px}footer .wrap{flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


.creative-archive{background:#edf0ed}.creative-archive .eyebrow{color:#49626b}.archive-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}.archive-feature{grid-column:span 2;background:#fff;border:1px solid #cbd6d7;min-height:305px;padding:31px;display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s}.archive-feature:nth-child(-n+2){grid-column:span 3;background:#152631;color:#eef6f1;border-color:#40525b;min-height:355px}.archive-feature:nth-child(-n+2) p{color:#c0d0d5}.archive-feature:nth-child(-n+2) .archive-no{color:#7ED8CB}.archive-feature:nth-child(-n+2) .archive-link{color:#7ED8CB}.archive-feature:hover{transform:translateY(-4px);box-shadow:0 18px 40px #10273320}.archive-no{font-size:10px;letter-spacing:.14em;font-weight:800;color:#56717a}.archive-feature h3{font-size:clamp(25px,2.5vw,35px);margin:25px 0 17px}.archive-feature p{font-size:14px;line-height:1.65;color:#56666d;flex:1}.archive-link{font-size:12px;font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:3px}.archive-note{color:#63747b;font-size:12px;margin-top:20px}@media(max-width:850px){.archive-feature,.archive-feature:nth-child(-n+2){grid-column:span 3}}@media(max-width:570px){.archive-feature,.archive-feature:nth-child(-n+2){grid-column:span 6;min-height:0;padding:27px}}

/* Hero study gold: supplied Unsplash image, local path, no external screenshot services. */
.hero{background:#0b0d12; isolation:isolate; min-height:735px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(90deg, #0b0d12 0%, #0b0d12 24%, rgba(11,13,18,.97) 40%, rgba(11,13,18,.75) 58%, rgba(11,13,18,.12) 88%),
 url("../images/golden-particle-wave.jpg") right center / auto 100% no-repeat; opacity:1}
.hero::after{display:none}
.hero h1{max-width:1100px;text-shadow:0 2px 25px rgba(0,0,0,.2)}
.hero .lead,.hero .muted{max-width:710px}
.hero-foot{border-color:#41505a}
.hero .btn.secondary{background:rgba(12,19,24,.5)}
.prototype{background:#7ED8CB}
@media(max-width:900px){.hero::before{background:linear-gradient(90deg,rgba(11,13,18,.98) 0%,rgba(11,13,18,.90) 57%,rgba(11,13,18,.58) 100%),url("../images/golden-particle-wave.jpg") right center/auto 100% no-repeat}}
@media(max-width:570px){.hero::before{background:linear-gradient(180deg,rgba(11,13,18,.77),#0b0d12 90%),url("../images/golden-particle-wave.jpg") center top/auto 65% no-repeat}}

/* Version 4: editorial refinements and date-specific Sterts presentation */
:root{--dark:#0b0d12;--dark2:#151e26;--acid:#7ed8cb;--paper:#f4f3ef}
.hero{min-height:710px}
.experience{background:#e5e8e5}
.experience-item{grid-template-columns:1fr 1.6fr;align-items:start}
.experience-item h3{line-height:1.25}
.experience-item .period{display:block;font-size:12px;color:#42565d;font-weight:800;letter-spacing:.08em;margin-top:10px}
.sterts-case{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.sterts-photo{margin:0;background:#15232b;border:1px solid #667477;box-shadow:0 10px 30px rgba(0,0,0,.08);width:100%;max-width:680px}
.sterts-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sterts-photo figcaption{padding:10px 12px;font-size:11px;line-height:1.35;color:#d8dfdc;background:#10181e;border-top:1px solid #56646a}
.sterts-case .tag{color:#3b6268}
.sterts-case p{margin:0 0 8px}
.sterts-note{font-size:11px!important;color:#637176;margin-top:7px!important}
.project{border-color:#46535c}
.archive-feature:nth-child(-n+2){background:#121e27}
.archive-feature:hover,.project:hover,.card:hover{will-change:transform}
.site-status{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a6b8bd}
@media(max-width:650px){.sterts-photo{max-width:100%}.hero::before{background:linear-gradient(90deg,rgba(11,13,18,.98) 0%,rgba(11,13,18,.9) 55%,rgba(11,13,18,.6) 100%),url('../images/golden-particle-wave.jpg') right center / auto 100% no-repeat}}

/* V4 photography and organisation identity pass */
.experience-logo{display:flex;align-items:center;justify-content:flex-start;max-width:240px;min-height:52px;margin:0 0 12px}
.experience-logo img{max-width:190px;max-height:75px;width:auto;height:auto;object-fit:contain;object-position:left center;display:block}
.projects .project{padding:0 0 28px;overflow:hidden;min-height:0}
.project-image{display:block;width:100%;height:205px;aspect-ratio:16/9;object-fit:cover;object-position:center;filter:saturate(.87);border-bottom:1px solid #405361;transition:transform .4s ease,filter .3s ease}
.project:hover .project-image{transform:scale(1.025);filter:saturate(1)}
.projects .project>.tag,.projects .project>h3,.projects .project>p,.projects .project>.link,.projects .project>.image-disclaimer{margin-left:30px;margin-right:30px}
.projects .project>.tag{margin-top:24px}
.projects .project>h3{margin-top:10px}
.projects .project>p{margin-bottom:20px}
.image-disclaimer{display:block;color:#b4bec5;font-size:10px;letter-spacing:.035em;line-height:1.5;margin-top:9px}
.music-photo{margin:0;min-height:440px;position:relative;background:#172630;overflow:hidden}
.music-session-photo{display:block;width:100%;height:440px;object-fit:cover;object-position:50% 40%}
.music-photo figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#0c1318da);color:#b2e3de;padding:45px 26px 20px;font-weight:800;letter-spacing:.16em;font-size:10px}
.archive-image{width:100%;height:176px;object-fit:contain;object-position:center;display:block;background:#0d141b;margin-bottom:15px}
.archive-image-small{height:130px;background:#f1f1ed}
.archive-feature:nth-child(-n+2){min-height:0}
.archive-feature h3{margin-top:15px}
@media(max-width:570px){.project-image{height:170px}.music-photo,.music-session-photo{height:310px;min-height:310px}.experience-logo img{max-width:165px}}
@media(prefers-reduced-motion:reduce){.project-image{transition:none}.project:hover .project-image{transform:none}}

/* Archival image selection: photographic features only on the first two archive cards. */
.archive-feature:nth-child(-n+2) .archive-image{height:auto;aspect-ratio:2.28 / 1;object-fit:cover;background:#0d141b}
.archive-feature:nth-child(n+3) .archive-image{display:none}

/* Blue-green network hero: original approved visual study B. */
:root{--acid:#7ED8CB;--dark:#0b111a;--dark2:#152630;}
.hero{background:#0b0d12;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:1;
 background:linear-gradient(90deg,#0b0d12 0%,#0b0d12 24%,rgba(11,13,18,.97) 40%,rgba(11,13,18,.75) 58%,rgba(11,13,18,.12) 88%),url('../images/blue-network-hero.jpg') right center / auto 100% no-repeat}
.hero::after{display:none}
.hero .eyebrow,.hero .accent,.archive-feature:nth-child(-n+2) .archive-no,.archive-feature:nth-child(-n+2) .archive-link{color:#7ED8CB}
.hero .btn{background:#7ED8CB;border-color:#7ED8CB;color:#081820}
.final{background:#7ED8CB}
.final .btn.secondary:hover{background:#7ED8CB}
@media(max-width:900px){.hero::before{background:linear-gradient(90deg,rgba(11,13,18,.98) 0%,rgba(11,13,18,.90) 57%,rgba(11,13,18,.58) 100%),url('../images/blue-network-hero.jpg') right center / auto 100% no-repeat}}
@media(max-width:570px){.hero::before{background:linear-gradient(180deg,rgba(11,13,18,.77),#0b0d12 90%),url('../images/blue-network-hero.jpg') center top/auto 65% no-repeat}}