:root {
  color-scheme: dark;
  --ink: #f0f7ff;
  --muted: #a8b9cc;
  --dim: #667c95;
  --deep: #010612;
  --ocean: #05265a;
  --foam: #d2efff;
  --sea-glass: #65bfff;
  --line: rgba(172, 216, 255, 0.18);
  --ice-bg: #edf7fc;
  --ice-panel: #dceef7;
  --ink-dark: #061a2d;
  --blue-text: #2389bd;
  --blue-soft: #73c9f0;
  --light-line: rgba(14, 76, 118, .17);
  --page-pad: clamp(1.25rem, 4vw, 4.5rem);
  --header-height: 5rem;
  --display: "Helvetica Neue", "Avenir Next", Arial, sans-serif;
  --serif: "Iowan Old Style", "Baskerville", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--deep); scroll-behavior: smooth; }
.visual-only { scrollbar-width: none; }
.visual-only::-webkit-scrollbar { display: none; }
body { margin: 0; min-width: 20rem; overflow-x: clip; background: var(--deep); color: var(--ink); font-family: var(--display); font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
svg, canvas { display: block; }
::selection { background: var(--foam); color: var(--deep); }
:focus-visible { outline: 2px solid var(--foam); outline-offset: 5px; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; transform: translateY(-180%); padding: .8rem 1rem; border-radius: 99px; background: var(--foam); color: var(--deep); font: 600 .68rem/1 var(--mono); text-decoration: none; transition: transform 180ms ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); padding: 0 var(--page-pad); color: var(--ink); background: linear-gradient(180deg, rgba(1, 6, 18, .76), transparent); transition: background 350ms ease, border-color 350ms ease; }
.site-header.is-underwater { background: rgba(2, 12, 32, .64); border-bottom: 1px solid rgba(176, 217, 255, .09); backdrop-filter: blur(14px); }
.site-header.is-light { color: var(--ink-dark); background: rgba(237, 247, 252, .9); border-bottom: 1px solid var(--light-line); backdrop-filter: blur(14px); }
.site-header.is-light nav a { color: #4d6f88; }
.site-header.is-light nav a:hover { color: var(--ink-dark); }
.site-header.is-light .nav-cta { color: var(--ink-dark); border-color: rgba(14, 76, 118, .24); }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand svg { width: 3.25rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.brand span { display: grid; font: 500 .58rem/1.05 var(--mono); letter-spacing: .2em; }
.brand small { color: var(--muted); font-size: .48rem; }
.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem); }
.site-header nav a { color: var(--muted); font: 500 .6rem/1 var(--mono); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.site-header nav a:hover { color: var(--ink); }
.site-header .nav-cta { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); }

.cinematic { --progress: 0; position: relative; height: 1050svh; background: var(--deep); }
.cinematic-stage { position: sticky; top: 0; width: 100%; height: 100svh; overflow: clip; background: #010612; isolation: isolate; }
[data-ocean-canvas] { visibility: hidden; }
.app-ready [data-ocean-canvas] { visibility: visible; }
html:not(.app-ready) .cinematic { height: auto; }
html:not(.app-ready) .cinematic-stage { position: relative; min-height: 100svh; }
html:not(.app-ready) .story-copy { display: none; }
html:not(.app-ready) .story-copy--opening { --presence: 1; display: block; }
html:not(.app-ready) .orientation,
html:not(.app-ready) .depth-meter { display: none; }
[data-ocean-canvas], .fallback-depth { position: absolute; inset: 0; width: 100%; height: 100%; }
.has-webgl .fallback-depth { opacity: 0; visibility: hidden; }
.fallback-depth { transition: opacity 500ms ease; }
.atmosphere { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0, 3, 14, .16) 70%, rgba(0, 2, 10, .58) 100%); }

