/* Coastal light, translucent controls, and soft spatial depth. */
:root {
  --paper:#f5f3ee;
  --ink:#202e3a;
  --navy:#202e3a;
  --line:#20394a24;
  --glass:linear-gradient(135deg,#ffffffd9,#ffffff8c);
  --glass-edge:#ffffffd9;
  --glass-shadow:0 14px 40px -20px #173d5159,inset 0 1px 0 #fff;
}
body {
  font-family:-apple-system,BlinkMacSystemFont,'DM Sans',sans-serif;
  background:radial-gradient(ellipse at 95% 0%,#bbd9df80,transparent 30%),
    radial-gradient(ellipse at 0% 18%,#e9d6b870,transparent 30%),var(--paper);
}
html {scroll-padding-top:120px}
h1,h2,h3 {font-family:-apple-system,BlinkMacSystemFont,'DM Sans',sans-serif;letter-spacing:-.04em}
h1,h2 {font-weight:600}
.header {
  position:sticky;top:16px;z-index:20;
  width:calc(100% - 8%);max-width:1200px;margin:22px auto 28px;
  padding:12px 16px 12px 24px;border:1px solid var(--glass-edge);
  border-radius:100px;background:#f4f5f2ed;
  box-shadow:var(--glass-shadow);
}
.header nav {gap:6px}
.header nav a {padding:10px 17px;border-radius:30px;transition:background .2s}
.header nav a:hover,.header nav a:focus-visible {background:#ffffffa6}
.nav-contact {
  border:1px solid #fff9;border-radius:40px;padding:11px 20px;
  background:#ffffff8c;box-shadow:inset 0 1px 0 #fff;
}
.opening-film {
  position:relative;margin:0 5%;padding:12px;
  border:1px solid var(--glass-edge);border-radius:38px;
  background:linear-gradient(145deg,#e5edf0d9,#f9f8f2d9);
  color:var(--ink);box-shadow:0 28px 65px -36px #173d5170,inset 0 1px 0 #fff;
}
.opening-film video {
  border-radius:25px;width:100%;height:auto;max-height:none;
  object-fit:contain;aspect-ratio:854/428;
}
.film-edge {padding:9px 15px 17px;color:#3f5360;letter-spacing:.08em}
.film-bottom {padding:14px 8px 2px 16px;letter-spacing:0;font-size:14px}
.watch,.text-link,.film-card-link,.button,dialog button {
  border-radius:100px;border:1px solid #ffffffc9;
  background:var(--glass);box-shadow:var(--glass-shadow);
  color:var(--ink);padding:12px 21px;text-decoration:none;
  transition:transform .25s,box-shadow .25s,background .25s;
}
.watch {font-weight:500;min-width:166px}
.watch span {margin-left:20px}
.hero {padding-top:65px;grid-template-columns:1fr 185px}
.hero h1 {font-size:clamp(32px,4vw,55px)}
.hero-bottom {align-items:center}
.hero-bottom .text-link {flex-shrink:0}
.eyebrow {letter-spacing:.08em;color:#596a74}
.location-line {color:#526570;line-height:1.8}
.logo-scene {
  position:relative;isolation:isolate;padding:28px 18px 20px;border-radius:42px;
  border:1px solid var(--glass-edge);background:var(--glass);
  box-shadow:0 24px 50px -28px #427a8a66,inset 0 1px 0 #fff;
}
.logo-scene:before {
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(circle at var(--shine-x,25%) var(--shine-y,15%),#ffffffd9,transparent 65%);
  pointer-events:none;
}
.hero-mark {width:120px;filter:drop-shadow(0 5px 6px #234b5920)}
.logo-caption {font-size:12px;line-height:1.4;color:#526570}
.work {border:0;padding-top:35px}
.featured-grid {gap:65px 8%}
.film-card-image {border-radius:28px;box-shadow:0 20px 35px -24px #26465480}
.portrait-project .film-card-image {border-radius:32px}
.film-card-details {border:0;padding:21px 4px;gap:8px 12px}
.film-card-link {font-size:13px;padding:10px 16px;white-space:nowrap}
.film-card-details h3 {font-size:23px}
.film-card-category {color:#566771}
.archive {border:1px solid #ffffffd9;border-radius:24px;background:#ffffff75;box-shadow:inset 0 1px 0 #fff;padding:0 25px}
.archive-grid .video-frame {border-radius:18px;overflow:hidden}
.about {
  margin:25px 5%;padding:65px 6%;border-radius:40px;
  border:1px solid #fff;background:linear-gradient(125deg,#d5e4e8b3,#f6f3ecc7);
  box-shadow:0 20px 60px -45px #173d5170,inset 0 1px 0 #fff;
}
.about-photo img {border-radius:30px;box-shadow:0 20px 40px -25px #203c5766}
.about-photo:after {font-size:12px;letter-spacing:.03em;color:#566771;padding-left:5px}
.about-copy .text-link {white-space:normal}
.service-list {border:0;display:grid;gap:12px}
.service-list details {
  border:1px solid #fff;border-radius:23px;background:#ffffff85;
  box-shadow:0 6px 16px -14px #1b354a55,inset 0 1px 0 #fff;padding:0 24px;
}
.service-list summary {padding:23px 0}
.service-list h3 {font-size:clamp(19px,2.1vw,27px)}
.service-list summary b {width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#fff9;text-align:center;line-height:30px;transition:transform .25s}
.service-list details[open] summary b {transform:rotate(45deg)}
.service-body {padding-left:0}
.contact {
  margin:10px 5% 30px;border-radius:40px;padding:60px 6%;
  background:radial-gradient(ellipse at 100% 0,#81aab355,transparent 70%),
    radial-gradient(ellipse at 0% 100%,#b8844b33,transparent 60%),#203d4a;
  box-shadow:0 25px 55px -35px #15394799;
}
.contact .eyebrow {color:#d5e4e9}
.contact h2 {font-weight:500}
.booking-form {
  border:1px solid #ffffff40;border-radius:28px;padding:28px;
  background:#ffffff12;box-shadow:inset 0 1px 0 #ffffff36,0 15px 40px -25px #102c4480;
}
.field input,.field textarea {border-radius:14px;border:1px solid #ffffff66;background:#ffffff0d}
.field input:focus,.field textarea:focus {background:#ffffff1a;outline-color:#efd2aa}
.field label {font-size:14px}
.button {background:#f6f4ee;font-weight:600;min-width:170px}
.booking-note,.field p {color:#d5dfe3}
.booking-status[data-state=error] {color:#ffe0c4}
.booking-status[data-state=success] {color:#dbf5e4}
dialog {
  background:#263b48f5;border:1px solid #ffffff66;border-radius:28px;
  padding:20px;box-shadow:0 40px 100px #08172280;
}
dialog::backdrop {background:#0d202dc7}
dialog video,#project-player {border-radius:16px;overflow:hidden}
dialog button {padding:10px 18px;margin:0}
.dialog-top {margin-bottom:18px}
footer {padding-bottom:35px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header {background:linear-gradient(135deg,#ffffffe0,#edf3f0b8);-webkit-backdrop-filter:blur(24px) saturate(145%);backdrop-filter:blur(24px) saturate(145%)}
  .watch,.logo-scene { -webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%)}
  dialog {background:#263b48d9;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .watch:hover,.text-link:hover,.film-card-link:hover,.button:hover {transform:translateY(-2px);box-shadow:0 16px 30px -16px #173d5166,inset 0 1px 0 #fff}
  .logo-scene:hover .logo-wheel {transform:rotate(8deg);transition:transform .9s}
}
@media(max-width:900px) {
  .header {width:94%;gap:12px;padding-left:18px}
  .header nav a {padding:10px 12px}
  .nav-contact {font-size:13px;padding:10px 14px}
  .film-card-details {display:block}
  .film-card-category {display:block;margin-bottom:6px}
  .film-card-link {display:inline-flex;margin-top:12px;font-size:14px}
  .about {gap:6%;padding:50px 6%}
  .contact-bottom {grid-template-columns:.8fr 1.2fr;gap:5%}
}
@media(max-width:650px) {
  html {scroll-padding-top:98px}
  .header {top:10px;width:94%;margin:12px auto 20px;padding:9px 12px 9px 16px;gap:10px}
  .header nav {gap:0}
  .header nav a {padding:10px;min-height:44px}
  .opening-film {margin:0 3%;padding:8px;border-radius:24px}
  .opening-film video {border-radius:16px}
  .film-edge {padding:7px 7px 12px;font-size:12px;letter-spacing:.015em;gap:10px}
  .film-bottom {padding:12px 5px 4px;gap:10px}
  .film-bottom>span {font-size:12px;max-width:130px}
  .watch {min-width:0;padding:10px 14px;font-size:14px;white-space:nowrap}
  .watch span {margin-left:8px}
  .hero {padding:36px 6% 40px;grid-template-columns:1fr;gap:30px}
  .hero h1 {font-size:34px}
  .logo-scene {display:flex;justify-self:start;padding:15px 22px 15px 16px;gap:18px;border-radius:25px}
  .hero-mark {width:65px}
  .logo-caption {max-width:110px;font-size:12px}
  .location-line {font-size:13px}
  .film-card-image {border-radius:22px}
  .portrait-project .film-card-image {border-radius:27px}
  .film-card-details {padding:16px 3px 0}
  .featured-grid {gap:36px}
  .archive {padding:0 18px;border-radius:22px}
  .about {margin:10px 3%;padding:32px 6%;border-radius:28px;gap:30px}
  .about-photo img {border-radius:23px}
  .service-list details {padding:0 17px;border-radius:20px}
  .service-list summary {gap:12px}
  .service-list h3 {font-size:19px;line-height:1.35}
  .contact {margin:10px 3% 20px;padding:35px 6%;border-radius:28px}
  .contact-bottom {grid-template-columns:1fr;gap:24px}
  .booking-form {padding:20px 16px;border-radius:22px}
  .contact h2 {font-size:44px}
  dialog {padding:14px;border-radius:22px}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .header,.logo-scene,.watch,.text-link,.film-card-link {background:#f5f5f0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .booking-form,dialog {background:#263f4d;-webkit-backdrop-filter:none;backdrop-filter:none}
  .service-list details,.archive {background:#fff}
}

/* Shared page edges and a stable, top-aligned portfolio. */
.header,.opening-film,.hero,.section,.about,.contact,footer {
  width:90%;max-width:1200px;margin-left:auto;margin-right:auto;
}
.header .brand>img:not(.nav-mark),footer .brand>img {filter:brightness(0);opacity:.86}
.header {display:grid;grid-template-columns:1fr auto 1fr;padding-left:24px;padding-right:24px}
.header .brand {justify-self:start}
.header nav {justify-self:center}
.nav-contact {justify-self:end}
.hero,.section {padding-left:24px;padding-right:24px}
.hero {display:block;padding-bottom:64px}
.hero-copy {max-width:none}
.hero h1 {font-size:clamp(44px,5.15vw,72px);max-width:1050px;margin-bottom:45px}
.hero-bottom {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:end}
.hero-bottom .text-link {margin:0;justify-self:end}
.hero .logo-scene {display:none}
.section-heading {display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px}
.section-heading>p {justify-self:end}
.featured-grid {grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:36px 40px}
.featured-grid>.project:nth-child(1) {grid-column:1;grid-row:1 / span 2;margin:0;width:100%;justify-self:stretch}
.featured-grid>.project:nth-child(2) {grid-column:2;grid-row:1;margin:0}
.featured-grid>.project:nth-child(3) {grid-column:2;grid-row:2;margin:0}
.film-card-details {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:18px 0 0;gap:7px 14px}
.film-card-category {grid-column:1 / -1;margin:0}
.film-card-details h3 {margin:0;line-height:1.3}
.film-card-link {margin:0;justify-self:end}
.about,.contact {padding-left:24px;padding-right:24px}
.about {grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:40px;align-items:start}
.about-photo {max-width:none;width:100%}
.about-photo:after {padding-left:0}
.about-copy .eyebrow {margin-bottom:20px}
.contact-bottom {grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:40px;align-items:start}
.booking-intro h2 {margin-bottom:52px}
.contact-logo {
  display:block;position:absolute;width:min(760px,60vw);height:auto;
  right:-190px;bottom:-310px;opacity:.075;transform:translateY(var(--contact-drift,0px)) rotate(12deg);
  color:#fff;pointer-events:none;z-index:0;
}
.contact-mark {display:block;width:100%;height:auto;fill:currentColor}
.contact-mark path {fill:currentColor}
.service-list summary {display:grid;grid-template-columns:24px minmax(0,1fr) auto 30px;gap:16px}
.service-meta,.service-list summary b {margin-left:0}
.service-body {gap:40px}
footer {padding-left:24px;padding-right:24px;justify-content:flex-start;gap:20px 32px}
footer>div {margin-left:auto}
@media(max-width:900px) {
  .header {grid-template-columns:auto 1fr auto;gap:12px;padding:12px 18px}
  .featured-grid,.about,.contact-bottom {gap:28px}
  .hero-bottom {gap:30px}
  .film-card-details {grid-template-columns:1fr}
  .film-card-link {justify-self:start;margin-top:6px}
  .service-list summary {grid-template-columns:24px minmax(0,1fr) 30px}
}
@media(max-width:700px) {
  .header {grid-template-columns:auto 1fr}
  .header nav {justify-self:end}
  .nav-contact {display:none}
}
@media(max-width:650px) {
  .header,.opening-film,.hero,.section,.about,.contact,footer {width:94%}
  .header {padding:9px 14px;gap:8px}
  .hero,.section,footer {padding-left:14px;padding-right:14px}
  .hero {padding-bottom:40px}
  .hero h1 {font-size:36px;margin-bottom:28px}
  .hero-bottom {grid-template-columns:1fr;gap:22px}
  .hero-bottom .text-link {justify-self:start}
  .section-heading {grid-template-columns:1fr;gap:16px}
  .section-heading>p {justify-self:start;margin:0}
  .featured-grid {grid-template-columns:1fr;gap:32px}
  .featured-grid>.project:nth-child(n) {grid-column:1;grid-row:auto;width:100%;margin:0;justify-self:stretch}
  .film-card-details {grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .film-card-details h3 {font-size:20px}
  .film-card-link {justify-self:end;margin:0;padding:10px 13px}
  .about,.contact {padding:32px 14px;grid-template-columns:1fr}
  .about-photo {width:100%;max-width:none}
  .contact-bottom {grid-template-columns:1fr;gap:24px}
  .booking-intro h2 {margin-bottom:28px}
  .contact-logo {width:520px;right:-230px;bottom:-190px;opacity:.065}
  .service-body {gap:16px}
  footer>div {margin-left:0}
}