:root {
  --ink: #071013;
  --ink-soft: #142428;
  --paper: #eef2ed;
  --paper-warm: #e5ebe5;
  --aqua: #7ec9c4;
  --aqua-bright: #b8ebe6;
  --line: rgba(7, 16, 19, 0.18);
  --white-line: rgba(255, 255, 255, 0.2);
  --font-body: "Manrope", sans-serif;
  --font-display: "Prata", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 10px 14px; color: #000; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(24px, 5vw, 76px); color: white; transition: background .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(3, 9, 12, .86); backdrop-filter: blur(18px); border-color: rgba(255,255,255,.09); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.03em; }
.brand-mark { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; position: relative; overflow: hidden; }
.brand-mark::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 3px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; transform: rotate(-7deg); }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: .83rem; }
.desktop-nav a { color: rgba(255,255,255,.72); transition: color .2s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: white; }
.header-cta { justify-self: end; background: white; color: #050a0d; padding: 11px 18px; border-radius: 4px; font-size: .82rem; font-weight: 700; transition: transform .2s ease; }
.header-cta:hover { transform: translateY(-2px); }
.menu-toggle { display: none; justify-self: end; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 17px; height: 1px; background: white; transition: transform .3s ease; }
.menu-open .menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 40; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 42px; padding: 100px 28px 40px; background: rgba(3,9,12,.98); color: white; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity .35s ease, transform .35s ease, visibility .35s; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 18px; font-family: var(--font-display); font-size: clamp(2rem, 11vw, 3.5rem); line-height: 1.15; }