.story-copy-layer { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.visual-only .site-header,
.visual-only .story-copy-layer,
.visual-only .orientation,
.visual-only .depth-meter { display: none; }
.story-copy { --presence: 0; position: absolute; width: min(52rem, 78vw); opacity: var(--presence); transform: translate3d(0, calc((1 - var(--presence)) * 2.5rem), 0); filter: blur(calc((1 - var(--presence)) * 7px)); text-shadow: 0 2px 32px rgba(0, 3, 16, .74); will-change: opacity, transform, filter; }
.story-copy::before { position: absolute; z-index: -1; inset: -4rem; content: ""; background: radial-gradient(ellipse at center, rgba(1, 7, 24, .6), rgba(1, 7, 24, .18) 52%, transparent 75%); filter: blur(14px); }
.story-copy h1, .story-copy h2 { margin: 0; font-size: clamp(3.1rem, 6.5vw, 7.3rem); font-weight: 300; line-height: .91; letter-spacing: -.065em; text-wrap: balance; }
.story-copy p { color: var(--muted); }
.eyebrow { margin: 0 0 1.35rem; color: var(--sea-glass) !important; font: 600 .62rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.story-copy--opening { left: var(--page-pad); top: 27%; max-width: 60rem; }
.story-copy--opening h1 { max-width: 12ch; }
.story-copy--submerge { right: var(--page-pad); top: 24%; text-align: right; }
.story-copy--currents { left: var(--page-pad); top: 23%; max-width: 44rem; }
.story-copy--currents h2 { font-size: clamp(2.8rem, 5vw, 5.6rem); }
.story-copy--relationship { right: var(--page-pad); top: 28%; text-align: right; }
.story-copy--ascent { left: 50%; top: 19%; transform: translate3d(-50%, calc((1 - var(--presence)) * 2.5rem), 0); text-align: center; }
.story-copy--finale { --cloud-copy-swap: 0; left: 50%; top: 20%; transform: translate3d(-50%, calc((1 - var(--presence)) * 2.5rem), 0); text-align: center; pointer-events: auto; }
.story-copy--finale h2 { margin-inline: auto; max-width: 13ch; }
.finale-title-swap { display: grid; align-items: center; }
.finale-title-swap__before, .finale-title-swap__after { grid-area: 1 / 1; will-change: opacity, transform, filter; }
.finale-title-swap__before { opacity: calc(1 - var(--cloud-copy-swap)); transform: translate3d(0, calc(var(--cloud-copy-swap) * -1rem), 0); filter: blur(calc(var(--cloud-copy-swap) * 7px)); }
.finale-title-swap__after { opacity: var(--cloud-copy-swap); transform: translate3d(0, calc((1 - var(--cloud-copy-swap)) * 1rem), 0); filter: blur(calc((1 - var(--cloud-copy-swap)) * 7px)); }
.finale-title-swap__after span { color: var(--sea-glass); }
.scroll-cue { display: flex; align-items: center; gap: .8rem; margin-top: 13vh; color: var(--dim) !important; font: 500 .58rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue i { display: block; width: 1px; height: 2.8rem; background: linear-gradient(var(--foam) 0 25%, var(--line) 25%); }
.primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: 13.5rem; margin-top: 2.4rem; padding: 1rem 1.2rem; border-radius: 99px; background: var(--foam); color: var(--deep); font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }

.orientation, .depth-meter { position: absolute; z-index: 6; bottom: 1.8rem; display: flex; align-items: center; gap: .75rem; color: rgba(184, 215, 242, .58); font: 500 .54rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.orientation { left: var(--page-pad); }
.depth-meter { right: var(--page-pad); }
.orientation > i, .depth-meter > i { width: clamp(3rem, 8vw, 7rem); height: 1px; overflow: hidden; background: var(--line); }
.orientation b { display: block; width: 100%; height: 100%; background: var(--foam); transform: scaleX(var(--progress)); transform-origin: left; }
.depth-meter b { display: block; width: 100%; height: 100%; background: var(--sea-glass); transform: scaleX(var(--progress)); transform-origin: left; }

.after-story { position: relative; z-index: 10; overflow: clip; background: var(--ice-bg); color: var(--ink-dark); transition: opacity 420ms ease; }
.app-ready:not(.story-complete) .after-story { visibility: hidden; opacity: 0; }
.app-ready.story-complete .after-story, html:not(.app-ready) .after-story { visibility: visible; opacity: 1; }
.after-story [id] { scroll-margin-top: calc(var(--header-height) + 1rem); }
.after-story .eyebrow { color: var(--blue-text) !important; }
.after-story em { color: var(--blue-text); font-family: var(--serif); font-weight: 400; }
.after-story h2 { margin: 0; font-weight: 300; line-height: .9; letter-spacing: -.065em; text-wrap: balance; }
.after-story__intro { display: grid; grid-template-columns: 1.45fr .55fr; gap: 4rem; padding: clamp(8rem, 14vw, 14rem) var(--page-pad); }
.after-story__intro .eyebrow { grid-column: 1 / -1; margin-bottom: -1rem; }
.after-story__intro h2 { font-size: clamp(3.8rem, 7.7vw, 8.5rem); }
.after-story__intro > p:last-child { align-self: end; max-width: 31rem; margin: 0; color: #526d82; font-size: 1.06rem; }

.dark-section { position: relative; background: #020b1a; color: var(--ink); }
.dark-section::before { position: absolute; inset: 0; pointer-events: none; content: ""; background: radial-gradient(circle at 70% 20%, rgba(32, 151, 221, .15), transparent 34%), linear-gradient(135deg, transparent 55%, rgba(25, 112, 180, .08)); }
.dark-section .eyebrow { color: var(--blue-soft) !important; }
.section-heading { position: relative; display: grid; grid-template-columns: 1.35fr .65fr; gap: 3rem; align-items: end; max-width: 92rem; margin: 0 auto; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.section-heading h2 { font-size: clamp(3.2rem, 6.3vw, 7.2rem); }
.section-heading > p:last-child { max-width: 32rem; margin: 0; color: #58738b; }
.dark-section .section-heading > p:last-child { color: var(--muted); }
.section-heading--center { display: block; max-width: 72rem; text-align: center; }
.section-heading--center .eyebrow { margin-bottom: 1.35rem; }

.listening-room { padding: clamp(7rem, 11vw, 11rem) var(--page-pad); }
.listening-room .section-heading { margin-bottom: clamp(4rem, 7vw, 7rem); }
.ocean-player { position: relative; display: grid; grid-template-columns: minmax(19rem, .78fr) minmax(32rem, 1.22fr); max-width: 92rem; margin: 0 auto; overflow: hidden; border: 1px solid rgba(126, 204, 255, .25); border-radius: clamp(1.5rem, 3vw, 3rem); background: linear-gradient(145deg, rgba(11, 49, 91, .82), rgba(1, 9, 23, .96) 52%, rgba(7, 37, 70, .9)); box-shadow: 0 4rem 9rem rgba(0, 3, 12, .46), 0 0 5rem rgba(48, 159, 229, .12); isolation: isolate; }
.ocean-player::after { position: absolute; z-index: -1; inset: 0; content: ""; background: repeating-radial-gradient(ellipse at 20% 30%, transparent 0 18px, rgba(130, 215, 255, .035) 19px 20px, transparent 21px 38px); transform: scale(1.5); animation: player-tide 12s ease-in-out infinite alternate; }
.ocean-player__visual { position: relative; min-height: 48rem; overflow: hidden; border-right: 1px solid rgba(126, 204, 255, .16); background: radial-gradient(circle at 45% 35%, rgba(72, 188, 244, .27), transparent 33%), linear-gradient(180deg, #071d39, #020916); }
.ocean-player__visual::before { position: absolute; z-index: 1; inset: 0; content: ""; background: repeating-linear-gradient(115deg, transparent 0 36px, rgba(135, 220, 255, .06) 37px 39px, transparent 40px 73px); mix-blend-mode: screen; animation: caustic-slide 9s linear infinite; }
.ocean-player__visual img { position: absolute; z-index: 3; left: 50%; top: 48%; width: min(118%, 45rem); height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 2rem 2.5rem rgba(0, 6, 22, .55)) saturate(.9) hue-rotate(5deg); }
.ocean-player__visual img, .standards-section__wave img { height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.ocean-player__visual canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: .72; }
.ocean-player__depth { position: absolute; z-index: 5; left: 2rem; bottom: 2rem; color: rgba(220, 244, 255, .68); font: 500 .55rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.ocean-player__ring { position: absolute; z-index: 2; left: 50%; top: 50%; width: 24rem; aspect-ratio: 1; border: 1px solid rgba(111, 210, 255, .22); border-radius: 50%; transform: translate(-50%, -50%); animation: sonar 5s ease-out infinite; }
.ocean-player__ring--two { animation-delay: -2.5s; }
.ocean-player__console { min-width: 0; padding: clamp(2rem, 4vw, 4.5rem); }
.ocean-player__now > p:first-child { margin: 0 0 1rem; color: var(--blue-soft); font: 600 .58rem/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.ocean-player__now h3 { max-width: 14ch; margin: 0; font-size: clamp(2.4rem, 4.3vw, 5rem); font-weight: 300; line-height: .9; letter-spacing: -.06em; }
.ocean-player__now > p:last-child { margin: .85rem 0 0; color: var(--muted); font-size: 1rem; }
.ocean-player__timeline { display: grid; grid-template-columns: 3rem 1fr 3rem; gap: .9rem; align-items: center; margin: 3rem 0 1.7rem; color: #9ec6df; font: 500 .56rem/1 var(--mono); }
.ocean-player input[type="range"] { width: 100%; height: 2px; margin: 0; border: 0; appearance: none; background: linear-gradient(90deg, var(--blue-soft) 0 var(--range-progress, 0%), rgba(155, 213, 247, .2) var(--range-progress, 0%)); cursor: pointer; }
.ocean-player input[type="range"]::-webkit-slider-thumb { width: .85rem; height: .85rem; border: 2px solid #d9f4ff; border-radius: 50%; appearance: none; background: #52bdf1; box-shadow: 0 0 1.2rem rgba(83, 193, 244, .85); }
.ocean-player input[type="range"]::-moz-range-thumb { width: .7rem; height: .7rem; border: 2px solid #d9f4ff; border-radius: 50%; background: #52bdf1; box-shadow: 0 0 1.2rem rgba(83, 193, 244, .85); }
.ocean-player__controls { display: flex; align-items: center; gap: .8rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(126, 204, 255, .16); }
.ocean-player__controls button { display: grid; width: 2.8rem; height: 2.8rem; padding: 0; place-items: center; border: 1px solid rgba(126, 204, 255, .22); border-radius: 50%; background: rgba(133, 209, 249, .04); color: var(--ink); font: inherit; cursor: pointer; transition: transform 250ms ease, background 250ms ease, border-color 250ms ease; }
.ocean-player__controls button:hover { transform: translateY(-2px); border-color: var(--blue-soft); background: rgba(133, 209, 249, .12); }
.ocean-player__controls .ocean-player__play { width: 3.7rem; height: 3.7rem; border-color: transparent; background: var(--foam); color: var(--deep); box-shadow: 0 0 2.2rem rgba(86, 188, 240, .22); }
.ocean-player__volume { display: flex; gap: .8rem; align-items: center; width: min(14rem, 32%); margin-left: auto; color: #87abc3; font: 500 .53rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.track-list { max-height: 30rem; margin: 1.2rem 0 0; padding: 0; overflow: auto; list-style: none; scrollbar-color: rgba(112, 197, 240, .35) transparent; }
.track-list button { display: grid; grid-template-columns: 2rem 1fr auto; gap: 1rem; align-items: center; width: 100%; padding: .95rem .8rem; border: 0; border-bottom: 1px solid rgba(126, 204, 255, .1); background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background 250ms ease, color 250ms ease; }
.track-list button:hover, .track-list button.is-current { background: rgba(105, 199, 246, .09); }
.track-list button.is-current { color: #dff6ff; box-shadow: inset 2px 0 var(--blue-soft); }
.track-list button > span, .track-list time { color: #789bb4; font: 500 .55rem/1 var(--mono); }
.track-list b { display: grid; gap: .28rem; font-size: .9rem; font-weight: 500; }
.track-list small { color: #789bb4; font: 400 .68rem/1 var(--display); }

.process-section, .services-detail, .studio-section { padding: clamp(7rem, 11vw, 11rem) var(--page-pad); }
.process-section__lead { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5rem; align-items: end; max-width: 92rem; margin: 0 auto clamp(6rem, 10vw, 10rem); }
.process-section__lead .eyebrow { grid-column: 1 / -1; }
.process-section__lead h2 { font-size: clamp(3.4rem, 6.8vw, 7.6rem); }
.process-section__lead > p:last-child { max-width: 34rem; margin: 0; color: #526d82; font-size: 1.06rem; }
.process-values { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 92rem; margin: auto; border-block: 1px solid var(--light-line); }
.process-values article { min-height: 28rem; padding: 2rem; border-right: 1px solid var(--light-line); }
.process-values article:last-child { border: 0; }
.process-values span, .service-rows span, .studio-grid figcaption span { color: var(--blue-text); font: 600 .58rem/1 var(--mono); }
.process-values svg { width: 5rem; margin: 6rem 0 2rem; fill: none; stroke: var(--blue-text); stroke-width: 1.4; }
.process-values h3 { margin: 0 0 1rem; font-size: clamp(1.8rem, 2.6vw, 3rem); font-weight: 400; letter-spacing: -.045em; }
.process-values p { max-width: 20rem; color: #58738b; }

.testimonials { padding: clamp(7rem, 11vw, 11rem) var(--page-pad); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 92rem; margin: clamp(4rem, 7vw, 7rem) auto 4rem; background: rgba(126, 204, 255, .16); }
.testimonial-grid blockquote { display: grid; min-height: 24rem; margin: 0; padding: clamp(2rem, 3.5vw, 3.5rem); background: #030e20; }
.testimonial-grid blockquote p { margin: 0; color: #c2d6e5; font: 400 clamp(1.1rem, 1.5vw, 1.35rem)/1.45 var(--serif); }
.testimonial-grid blockquote footer { align-self: end; display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); }
.testimonial-grid blockquote b { font-weight: 500; }
.testimonial-grid blockquote span { color: var(--blue-soft); letter-spacing: .12em; }
.feedback-drawer { max-width: 92rem; margin: auto; border-block: 1px solid rgba(126, 204, 255, .18); }
.feedback-drawer summary { display: flex; justify-content: space-between; gap: 2rem; padding: 1.6rem 0; color: #c8e3f3; cursor: pointer; list-style: none; }
.feedback-drawer summary::-webkit-details-marker { display: none; }
.feedback-drawer[open] summary span { transform: rotate(45deg); }
.feedback-form, .project-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding: 1rem 0 3rem; }

.services-detail .section-heading { margin-bottom: clamp(5rem, 8vw, 8rem); }
.service-rows { max-width: 92rem; margin: auto; border-top: 1px solid var(--light-line); }
.service-rows article { display: grid; grid-template-columns: .2fr .9fr 1fr; gap: 2rem; align-items: start; padding: clamp(2.5rem, 5vw, 5rem) 0; border-bottom: 1px solid var(--light-line); }
.service-rows h3 { margin: 0; font-size: clamp(2rem, 3.5vw, 4.2rem); font-weight: 300; line-height: .95; letter-spacing: -.055em; }
.service-rows p { max-width: 34rem; margin: .2rem 0 0; color: #58738b; }

.standards-section { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 90svh; padding: clamp(7rem, 11vw, 11rem) var(--page-pad); }
.standards-section__copy { position: relative; z-index: 2; align-self: center; }
.standards-section__copy h2 { max-width: 10ch; font-size: clamp(3.5rem, 6.5vw, 7.3rem); }
.standards-section__copy ol { display: grid; gap: 1.5rem; max-width: 48rem; margin: 4rem 0 0; padding: 0; list-style: none; color: #bed2e1; }
.standards-section__copy li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; }
.standards-section__copy li span { color: var(--blue-soft); font: 600 .58rem/1.5 var(--mono); }
.standards-section__wave { position: relative; align-self: end; min-height: 35rem; }
.standards-section__wave::before { position: absolute; inset: 15% 0 0; content: ""; background: radial-gradient(circle, rgba(52, 167, 225, .25), transparent 60%); filter: blur(20px); }
.standards-section__wave img { position: absolute; inset: auto -10% 0 auto; width: 125%; max-width: none; filter: saturate(.85) hue-rotate(7deg) drop-shadow(0 2rem 3rem rgba(0, 0, 0, .5)); }

.about-section { display: grid; grid-template-columns: minmax(20rem, .78fr) 1.22fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; padding: clamp(7rem, 11vw, 11rem) var(--page-pad); }
.about-section__portrait { position: relative; max-width: 42rem; overflow: hidden; border-radius: 1.5rem 8rem 1.5rem 1.5rem; box-shadow: 0 3rem 6rem rgba(15, 78, 117, .19); }
.about-section__portrait::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); border-radius: inherit; }
.about-section__portrait img { display: block; width: 100%; height: auto; }
.about-section__copy { max-width: 52rem; }
.about-section__copy h2 { font-size: clamp(3.5rem, 6.5vw, 7.2rem); }
.about-section__copy > p:not(.eyebrow) { max-width: 45rem; color: #526d82; font-size: 1.06rem; }

.studio-section { background: var(--ice-panel); }
.studio-section .section-heading { margin-bottom: clamp(4rem, 7vw, 7rem); }
.studio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 92rem; margin: auto; }
.studio-grid figure { margin: 0; overflow: hidden; border-radius: 1.25rem; background: #cfe4f0; }
.studio-grid img { width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; filter: saturate(.72) contrast(1.05); transition: transform 800ms cubic-bezier(.2,.75,.2,1), filter 500ms ease; }
.studio-grid figure:hover img { transform: scale(1.035); filter: saturate(.95) contrast(1.02); }
.studio-grid figcaption { display: flex; gap: 1rem; padding: 1rem 1.2rem 1.2rem; color: #39586f; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 92rem; margin: 6rem auto 0; padding-top: 4rem; border-top: 1px solid var(--light-line); }
.capability-grid h3 { font-size: 1.35rem; font-weight: 500; }
.capability-grid ul { padding: 0; list-style: none; color: #526d82; }
.capability-grid li { padding: .65rem 0; border-bottom: 1px solid var(--light-line); }

.credits-wall { padding: clamp(7rem, 11vw, 11rem) var(--page-pad); }
.credits-wall .section-heading { margin-bottom: clamp(4rem, 7vw, 7rem); }
.credit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.8vw, 1.5rem); max-width: 92rem; margin: auto; }
.credit-card { position: relative; display: block; min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(126, 204, 255, .12); border-radius: 1.15rem; background: #020815; color: var(--ink); text-align: left; cursor: zoom-in; box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .22); transition: transform 500ms cubic-bezier(.2,.75,.2,1), border-color 300ms ease, box-shadow 500ms ease; }
.credit-card::after { position: absolute; inset: 0; content: ""; box-shadow: inset 0 0 0 1px rgba(200, 235, 255, .08); border-radius: inherit; pointer-events: none; }
.credit-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.75,.2,1), filter 400ms ease; }
.credit-card > span { position: absolute; inset: auto 0 0; display: grid; gap: .25rem; padding: 4rem 1rem 1rem; background: linear-gradient(transparent, rgba(0, 6, 18, .94)); opacity: 0; transform: translateY(1rem); transition: opacity 350ms ease, transform 450ms cubic-bezier(.2,.75,.2,1); }
.credit-card b { font-weight: 500; }
.credit-card small { color: #9ab9ce; }
.credit-card:hover, .credit-card:focus-visible { z-index: 2; transform: translateY(-.65rem) scale(1.015); border-color: rgba(115, 201, 240, .55); box-shadow: 0 2rem 5rem rgba(0, 5, 20, .5), 0 0 2.5rem rgba(46, 158, 218, .14); }
.credit-card:hover img, .credit-card:focus-visible img { transform: scale(1.045); filter: saturate(1.06); }
.credit-card:hover > span, .credit-card:focus-visible > span { opacity: 1; transform: none; }

.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(4rem, 8vw, 9rem); min-height: 95svh; padding: clamp(7rem, 11vw, 11rem) var(--page-pad); background: linear-gradient(150deg, #d9edf7, var(--ice-bg) 58%); }
.contact__heading { align-self: start; position: sticky; top: calc(var(--header-height) + 4rem); }
.contact h2 { font-size: clamp(4.5rem, 8.5vw, 9rem); }
.contact__heading > p:last-child { max-width: 29rem; color: #526d82; }
.project-form { align-self: center; padding: 0; }
.feedback-form label, .project-form label { display: grid; gap: .65rem; color: var(--blue-text); font: 600 .58rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.feedback-form input, .feedback-form textarea, .feedback-form select, .project-form input, .project-form textarea, .project-form select { width: 100%; min-width: 0; padding: 1rem 0; border: 0; border-bottom: 1px solid rgba(70, 164, 215, .42); border-radius: 0; outline: none; background: transparent; color: inherit; font: 400 1rem/1.4 var(--display); text-transform: none; transition: border-color 250ms ease, box-shadow 250ms ease; }
.feedback-form select, .project-form select { appearance: auto; }
.feedback-form input:focus, .feedback-form textarea:focus, .feedback-form select:focus, .project-form input:focus, .project-form textarea:focus, .project-form select:focus { border-color: var(--blue-text); box-shadow: 0 1px var(--blue-text); }
.feedback-form .text-button { color: var(--ink); border-color: rgba(126, 204, 255, .25); }
.span-all { grid-column: 1 / -1; }
.text-button { display: flex; justify-content: space-between; gap: 2rem; padding: 1.2rem 0; border: 0; border-bottom: 1px solid var(--blue-text); background: transparent; color: var(--ink-dark); font: 600 .65rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.form-note { margin: 0; color: #698399; font-size: .78rem; }

.credit-dialog { width: min(68rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; overflow: hidden; border: 1px solid rgba(133, 210, 248, .28); border-radius: 1.5rem; background: #030d20; color: var(--ink); box-shadow: 0 3rem 8rem rgba(0, 0, 0, .7); }
.credit-dialog[open] { display: grid; grid-template-columns: 1.15fr .85fr; }
.credit-dialog::backdrop { background: rgba(0, 5, 17, .82); backdrop-filter: blur(14px); }
.credit-dialog > img { width: 100%; height: 100%; max-height: calc(100svh - 2rem); object-fit: cover; }
.credit-dialog > div { align-self: end; padding: clamp(2rem, 5vw, 5rem); }
.credit-dialog h2 { margin: 0; font-size: clamp(2.8rem, 5vw, 5.5rem); font-weight: 300; line-height: .9; letter-spacing: -.06em; }
.credit-dialog [data-credit-dialog-artist] { color: var(--muted); }
.credit-dialog__close { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: grid; width: 2.8rem; height: 2.8rem; padding: 0; place-items: center; border: 1px solid rgba(180, 225, 250, .25); border-radius: 50%; background: rgba(0, 7, 20, .55); color: white; font-size: 1.4rem; cursor: pointer; }

.has-interactions [data-reveal] { opacity: 0; transform: translate3d(0, 2.5rem, 0); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 1100ms cubic-bezier(.2,.75,.2,1); }
.has-interactions [data-reveal].is-revealed { opacity: 1; transform: none; }

body > footer { display: grid; grid-template-columns: 1fr auto auto; gap: 3rem; align-items: center; min-height: 11rem; padding: 2rem var(--page-pad); border-top: 1px solid var(--line); background: var(--deep); color: var(--muted); font: 500 .58rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
body > footer a { color: var(--blue-soft); text-decoration: none; }
body > footer p:last-child { text-align: right; }

@keyframes sonar { 0% { opacity: .65; transform: translate(-50%, -50%) scale(.35); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes player-tide { to { transform: translate3d(2%, -1%, 0) scale(1.58); } }
@keyframes caustic-slide { to { transform: translate3d(80px, -30px, 0); } }

@media (max-width: 760px) {
  :root { --header-height: 4.5rem; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .brand svg { width: 2.75rem; }
  .cinematic { height: 980svh; }
  .story-copy { width: min(32rem, 90vw); }
  .story-copy h1, .story-copy h2 { font-size: clamp(2.9rem, 13vw, 5.3rem); }
  .story-copy--opening, .story-copy--currents { top: 23%; }
  .story-copy--submerge, .story-copy--relationship { top: 23%; text-align: left; left: var(--page-pad); right: auto; }
  .story-copy--ascent, .story-copy--finale { top: 22%; }
  .orientation { bottom: 1.25rem; }
  .depth-meter { display: none; }
  .orientation > i { width: 3.8rem; }
  .after-story__intro, .section-heading, .process-section__lead, .about-section, .contact { grid-template-columns: 1fr; }
  .after-story__intro { gap: 2.5rem; }
  .section-heading .eyebrow, .process-section__lead .eyebrow { grid-column: auto; }
  .ocean-player { grid-template-columns: 1fr; }
  .ocean-player__visual { min-height: 28rem; border-right: 0; border-bottom: 1px solid rgba(126, 204, 255, .16); }
  .ocean-player__visual img { width: 120%; }
  .ocean-player__console { padding: 1.5rem; }
  .ocean-player__controls { flex-wrap: wrap; }
  .ocean-player__volume { width: 100%; margin: .8rem 0 0; }
  .process-values, .testimonial-grid, .studio-grid, .capability-grid { grid-template-columns: 1fr; }
  .process-values article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--light-line); }
  .process-values svg { margin-top: 4rem; }
  .testimonial-grid blockquote { min-height: 19rem; }
  .feedback-form, .project-form { grid-template-columns: 1fr; }
  .service-rows article { grid-template-columns: 3rem 1fr; }
  .service-rows article p { grid-column: 2; }
  .standards-section { grid-template-columns: 1fr; }
  .standards-section__wave { display: flex; min-height: 0; margin-top: 3.5rem; align-items: flex-end; justify-content: center; }
  .standards-section__wave::before { inset: 0; }
  .standards-section__wave img { position: relative; inset: auto; display: block; width: min(100%, 32rem); height: auto; }
  .about-section__portrait { max-width: 30rem; border-radius: 1.2rem 5rem 1.2rem 1.2rem; }
  .credit-grid { grid-template-columns: repeat(2, 1fr); }
  .credit-card > span { position: relative; padding: .9rem; background: none; opacity: 1; transform: none; }
  .contact__heading { position: static; }
  .span-all { grid-column: auto; }
  .credit-dialog[open] { grid-template-columns: 1fr; overflow: auto; }
  .credit-dialog > img { max-height: 58svh; }
  body > footer { grid-template-columns: 1fr; }
  body > footer p:last-child { text-align: left; }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .site-header nav { gap: 1rem; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .ocean-player { grid-template-columns: .8fr 1.2fr; }
  .credit-grid { grid-template-columns: repeat(3, 1fr); }
  .studio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cinematic { height: 700svh; }
  .story-copy { filter: none; }
  .ocean-player::after, .ocean-player__visual::before, .ocean-player__ring { animation: none; }
  .has-interactions [data-reveal] { opacity: 1; transform: none; }
}