/* KNNY studio pass: a shared grid, a clear booking route and quieter surfaces. */
:root { --gutter: clamp(22px, 4.4vw, 88px); --line: #363e39; }
html { scroll-padding-top: 104px; }
.shell { max-width: 1600px; }
.section-space { padding-block: clamp(80px, 8vw, 128px); }

.site-header { position: fixed; min-height: 86px; padding-block: 21px; border-bottom: 1px solid rgba(236,238,231,.1); background: rgba(11,14,12,.88); transition: padding .25s ease, background .25s ease; }
.site-header.is-scrolled { padding-block: 13px; min-height: 72px; background: #0d110f; }
.site-header .wordmark > img { width: 116px; }
.site-header .header-caption { font-size: 9px; }
.site-header .main-nav > a { min-height: 40px; display: inline-flex; align-items: center; gap: 4px; }
.site-header .main-nav > a[aria-current="location"] { color: var(--teal); }
.site-header .main-nav > a[aria-current="location"]::after { transform: scaleX(1); }
.site-header .main-nav .nav-contact { padding-inline: 15px; border: 1px solid #43554a; }
.site-header .main-nav .nav-contact::after { display: none; }
.language-switch button { min-height: 44px; }

.hero { min-height: 780px; max-height: 1080px; }
.hero-body { padding-top: 160px; padding-bottom: 48px; }
.hero h1 { font-size: clamp(120px,15.4vw,244px); }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-top: 45px; }
.hero-intro > p { font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 30px; }
.primary-cta { display: inline-flex; align-items: center; justify-content: space-between; min-height: 56px; min-width: 210px; padding: 16px 22px; gap: 32px; background: var(--teal); color: #0b1813; font-size: 13px; font-weight: 700; transition: background .2s ease; }
.primary-cta:hover { background: #85edd6; }
.primary-cta > span { font-size: 23px; line-height: 1; }
.hero-actions .inline-link { gap: 22px; font-size: 12px; }
.hero-foot, .hero-foot .motion-toggle { font-size: 10px; }
.focus-mark { top: 26%; width: clamp(90px,10vw,144px); opacity: .5; }

.offer-index { padding-top: 33px; }
.offer-index > p { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 17px; }
.offer-index > nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); }
.offer-index a { display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: start; gap: 8px 16px; padding: 21px 24px; min-height: 99px; border-left: 1px solid var(--line); }
.offer-index a:first-child { padding-left: 0; border-left: 0; }
.offer-index a > span:first-child { grid-column: 1; font-size: 12px; font-weight: 700; }
.offer-index a > .offer-price { grid-column: 1; font-size: 12px; color: var(--muted); }
.offer-index a > span:last-child { grid-column: 2; grid-row: 1/3; color: var(--teal); font-size: 24px; line-height: 1; }
.offer-index a:hover > span:first-child { color: var(--teal); }

h2 { font-size: clamp(64px,7.4vw,112px); }
.work-heading p { font-size: 14px; }
.showcase-heading > p:first-child { font-size: 10px; }
.showcase-heading > p:last-child { font-size: 13px; }
.showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 40px; align-items: start; }
.showcase-card:first-child { grid-row: auto; }
.showcase-card:first-child .showcase-thumbnail { aspect-ratio: 16/10; }
.showcase-card:first-child .showcase-copy h3 { font-size: clamp(48px,4.4vw,68px); }
.showcase-card:not(:first-child) { display: block; border-bottom: 0; padding-bottom: 0; }
.showcase-card:not(:first-child) .showcase-thumbnail { aspect-ratio: 16/10; }
.showcase-card:not(:first-child) .showcase-copy { padding-block: 20px 24px; border-bottom: 1px solid var(--line); }
.showcase-card:not(:first-child) .showcase-copy h3 { font-size: clamp(48px,4.4vw,68px); }
.showcase-category { font-size: 9px; }
.showcase-description { font-size: 13px; min-height: 0; }
.showcase-copy .inline-link { font-size: 11px; gap: 17px; min-height: 36px; }
.showcase-pending { font-size: 11px; }
.showcase-card:not(:first-child) .showcase-pending { left: 19px; right: 10px; font-size: 11px; }
.project-caption p { font-size: 10px; }
.project-note { font-size: 13px; }
.project-caption > .text-button { font-size: 11px; }
.live-set-archive a { font-size: 13px; min-height: 60px; }
.live-set-archive .set-date { font-size: 10px; }
.youtube-note { font-size: 11px; }

.credits-section { background: #141916; border-block: 1px solid var(--line); }
.credits-heading > p { font-size: 14px; }
.credit-category h3 { font-size: 12px; }
.editorial-body > div > p { font-size: 13px; }
.editorial-body .inline-link, .editorial-reference { font-size: 11px; }
.services-heading > div > p { font-size: 15px; }
.services-heading .rate-note { font-size: 12px; }
.service { scroll-margin-top: 12px; }
.service summary { padding-block: 29px; }
.service summary h3 { font-size: clamp(34px,4.2vw,60px); }
.service-range { font-size: 13px; }
.service-detail { gap: 55px; }
.service-description > p { font-size: 14px; }
.service-description > .inline-link { font-size: 12px; }
.package-list h4, .extra-package-list h3 { font-size: 16px; }
.package-list strong { font-size: 30px; }
.package-list .package-scope { font-size: 14px; }
.package-list .package-condition { font-size: 12px; }
.package-enquire { font-size: 12px; }
.package-list strong small, .package-eyebrow { font-size: 10px; }
.package-list strong.quote-price { font-size: 16px; max-width: 95px; }
.extra-heading > p > span { font-size: 12px; }
.additional-offers { border-top: 1px solid var(--line); }
.additional-offers > summary { display: flex; align-items: center; gap: 20px; min-height: 82px; cursor: pointer; list-style: none; font-size: 16px; }
.additional-offers > summary::-webkit-details-marker { display: none; }
.additional-offers > summary::marker { content: ""; }
.additional-offers .offers-count { color: var(--purple); font-size: 11px; margin-left: auto; }
.additional-offers[open] > summary .expand-mark::after { transform: rotate(0); }
.extra-package-list { column-gap: 55px; }
.extra-package-list > li, .extra-package-list > li:first-child { padding-block: 30px; }
.custom-work p { font-size: 14px; }
.custom-work p + p { font-size: 13px; }
.about-copy > .about-note { font-size: 14px; }
.artist-portrait figcaption, .stage-photo figcaption { font-size: 10px; }

.contact-section { background: #111814; color: var(--text); border-block: 1px solid #3c4d43; }
.contact-section .section-label { border-color: #3c4d43; }
.contact-section .section-label > span:last-child { color: var(--muted); }
.contact-grid { gap: clamp(45px,7vw,110px); }
.contact-lead h2 { font-size: clamp(90px,10vw,150px); }
.contact-lead h2 span, .contact-handle { color: var(--teal); }
.contact-lead > p { font-size: 15px; color: #c0cdc4; }
.contact-handle { border-color: #526158; }
.form-field label { font-size: 12px; }
.form-field label > span { color: #a3b2a7; }
.form-field input, .form-field select, .form-field textarea { color: var(--text); border-color: #526158; font-size: 14px; min-height: 48px; }
.form-field select option { background: #15221a; color: var(--text); }
.form-field input::placeholder, .form-field textarea::placeholder { color: #a3b2a7; }
.form-field input[type="date"] { color-scheme: dark; }
.contact-section :focus-visible { outline-color: var(--teal); }
.submit-button { color: #0b1813; background: var(--teal); min-height: 64px; font-size: 13px; }
.submit-button:hover { background: #85edd6; }
.form-note, .selected-package-note { color: #a3b2a7; font-size: 12px; }
.podcast-extras { border-color: #526158; }
.podcast-extras legend { font-size: 12px; }
.podcast-extras label { font-size: 13px; }
.podcast-extras input { accent-color: var(--teal); }
.enquiry-output { border-color: #526158; }
.enquiry-output > label { font-size: 12px; }
.enquiry-output > textarea { background: #18251d; border-color: #526158; color: var(--text); font-size: 13px; }
.enquiry-actions .text-button, .instagram-send { border-color: #526158; font-size: 12px; }
.enquiry-actions .text-button:hover { color: var(--teal); }
.footer-top > p, .footer-social, .footer-top > .inline-link { font-size: 12px; }
.footer-bottom { font-size: 10px; }
.contact-booking { min-width: 0; }
.booking-direct { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #3c4d43; font-size: 12px; }
.booking-direct > p { color: #a3b2a7; }
.booking-direct > a { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; color: var(--teal); border-bottom: 1px solid #526158; font-weight: 700; }
.booking-form[hidden] + .booking-direct { margin-top: 0; }

/* The portfolio opens with playable work; the empty film slots stay honest. */
.work-chapters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line); margin-bottom: 40px; }
.work-chapters > a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 78px; padding: 20px 25px; border-left: 1px solid var(--line); font-size: 13px; }
.work-chapters > a:first-child { border-left: 0; padding-left: 0; }
.work-chapters > a > span:first-child { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.work-chapters > a > span:last-child { color: var(--teal); font-size: 21px; }
.work-chapters > a::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.work-chapters > a:hover, .work-chapters > a:focus-visible { color: var(--teal); }
.work-chapters > a:hover::after, .work-chapters > a:focus-visible::after { transform: scaleX(1); }
html[data-motion="paused"] .work-chapters > a::after { transition: none; }
.work-chapter { display: flex; align-items: start; justify-content: space-between; gap: 32px; padding-top: 18px; scroll-margin-top: 20px; }
.work-chapter > p:first-child { color: var(--teal); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.work-chapter > p:last-child { color: var(--muted); font-size: 13px; max-width: 480px; }
.press-work-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: start; gap: 40px; margin-top: 27px; }
.press-project:nth-child(2) { padding-top: 60px; }
.press-project:first-child .project-caption h3 { font-size: 64px; }
.project-caption h3 { font-size: 48px; }
.project-caption { align-items: end; }
.showcase-heading { margin-top: 88px; scroll-margin-top: 20px; }
.live-set-archive { margin-top: 64px; }

/* Broad camera credits, not direct-client claims or endorsements. */
.credits-heading { grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); gap: 48px; margin-bottom: 64px; }
.credits-heading h2 { font-size: clamp(64px,8.8vw,140px); }
.artist-credit, .editorial-credit { grid-template-columns: minmax(0,.3fr) minmax(0,1fr); gap: 48px; }
.artist-credit { padding-top: 15px; padding-bottom: 45px; }
.artist-credit > div { min-width: 0; }
.artist-credit .credit-category { padding-top: 25px; }
.credit-category h3 { font-size: 11px; letter-spacing: .04em; }
.artist-names { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px; align-items: stretch; }
.artist-names li { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; min-height: 104px; padding: 22px 0 22px 22px; border-bottom: 1px solid var(--line); }
.artist-names li::before { content: ""; position: absolute; left: 0; top: calc(50% - 2px); width: 4px; height: 4px; background: var(--teal); }
.artist-names .wide-name { grid-column: 1/-1; display: flex; align-items: center; flex-wrap: wrap; font-size: clamp(34px,4.1vw,62px); }
.artist-names .wide-name > span { margin-inline: 10px; }
.artist-names .credit-headliner { font-size: clamp(64px,7.1vw,108px); min-height: 142px; }
.artist-names .credit-wide { grid-column: 1/-1; }
.artist-names .credit-featured { font-size: clamp(42px,4.6vw,68px); min-height: 112px; }
.artist-names .credit-established { font-size: clamp(32px,3.3vw,48px); min-height: 94px; }
.artist-names .credit-supporting { font-size: clamp(27px,2.7vw,38px); min-height: 78px; }
.artist-names .credit-name { font: inherit; color: var(--text); letter-spacing: -.02em; margin: 0; }
.artist-names .credit-origin { font: 400 10px/1.4 var(--body); letter-spacing: .06em; color: var(--purple); margin: 0; }
.artist-names .credit-headliner::before { background: var(--purple); }
.credit-context { max-width: 220px; margin-top: 18px; font-size: 11px; line-height: 1.8; color: var(--muted); }
.credits-more { margin-top: 25px; color: var(--purple); font-size: 12px; }
.credit-reference { display: flex; justify-content: space-between; align-items: start; gap: 24px; border-top: 1px solid var(--line); padding-top: 25px; }
.credit-reference p { color: var(--muted); font-size: 13px; }
.credit-reference p a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.editorial-lead, .editorial-tail { display: block; }
.editorial-tail { font-size: .72em; margin-top: 12px; }
.editorial-credit { padding-top: 35px; }
.editorial-names { font-size: clamp(40px,4vw,64px); padding-left: 22px; border-left: 2px solid var(--purple); }
.editorial-body { gap: 36px; }
.editorial-body > div > p { font-size: 14px; }

@media (min-width: 901px) and (max-width: 1280px) {
  .site-header .header-caption { display: none; }
  .site-header { gap: 22px; }
  .site-header .main-nav { gap: 22px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 96px; }
  .site-header, .site-header.is-scrolled { min-height: 76px; padding-block: 15px; gap: 16px; }
  .site-header .wordmark > img { width: 100px; }
  .site-header .header-caption { display: none; }
  .language-switch { margin-left: auto; border-left: 0; padding-left: 0; gap: 2px; }
  .language-switch button { min-width: 30px; min-height: 44px; }
  .menu-toggle { position: relative; z-index: 12; display: flex; align-items: center; gap: 12px; margin-left: 0; order: 2; min-height: 44px; font-size: 11px; }
  .menu-icon { display: flex; flex-direction: column; gap: 5px; width: 19px; }
  .menu-icon i { display: block; height: 1px; width: 19px; background: var(--text); transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-header .main-nav { position: fixed; inset: 0; z-index: 11; display: none; min-height: 100svh; margin: 0; padding: 125px var(--gutter) 55px; background: #101713; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; order: 3; }
  .site-header .main-nav.is-open { display: flex; }
  .site-header .main-nav > a { display: flex; justify-content: space-between; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(27px,5.5vw,42px); }
  .site-header .main-nav > a::after { display: none; }
  .site-header .main-nav > a > span { font-size: 12px; }
  .site-header .main-nav .nav-contact { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding-inline: 0; }
  .hero { min-height: 780px; }
  .hero h1 { font-size: 18vw; }
  .hero-bottom { grid-template-columns: 1fr; gap: 28px; }
  .hero-actions { justify-content: flex-start; gap: 24px; }
  .hero-intro > p { font-size: 16px; }
  .hero-kicker p { font-size: 10px; }
  .offer-index > nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .offer-index a { padding: 20px; }
  .offer-index a:nth-child(odd) { padding-left: 0; border-left: 0; }
  .offer-index a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .showcase-card:first-child { grid-row: auto; grid-column: auto; }
  .showcase-card:first-child .showcase-thumbnail { aspect-ratio: 16/10; }
  .showcase-card:not(:first-child) { display: block; padding-bottom: 0; border-bottom: 0; }
  .showcase-card:not(:first-child) .showcase-thumbnail { aspect-ratio: 16/10; }
  .showcase-card:not(:first-child) .showcase-copy { padding-block: 20px 24px; border-bottom: 1px solid var(--line); }
  .service-detail { grid-template-columns: 1fr; gap: 30px; padding-left: 36px; }
  .service-description > p { max-width: 560px; }
  .service-footage { display: none; }
  .credits-heading, .services-heading { grid-template-columns: 1fr; }
  .artist-credit, .editorial-credit { grid-template-columns: 1fr; gap: 26px; }
  .credits-heading { grid-template-columns: 1fr; gap: 26px; }
  .credits-heading > p { max-width: 460px; }
  .artist-credit .credit-category { padding-top: 16px; }
  .artist-names li { min-height: 94px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-lead h2 { font-size: clamp(85px,15vw,130px); }
}
@media (max-width: 600px) {
  .section-space { padding-block: 74px; }
  .hero { min-height: 800px; height: auto; max-height: none; }
  .hero-body { padding-top: 240px; padding-bottom: 38px; }
  .hero h1, html:not([lang="en"]) .hero h1 { font-size: 21vw; line-height: .88; }
  .hero-kicker { margin-bottom: 27px; }
  .hero-kicker p { font-size: 8px; }
  .hero-bottom { margin-top: 30px; gap: 25px; }
  .hero-intro > p { font-size: 15px; }
  .hero-intro > p br { display: none; }
  .hero-intro { max-width: 290px; }
  .hero-actions { gap: 17px 25px; align-items: center; }
  .primary-cta { min-width: 0; padding-inline: 17px; min-height: 52px; gap: 26px; font-size: 12px; }
  .hero-actions .inline-link { font-size: 11px; gap: 16px; }
  .hero-foot { font-size: 9px; padding-block: 13px; }
  .hero-foot .motion-toggle { font-size: 9px; }
  .focus-mark { top: 142px; width: 70px; }
  .offer-index { padding-top: 27px; }
  .offer-index a { min-height: 94px; padding: 17px 14px; gap: 6px 10px; }
  .offer-index a > span:first-child, .offer-index a > .offer-price { font-size: 11px; }
  .work-heading { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .work-heading > div { justify-self: start; }
  .work-heading p, .credits-heading > p { font-size: 14px; }
  .section-label { font-size: 9px; }
  .showcase-heading { gap: 14px; }
  .work-chapters { grid-template-columns: 1fr; margin-bottom: 30px; }
  .work-chapters > a, .work-chapters > a:first-child { min-height: 58px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .work-chapters > a:last-child { border-bottom: 0; }
  .work-chapter { flex-direction: column; gap: 12px; }
  .work-chapter > p:last-child { font-size: 12px; }
  .showcase-heading { margin-top: 64px; }
  .showcase-heading > p:last-child { font-size: 12px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 29px; }
  .showcase-card:first-child { grid-column: auto; }
  .showcase-card .showcase-thumbnail, .showcase-card:not(:first-child) .showcase-thumbnail { aspect-ratio: 16/10; }
  .showcase-card:first-child .showcase-copy h3, .showcase-card:not(:first-child) .showcase-copy h3 { font-size: 50px; }
  .showcase-category { font-size: 10px; }
  .press-work-grid { grid-template-columns: 1fr; gap: 38px; margin-top: 25px; }
  .press-project:nth-child(2) { padding-top: 0; }
  .press-project:first-child .project-caption h3 { font-size: 54px; }
  .live-set-archive { grid-template-columns: 1fr; gap: 24px; }
  .youtube-note { grid-column: 1; margin-top: 0; }
  .live-set-archive a { font-size: 12px; gap: 13px; }
  .credits-heading h2 { font-size: clamp(54px,13vw,80px); }
  html:not([lang="en"]) .credits-heading h2 { font-size: clamp(54px,13vw,80px); }
  .artist-names { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 20px; }
  .artist-names .credit-headliner { grid-column: 1/-1; font-size: clamp(60px,17vw,80px); min-height: 94px; padding-block: 17px; }
  .artist-names .credit-featured { font-size: clamp(28px,8.4vw,40px); min-height: 86px; padding: 17px 0 17px 14px; }
  .artist-names .credit-established { font-size: clamp(21px,6.8vw,34px); min-height: 76px; padding: 15px 0 15px 14px; }
  .artist-names .credit-supporting { font-size: clamp(20px,6vw,30px); min-height: 64px; padding: 14px 0 14px 14px; }
  .credit-context { max-width: 290px; margin-top: 9px; }
  .credit-reference { flex-direction: column; }
  .artist-names li { font-size: clamp(34px,10vw,48px); min-height: 86px; padding-block: 20px; }
  .artist-names .wide-name { font-size: clamp(24px,6.7vw,34px); }
  .artist-names .wide-name > span { margin-inline: 5px; font-size: 10px; }
  .editorial-names { font-size: 44px; }
  .editorial-body { grid-template-columns: 1fr; }
  .service summary { padding-block: 24px; }
  .service summary h3 { font-size: clamp(29px,7vw,42px); }
  .service-range { font-size: 12px; }
  .service-detail { padding-left: 0; }
  .service-description > p { font-size: 14px; }
  .package-list h4, .extra-package-list h3 { font-size: 15px; }
  .package-list strong { font-size: 27px; }
  .package-list .package-scope { font-size: 13px; }
  .package-list .package-condition { font-size: 12px; }
  .package-list > li { gap: 17px; }
  .extra-package-list { grid-template-columns: 1fr; }
  .extra-heading { grid-template-columns: 1fr; gap: 24px; }
  .extra-heading h2 { font-size: 62px; }
  .additional-offers > summary { min-height: 74px; font-size: 14px; }
  .custom-work { grid-template-columns: 1fr; gap: 28px; }
  .custom-work h2 { font-size: 52px; }
  .about-section { grid-template-columns: 1fr; gap: 32px; }
  .about-copy > .about-intro { font-size: 19px; }
  .contact-grid { margin-top: 36px; gap: 40px; }
  .contact-lead h2, html:not([lang="en"]) .contact-lead h2 { font-size: 22vw; }
  .contact-lead > p { font-size: 14px; }
  .contact-handle { font-size: 21px; }
  .form-two-col { grid-template-columns: 1fr; gap: 0; }
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; }
  .footer-top > p, .footer-social, .footer-top > .inline-link { font-size: 11px; }
}

/* Music is a distinct artist destination, separate from the camera portfolio. */
.hero-media > img, .hero-film { object-position: 50% center; }
.artist-section { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(180,154,241,.035), transparent 45%), #0e1210; }
.artist-identity.about-section { padding: 0 0 50px; margin-top: 60px; }
.artist-identity .about-copy > h2 { font-size: clamp(64px,6vw,96px); }
.artist-identity .artist-portrait > img { aspect-ratio: 5/6; object-position: 50% 0%; }
.artist-identity .about-links { gap: 18px 28px; }
.artist-section .live-set-archive { margin-top: 60px; }
.artist-platforms { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 22px; }
.artist-platforms a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--purple-rgb), .45); text-underline-offset: 6px; }
.artist-platforms a:hover, .artist-platforms a:focus-visible { color: var(--purple); }
.soundcloud-panel { min-width: 0; border-top: 1px solid var(--line); padding-top: 24px; }
.soundcloud-panel h3 { font-family: var(--display); font-size: clamp(48px, 4.5vw, 68px); line-height: 1; margin-top: 12px; }
.player-track { margin-top: 12px; color: var(--purple); font-size: 12px; }
.soundcloud-stage { margin-top: 24px; background: #141a17; border: 1px solid var(--line); }
.soundcloud-stage [data-soundcloud-placeholder] { min-height: 230px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.soundcloud-stage [data-soundcloud-placeholder] p { max-width: 280px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.soundcloud-stage iframe { display: block; border: 0; width: 100%; height: 166px; }
[data-load-soundcloud] { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 12px 20px; background: var(--teal); color: #101211; font-size: 12px; font-weight: 700; border: 1px solid transparent; cursor: pointer; }
[data-load-soundcloud]:hover { background: var(--purple); }
.player-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.8; }
[data-unload-soundcloud] { min-height: 44px; background: transparent; border: 0; color: var(--text); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.soundcloud-panel > .inline-link { margin-top: 20px; font-size: 12px; }
.footer-links { flex-wrap: wrap; max-width: 400px; gap: 8px 24px; justify-content: flex-end; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
[data-load-soundcloud][hidden], [data-unload-soundcloud][hidden], [data-soundcloud-placeholder][hidden] { display: none; }
@media (max-width: 600px) {
  .artist-identity.about-section { margin-top: 35px; padding-bottom: 12px; }
  .artist-identity .about-copy > h2 { font-size: clamp(40px,11vw,60px); }
  .artist-identity .artist-portrait > img { max-height: 420px; }
  .soundcloud-stage [data-soundcloud-placeholder] { min-height: 230px; padding: 24px; }
  .footer-links { grid-column: 1 / -1; grid-row: 2; justify-self: start; justify-content: flex-start; }
}

.studio-location { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; border-block: 1px solid var(--line); padding-block: 42px; margin-block: 56px 0; scroll-margin-top: 110px; }
.studio-location-kicker { color: var(--purple); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.studio-location h2 { font-family: var(--display); font-size: clamp(44px, 4.5vw, 64px); line-height: 1; margin-top: 14px; }
.studio-location address { margin-top: 18px; color: var(--muted); font-style: normal; font-size: 13px; line-height: 1.8; }
.studio-location-copy > p { max-width: 490px; font-size: 16px; line-height: 1.8; }
.studio-location-copy > .studio-location-note { color: var(--muted); margin-top: 12px; font-size: 12px; }
.studio-location-links { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 22px; }
.studio-location-links .inline-link { min-height: 44px; font-size: 12px; }
@media (max-width: 760px) {
  .studio-location { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; margin-block: 36px 0; }
  .studio-location-copy > p { font-size: 14px; }
}

/* Secondary brand colour: light and fine detail, not a competing surface. */
:root { --purple: #b49af1; --purple-rgb: 180, 154, 241; }
/* styles.css already positions .hero-media absolutely and clips it inside .hero. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 82% 26%, rgba(var(--purple-rgb), .2), transparent 53%), radial-gradient(ellipse at 94% 68%, rgba(91,224,196,.045), transparent 42%);
  opacity: .6;
  transform: translate3d(-1%, 0, 0);
  animation: knny-ambient-light 22s ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* Pausing freezes the current light position, like the existing orbit and trace. */
html[data-motion="running"] .hero-media::after { animation-play-state: running; }
@keyframes knny-ambient-light {
  from { transform: translate3d(-1%, 0, 0); opacity: .6; }
  to { transform: translate3d(2%, -1%, 0); opacity: .9; }
}
.hero-kicker .status-dot { background: var(--purple); }
.focus-orbit { border-color: rgba(var(--purple-rgb), .28); border-right-color: var(--purple); }
.site-header .main-nav > a::after { background: var(--purple); }
.site-header .main-nav .nav-contact { border-color: rgba(var(--purple-rgb), .35); }
.offer-index a > span:last-child, .work-chapters > a > span:first-child { color: var(--purple); }
.work-chapters > a::after { background: var(--purple); }
.credits-section { background: radial-gradient(ellipse at 100% 0, rgba(var(--purple-rgb), .045), transparent 55%), #141916; }
.contact-section { background: radial-gradient(ellipse at 0 0, rgba(var(--purple-rgb), .055), transparent 58%), #111814; border-top-color: rgba(var(--purple-rgb), .3); }
.contact-handle, .booking-direct > a { border-bottom-color: rgba(var(--purple-rgb), .55); }
.primary-cta > span, .submit-button > span, .offer-index a > span:last-child, .work-chapters > a > span:last-child { transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .primary-cta:hover > span, .primary-cta:focus-visible > span, .submit-button:hover > span, .submit-button:focus-visible > span, .offer-index a:hover > span:last-child { transform: translate(2px, -2px); }
  .work-chapters > a:hover > span:last-child { transform: translate(2px, 2px); }
}
html[data-motion="paused"] .primary-cta > span,
html[data-motion="paused"] .submit-button > span,
html[data-motion="paused"] .offer-index a > span:last-child,
html[data-motion="paused"] .work-chapters > a > span:last-child { transform: none; transition: none; }
@media (max-width: 600px) {
  .hero-media::after { background: radial-gradient(ellipse at 94% 20%, rgba(var(--purple-rgb), .23), transparent 60%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media::after { animation: none !important; transform: none; }
  .primary-cta > span, .submit-button > span, .offer-index a > span:last-child, .work-chapters > a > span:last-child { transform: none !important; transition: none !important; }
}

/* A calmer, clearer service and artist layer. */
:root { --line: #303a35; }
.section-space { padding-block: clamp(64px, 6.5vw, 102px); }
.site-header .header-caption { display: none; }
.site-header .main-nav > a:not(.nav-contact) > span { display: none; }
.section-label > span:last-child { display: none; }

.icon-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.service-icon {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--teal);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offer-index > nav { gap: 0; }
.offer-index a,
.offer-index a:first-child,
.offer-index a:nth-child(odd) {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 5px 14px;
  min-width: 0;
  padding: 20px 22px;
  border-left: 1px solid var(--line);
}
.offer-index a:first-child,
.offer-index a:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.offer-index a > .offer-icon { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; color: var(--teal); }
.offer-index .offer-icon .service-icon { width: 30px; height: 30px; }
.offer-index a:nth-child(2) .offer-icon,
.offer-index a:nth-child(4) .offer-icon { color: var(--purple); }
.offer-index a > .offer-label { grid-column: 2; grid-row: 1; min-width: 0; font-size: 12px; line-height: 1.35; }
.offer-index a > .offer-price { grid-column: 2; grid-row: 2; min-width: 0; font-size: 11px; color: var(--muted); }
.offer-index a > span.offer-arrow {
  grid-column: 3;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 20px;
  height: 20px;
  min-width: 0;
  color: var(--purple);
  font-size: 0;
  line-height: 0;
}
.offer-index .offer-arrow .shortcut-arrow { display: block; width: 18px; height: 18px; }
.offer-index a:hover .offer-label,
.offer-index a:focus-visible .offer-label { color: var(--teal); }
.offer-index a:focus-visible,
.service summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.service { border-color: var(--line); }
.service summary {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto 24px;
  grid-template-rows: auto;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding-block: 22px;
  cursor: pointer;
}
.service summary .service-icon { grid-column: 1; grid-row: 1; color: var(--teal); }
.service:nth-of-type(even) summary .service-icon { color: var(--purple); }
.service summary h3 { grid-column: 2; min-width: 0; font-size: clamp(36px,4vw,54px); line-height: 1; }
.service summary .service-range { grid-column: 3; color: var(--muted); font-size: 12px; white-space: nowrap; }
.service summary .expand-mark { grid-column: 4; color: var(--purple); }
.service summary .expand-mark::before,
.service summary .expand-mark::after { background: currentColor; }
.service[open] summary { border-bottom-color: var(--line); }
.service-detail { padding-block: 30px 40px; }

.brand-icon {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.brand-inline { display: inline-flex; align-items: center; gap: 9px; }
.artist-platforms { gap: 0 22px; }
.artist-platforms a { gap: 8px; text-decoration: none; }
.artist-platforms .brand-icon { width: 17px; height: 17px; }
.footer-social {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
}
.footer-social:hover,
.footer-social:focus-visible { border-color: var(--purple); }
.footer-social .brand-icon { width: 18px; height: 18px; }
.footer-social > span:not(.visually-hidden) { display: none; }
.footer-social .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.contact-booking .booking-direct > a { display: inline-flex; }
.loudlife-brand { display: inline-flex; align-items: center; gap: 14px; }
.loudlife-brand img { display: block; width: 100px; height: auto; }
.credit-reference p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.credit-reference p a.loudlife-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 8px;
  text-decoration: none;
}
.credit-reference p a.loudlife-brand img { width: 110px; height: 36px; object-fit: contain; }

.artist-identity .about-copy > h2 { font-size: clamp(64px,6vw,82px); line-height: .98; }
.artist-identity .about-copy > h2 .artist-wordmark {
  display: block;
  width: clamp(180px,18vw,220px);
  height: auto;
  margin-bottom: 15px;
}
.artist-identity .about-copy > h2 .purple { color: var(--purple); }
.artist-identity .artist-portrait > img { width: min(100%,560px); max-height: none; object-fit: contain; object-position: left bottom; }

.credits-heading { margin-bottom: 48px; }
.artist-credit, .editorial-credit { grid-template-columns: minmax(0,.25fr) minmax(0,1fr); gap: 28px; }
.artist-credit { padding-bottom: 34px; }
.artist-credit .credit-category { padding-top: 12px; }
.credit-category h3 { font-size: 10px; }
.credit-context { max-width: 210px; margin-top: 10px; font-size: 10px; line-height: 1.6; }
.artist-names { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; }
.artist-names li { min-width: 0; min-height: 64px; gap: 5px; padding: 13px 0 13px 16px; }
.artist-names .credit-headliner { grid-column: 1/-1; min-height: 84px; font-size: clamp(44px,5.2vw,72px); }
.artist-names .credit-wide:not(.credit-headliner) { grid-column: span 2; }
.artist-names .credit-featured { min-height: 70px; font-size: clamp(30px,3vw,42px); }
.artist-names .credit-established { min-height: 64px; font-size: clamp(24px,2.2vw,32px); }
.artist-names .credit-supporting { min-height: 60px; font-size: clamp(21px,1.8vw,27px); }
.artist-names .credit-origin { font-size: 9px; }
.artist-names .wide-name { grid-column: 1/-1; font-size: clamp(30px,3.5vw,48px); }
.artist-names .wide-name > span { font-size: 10px; }

.extra-heading h2 { font-size: clamp(46px,5vw,66px); }
.additional-offers > summary { min-height: 68px; }

@media (max-width: 900px) {
  .artist-credit, .editorial-credit { grid-template-columns: 1fr; gap: 18px; }
  .artist-credit .credit-category { padding-top: 0; }
  .credit-context { max-width: 420px; }
  .artist-names { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .section-space { padding-block: 62px; }
  .offer-index a,
  .offer-index a:first-child,
  .offer-index a:nth-child(odd) {
    grid-template-columns: 30px minmax(0,1fr) 20px;
    gap: 5px 9px;
    min-height: 88px;
    padding: 14px 11px;
  }
  .offer-index a:nth-child(odd) { border-left: 0; padding-left: 0; }
  .offer-index a:nth-child(even) { border-left: 1px solid var(--line); }
  .offer-index a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .offer-index a > .offer-icon .service-icon { width: 26px; height: 26px; }
  .offer-index a > .offer-label { font-size: 11px; }
  .offer-index a > .offer-price { font-size: 10px; }
  .offer-index a > span.offer-arrow { width: 20px; height: 20px; }
  .service summary {
    grid-template-columns: 32px minmax(0,1fr) 24px;
    grid-template-rows: auto auto;
    gap: 6px 11px;
    min-height: 92px;
    padding-block: 18px;
  }
  .service summary .service-icon { grid-column: 1; grid-row: 1 / 3; width: 27px; height: 27px; }
  .service summary h3 { grid-column: 2; grid-row: 1; font-size: clamp(27px,7vw,38px); line-height: 1.05; }
  .service summary .service-range { grid-column: 2; grid-row: 2; justify-self: start; font-size: 11px; }
  .service summary .expand-mark { grid-column: 3; grid-row: 1 / 3; }
  .service-detail { padding-block: 20px 28px; }
  .artist-identity .about-copy > h2 { font-size: clamp(42px,11vw,60px); }
  .artist-identity .about-copy > h2 .artist-wordmark { width: clamp(170px,55vw,210px); margin-bottom: 12px; }
  .artist-identity .artist-portrait > img { max-height: 360px; }
  .artist-credit, .editorial-credit { gap: 12px; }
  .artist-names { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; }
  .artist-names .credit-headliner { grid-column: 1/-1; min-height: 66px; font-size: clamp(34px,11vw,48px); padding-block: 12px; }
  .artist-names .credit-wide:not(.credit-headliner) { grid-column: 1/-1; }
  .artist-names .credit-featured { min-height: 58px; font-size: clamp(24px,7vw,32px); padding: 12px 0 12px 13px; }
  .artist-names .credit-established { min-height: 52px; font-size: clamp(20px,5.7vw,25px); padding: 11px 0 11px 13px; }
  .artist-names .credit-supporting { min-height: 50px; font-size: clamp(18px,5.2vw,23px); padding: 10px 0 10px 13px; }
  .artist-names .wide-name { grid-column: 1/-1; font-size: clamp(23px,6.6vw,32px); }
  .artist-names .wide-name > span { margin-inline: 5px; }
  .artist-names .credit-origin { font-size: 8px; }
  .loudlife-brand { gap: 9px; }
  .loudlife-brand img { width: 84px; }
  .extra-heading h2 { font-size: 46px; }
}
@media (max-width: 360px) {
  .site-header { gap: 8px; }
  .site-header .wordmark > img { width: 90px; }
  .menu-toggle { gap: 8px; }
  .offer-index nav { grid-template-columns: minmax(0,1fr); }
  .offer-index a,
  .offer-index a:first-child,
  .offer-index a:nth-child(odd),
  .offer-index a:nth-child(even) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 14px 0;
    min-height: 76px;
  }
  .offer-index a > .offer-label { font-size: 12px; }
}

/* Fixed vector shapes and brand colour on every action arrow. */
.arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  line-height: 0;
  vertical-align: middle;
}
svg.action-arrow {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--purple);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.primary-cta .arrow-icon,
.submit-button .arrow-icon { width: 22px; height: 22px; }
.arrow-icon > svg.action-arrow { width: 100%; height: 100%; }
.offer-arrow > svg.action-arrow { width: 18px; height: 18px; }