/* An editorial music studio: paper, ink, real musicians and precise audio lines. */
:root { --ink:#142522; --muted:#53615f; --line:#dce4e1; --surface:#f1f5f2; --accent-ink:#006b61; }
body { -webkit-font-smoothing:antialiased; }
.site-header { background:#fff; border-bottom:1px solid #e6ebe8; }
.brand-symbol { color:#172c27; }
[data-cta] { gap:12px; font-weight:500; transition:background .25s,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s; }
[data-cta]:hover { transform:translateY(-2px); box-shadow:0 5px 0 #14252212; }
[data-cta]:active { transform:translateY(0); box-shadow:none; }
.primary-button::after,.hero-actions a::after { content:''; width:17px; height:18px; display:block; flex:none; background:linear-gradient(currentColor,currentColor) left 5px / 3px 8px no-repeat,linear-gradient(currentColor,currentColor) center / 3px 18px no-repeat,linear-gradient(currentColor,currentColor) right 3px / 3px 12px no-repeat; }
.primary-button:hover::after,.hero-actions a:hover::after { animation:button-meter .45s ease 2 alternate; }
/* The existing hero media gets its own full-height frame, without an overlay. */
.hero.hero-editorial { height:auto; min-height:0; padding:126px 0 70px; }
.hero-editorial > .container-fluid { height:auto; }
.hero.hero-editorial > .container-fluid > .hero-layout { display:grid; grid-template-columns:1.02fr 1fr; gap:48px; padding:0; height:auto; background:none; border:0; border-radius:0; align-items:center; overflow:visible; }
.hero.hero-editorial > .container-fluid > .hero-layout::before { display:none; }
.hero-copy { padding:24px 0 30px; min-width:0; }
.hero-editorial .hero-title { color:var(--ink); font-size:clamp(58px,5.8vw,90px); line-height:1.005; letter-spacing:-.058em; font-weight:500; max-width:650px; text-wrap:balance; margin:0; }
.hero-editorial .hero-description { color:var(--muted); font-size:20px; line-height:1.5; font-weight:400; max-width:490px!important; margin:30px 0 0; }
.hero-editorial .hero-actions { margin:32px 0 0; padding:0; list-style:none; }
.hero-editorial .hero-actions a { font-size:18px; min-height:54px; padding:14px 26px; }
.hero-film { position:relative; height:590px; border-radius:14px; overflow:hidden; background:#293935; margin:0; }
.hero-film video { display:block; object-position:55% center; }
.hero-film::after { content:''; position:absolute; inset:20px; border:1px solid #ffffff3b; border-radius:3px; pointer-events:none; }
.hero-film-mark { position:absolute; bottom:34px; left:34px; display:flex; gap:5px; align-items:center; height:42px; color:white; }
.hero-film-mark i { width:4px; height:var(--h); background:currentColor; display:block; border-radius:2px; }
/* Clear typography and differences of scale replace large, empty surfaces. */
.service-hero { padding-top:142px; padding-bottom:84px; }
.service-intro h1 { font-size:clamp(48px,4.65vw,72px); letter-spacing:-.049em; font-weight:500; line-height:1.025; }
.service-intro > p { font-size:20px; line-height:1.5; }
.service-visual { background:#172d29; padding:30px; border-radius:14px; position:relative; }
.service-visual .visual-label { padding:0 0 22px; border-bottom:1px solid #ffffff23; font-size:18px; }
.service-visual svg { margin:22px auto 12px; }
.service-visual figcaption { margin:0; padding-top:20px; border-top:1px solid #ffffff23; color:#a9c2bc; font-size:14px; max-width:none; }
.service-visual::after { content:''; position:absolute; top:82px; bottom:82px; width:1px; left:30px; background:#b5efd0; opacity:0; pointer-events:none; }
.service-page h2 { letter-spacing:-.04em; }
.service-points article:first-child { border-top:1px solid var(--line); padding-top:24px; }
.service-points h3 { font-size:24px; }
.process-panel { background:#18332d; border:0; border-radius:14px; padding:56px; color:#fff; overflow:hidden; }
.process-panel h2 { color:#f5f9f2; max-width:750px; }
.process-panel ol { margin-top:56px; gap:40px; }
.process-panel li { border-top:1px solid #688579; padding-top:22px; position:relative; }
.process-panel li::before { content:''; position:absolute; top:-1px; left:0; right:0; height:1px; background:#bfe8a2; transform-origin:left; }
.process-panel .step-number { font-size:64px; line-height:1; letter-spacing:-.07em; color:#caeca9; margin-bottom:32px; }
.process-panel h3 { color:#f3f7ef; }
.process-panel li p { color:#b6c9c0; font-size:17px; }
.content-block { border-top:1px solid #e2e8e3; }
.content-block .content-art { border-radius:12px; border-color:#d6e1d9; box-shadow:none; }
.content-block h2 { letter-spacing:-.04em; }
.content-ledger .content-copy { border-left:2px solid #97ba8c; padding-left:28px; }
/* Questions stay in the existing accordion; only the editorial grid changes. */
.faq-section { padding:96px 0 40px; }
.faq-inner { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); column-gap:80px; max-width:1280px; }
.faq-inner > h2,.service-page .faq-inner > h2 { grid-column:1; grid-row:1 / span 30; font-size:clamp(32px,3.1vw,44px); letter-spacing:-.04em; line-height:1.12; text-align:left; margin:0; max-width:360px; }
.faq-item { grid-column:2; width:100%; }
.faq-question { text-align:left; font-size:20px; line-height:1.35; padding:25px 0; gap:22px; }
.faq-plus { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border:1px solid #c6d5cd; border-radius:50%; font-size:23px; font-weight:400; line-height:1; }
.faq-answer-content { padding-right:36px; }
/* The final invitation belongs to the page, with its own photographic/audio scene. */
.final-cta.editorial-cta,.service-page .final-cta.editorial-cta { padding:58px 0 80px; text-align:left; scroll-margin-top:100px; }
.cta-layout { display:grid; grid-template-columns:1fr 1fr; background:#e9f0e6; border-radius:14px; overflow:hidden; }
.cta-copy { padding:56px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; }
.cta-copy h2,.service-page .cta-copy h2 { font-size:clamp(40px,4.3vw,64px); line-height:1.03; letter-spacing:-.052em; text-wrap:balance; font-weight:500; margin:0; color:#17352d; }
.cta-copy p { font-size:19px; line-height:1.5; margin:24px 0 30px; max-width:410px; color:#53665c; }
.cta-copy [data-cta] { background:#183c32; color:#fff; min-height:54px; padding:14px 25px; }
.cta-copy [data-cta]:hover { background:#2b5546; }
.cta-photo { margin:0; overflow:hidden; min-width:0; }
.cta-photo img { width:100%; height:100%; min-height:490px; object-fit:cover; object-position:58% center; display:block; }
.cta-art { display:grid; place-items:center; min-width:0; background:#17332e; overflow:hidden; padding:16px; }
.cta-art svg { width:100%; display:block; height:auto; }
.compact-footer { background:#fff; padding:34px 0; }
/* No motion is hidden behind a JS dependency; animation runs once on entry. */
@media(prefers-reduced-motion:no-preference) {
 .hero-editorial.motion-seen .hero-copy { animation:copy-enter .85s cubic-bezier(.16,1,.3,1) both; }
 .hero-editorial.motion-seen .hero-film { animation:film-open 1.1s cubic-bezier(.2,.7,.2,1) both; }
 .hero-editorial.motion-seen .hero-film-mark i { animation:bar-open .7s ease both; animation-delay:calc(var(--i)*55ms + .6s); transform-origin:50% 50%; }
 .service-visual.motion-seen { animation:film-open .8s cubic-bezier(.2,.7,.2,1) both; }
 .service-visual.motion-seen::after { animation:scan-audio 1.65s .4s cubic-bezier(.22,.6,.3,1) both; }
 .process-panel.motion-seen li::before { animation:rule-open .8s cubic-bezier(.2,.7,.2,1) both; }
 .process-panel.motion-seen li:nth-child(2)::before { animation-delay:.15s; }
 .process-panel.motion-seen li:nth-child(3)::before { animation-delay:.3s; }
 .cta-layout.motion-seen .cta-photo img { animation:photo-settle 1.1s cubic-bezier(.2,.7,.2,1) both; }
 .cta-layout.motion-seen .cta-wave path { transform-box:fill-box; transform-origin:center; animation:bar-open .65s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--bar)*32ms); }
 .cta-layout.motion-seen .cta-cursor { animation:cursor-settle 1.4s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes copy-enter { from { opacity:0; transform:translateX(-22px); } to { opacity:1; transform:none; } }
@keyframes film-open { from { clip-path:inset(0 0 100% 0 round 14px); } to { clip-path:inset(0 0 0 0 round 14px); } }
@keyframes photo-settle { from { transform:scale(1.065); } to { transform:scale(1); } }
@keyframes bar-open { from { transform:scaleY(.08); } to { transform:scaleY(1); } }
@keyframes rule-open { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes scan-audio { 0% { left:30px; opacity:0; } 12% { opacity:.65; } 85% { opacity:.65; } 100% { left:calc(100% - 30px); opacity:0; } }
@keyframes cursor-settle { from { transform:translateX(-175px); } to { transform:translateX(0); } }
@keyframes button-meter { to { background-size:3px 16px,3px 9px,3px 18px; } }
@media(min-width:1600px) { .hero-film { height:660px; } }
@media(max-width:1199px) {
 .hero.hero-editorial > .container-fluid > .hero-layout { gap:32px; }
 .hero-editorial .hero-title { font-size:62px; }
 .hero-film { height:570px; }
 .cta-copy { padding:40px; }
 .cta-copy h2,.service-page .cta-copy h2 { font-size:48px; }
 .faq-inner { column-gap:48px; }
}
@media(max-width:1023px) {
 .hero.hero-editorial { padding:116px 0 50px; }
 .hero.hero-editorial > .container-fluid > .hero-layout { grid-template-columns:1fr; gap:34px; }
 .hero-editorial .hero-title { font-size:72px; max-width:780px; text-wrap:initial; }
 .hero-editorial .hero-description { max-width:610px!important; }
 .hero-copy { padding:0; }
 .hero-film { height:440px; }
 .service-hero { padding:126px 0 64px; }
 .service-intro h1 { font-size:64px; }
 .service-visual { width:100%; max-width:none; }
 .cta-copy { padding:32px; }
 .cta-copy h2,.service-page .cta-copy h2 { font-size:42px; }
 .cta-photo img { min-height:430px; }
 .faq-inner { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); column-gap:32px; }
}
@media(max-width:767px) {
 .hero.hero-editorial { padding:108px 0 44px; }
 .hero-editorial .hero-title { font-size:clamp(43px,10.8vw,68px); letter-spacing:-.055em; }
 .hero-editorial .hero-description { font-size:18px; margin-top:24px; }
 .hero-editorial .hero-actions { margin-top:26px; }
 .hero-film { height:360px; border-radius:10px; }
 .hero-film::after { inset:14px; }
 .hero-film-mark { bottom:27px; left:27px; }
 .service-hero { padding:108px 0 42px; }
 .service-intro h1 { font-size:clamp(39px,10.7vw,58px); letter-spacing:-.045em; }
 .service-intro > p { font-size:18px; }
 .service-visual { padding:24px 18px; border-radius:12px; }
 .service-visual svg { margin-top:16px; }
 .service-visual figcaption { font-size:14px; padding-top:16px; }
 .service-visual .visual-label { font-size:17px; padding-bottom:16px; }
 .process-panel { padding:30px 26px; border-radius:12px; }
 .process-panel ol { margin-top:32px; gap:28px; }
 .process-panel li + li { border-color:#688579; }
 .process-panel .step-number { font-size:52px; margin-bottom:18px; }
 .content-ledger .content-copy { padding-left:18px; }
 .faq-section,.service-page .faq-section { padding:58px 0 24px; }
 .faq-inner { display:block; }
 .faq-inner > h2,.service-page .faq-inner > h2 { margin-bottom:28px; font-size:34px; max-width:340px; }
 .faq-question { padding:22px 0; font-size:18px; gap:16px; }
 .faq-answer-content { padding-right:0; }
 .final-cta.editorial-cta,.service-page .final-cta.editorial-cta { padding:30px 0 48px; }
 .cta-layout { grid-template-columns:1fr; border-radius:12px; }
 .cta-copy { padding:34px 26px; }
 .cta-copy h2,.service-page .cta-copy h2 { font-size:43px; }
 .cta-copy p { font-size:18px; margin:22px 0 26px; }
 .cta-photo img { height:auto; min-height:0; aspect-ratio:4/3; object-fit:cover; }
 .cta-art { padding:12px; }
 .compact-footer { padding:26px 0; }
}
@media(max-width:359px) {
 .hero-editorial .hero-title { font-size:40px; }
 .hero-film { height:300px; }
 .cta-copy { padding:30px 22px; }
 .cta-copy h2,.service-page .cta-copy h2 { font-size:37px; }
 .faq-inner > h2,.service-page .faq-inner > h2 { font-size:30px; }
}
@media(prefers-reduced-motion:reduce) {
 .primary-button:hover::after,.hero-actions a:hover::after { animation:none; }
 [data-cta],[data-cta]:hover { transform:none; transition:none; }
 .hero-film-mark i { animation:none; }
}