.hero { position: relative; min-height: 100svh; overflow: hidden; background: #03080a; color: white; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,7,10,.93) 0%, rgba(2,7,10,.62) 39%, rgba(2,7,10,.08) 72%), linear-gradient(0deg, rgba(2,7,10,.65) 0%, transparent 48%); }
.hero-content { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(130px, 18vh, 190px) clamp(24px, 6vw, 90px) clamp(40px, 8vh, 80px); }
.hero-top { max-width: 760px; }
.eyebrow { margin: 0 0 24px; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.7); }
.eyebrow.dark { color: #557075; }
.hero h1, .section h2, .approach h2, .contact-section h2 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -.045em; }
.hero h1 { font-size: clamp(3.4rem, 7.7vw, 8.2rem); line-height: .96; }
.hero h1 em { font-weight: 400; color: var(--aqua-bright); }
.hero-bottom { max-width: 430px; }
.hero-bottom p { margin: 0 0 26px; color: rgba(255,255,255,.65); font-size: clamp(1rem, 1.4vw, 1.16rem); }
.hero-side { position: absolute; z-index: 2; right: clamp(24px, 4vw, 64px); bottom: 58px; margin: 0; writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; color: rgba(255,255,255,.5); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 50px; padding: 13px 20px; border: 0; border-radius: 4px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease, opacity .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.button-light { color: #03080a; background: white; }
.button-dark { color: white; background: var(--ink); }
.reveal { animation: rise .9s cubic-bezier(.2,.8,.2,1) both .2s; }
.reveal-delay { animation-delay: .65s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.section { padding: clamp(90px, 12vw, 170px) clamp(24px, 6vw, 90px); }
.services-section { background: var(--paper); }
.section-heading { display: grid; grid-template-columns: minmax(220px,.75fr) 1.5fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: end; padding-bottom: 72px; }
.section-heading .eyebrow { align-self: start; }
.section-heading h2, .booking-intro h2 { font-size: clamp(3rem, 5.8vw, 6.4rem); line-height: 1; }
.section-heading > p:last-child, .booking-intro > p { margin: 0; max-width: 390px; color: #526064; }
.service-list { border-top: 1px solid var(--line); }
.service-card { display: grid; grid-template-columns: 70px 1.7fr .6fr 48px; gap: 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease, background .2s ease; }
.service-card.in-view, .service-card:first-child { opacity: 1; transform: none; }
.service-card:hover { background: rgba(255,255,255,.38); }
.service-number { font-size: .72rem; color: #718084; }
.service-card h3 { margin: 0 0 7px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.3vw, 2.35rem); font-weight: 400; }
.service-card p { margin: 0; max-width: 620px; color: #657276; font-size: .88rem; }
.service-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; font-size: .82rem; }
.service-meta strong { font-size: 1rem; }
.service-card > a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: background .2s ease, color .2s ease; }
.service-card > a:hover { background: var(--ink); color: white; }
.notice { padding: 28px 0; color: #58676b; }

.approach { min-height: 760px; padding: clamp(90px, 12vw, 170px) clamp(24px, 6vw, 90px); display: grid; grid-template-columns: 1.5fr 1fr; gap: 12vw; color: white; background: radial-gradient(circle at 76% 25%, rgba(45,142,151,.3), transparent 25%), linear-gradient(135deg, #071416 0%, #0c2529 50%, #061113 100%); }
.approach-copy { align-self: start; }
.approach h2 { font-size: clamp(3rem, 6vw, 6.7rem); line-height: 1; max-width: 920px; }
.approach-copy > p:last-child { max-width: 570px; margin: 40px 0 0; color: rgba(255,255,255,.58); font-size: 1.04rem; }
.principles { align-self: end; }
.principles > div { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--white-line); opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.principles > div.in-view { opacity: 1; transform: none; }
.principles strong { color: var(--aqua-bright); font-size: .72rem; }
.principles span { max-width: 330px; }

.booking-section { padding: clamp(90px, 12vw, 170px) clamp(24px, 6vw, 90px); display: grid; grid-template-columns: minmax(280px,.8fr) minmax(520px,1.2fr); gap: clamp(50px, 10vw, 160px); background: var(--paper-warm); }
.booking-intro { position: sticky; top: 120px; align-self: start; }
.booking-contact { margin-top: 55px; display: flex; flex-direction: column; gap: 7px; color: #627075; font-size: .8rem; }
.booking-contact a { color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; }
.booking-form, .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.field { min-width: 0; }
.field.full, .full { grid-column: 1 / -1; }
.field label, fieldset legend { display: block; margin: 0 0 9px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.field label span { color: #738084; font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-hint { display: block; margin-top: 7px; color: #738084; font-size: .72rem; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid rgba(7,16,19,.24); border-radius: 3px; padding: 14px 15px; background: rgba(255,255,255,.42); color: var(--ink); outline: 0; transition: border-color .2s, background .2s; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #397c7e; background: rgba(255,255,255,.7); }
fieldset.field { margin: 0; padding: 0; border: 0; }
.date-fieldset.waiting-for-service { opacity: .58; }
.time-fieldset.loading-slots { opacity: .72; }
.date-strip { display: grid; grid-template-columns: repeat(7, minmax(66px, 1fr)); gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: thin; }
.date-option { min-width: 66px; padding: 11px 8px; display: flex; align-items: center; flex-direction: column; border: 1px solid rgba(7,16,19,.2); border-radius: 3px; background: transparent; color: var(--ink); cursor: pointer; }
.date-option span, .date-option small { font-size: .67rem; color: #697579; text-transform: uppercase; }
.date-option strong { font-size: 1.35rem; line-height: 1.4; }
.date-option.selected, .time-option.selected { color: white; background: var(--ink); border-color: var(--ink); }
.date-option.selected span, .date-option.selected small { color: rgba(255,255,255,.7); }
.time-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 47px; }
.time-slots p { margin: 10px 0; color: #657276; font-size: .88rem; }
.time-option { min-width: 69px; padding: 10px 12px; border: 1px solid rgba(7,16,19,.2); border-radius: 3px; background: transparent; cursor: pointer; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.form-footer p { margin: 0; max-width: 330px; color: #718084; font-size: .72rem; }
.form-status { min-height: 24px; font-size: .86rem; font-weight: 600; }
.form-status.success { color: #266a52; }
.form-status.error { color: #9d3434; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.submitting { pointer-events: none; }

.contact-section { padding: clamp(90px, 12vw, 160px) clamp(24px, 6vw, 90px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 10vw, 160px); color: white; background: #071013; }
.contact-copy h2 { font-size: clamp(3rem, 5.8vw, 6.4rem); line-height: 1; }
.contact-copy > p:nth-child(3) { max-width: 480px; margin: 34px 0 55px; color: rgba(255,255,255,.55); }
.contact-copy dl { margin: 0; display: grid; gap: 18px; }
.contact-copy dl div { display: grid; grid-template-columns: 105px 1fr; gap: 20px; }
.contact-copy dt { color: rgba(255,255,255,.45); font-size: .78rem; }
.contact-copy dd { margin: 0; }
.contact-form { align-self: end; }
.contact-form .field input, .contact-form .field textarea { color: white; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.04); }
.contact-form .field input:focus, .contact-form .field textarea:focus { border-color: var(--aqua); background: rgba(255,255,255,.07); }
.contact-form .button { justify-self: start; }
.contact-form .form-status.success { color: var(--aqua-bright); }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; min-height: 110px; padding: 28px clamp(24px, 6vw, 90px); background: #03090b; color: white; border-top: 1px solid rgba(255,255,255,.1); font-size: .76rem; }
.site-footer p { color: rgba(255,255,255,.45); }
.site-footer > a:last-child { justify-self: end; color: rgba(255,255,255,.45); }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 44px)); padding: 15px 18px; color: white; background: #173a33; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; box-shadow: 0 14px 40px rgba(0,0,0,.25); opacity: 0; visibility: hidden; transform: translateY(12px); transition: .25s ease; }
.toast.visible { opacity: 1; visibility: visible; transform: none; }
.toast.error { background: #6e2929; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .hero-shade { background: linear-gradient(90deg, rgba(2,7,10,.9), rgba(2,7,10,.2)), linear-gradient(0deg, rgba(2,7,10,.75), transparent 55%); }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading h2 { max-width: 650px; }
  .service-card { grid-template-columns: 46px 1fr auto; }
  .service-meta { display: none; }
  .approach { grid-template-columns: 1fr; min-height: auto; }
  .principles { margin-top: 80px; }
  .booking-section { grid-template-columns: 1fr; }
  .booking-intro { position: static; }
  .contact-section { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header { height: 68px; padding: 0 20px; }
  .hero-content { padding: 118px 20px 38px; }
  .hero h1 { font-size: clamp(3.2rem, 16vw, 5.4rem); }
  .hero-side { display: none; }
  .section, .approach, .booking-section, .contact-section { padding-left: 20px; padding-right: 20px; }
  .section-heading { padding-bottom: 48px; }
  .service-card { grid-template-columns: 34px 1fr 40px; gap: 10px; padding: 24px 0; }
  .service-card p { font-size: .8rem; }
  .service-card > a { width: 38px; height: 38px; }
  .booking-form, .contact-form { grid-template-columns: 1fr; }
  .field { grid-column: 1 / -1; }
  .date-strip { grid-template-columns: repeat(21, 66px); }
  .form-footer { align-items: stretch; flex-direction: column; }
  .form-footer .button, .contact-form .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; text-align: left; }
  .site-footer > a: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; }
  .service-card, .principles > div { opacity: 1; transform: none; }
}