:root {
  --ink: #090909;
  --panel: #111;
  --paper: #f1f0eb;
  --muted: #979797;
  --line: rgba(255,255,255,.15);
  --orange: #ff4b1b;
  --width: 1440px;
  --heading: "Manrope", sans-serif;
  --body: "Inter", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--ink); }
body { background: var(--ink); color: var(--paper); font-family: var(--body); line-height: 1.5; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img, video { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button { cursor: pointer; }
::selection { background: var(--orange); color: #fff; }
.page-width { width: min(calc(100% - 80px), var(--width)); margin-inline: auto; }
.section { padding: clamp(96px, 11vw, 180px) 0; }
.eyebrow { color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; letter-spacing: -.055em; line-height: .94; }
h2 { font-size: clamp(2.8rem, 6.6vw, 7.4rem); text-transform: uppercase; }
h2 span { color: #676767; }

.loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(5,5,5,.38); transition: opacity .72s ease, visibility .72s ease, background .9s ease; }
.focus-lock { display: grid; justify-items: center; gap: 18px; animation: logo-focus .85s cubic-bezier(.2,.8,.2,1) both; }
.focus-lock img { width: 150px; height: 82px; object-fit: contain; }
.focus-lock span { color: rgba(255,255,255,.64); font-size: .65rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.loader.is-resolving { background: transparent; }
.loader.is-resolving .focus-lock { opacity: 0; filter: blur(8px); transform: scale(.96); transition: opacity .55s ease, filter .55s ease, transform .55s ease; }
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes logo-focus {
  0% { opacity: 0; filter: blur(12px); transform: scale(1.08); }
  55% { opacity: 1; filter: blur(1px); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

.site-header { position: fixed; z-index: 1000; inset: 0 0 auto; height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(40px, calc((100vw - var(--width))/2)); border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, height .25s; }
.site-header.scrolled { height: 74px; background: rgba(9,9,9,.88); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { width: 92px; height: 52px; display: flex; align-items: center; }
.brand img { height: 100%; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; gap: 34px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.desktop-nav a, .header-cta { transition: color .2s; }
.desktop-nav a:hover { color: var(--orange); }
.header-cta { justify-self: end; border: 0; background: none; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.header-cta span { color: var(--orange); margin-left: 8px; }
.menu-button, .mobile-nav { display: none; }

.hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; height: 100%; object-fit: cover; background: #111; transform: scale(1.01); filter: blur(0); transition: filter 1.15s cubic-bezier(.2,.8,.2,1), transform 1.15s cubic-bezier(.2,.8,.2,1); }
.is-loading .hero-media { filter: blur(22px); transform: scale(1.09); }
.is-loading.focus-resolving .hero-media { filter: blur(0); transform: scale(1.01); }
.is-loading .hero .reveal { opacity: 0; transform: translateY(32px); }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.25) 58%, rgba(0,0,0,.15)), linear-gradient(0deg, rgba(0,0,0,.88), transparent 60%), radial-gradient(circle at 70% 35%, transparent, rgba(0,0,0,.22)); }
.hero-content { position: relative; z-index: 2; padding: 180px 0 90px; }
.hero h1 { max-width: 1200px; margin-top: 22px; font-size: clamp(3.9rem, 9vw, 10.3rem); text-transform: uppercase; }
.hero h1 em { display: block; color: rgba(255,255,255,.55); font-style: normal; }
.hero-bottom { width: min(100%, 920px); display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-top: 44px; }
.hero-bottom > p { max-width: 570px; color: rgba(255,255,255,.75); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.button { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 25px; font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; transition: transform .2s, background .2s; }
.button { border: 0; }
.button:hover { transform: translateY(-2px); }
.button-solid { background: var(--orange); color: #fff; }
.button-solid:hover { background: #ff6138; }
.scroll-cue { position: absolute; z-index: 3; right: max(40px, calc((100vw - var(--width))/2)); bottom: 40px; color: rgba(255,255,255,.58); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue span { color: var(--orange); margin-left: 12px; }

.section-intro { display: grid; grid-template-columns: .36fr 1.45fr .62fr; align-items: end; gap: 50px; margin-bottom: 72px; }
.section-intro > p:last-child { color: var(--muted); line-height: 1.75; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.project { position: relative; grid-column: span 7; min-height: 610px; overflow: hidden; background: var(--panel); }
.project:nth-child(4n+2), .project:nth-child(4n+3) { grid-column: span 5; }
.project video { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s; }
.project:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.82), transparent 58%); }
.project-copy { position: absolute; z-index: 1; inset: auto 30px 28px; }
.project-copy span { color: rgba(255,255,255,.56); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.project-copy h3 { margin-top: 8px; font-size: clamp(1.8rem, 3.5vw, 4rem); text-transform: uppercase; }
.project:hover video { transform: scale(1.025); }

.statement { background: var(--paper); color: var(--ink); }
.statement-grid { display: grid; grid-template-columns: .36fr 2.07fr; gap: 50px; }
.statement .eyebrow { color: #777; padding-top: 10px; }
.statement h2 { max-width: 1150px; }
.statement h2 span { color: #a3a3a0; }
.statement div > p:last-child { max-width: 680px; margin: 44px 0 0 auto; color: #555; font-size: 1.05rem; line-height: 1.8; }

.method { background: #0c0c0c; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.steps article { min-height: 330px; padding: 30px; border-right: 1px solid var(--line); }
.steps article:first-child { border-left: 1px solid var(--line); }
.steps span { color: var(--orange); font-size: .68rem; letter-spacing: .14em; }
.steps h3 { margin-top: 105px; font-size: clamp(2rem, 3.4vw, 3.8rem); text-transform: uppercase; }
.steps p { max-width: 340px; margin-top: 20px; color: var(--muted); line-height: 1.7; }

.packages { background: var(--ink); }
.package-intro { margin-bottom: 46px; }
.package-list { border-top: 1px solid var(--line); }
.package { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(470px, 1.28fr) auto; gap: 50px; align-items: start; padding: 50px 28px; border-bottom: 1px solid var(--line); transition: background .25s; }
.package:hover, .package.featured { background: #121212; }
.package.featured { border-left: 2px solid var(--orange); }
.package-name > span { color: var(--orange); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.package-name h3 { margin: 12px 0 7px; font-size: clamp(2.1rem, 4vw, 4.8rem); text-transform: uppercase; }
.package-name p { max-width: 340px; color: var(--muted); line-height: 1.55; }
.package-name .package-tagline { margin-bottom: 14px; color: var(--orange); font-weight: 600; }
.package-details { display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); gap: 0 32px; margin: 0; }
.package-details div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.package-details dt { color: var(--paper); line-height: 1.35; }
.package-details dd { margin: 0; color: var(--orange); font-weight: 600; text-align: right; white-space: nowrap; }
.package-details .unavailable { opacity: .32; }
.package > .booking-link { align-self: center; border: 0; background: none; color: var(--orange); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }

.contact { min-height: 76vh; display: flex; align-items: center; background: var(--paper); color: var(--ink); }
.contact .eyebrow { color: #777; }
.contact h2 { margin: 25px 0 45px; }
.contact h2 span { color: #aaa9a4; }
footer { padding: 42px 0; background: var(--ink); border-top: 1px solid var(--line); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #6f6f6f; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-inner img { width: 90px; height: 54px; object-fit: contain; object-position: left center; }
.footer-inner p:last-child { justify-self: end; }

.booking-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; background: transparent; color: var(--paper); }
.booking-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(12px); }
.booking-panel { min-height: 100%; display: grid; grid-template-columns: minmax(300px,.72fr) minmax(520px,1.28fr); gap: clamp(45px,7vw,120px); align-items: center; padding: clamp(90px,10vw,150px) max(40px,calc((100vw - var(--width))/2)); background: #0c0c0c; }
.booking-close { position: fixed; z-index: 2; top: 28px; right: 34px; width: 48px; height: 48px; border: 1px solid var(--line); background: #111; }
.booking-close span { position: absolute; left: 12px; top: 23px; width: 22px; height: 1px; background: #fff; }
.booking-close span:first-child { transform: rotate(45deg); }
.booking-close span:last-child { transform: rotate(-45deg); }
.booking-heading h2 { margin: 24px 0 28px; font-size: clamp(3rem,5.7vw,7rem); }
.booking-heading > p:last-child { max-width: 500px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.booking-frame-shell { min-height: 650px; position: relative; overflow: hidden; border: 1px solid var(--line); background: #111; }
.booking-frame-shell iframe { width: 100%; height: 690px; border: 0; background: #111; }
.booking-frame-shell:not(.is-connected) iframe { display: none; }
.booking-setup { min-height: 650px; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px,5vw,70px); }
.booking-setup span { color: var(--orange); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.booking-setup p { max-width: 500px; margin-top: 22px; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.booking-frame-shell.is-connected .booking-setup { display: none; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .page-width { width: min(calc(100% - 40px), var(--width)); }
  .site-header { padding-inline: 20px; grid-template-columns: 1fr auto; }
  .desktop-nav, .header-cta { display: none; }
  .menu-button { position: relative; z-index: 2; display: block; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
  .menu-button span { position: absolute; right: 0; width: 26px; height: 1px; background: #fff; transition: transform .2s, top .2s; }
  .menu-button span:first-child { top: 18px; }
  .menu-button span:last-child { top: 26px; }
  .menu-button[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
  .mobile-nav { position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 28px; background: var(--ink); visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; font-family: var(--heading); font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
  .mobile-nav button { width: max-content; border: 0; background: none; color: var(--orange); font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-nav.open { visibility: visible; opacity: 1; }
  .mobile-nav a:last-child { margin-top: 20px; color: var(--orange); font-family: var(--body); font-size: .72rem; letter-spacing: .12em; }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 28px; }
  .scroll-cue { display: none; }
  .section-intro { grid-template-columns: 1fr; gap: 24px; }
  .section-intro > p:last-child { max-width: 620px; }
  .project, .project:nth-child(4n+2), .project:nth-child(4n+3) { grid-column: span 6; min-height: 440px; }
  .statement-grid { grid-template-columns: 1fr; gap: 35px; }
  .statement div > p:last-child { margin-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .steps article, .steps article:first-child { min-height: 230px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .steps h3 { margin-top: 55px; }
  .package { grid-template-columns: minmax(210px, .7fr) 1.3fr; }
  .package > .booking-link { grid-column: 2; }
  .booking-panel { grid-template-columns: 1fr; align-items: start; padding: 110px 20px 40px; }
  .booking-heading h2 { max-width: 700px; }
}

@media (max-width: 620px) {
  .site-header { height: 76px; }
  .brand { width: 78px; height: 45px; }
  .hero-content { padding: 150px 0 50px; }
  .hero h1 { font-size: clamp(3.1rem, 16vw, 5.4rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .project, .project:nth-child(4n+2), .project:nth-child(4n+3) { grid-column: 1 / -1; min-height: 64svw; }
  .project-copy { inset: auto 20px 20px; }
  .package { grid-template-columns: 1fr; gap: 28px; padding-inline: 18px; }
  .package-details { grid-template-columns: 1fr; }
  .package > .booking-link { grid-column: 1; }
  .booking-dialog { overflow-y: auto; }
  .booking-panel { gap: 42px; }
  .booking-frame-shell, .booking-setup { min-height: 610px; }
  .booking-frame-shell iframe { height: 640px; }
  .footer-inner { grid-template-columns: 1fr; gap: 18px; }
  .footer-inner p:last-child { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}