/* Editorial portfolio refresh. Shared by the home, work and selected case pages. */
.case-scope { font-size:16px; line-height:1.6; color:#55594f; margin:24px 0 0; }
.x5-album-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 32px; }
.x5-album-grid figure { margin:0; }
.x5-album-grid img { display:block; width:100%; height:auto; }
.x5-album-grid figcaption { margin-top:12px; font-size:15px; line-height:1.5; color:#55594f; }
.project-stage.x5-album-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:16px; aspect-ratio:1; background:#20221f; }
.x5-album-preview img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
@media(max-width:700px) { .x5-album-grid { grid-template-columns:1fr; gap:28px; } }
.work-page .case-intro { padding-top:48px; padding-bottom:40px; }
.work-page .project-card h3 { margin-top:0; }
@media(max-width:700px) {
    .work-page .case-intro { padding-top:28px; padding-bottom:28px; }
    .work-page .project-card>a { gap:20px; }
}
.home-page .editorial-main { padding-top:0; }
.home-page .hero-surface { background:#fafafa; padding-top:100px; }
body.home-page .site-header { background:rgba(250,250,250,.94); }
.pong-intro-copy .hero-actions { margin-top:24px; }
@media(max-width:700px) { .home-page .hero-surface { padding-top:80px; } }
.refresh-page { background:#f7f6f2; color:#20221f; }
.wrap { width:min(1400px,100%); margin-inline:auto; padding-inline:clamp(24px,5vw,80px); }
.refresh-page .site-header { background:rgba(247,246,242,.94); }
.refresh-page .site-header-inner { max-width:1400px; padding-inline:clamp(24px,5vw,80px); }
.refresh-page .eyebrow { color:#666961; }
.kicker { font-size:11px; line-height:1.5; font-weight:600; text-transform:uppercase; letter-spacing:.13em; margin:0 0 24px; color:#62665e; }
.editorial-main { padding-top:100px; }
.intro { display:grid; grid-template-columns:1.05fr 1fr; gap:6%; align-items:center; padding-top:66px; padding-bottom:68px; }
.intro h1 { font-family:Baskerville,Georgia,serif; font-size:clamp(72px,8.5vw,128px); font-weight:400; letter-spacing:-.065em; line-height:.91; margin:0 0 32px; }
.intro h1 em { font-weight:400; }
.intro-lead { font-size:clamp(20px,2vw,27px); line-height:1.35; letter-spacing:-.03em; margin:0 0 18px; }
.intro-description { font-size:16px; line-height:1.65; color:#62665e; max-width:440px; }
.action-row { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:24px; min-height:54px; padding:16px 23px; border:1px solid #20221f; border-radius:5px; font-size:var(--cta-font-size); line-height:1.4; transition:background .2s,transform .2s; }
:root { --cta-font-size:18px; }
.hero-cta, .button-primary { font-size:var(--cta-font-size); }
@media(max-width:700px) { :root { --cta-font-size:16px; } }
.button-dark { background:#20221f; color:#fff; }
.button-dark:hover { background:#41463e; transform:translateY(-2px); }
.text-link { font-size:14px; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#a7aaa1; }
.text-link:hover { text-decoration-color:currentColor; }
.intro-visual { position:relative; display:block; background:#dedbed; min-width:0; height:560px; overflow:hidden; border-radius:4px; }
.visual-note { position:absolute; left:28px; top:26px; color:#514268; font-family:Baskerville,Georgia,serif; font-style:italic; font-size:24px; }
.hero-phones { display:flex; align-items:center; gap:22px; width:88%; height:100%; margin:auto; transform:rotate(-9deg) translateY(26px); }
.hero-phones img { width:49%; min-width:0; border:5px solid #282239; border-radius:27px; box-shadow:12px 18px 28px #30233d2b; }
.hero-phones img:nth-child(2) { transform:translateY(60px); }
.visual-credit { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; padding:23px 28px; background:#dedbed; font-size:10px; letter-spacing:.12em; }
.visual-credit span { letter-spacing:0; }
.experience-strip { display:flex; justify-content:space-between; gap:16px; font-size:12px; padding-block:24px; border-top:1px solid #d8dad1; border-bottom:1px solid #d8dad1; color:#5a6055; }
.editorial-section { padding-top:100px; padding-bottom:100px; }
.section-heading { display:grid; grid-template-columns:1.3fr 1fr; gap:12%; align-items:end; margin-bottom:48px; }
.section-heading h2,.about-grid h2 { font-family:Baskerville,Georgia,serif; font-size:clamp(38px,4.4vw,64px); font-weight:400; line-height:1.05; letter-spacing:-.045em; margin:0; }
.section-heading>p { max-width:360px; font-size:17px; line-height:1.6; color:#62665e; margin:0; }
.project-card { margin-bottom:60px; }
.project-stage { aspect-ratio:1.95; position:relative; overflow:hidden; border-radius:4px; }
.stage-starmony { background:#24203d; }
.phone-trio { display:flex; gap:4%; width:63%; margin:0 auto; align-items:center; height:100%; transform:translateY(10%); }
.phone-trio img { width:30.66%; min-width:0; border:5px solid #151223; border-radius:25px; box-shadow:10px 15px 30px #0004; }
.phone-trio img:nth-child(2) { transform:translateY(-10%); }
.stage-caption { position:absolute; top:28px; left:30px; font-size:10px; letter-spacing:.14em; color:#d8d4e7; }
.stage-audiowell { background:#d6e4df; }
.stage-audiowell .stage-caption { color:#415d53; }
.web-devices { position:relative; width:82%; height:100%; margin:auto; display:flex; align-items:center; padding-top:5%; }
.desktop-device { width:92%; height:auto; filter:drop-shadow(0 12px 12px #284e3922); }
.mobile-device { position:absolute; right:0; bottom:6%; width:20%; filter:drop-shadow(0 8px 8px #284e3933); }
.project-card-copy { display:grid; grid-template-columns:1fr auto 30px; gap:30px; align-items:end; padding-top:24px; }
.project-card-copy .kicker { margin-bottom:8px; }
.project-card h3 { font-family:Baskerville,Georgia,serif; font-size:clamp(26px,3vw,40px); letter-spacing:-.03em; font-weight:400; line-height:1.1; margin:0; }
.project-card-copy>p { color:#62665e; font-size:12px; margin:0 0 4px; }
.project-arrow { font-size:28px; }
.project-card a:hover .project-arrow { transform:translate(3px,-3px); }
.project-arrow { transition:transform .2s; }
.services-band { background:#eceee7; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 64px; }
.service-grid article { border-top:1px solid #bfc5b5; padding-top:20px; display:flex; flex-direction:column; }
.service-number { font-size:12px; color:#68725e; margin-bottom:26px; }
.service-grid h3, .process-grid h3 { font-family:var(--sans); font-size:32px; line-height:1.1; font-weight:700; letter-spacing:-.04em; color:#1b1b1b; margin:0 0 18px; }
@media(max-width:700px) { .service-grid h3, .process-grid h3 { font-size:26px; } }
.process-grid p { font-size:18px; line-height:1.75; color:#343a32; }
.service-grid p { font-size:18px; line-height:1.75; color:#343a32; max-width:48ch; }
.service-grid ul { list-style:none; padding:0; font-size:17px; line-height:2; color:#343a32; margin:14px 0 24px; }
.service-grid .text-link { margin-top:auto; }
.service-grid .text-link, .process-example .text-link, .about-grid .text-link { font-size:16px; line-height:1.5; font-weight:700; }
.service-grid .text-link, .process-example .text-link { color:#20221f; }
.strategy-note { border-top:1px solid #bfc5b5; padding-top:28px; margin:50px 0 0; font-size:14px; color:#62665e; }
.strategy-note a { color:#20221f; text-decoration:underline; text-underline-offset:4px; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.process-grid article { border-top:1px solid #d8dad1; padding-top:26px; }
.about-band { background:#1b1b1b; color:#f6f5ef; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:12%; padding-block:85px; }
.about-grid .kicker { color:#c0c8b9; }
.about-grid p:not(.kicker):not(.signature) { color:#cbd0c7; font-size:16px; line-height:1.7; }
.about-grid .large-copy { font-size:23px!important; line-height:1.45!important; color:#fff!important; margin-top:0; }
.about-grid .signature { font-family:Baskerville,Georgia,serif; font-size:32px; font-style:italic; margin:42px 0 4px; }
.about-grid span { font-size:12px; color:#cbd0c7; }
.editorial-contact { padding-block:110px; text-align:center; }
.editorial-contact h2 { font-family:Baskerville,Georgia,serif; font-size:clamp(56px,8vw,100px); line-height:.98; letter-spacing:-.055em; font-weight:400; margin:0 0 28px; }
.editorial-contact p:not(.kicker) { font-size:17px; line-height:1.6; color:#62665e; margin-bottom:30px; }
.home-page .contact-band { background:#f5ce35; color:#1b1b1b; }
.home-page .contact-band p { color:#1b1b1b; }
.home-page .footer { margin-top:0; }
.case-intro { padding-top:70px; padding-bottom:50px; max-width:1100px; margin-left:auto; margin-right:auto; }
.case-intro h1 { font-family:Baskerville,Georgia,serif; font-size:clamp(46px,6.5vw,86px); line-height:1.02; letter-spacing:-.05em; font-weight:400; margin:0 0 24px; }
.case-intro .lead { font-size:22px; line-height:1.5; max-width:720px; color:#62665e; }
.case-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-top:1px solid #d8dad1; padding-top:24px; margin-top:40px; }
.case-meta .kicker { margin-bottom:10px; }
.case-meta p { font-size:14px; line-height:1.5; }
.case-story { max-width:850px; padding-block:70px; }
.case-story h2 { font-family:Baskerville,Georgia,serif; font-size:36px; font-weight:400; margin:40px 0 16px; letter-spacing:-.025em; }
.case-story p:not(.kicker) { font-size:18px; line-height:1.75; color:#555b51; }
.brand-panel { padding:clamp(30px,8vw,100px); background:#eeece7; border-radius:4px; }
.brand-panel img { max-height:220px; width:100%; object-fit:contain; }
.brand-panel.starmony-brand { background:#c7578e; padding:0; }
.brand-panel.starmony-brand img { max-height:none; }
.comparison { display:grid; grid-template-columns:1fr 1fr; background:#eeece7; gap:1px; }
.comparison figure { margin:0; padding:40px; background:#eae9e4; display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.comparison img { width:100%; height:140px; object-fit:contain; }
.comparison figcaption,.asset-caption { font-size:12px; color:#62665e; line-height:1.5; }
.workwear { margin:35px 0 0; }
.workwear img { width:100%; border-radius:4px; }
.workwear figcaption { margin-top:12px; }
.case-next { border-top:1px solid #d8dad1; padding-block:48px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.case-next a { text-decoration:underline; text-underline-offset:5px; }
.static-stage img { width:100%; height:100%; object-fit:cover; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:1000; background:#20221f; color:white; padding:12px 20px; }
.skip-link:focus { top:12px; }
a:focus-visible,button:focus-visible { outline:3px solid #687cba; outline-offset:5px; }
section[id] { scroll-margin-top:90px; }
@media(min-width:1600px) { .intro-visual { height:640px; } }
@media(max-width:1000px) { .intro { gap:30px; }.intro-visual{height:500px}.service-grid{grid-template-columns:repeat(2,1fr);gap:44px 30px}.project-card-copy { grid-template-columns:1fr 30px; }.project-card-copy>p { grid-column:1; }.project-arrow { grid-column:2;grid-row:1/3; }.hero-phones { width:95%;gap:12px; }.about-grid{gap:6%;} }
@media(max-width:700px) { .editorial-main{padding-top:80px}.intro{grid-template-columns:1fr;padding-top:36px;padding-bottom:32px;gap:38px}.intro h1{font-size:80px}.intro-lead{font-size:23px}.intro-description{max-width:100%}.intro-visual{height:450px}.hero-phones{width:75%;gap:20px}.experience-strip{font-size:10px;gap:12px;align-items:center}.experience-strip span{max-width:100px}.editorial-section{padding-block:64px}.section-heading{grid-template-columns:1fr;gap:24px;margin-bottom:32px}.section-heading>p{max-width:none}.project-stage{aspect-ratio:1.25}.phone-trio{width:88%;gap:3%}.phone-trio img{border-width:3px;border-radius:16px;width:31.33%}.stage-caption{top:18px;left:20px;font-size:8px}.web-devices{width:94%;padding-top:12%}.mobile-device{width:24%;bottom:12%}.project-card{margin-bottom:40px}.project-card-copy{gap:12px;padding-top:18px}.project-card h3{font-size:29px}.service-grid{grid-template-columns:1fr;gap:34px}.service-grid h3 br{display:none}.service-number{margin-bottom:16px}.service-grid ul{margin:6px 0 20px}.process-grid{grid-template-columns:1fr;gap:24px}.about-grid{grid-template-columns:1fr;gap:38px;padding-block:60px}.editorial-contact{padding-block:72px}.case-intro{padding-top:40px;padding-bottom:34px}.case-intro .lead{font-size:19px}.case-meta{grid-template-columns:1fr;gap:14px;margin-top:28px}.case-meta p{margin:0}.case-story{padding-block:35px}.comparison{grid-template-columns:1fr}.comparison figure{padding:28px;gap:20px}.comparison img{height:110px}.desktop-break{display:none} }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto!important} *,*::before,*::after { transition:none!important; animation:none!important; } }

/* Pong hero and identity-led project presentation */
.pong-hero { padding-top:20px; padding-bottom:32px; text-align:center; }
.pong-hero>.kicker { margin-bottom:12px; }
.pong-court { position:relative; height:260px; display:grid; place-items:center; isolation:isolate; }
.pong-court canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.pong-court h1 { font-family:Baskerville,Georgia,serif; font-size:clamp(74px,9vw,132px); font-weight:400; font-style:normal; letter-spacing:-.055em; line-height:.97; margin:0; }
.pong-court h1 span { display:block; font-style:normal; }
.pong-court.is-playing h1 { color:rgba(0,0,0,.3); }
.pong-court::before,.pong-court::after { content:""; position:absolute; top:0; bottom:0; width:28px; border-block:1px solid #dadbd3; pointer-events:none; }
.pong-court::before { left:0; border-left:1px solid #dadbd3; }
.pong-court::after { right:0; border-right:1px solid #dadbd3; }
.pong-toolbar { display:flex; align-items:baseline; justify-content:space-between; gap:16px; color:#696d64; font-size:10px; padding:14px 0 24px; }
.pong-label { font-family:ui-monospace,monospace; letter-spacing:.08em; display:flex; gap:7px; align-items:baseline; }
.live-dot { width:6px; height:6px; background:#b84225; display:inline-block; }
.pong-toolbar button { appearance:none; border:0; border-radius:0; background:transparent; color:inherit; padding:0; min-height:0; cursor:pointer; font-family:ui-monospace,monospace; font-size:inherit; font-weight:400; line-height:inherit; letter-spacing:.08em; }
.pong-toolbar button:hover { text-decoration:underline; text-underline-offset:3px; }
.pong-status { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.pong-scoreboard { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-family:ui-monospace,monospace; font-size:inherit; letter-spacing:.08em; color:inherit; }
#pongScore { font-variant-numeric:tabular-nums; white-space:nowrap; }
@media(max-width:700px) {
    .pong-toolbar { flex-wrap:wrap; gap:12px; }
}
.pong-intro-copy { max-width:1000px; margin:auto; }
.pong-intro-copy .intro-lead { font-size:clamp(21px,2vw,27px); max-width:850px; margin:0 auto; line-height:1.4; text-wrap:balance; }
@media(max-width:700px) {
    .pong-intro-copy .intro-lead { white-space:normal; font-size:23px; line-height:1.4; }
}
.pong-intro-copy .intro-description { max-width:580px; margin-inline:auto; }
.home-page .editorial-section { padding-top:76px; padding-bottom:76px; }
.home-page .section-heading { margin-bottom:36px; }
.home-page #work { padding-top:40px; }
.process-example { margin:32px 0 0; }
.home-page .about-grid { padding-block:70px; }
@media(max-width:700px) {
    .home-page .editorial-section { padding-block:48px; }
    .home-page .section-heading { margin-bottom:28px; }
    .home-page .about-grid { padding-block:48px; }
}
.pong-intro-copy .action-row { justify-content:center; margin-top:24px; }
.brand-stage { background:#fff; display:flex; align-items:center; justify-content:center; border:1px solid #e4e4df; }
.brand-stage>img { width:76%; height:auto; max-height:58%; object-fit:contain; }
.brand-stage .stage-caption { color:#5d645a; }
.brand-stage-note { position:absolute; bottom:26px; left:30px; right:30px; display:flex; justify-content:space-between; gap:20px; font-size:11px; color:#62665e; }
.brand-starmony { border-bottom:5px solid #c6a746; }
.brand-audiowell { border-bottom:5px solid #94cfca; }
.pong-court:focus-visible { outline:2px solid #b84225; outline-offset:6px; }
@media(min-width:1600px) { .pong-court{height:300px;} }
@media(max-width:700px) { .pong-hero {padding-top:18px;padding-bottom:28px;} .pong-hero>.kicker {font-size:10px;} .pong-court{height:210px;} .pong-court h1{font-size:clamp(52px,14vw,82px);} #pongHint{display:none;} .pong-toolbar{padding-bottom:24px;} .pong-intro-copy .action-row{gap:20px;} .brand-stage>img{width:87%;}.brand-stage-note{left:20px;right:20px;bottom:18px;font-size:10px;} .brand-stage-note span:last-child{display:none;} }

/* Audiowell: original lockup, with a CSS-only white wordmark for dark backgrounds. */
.audio-logo-stage { background:#04173c; display:grid; place-items:center; }
.audio-logo-lockup { position:relative; width:80%; }
.audio-logo-lockup img { display:block; width:100%; height:auto; }
.audio-logo-lockup .audio-logo-light { position:absolute; inset:0; filter:brightness(0) invert(1); clip-path:inset(0 0 0 27%); }
.audio-process-stage { aspect-ratio:auto!important; }
.audio-symbol-original { width:86%; aspect-ratio:1; margin:auto; }
.audio-symbol-original img { width:100%!important; height:100%; object-fit:contain; padding:0!important; }
/* Alternating project rows; identity process and editorial brand compositions. */
.project-card { margin-bottom:100px; }
.project-card>a { display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
.project-card:nth-of-type(even)>a { grid-template-columns:1fr 1.15fr; }
.project-card:nth-of-type(even) .project-stage { order:2; }
.project-card:nth-of-type(even) .project-card-copy { order:1; }
.project-card .project-stage { aspect-ratio:1.45; min-width:0; }
.project-card-copy { display:flex; flex-direction:column; align-items:flex-start; gap:22px; padding:0; }
.project-card-copy .kicker { margin-bottom:28px; }
.project-card h3 { font-size:clamp(30px,3.3vw,48px); line-height:1.08; }
.project-card-copy .project-summary { font-size:18px; line-height:1.6; margin:0; }
.project-card-copy .project-disciplines { font-size:12px; line-height:1.6; margin:0; }
.project-arrow { font-size:23px; }
.symbol-stage { background:#eeece5; }
.symbol-stage .stage-caption { color:#656253; font-size:9px; }
.symbol-process { display:grid; grid-template-columns:1fr 20px 1fr; align-items:center; gap:12px; height:100%; padding:65px 30px 30px; }
.symbol-process figure { margin:0; }
.symbol-process img { width:100%; aspect-ratio:1; object-fit:contain; }
.symbol-process figure:first-child img { mix-blend-mode:multiply; }
.symbol-process figure:last-child img { padding:7%; }
.symbol-process figcaption { margin-top:22px; color:#666253; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.process-arrow { color:#8a8063; font-size:20px; }
.audio-art-stage { background:#071b3b; isolation:isolate; }
.audio-art-stage .stage-caption { color:#c6dedb; z-index:3; font-size:9px; }
.audio-disc { position:absolute; width:70%; aspect-ratio:1; border-radius:50%; right:-8%; top:9%; background:repeating-radial-gradient(circle,#264455 0,#264455 1px,#102c40 2px,#102c40 5px); box-shadow:0 0 0 1px #9cd2cc55; }
.audio-disc>span { position:absolute; inset:33%; border-radius:50%; background:#94cfca; }
.audio-disc>span::after { content:""; position:absolute; inset:43%; border-radius:50%; background:#071b3b; }
.audio-identity-card { position:absolute; width:74%; height:48%; left:8%; top:27%; background:#f0f4ed; transform:rotate(-8deg); display:grid; place-items:center; box-shadow:0 25px 35px #0004; }
.audio-identity-card img { width:80%; }
.audio-art-caption { position:absolute; bottom:25px; left:30px; font-size:11px; color:#bad6d1; letter-spacing:.06em; }
.audio-palette { display:grid; grid-template-columns:1.5fr 1fr 1fr; min-height:260px; }
.audio-palette>div { padding:28px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; font-size:18px; }
.audio-palette>div span:last-child { font-size:12px; }
.palette-navy { background:#04173c; color:#fff; }.palette-mint { background:#94cfca; color:#04173c; }.palette-white{background:white;color:#04173c;border:1px solid #e5e5df;}
.app-followup { margin-top:50px; }
.live-dot { background:#1A1A1A; }
.pong-court:focus-visible { outline-color:#1A1A1A; }
@media(max-width:1000px) { .project-card>a,.project-card:nth-of-type(even)>a{gap:30px;} .project-card-copy .project-summary{font-size:16px;} .symbol-process{padding:52px 20px 24px;gap:6px;} .symbol-process figcaption{font-size:8px;margin-top:12px;} .project-card-copy{gap:16px;} }
@media(max-width:700px) { .project-card{margin-bottom:64px;} .project-card>a,.project-card:nth-of-type(even)>a{grid-template-columns:1fr;gap:26px;} .project-card:nth-of-type(even) .project-stage,.project-card:nth-of-type(even) .project-card-copy{order:initial;} .project-card-copy .kicker{margin-bottom:15px;} .project-card h3{font-size:34px;} .audio-palette{grid-template-columns:1fr;min-height:0;} .audio-palette>div{min-height:140px;} .audio-art-caption{font-size:10px;bottom:20px;left:20px;} .symbol-stage .stage-caption,.audio-art-stage .stage-caption{font-size:8px;} }